bridge_ui: solana tps warning

bridge_ui/src/components/NFT/Redeem.tsx

@@ -1,10 +1,11 @@
-import { CHAIN_ID_TERRA } from "@certusone/wormhole-sdk";
+import { CHAIN_ID_SOLANA, CHAIN_ID_TERRA } from "@certusone/wormhole-sdk";
 import { useSelector } from "react-redux";
 import { useHandleNFTRedeem } from "../../hooks/useHandleNFTRedeem";
 import useIsWalletReady from "../../hooks/useIsWalletReady";
 import { selectNFTTargetChain } from "../../store/selectors";
 import ButtonWithLoader from "../ButtonWithLoader";
 import KeyAndBalance from "../KeyAndBalance";
+import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import TerraFeeDenomPicker from "../TerraFeeDenomPicker";
 import WaitingForWalletMessage from "./WaitingForWalletMessage";
@@ -20,6 +21,7 @@ function Redeem() {
       {targetChain === CHAIN_ID_TERRA && (
         <TerraFeeDenomPicker disabled={disabled} />
       )}
+      {targetChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
       <ButtonWithLoader
         disabled={!isReady || disabled}
         onClick={handleClick}

bridge_ui/src/components/NFT/Send.tsx

@@ -1,4 +1,4 @@
-import { CHAIN_ID_TERRA } from "@certusone/wormhole-sdk";
+import { CHAIN_ID_SOLANA, CHAIN_ID_TERRA } from "@certusone/wormhole-sdk";
 import { Alert } from "@material-ui/lab";
 import { useSelector } from "react-redux";
 import { useHandleNFTTransfer } from "../../hooks/useHandleNFTTransfer";
@@ -14,6 +14,7 @@ import { CHAINS_BY_ID } from "../../utils/consts";
 import ButtonWithLoader from "../ButtonWithLoader";
 import KeyAndBalance from "../KeyAndBalance";
 import ShowTx from "../ShowTx";
+import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import TerraFeeDenomPicker from "../TerraFeeDenomPicker";
 import TransactionProgress from "../TransactionProgress";
@@ -52,6 +53,7 @@ function Send() {
         completing Step 4, you will have to perform the recovery workflow to
         complete the transfer.
       </Alert>
+      {sourceChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
       <ButtonWithLoader
         disabled={isDisabled}
         onClick={handleClick}

bridge_ui/src/components/NFT/Source.tsx

@@ -19,6 +19,7 @@ import ButtonWithLoader from "../ButtonWithLoader";
 import ChainSelect from "../ChainSelect";
 import KeyAndBalance from "../KeyAndBalance";
 import LowBalanceWarning from "../LowBalanceWarning";
+import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import { TokenSelector } from "../TokenSelectors/SourceTokenSelector";
 
@@ -91,6 +92,7 @@ function Source() {
         </div>
       ) : null}
       <LowBalanceWarning chainId={sourceChain} />
+      {sourceChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
       <ButtonWithLoader
         disabled={!isSourceComplete}
         onClick={handleNextClick}

bridge_ui/src/components/NFT/Target.tsx

@@ -31,6 +31,7 @@ import ButtonWithLoader from "../ButtonWithLoader";
 import ChainSelect from "../ChainSelect";
 import KeyAndBalance from "../KeyAndBalance";
 import LowBalanceWarning from "../LowBalanceWarning";
+import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 
 const useStyles = makeStyles((theme) => ({
@@ -136,6 +137,7 @@ function Target() {
         )}
       </Alert>
       <LowBalanceWarning chainId={targetChain} />
+      {targetChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
       <ButtonWithLoader
         disabled={!isTargetComplete} //|| !associatedAccountExists}
         onClick={handleNextClick}

bridge_ui/src/components/SolanaTPSWarning.tsx

@@ -0,0 +1,53 @@
+import { makeStyles } from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
+import { Connection } from "@solana/web3.js";
+import numeral from "numeral";
+import { useEffect, useState } from "react";
+import { SOLANA_HOST } from "../utils/consts";
+
+const useStyles = makeStyles((theme) => ({
+  alert: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+export default function SolanaTPSWarning() {
+  const classes = useStyles();
+  const [tps, setTps] = useState<number | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    let interval = setInterval(() => {
+      (async () => {
+        try {
+          const connection = new Connection(SOLANA_HOST);
+          const samples = await connection.getRecentPerformanceSamples(1);
+          if (samples.length >= 1) {
+            let short = samples
+              .filter((sample) => sample.numTransactions !== 0)
+              .map(
+                (sample) => sample.numTransactions / sample.samplePeriodSecs
+              );
+            const avgTps = short[0];
+            if (!cancelled) {
+              setTps(avgTps);
+            }
+          }
+        } catch (e) {}
+      })();
+    }, 5000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, []);
+  return tps !== null && tps < 1500 ? (
+    <Alert
+      variant="outlined"
+      severity="warning"
+      className={classes.alert}
+    >{`WARNING! The Solana Transactions Per Second (TPS) is below 1500. This is a sign of network congestion. Proceed with caution as you may have difficulty submitting transactions and the guardians may have difficulty witnessing them (this could lead to processing delays). Current TPS: ${numeral(
+      tps
+    ).format("0,0")}`}</Alert>
+  ) : null;
+}

bridge_ui/src/components/Transfer/Redeem.tsx

@@ -41,6 +41,7 @@ import ButtonWithLoader from "../ButtonWithLoader";
 import KeyAndBalance from "../KeyAndBalance";
 import SmartAddress from "../SmartAddress";
 import { SolanaCreateAssociatedAddressAlternate } from "../SolanaCreateAssociatedAddress";
+import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import TerraFeeDenomPicker from "../TerraFeeDenomPicker";
 import AddToMetamask from "./AddToMetamask";
@@ -129,6 +130,7 @@ function Redeem() {
           label="Automatically unwrap to native currency"
         />
       )}
+      {targetChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
       {targetChain === CHAIN_ID_SOLANA ? (
         <SolanaCreateAssociatedAddressAlternate />
       ) : null}

bridge_ui/src/components/Transfer/Send.tsx

@@ -1,4 +1,8 @@
-import { CHAIN_ID_TERRA, isEVMChain } from "@certusone/wormhole-sdk";
+import {
+  CHAIN_ID_SOLANA,
+  CHAIN_ID_TERRA,
+  isEVMChain,
+} from "@certusone/wormhole-sdk";
 import { Checkbox, FormControlLabel } from "@material-ui/core";
 import { Alert } from "@material-ui/lab";
 import { ethers } from "ethers";
@@ -22,6 +26,7 @@ import { CHAINS_BY_ID } from "../../utils/consts";
 import ButtonWithLoader from "../ButtonWithLoader";
 import KeyAndBalance from "../KeyAndBalance";
 import ShowTx from "../ShowTx";
+import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import TerraFeeDenomPicker from "../TerraFeeDenomPicker";
 import TransactionProgress from "../TransactionProgress";
@@ -140,6 +145,7 @@ function Send() {
         completing Step 4, you will have to perform the recovery workflow to
         complete the transfer.
       </Alert>
+      {sourceChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
       {approveButtonNeeded ? (
         <>
           <FormControlLabel

bridge_ui/src/components/Transfer/SendConfirmationDialog.tsx

@@ -1,4 +1,4 @@
-import { isEVMChain } from "@certusone/wormhole-sdk";
+import { CHAIN_ID_SOLANA, isEVMChain } from "@certusone/wormhole-sdk";
 import {
   Button,
   Dialog,
@@ -17,6 +17,7 @@ import {
 } from "../../store/selectors";
 import { CHAINS_BY_ID, MULTI_CHAIN_TOKENS } from "../../utils/consts";
 import SmartAddress from "../SmartAddress";
+import SolanaTPSWarning from "../SolanaTPSWarning";
 import { useTargetInfo } from "./Target";
 import TokenWarning from "./TokenWarning";
 
@@ -124,6 +125,7 @@ function SendConfirmationContent({
           targetAsset={targetAsset ?? undefined}
           targetChain={targetChain}
         />
+        {sourceChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
       </DialogContent>
       <DialogActions>
         <Button variant="outlined" onClick={onClose}>

bridge_ui/src/components/Transfer/Source.tsx

@@ -39,6 +39,7 @@ import ChainSelectArrow from "../ChainSelectArrow";
 import KeyAndBalance from "../KeyAndBalance";
 import LowBalanceWarning from "../LowBalanceWarning";
 import NumberTextField from "../NumberTextField";
+import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import { TokenSelector } from "../TokenSelectors/SourceTokenSelector";
 import SourceAssetWarning from "./SourceAssetWarning";
@@ -210,6 +211,7 @@ function Source() {
       ) : (
         <>
           <LowBalanceWarning chainId={sourceChain} />
+          {sourceChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
           <SourceAssetWarning
             sourceChain={sourceChain}
             sourceAsset={parsedTokenAccount?.mintKey}

bridge_ui/src/components/Transfer/Target.tsx

@@ -35,6 +35,7 @@ import SmartAddress from "../SmartAddress";
 import SolanaCreateAssociatedAddress, {
   useAssociatedAccountExistsState,
 } from "../SolanaCreateAssociatedAddress";
+import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import RegisterNowButton from "./RegisterNowButton";
 
@@ -178,6 +179,7 @@ function Target() {
         )}
       </Alert>
       <LowBalanceWarning chainId={targetChain} />
+      {targetChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
       <ButtonWithLoader
         disabled={!isTargetComplete || !associatedAccountExists}
         onClick={handleNextClick}