[ISSUE-2333] Added notice for Polygon and BSC network wind down

src/components-v2/common/NetworkGasWidget.tsx

@@ -30,7 +30,13 @@ const NetworkGasWidget = (): JSX.Element => {
   } = useContext(StoreContext);
   const ref = useRef<HTMLButtonElement | null>(null);
   return (
-    <ClickAwayListener onClickAway={closeNetworkOptions}>
+    <ClickAwayListener
+      onClickAway={(e: any) => {
+        if (e.target?.textContent?.toLowerCase() !== 'switch networks') {
+          closeNetworkOptions();
+        }
+      }}
+    >
       <div>
         <Button
           ref={ref}

src/components-v2/landing/NoVaults.tsx

@@ -1,4 +1,6 @@
+import { Network } from '@badger-dao/sdk';
 import { Button, Grid, makeStyles, Typography } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
 import { StoreContext } from 'mobx/stores/store-context';
 import { observer } from 'mobx-react-lite';
 import React, { useContext } from 'react';
@@ -30,6 +32,9 @@ const useStyles = makeStyles((theme) => ({
   networkName: {
     textTransform: 'capitalize',
   },
+  alert: {
+    marginTop: 10,
+  },
 }));
 
 interface Props {
@@ -39,24 +44,27 @@ interface Props {
 const NoVaults = ({ network }: Props): JSX.Element => {
   const { uiState } = useContext(StoreContext);
   const classes = useStyles();
-
+  const networkDisplayName = network
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase().concat(w.slice(1)))
+    .join(' ');
   return (
     <Grid container direction="column" className={classes.messageContainer}>
       <Grid item container justifyContent="center">
         <img src={'/assets/icons/screwdriver-badger.svg'} alt="Badger Builder" />
       </Grid>
       <Grid item container direction="column" justifyContent="center" className={classes.helpTextContainer}>
         <Typography variant="h5" color="textSecondary">
-          No vaults on{' '}
-          {network
-            .split('-')
-            .map((w) => w.charAt(0).toUpperCase().concat(w.slice(1)))
-            .join(' ')}
-          .
+          No vaults on {networkDisplayName}.
         </Typography>
         <Typography variant="body2" color="textSecondary">
           Switch to another network to view more vaults.
         </Typography>
+        {[Network.Polygon.toString(), Network.BinanceSmartChain.toString()].includes(network) && (
+          <Alert severity="warning" variant="outlined" className={classes.alert}>
+            {networkDisplayName} will no longer be supported starting Nov 1st 2022
+          </Alert>
+        )}
       </Grid>
       <Grid item container justifyContent="center" className={classes.switchButtonContainer}>
         <Button color="primary" variant="outlined" onClick={uiState.openNetworkOptions}>

src/tests/vaults/__snapshots__/VaultListDisplay.test.tsx.snap

@@ -209,48 +209,47 @@ exports[`VaultListDisplay displays empty search message 1`] = `
 exports[`VaultListDisplay displays no vaults message 1`] = `
 <div>
   <div
-    class="MuiGrid-root-8 makeStyles-messageContainer-2 MuiGrid-container-9 MuiGrid-direction-xs-column-12"
+    class="MuiGrid-root-9 makeStyles-messageContainer-2 MuiGrid-container-10 MuiGrid-direction-xs-column-13"
   >
     <div
-      class="MuiGrid-root-8 MuiGrid-container-9 MuiGrid-item-10 MuiGrid-justify-content-xs-center-26"
+      class="MuiGrid-root-9 MuiGrid-container-10 MuiGrid-item-11 MuiGrid-justify-content-xs-center-27"
     >
       <img
         alt="Badger Builder"
         src="/assets/icons/screwdriver-badger.svg"
       />
     </div>
     <div
-      class="MuiGrid-root-8 makeStyles-helpTextContainer-5 MuiGrid-container-9 MuiGrid-item-10 MuiGrid-direction-xs-column-12 MuiGrid-justify-content-xs-center-26"
+      class="MuiGrid-root-9 makeStyles-helpTextContainer-5 MuiGrid-container-10 MuiGrid-item-11 MuiGrid-direction-xs-column-13 MuiGrid-justify-content-xs-center-27"
     >
       <h5
-        class="MuiTypography-root-111 MuiTypography-h5-120 MuiTypography-colorTextSecondary-137"
+        class="MuiTypography-root-112 MuiTypography-h5-121 MuiTypography-colorTextSecondary-138"
       >
-        No vaults on
-
+        No vaults on 
         Ethereum
         .
       </h5>
       <p
-        class="MuiTypography-root-111 MuiTypography-body2-112 MuiTypography-colorTextSecondary-137"
+        class="MuiTypography-root-112 MuiTypography-body2-113 MuiTypography-colorTextSecondary-138"
       >
         Switch to another network to view more vaults.
       </p>
     </div>
     <div
-      class="MuiGrid-root-8 makeStyles-switchButtonContainer-6 MuiGrid-container-9 MuiGrid-item-10 MuiGrid-justify-content-xs-center-26"
+      class="MuiGrid-root-9 makeStyles-switchButtonContainer-6 MuiGrid-container-10 MuiGrid-item-11 MuiGrid-justify-content-xs-center-27"
     >
       <button
-        class="MuiButtonBase-root-170 MuiButton-root-141 MuiButton-outlined-146 MuiButton-outlinedPrimary-147"
+        class="MuiButtonBase-root-171 MuiButton-root-142 MuiButton-outlined-147 MuiButton-outlinedPrimary-148"
         tabindex="0"
         type="button"
       >
         <span
-          class="MuiButton-label-142"
+          class="MuiButton-label-143"
         >
           Switch Networks
         </span>
         <span
-          class="MuiTouchRipple-root-173"
+          class="MuiTouchRipple-root-174"
         />
       </button>
     </div>
@@ -261,48 +260,47 @@ exports[`VaultListDisplay displays no vaults message 1`] = `
 exports[`VaultListDisplay does not display deprecated vaults with no user balance 1`] = `
 <div>
   <div
-    class="MuiGrid-root-8 makeStyles-messageContainer-2 MuiGrid-container-9 MuiGrid-direction-xs-column-12"
+    class="MuiGrid-root-9 makeStyles-messageContainer-2 MuiGrid-container-10 MuiGrid-direction-xs-column-13"
   >
     <div
-      class="MuiGrid-root-8 MuiGrid-container-9 MuiGrid-item-10 MuiGrid-justify-content-xs-center-26"
+      class="MuiGrid-root-9 MuiGrid-container-10 MuiGrid-item-11 MuiGrid-justify-content-xs-center-27"
     >
       <img
         alt="Badger Builder"
         src="/assets/icons/screwdriver-badger.svg"
       />
     </div>
     <div
-      class="MuiGrid-root-8 makeStyles-helpTextContainer-5 MuiGrid-container-9 MuiGrid-item-10 MuiGrid-direction-xs-column-12 MuiGrid-justify-content-xs-center-26"
+      class="MuiGrid-root-9 makeStyles-helpTextContainer-5 MuiGrid-container-10 MuiGrid-item-11 MuiGrid-direction-xs-column-13 MuiGrid-justify-content-xs-center-27"
     >
       <h5
-        class="MuiTypography-root-111 MuiTypography-h5-120 MuiTypography-colorTextSecondary-137"
+        class="MuiTypography-root-112 MuiTypography-h5-121 MuiTypography-colorTextSecondary-138"
       >
-        No vaults on
-
+        No vaults on 
         Ethereum
         .
       </h5>
       <p
-        class="MuiTypography-root-111 MuiTypography-body2-112 MuiTypography-colorTextSecondary-137"
+        class="MuiTypography-root-112 MuiTypography-body2-113 MuiTypography-colorTextSecondary-138"
       >
         Switch to another network to view more vaults.
       </p>
     </div>
     <div
-      class="MuiGrid-root-8 makeStyles-switchButtonContainer-6 MuiGrid-container-9 MuiGrid-item-10 MuiGrid-justify-content-xs-center-26"
+      class="MuiGrid-root-9 makeStyles-switchButtonContainer-6 MuiGrid-container-10 MuiGrid-item-11 MuiGrid-justify-content-xs-center-27"
     >
       <button
-        class="MuiButtonBase-root-170 MuiButton-root-141 MuiButton-outlined-146 MuiButton-outlinedPrimary-147"
+        class="MuiButtonBase-root-171 MuiButton-root-142 MuiButton-outlined-147 MuiButton-outlinedPrimary-148"
         tabindex="0"
         type="button"
       >
         <span
-          class="MuiButton-label-142"
+          class="MuiButton-label-143"
         >
           Switch Networks
         </span>
         <span
-          class="MuiTouchRipple-root-173"
+          class="MuiTouchRipple-root-174"
         />
       </button>
     </div>