eth tx finalized block check, upgraded ethers

package.json

@@ -30,7 +30,7 @@
     "borsh": "^0.4.0",
     "bs58": "^4.0.1",
     "clsx": "^1.1.1",
-    "ethers": "^5.6.8",
+    "ethers": "^5.7.2",
     "js-base64": "^3.6.1",
     "luxon": "^2.3.1",
     "notistack": "^1.0.10",

src/components/SmartBlock.tsx

@@ -0,0 +1,98 @@
+import { ChainId, CHAIN_ID_ETH } from "@certusone/wormhole-sdk";
+import { Button, makeStyles, Tooltip, Typography } from "@material-ui/core";
+import { FileCopy, OpenInNew } from "@material-ui/icons";
+import { withStyles } from "@material-ui/styles";
+import useCopyToClipboard from "../hooks/useCopyToClipboard";
+import { CLUSTER, getExplorerName } from "../utils/consts";
+
+const useStyles = makeStyles((theme) => ({
+  mainTypog: {
+    display: "inline-block",
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    textDecoration: "underline",
+    textUnderlineOffset: "2px",
+  },
+  buttons: {
+    marginLeft: ".5rem",
+    marginRight: ".5rem",
+  },
+}));
+
+const tooltipStyles = {
+  tooltip: {
+    minWidth: "max-content",
+    textAlign: "center",
+    "& > *": {
+      margin: ".25rem",
+    },
+  },
+};
+
+// @ts-ignore
+const StyledTooltip = withStyles(tooltipStyles)(Tooltip);
+
+export default function SmartBlock({
+  chainId,
+  blockNumber,
+}: {
+  chainId: ChainId;
+  blockNumber: number;
+}) {
+  const classes = useStyles();
+  const explorerAddress =
+    CLUSTER === "testnet" && chainId === CHAIN_ID_ETH
+      ? `https://goerli.etherscan.io/block/${blockNumber}`
+      : undefined;
+  const explorerName = getExplorerName(chainId);
+
+  const copyToClipboard = useCopyToClipboard(blockNumber.toString());
+
+  const explorerButton = !explorerAddress ? null : (
+    <Button
+      size="small"
+      variant="outlined"
+      startIcon={<OpenInNew />}
+      className={classes.buttons}
+      href={explorerAddress}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {"View on " + explorerName}
+    </Button>
+  );
+  const copyButton = (
+    <Button
+      size="small"
+      variant="outlined"
+      startIcon={<FileCopy />}
+      onClick={copyToClipboard}
+      className={classes.buttons}
+    >
+      Copy
+    </Button>
+  );
+
+  const tooltipContent = (
+    <div>
+      {explorerButton}
+      {copyButton}
+    </div>
+  );
+
+  return (
+    <StyledTooltip
+      title={tooltipContent}
+      interactive={true}
+      className={classes.mainTypog}
+    >
+      <Typography
+        variant={"body1"}
+        className={classes.mainTypog}
+        component="div"
+      >
+        {blockNumber}
+      </Typography>
+    </StyledTooltip>
+  );
+}

src/components/TransactionProgress.tsx

@@ -3,9 +3,11 @@ import {
   CHAIN_ID_ACALA,
   CHAIN_ID_AURORA,
   CHAIN_ID_CELO,
+  CHAIN_ID_ETH,
   CHAIN_ID_FANTOM,
   CHAIN_ID_KARURA,
   CHAIN_ID_KLAYTN,
+  CHAIN_ID_MOONBEAM,
   CHAIN_ID_OASIS,
   CHAIN_ID_POLYGON,
   CHAIN_ID_SOLANA,
@@ -17,6 +19,7 @@ import { useEffect, useState } from "react";
 import { useEthereumProvider } from "../contexts/EthereumProviderContext";
 import { Transaction } from "../store/transferSlice";
 import { CHAINS_BY_ID, CLUSTER, SOLANA_HOST } from "../utils/consts";
+import SmartBlock from "./SmartBlock";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -48,7 +51,10 @@ export default function TransactionProgress({
         while (!cancelled) {
           await new Promise((resolve) => setTimeout(resolve, 500));
           try {
-            const newBlock = await provider.getBlockNumber();
+            const newBlock =
+              chainId === CHAIN_ID_ETH
+                ? (await provider.getBlock("finalized")).number
+                : await provider.getBlockNumber();
             if (!cancelled) {
               setCurrentBlock(newBlock);
             }
@@ -75,46 +81,72 @@ export default function TransactionProgress({
       };
     }
   }, [isSendComplete, chainId, provider, tx]);
-  const blockDiff =
-    tx && tx.block && currentBlock ? currentBlock - tx.block : undefined;
-  const expectedBlocks = // minimum confirmations enforced by guardians or specified by the contract
-    chainId === CHAIN_ID_POLYGON
-      ? CLUSTER === "testnet"
-        ? 64
-        : 512
-      : chainId === CHAIN_ID_OASIS ||
-        chainId === CHAIN_ID_AURORA ||
-        chainId === CHAIN_ID_FANTOM ||
-        chainId === CHAIN_ID_KARURA ||
-        chainId === CHAIN_ID_ACALA ||
-        chainId === CHAIN_ID_KLAYTN ||
-        chainId === CHAIN_ID_CELO
-      ? 1 // these chains only require 1 conf
-      : chainId === CHAIN_ID_SOLANA
-      ? 32
-      : isEVMChain(chainId)
-      ? 15
-      : 1;
-  if (
-    !isSendComplete &&
-    (chainId === CHAIN_ID_SOLANA || isEVMChain(chainId)) &&
-    blockDiff !== undefined
-  ) {
-    return (
-      <div className={classes.root}>
-        <LinearProgress
-          value={
-            blockDiff < expectedBlocks ? (blockDiff / expectedBlocks) * 75 : 75
-          }
-          variant="determinate"
-        />
-        <Typography variant="body2" className={classes.message}>
-          {blockDiff < expectedBlocks
-            ? `Waiting for ${blockDiff} / ${expectedBlocks} confirmations on ${CHAINS_BY_ID[chainId].name}...`
-            : `Waiting for Wormhole Network consensus...`}
-        </Typography>
-      </div>
-    );
+  if (chainId === CHAIN_ID_ETH) {
+    if (!isSendComplete && tx && tx.block && currentBlock) {
+      const isFinalized = currentBlock >= tx.block;
+      return (
+        <div className={classes.root}>
+          <Typography variant="body2" className={classes.message}>
+            {!isFinalized
+              ? `Waiting for finality on ${CHAINS_BY_ID[chainId].name} which may take up to 15 minutes.`
+              : `Waiting for Wormhole Network consensus...`}
+          </Typography>
+          {!isFinalized ? (
+            <>
+              <span>Last finalized block number</span>
+              <SmartBlock chainId={chainId} blockNumber={currentBlock} />
+              <span>This transaction's block number</span>
+              <SmartBlock chainId={chainId} blockNumber={tx.block} />
+            </>
+          ) : null}
+        </div>
+      );
+    }
+  } else {
+    const blockDiff =
+      tx && tx.block && currentBlock ? currentBlock - tx.block : undefined;
+    const expectedBlocks = // minimum confirmations enforced by guardians or specified by the contract
+      chainId === CHAIN_ID_POLYGON
+        ? CLUSTER === "testnet"
+          ? 64
+          : 512
+        : chainId === CHAIN_ID_OASIS ||
+          chainId === CHAIN_ID_AURORA ||
+          chainId === CHAIN_ID_FANTOM ||
+          chainId === CHAIN_ID_KARURA ||
+          chainId === CHAIN_ID_ACALA ||
+          chainId === CHAIN_ID_KLAYTN ||
+          chainId === CHAIN_ID_CELO ||
+          chainId === CHAIN_ID_MOONBEAM
+        ? 1 // these chains only require 1 conf
+        : chainId === CHAIN_ID_SOLANA
+        ? 32
+        : isEVMChain(chainId)
+        ? 15
+        : 1;
+    if (
+      !isSendComplete &&
+      (chainId === CHAIN_ID_SOLANA || isEVMChain(chainId)) &&
+      blockDiff !== undefined
+    ) {
+      return (
+        <div className={classes.root}>
+          <LinearProgress
+            value={
+              blockDiff < expectedBlocks
+                ? (blockDiff / expectedBlocks) * 75
+                : 75
+            }
+            variant="determinate"
+          />
+          <Typography variant="body2" className={classes.message}>
+            {blockDiff < expectedBlocks
+              ? `Waiting for ${blockDiff} / ${expectedBlocks} confirmations on ${CHAINS_BY_ID[chainId].name}...`
+              : `Waiting for Wormhole Network consensus...`}
+          </Typography>
+        </div>
+      );
+    }
   }
   return null;
 }