bridge_ui: Disable transfers to and from polygon, display network upgrade warning

bridge_ui/src/components/NFT/Source.tsx

@@ -1,4 +1,8 @@
-import { CHAIN_ID_SOLANA, isEVMChain } from "@certusone/wormhole-sdk";
+import {
+  CHAIN_ID_POLYGON,
+  CHAIN_ID_SOLANA,
+  isEVMChain,
+} from "@certusone/wormhole-sdk";
 import { Button, makeStyles } from "@material-ui/core";
 import { VerifiedUser } from "@material-ui/icons";
 import { Alert } from "@material-ui/lab";
@@ -19,6 +23,7 @@ import ButtonWithLoader from "../ButtonWithLoader";
 import ChainSelect from "../ChainSelect";
 import KeyAndBalance from "../KeyAndBalance";
 import LowBalanceWarning from "../LowBalanceWarning";
+import PolygonNetworkDownWarning from "../PolygonNetworkDownWarning";
 import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import { TokenSelector } from "../TokenSelectors/SourceTokenSelector";
@@ -92,9 +97,10 @@ function Source() {
         </div>
       ) : null}
       <LowBalanceWarning chainId={sourceChain} />
+      {sourceChain === CHAIN_ID_POLYGON && <PolygonNetworkDownWarning />}
       {sourceChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
       <ButtonWithLoader
-        disabled={!isSourceComplete}
+        disabled={!isSourceComplete || sourceChain === CHAIN_ID_POLYGON}
         onClick={handleNextClick}
         showLoader={false}
         error={statusMessage || error}

bridge_ui/src/components/NFT/Target.tsx

@@ -1,4 +1,5 @@
 import {
+  CHAIN_ID_POLYGON,
   CHAIN_ID_SOLANA,
   hexToNativeString,
   hexToUint8Array,
@@ -31,6 +32,7 @@ import ButtonWithLoader from "../ButtonWithLoader";
 import ChainSelect from "../ChainSelect";
 import KeyAndBalance from "../KeyAndBalance";
 import LowBalanceWarning from "../LowBalanceWarning";
+import PolygonNetworkDownWarning from "../PolygonNetworkDownWarning";
 import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 
@@ -138,8 +140,9 @@ function Target() {
       </Alert>
       <LowBalanceWarning chainId={targetChain} />
       {targetChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
+      {targetChain === CHAIN_ID_POLYGON && <PolygonNetworkDownWarning />}
       <ButtonWithLoader
-        disabled={!isTargetComplete} //|| !associatedAccountExists}
+        disabled={!isTargetComplete || targetChain === CHAIN_ID_POLYGON} //|| !associatedAccountExists}
         onClick={handleNextClick}
         showLoader={false}
         error={statusMessage || error}

bridge_ui/src/components/PolygonNetworkDownWarning.tsx

@@ -0,0 +1,30 @@
+import { Link, makeStyles, Typography } from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
+
+const useStyles = makeStyles((theme) => ({
+  alert: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+}));
+
+export default function PolygonNetworkDownWarning() {
+  const classes = useStyles();
+
+  return (
+    <Alert variant="outlined" severity="warning" className={classes.alert}>
+      Polygon is experiencing downtime. As a precautionary measure, Wormhole
+      network and portal have temporarily paused Polygon support until the issue
+      is resolved.
+      <Typography component="div">
+        <Link
+          href="https://twitter.com/0xPolygonDevs/status/1501944974933303305"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Link to @0xPolygonDevs tweet
+        </Link>
+      </Typography>
+    </Alert>
+  );
+}

bridge_ui/src/components/Transfer/Source.tsx

@@ -1,6 +1,7 @@
 import {
   CHAIN_ID_BSC,
   CHAIN_ID_ETH,
+  CHAIN_ID_POLYGON,
   CHAIN_ID_SOLANA,
 } from "@certusone/wormhole-sdk";
 import { getAddress } from "@ethersproject/address";
@@ -39,6 +40,7 @@ import ChainSelectArrow from "../ChainSelectArrow";
 import KeyAndBalance from "../KeyAndBalance";
 import LowBalanceWarning from "../LowBalanceWarning";
 import NumberTextField from "../NumberTextField";
+import PolygonNetworkDownWarning from "../PolygonNetworkDownWarning";
 import SolanaTPSWarning from "../SolanaTPSWarning";
 import StepDescription from "../StepDescription";
 import { TokenSelector } from "../TokenSelectors/SourceTokenSelector";
@@ -140,6 +142,9 @@ function Source() {
     dispatch(incrementStep());
   }, [dispatch]);
 
+  const isPolygonTransfer =
+    sourceChain === CHAIN_ID_POLYGON || targetChain === CHAIN_ID_POLYGON;
+
   return (
     <>
       <StepDescription>
@@ -159,7 +164,10 @@ function Source() {
           </div>
         </div>
       </StepDescription>
-      <div className={classes.chainSelectWrapper} style={{marginBottom:'25px'}}>
+      <div
+        className={classes.chainSelectWrapper}
+        style={{ marginBottom: "25px" }}
+      >
         <div className={classes.chainSelectContainer}>
           <Typography variant="caption">Source</Typography>
           <ChainSelect
@@ -212,6 +220,7 @@ function Source() {
         <>
           <LowBalanceWarning chainId={sourceChain} />
           {sourceChain === CHAIN_ID_SOLANA && <SolanaTPSWarning />}
+          {isPolygonTransfer && <PolygonNetworkDownWarning />}
           <SourceAssetWarning
             sourceChain={sourceChain}
             sourceAsset={parsedTokenAccount?.mintKey}
@@ -233,7 +242,7 @@ function Source() {
             />
           ) : null}
           <ButtonWithLoader
-            disabled={!isSourceComplete}
+            disabled={!isSourceComplete || isPolygonTransfer}
             onClick={handleNextClick}
             showLoader={false}
             error={statusMessage || error}