Merge pull request #173 from statechannels/explorer-links

Explorer links - fixed merge target

src/AddressIcon.tsx

@@ -1,62 +1,30 @@
-import { Avatar, Snackbar, Tooltip } from "@mui/material";
+import { Avatar, Tooltip } from "@mui/material";
 import { blo } from "blo";
-import React, { useState, type FunctionComponent } from "react";
+import React, { type FunctionComponent } from "react";
+import { type ChainData } from "./chains";
 
 export const AddressIcon: FunctionComponent<{
   address: `0x${string}`;
-}> = (props: { address: `0x${string}` }) => {
-  const [open, setOpen] = useState(false);
-
-  // stolen from https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript#30810322
-  function copy(text: string): undefined {
-    const textArea = document.createElement("textarea");
-    textArea.value = text;
-
-    // Avoid scrolling to bottom
-    textArea.style.top = "0";
-    textArea.style.left = "0";
-    textArea.style.position = "fixed";
-
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-
-    try {
-      const successful = document.execCommand("copy");
-      if (successful) {
-        setOpen(true);
-      }
-    } catch (err) {
-      console.error("Fallback: Oops, unable to copy", err);
-    }
-
-    document.body.removeChild(textArea);
-    return undefined;
-  }
-
-  return (
-    <div>
-      <Tooltip title={props.address}>
+  chain?: ChainData;
+}> = (props: { address: `0x${string}`; chain?: ChainData }) => {
+  return props.chain !== undefined ? (
+    <Tooltip title={props.address}>
+      <a href={props.chain.explorer + "/" + props.address} target="_blank">
         <Avatar
           {...props}
           src={blo(props.address)}
           sx={{ width: 48, height: 48 }}
-          onClick={() => {
-            copy(props.address);
-          }}
         ></Avatar>
-      </Tooltip>
-      <Snackbar
-        open={open}
-        autoHideDuration={1500}
-        onClose={() => {
-          setOpen(false);
-        }}
-        message={(() => {
-          return `Copied ${props.address}`;
-        })()}
-      />
-    </div>
+      </a>
+    </Tooltip>
+  ) : (
+    <Tooltip title={props.address}>
+      <Avatar
+        {...props}
+        src={blo(props.address)}
+        sx={{ width: 48, height: 48 }}
+      ></Avatar>
+    </Tooltip>
   );
 };
 

src/Intermediary.tsx

@@ -105,6 +105,7 @@ export const Coordinator: React.FunctionComponent = () => {
             // @ts-expect-error
             import.meta.env.VITE_IRENE_ADDRESS as `0x${string}`
           }
+          chain={undefined}
         />
         <br />
         <Stack

src/Wallet.tsx

@@ -179,7 +179,10 @@ const Wallet: React.FunctionComponent<{ role: Role }> = (props: {
           alignItems="center"
           spacing={1}
         >
-          <AddressIcon address={myScwAddress as `0x${string}`} />
+          <AddressIcon
+            address={myScwAddress as `0x${string}`}
+            chain={myChain}
+          />
 
           <ChainLogo name={myChain.name} />
           <Typography>

src/chains.ts

@@ -41,7 +41,7 @@ export const chains: ChainData[] = [
     url: "https://rpc.public.zkevm-test.net",
     chainID: 1442n,
     exchangeRate: 1,
-    explorer: "",
+    explorer: "https://testnet-zkevm.polygonscan.com/address/",
   },
   {
     url: "http://localhost:8545",
@@ -64,7 +64,7 @@ export const chains: ChainData[] = [
     url: "https://sepolia-rpc.scroll.io",
     name: "scroll",
     symbol: "ETH",
-    explorer: "",
+    explorer: "https://sepolia.scrollscan.com/address/",
     exchangeRate: 1,
   },
 ];