Merge pull request #79 from QuickSwap/fix-network-wallet-modal

Fix some issues
QuickSwap · Feb 8, 2022 · 0f1c5c9 · 0f1c5c9
2 parents 278ac73 + 9e61601
commit 0f1c5c9
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 32 deletions.
diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { Box, Button, Typography } from '@material-ui/core';
 import {
   CurrencyInput,
@@ -37,6 +37,7 @@ import {
   calculateSlippageAmount,
   calculateGasMargin,
   returnTokenFromKey,
+  isSupportedNetwork,
 } from 'utils';
 import { wrappedCurrency } from 'utils/wrappedCurrency';
 import { ReactComponent as AddLiquidityIcon } from 'assets/images/AddLiquidityIcon.svg';
@@ -170,9 +171,6 @@ const AddLiquidity: React.FC<{
   };
 
   const { ethereum } = window as any;
-
-  const isnotMatic =
-    ethereum && ethereum.isMetaMask && Number(ethereum.chainId) !== 137;
   const toggleWalletModal = useWalletModalToggle();
   const [approvingA, setApprovingA] = useState(false);
   const [approvingB, setApprovingB] = useState(false);
@@ -369,7 +367,7 @@ const AddLiquidity: React.FC<{
   };
 
   const connectWallet = () => {
-    if (isnotMatic) {
+    if (!isSupportedNetwork(ethereum)) {
       addMaticToMetamask();
     } else {
       toggleWalletModal();
@@ -385,6 +383,15 @@ const AddLiquidity: React.FC<{
     setTxHash('');
   }, [onFieldAInput, txHash]);
 
+  const buttonText = useMemo(() => {
+    if (account) {
+      return error ?? 'Supply';
+    } else if (!isSupportedNetwork(ethereum)) {
+      return 'Switch to Polygon';
+    }
+    return 'Connect Wallet';
+  }, [account, ethereum, error]);
+
   const modalHeader = () => {
     return (
       <Box>
@@ -594,7 +601,7 @@ const AddLiquidity: React.FC<{
           }
           onClick={account ? onAdd : connectWallet}
         >
-          {account ? error ?? 'Supply' : 'Connect Wallet'}
+          {buttonText}
         </Button>
       </Box>
     </Box>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from 'react';
-import { ChainId } from '@uniswap/sdk';
 import { Link, useLocation } from 'react-router-dom';
 import { Box, Button, Typography, useMediaQuery } from '@material-ui/core';
 import cx from 'classnames';
@@ -10,7 +9,7 @@ import {
   useAllTransactions,
 } from 'state/transactions/hooks';
 import { TransactionDetails } from 'state/transactions/reducer';
-import { shortenAddress, addMaticToMetamask } from 'utils';
+import { shortenAddress, addMaticToMetamask, isSupportedNetwork } from 'utils';
 import useENSName from 'hooks/useENSName';
 import { WalletModal } from 'components';
 import { useActiveWeb3React } from 'hooks';
@@ -276,7 +275,8 @@ const newTransactionsFirst = (a: TransactionDetails, b: TransactionDetails) => {
 const Header: React.FC = () => {
   const classes = useStyles();
   const { pathname } = useLocation();
-  const { account, chainId } = useActiveWeb3React();
+  const { account } = useActiveWeb3React();
+  const { ethereum } = window as any;
   const { ENSName } = useENSName(account ?? undefined);
   const [openDetailMenu, setOpenDetailMenu] = useState(false);
   const theme = useTheme();
@@ -292,7 +292,6 @@ const Header: React.FC = () => {
   const confirmed = sortedRecentTransactions
     .filter((tx: any) => tx.receipt)
     .map((tx: any) => tx.hash);
-  const isnotMatic = chainId !== ChainId.MATIC;
   const tabletWindowSize = useMediaQuery(theme.breakpoints.down('sm'));
   const mobileWindowSize = useMediaQuery(theme.breakpoints.down('xs'));
   const toggleWalletModal = useWalletModalToggle();
@@ -463,7 +462,7 @@ const Header: React.FC = () => {
         >
           <LightIcon />
         </Box>
-        {!isnotMatic && account ? (
+        {isSupportedNetwork(ethereum) && account ? (
           <Box
             id='web3-status-connected'
             className={classes.accountDetails}
@@ -476,16 +475,16 @@ const Header: React.FC = () => {
           <Box
             className={cx(
               classes.connectButton,
-              isnotMatic ? classes.danger : classes.primary,
+              !isSupportedNetwork(ethereum) ? classes.danger : classes.primary,
             )}
             onClick={() => {
-              if (!isnotMatic) {
+              if (isSupportedNetwork(ethereum)) {
                 toggleWalletModal();
               }
             }}
           >
-            {isnotMatic ? 'Wrong Network' : 'Connect Wallet'}
-            {isnotMatic && (
+            {!isSupportedNetwork(ethereum) ? 'Wrong Network' : 'Connect Wallet'}
+            {!isSupportedNetwork(ethereum) && (
               <Box
                 position='absolute'
                 top={36}
@@ -535,11 +534,15 @@ const Header: React.FC = () => {
             <Button
               color='primary'
               onClick={() => {
-                isnotMatic ? addMaticToMetamask() : toggleWalletModal();
+                !isSupportedNetwork(ethereum)
+                  ? addMaticToMetamask()
+                  : toggleWalletModal();
               }}
             >
               <Typography variant='body2'>
-                {isnotMatic ? 'Switch to Polygon' : 'Connect Wallet'}
+                {!isSupportedNetwork(ethereum)
+                  ? 'Switch to Polygon'
+                  : 'Connect Wallet'}
               </Typography>
             </Button>
           )}

diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx
@@ -36,6 +36,7 @@ import useWrapCallback, { WrapType } from 'hooks/useWrapCallback';
 import useToggledVersion, { Version } from 'hooks/useToggledVersion';
 import {
   addMaticToMetamask,
+  isSupportedNetwork,
   confirmPriceImpactWithoutFee,
   halfAmountSpend,
   maxAmountSpend,
@@ -126,7 +127,6 @@ const Swap: React.FC<{
   const [openSettingsModal, setOpenSettingsModal] = useState(false);
   const { palette } = useTheme();
   const { account } = useActiveWeb3React();
-  const { ethereum } = window as any;
   const { independentField, typedValue, recipient } = useSwapState();
   const {
     v1Trade,
@@ -206,8 +206,7 @@ const Swap: React.FC<{
 
   const { priceImpactWithoutFee } = computeTradePriceBreakdown(trade);
   const [approvalSubmitted, setApprovalSubmitted] = useState<boolean>(false);
-  const isnotMatic =
-    ethereum && ethereum.isMetaMask && Number(ethereum.chainId) !== 137;
+  const { ethereum } = window as any;
   const [mainPrice, setMainPrice] = useState(true);
   const priceImpactSeverity = warningSeverity(priceImpactWithoutFee);
   const isValid = !swapInputError;
@@ -230,7 +229,7 @@ const Swap: React.FC<{
   }, [approval, approvalSubmitted]);
 
   const connectWallet = () => {
-    if (isnotMatic) {
+    if (!isSupportedNetwork(ethereum)) {
       addMaticToMetamask();
     } else {
       toggleWalletModal();
@@ -277,13 +276,15 @@ const Swap: React.FC<{
         return swapInputError ?? 'Swap';
       }
     } else {
-      return isnotMatic ? 'Switch to Polygon' : 'Connect Wallet';
+      return !isSupportedNetwork(ethereum)
+        ? 'Switch to Polygon'
+        : 'Connect Wallet';
     }
   }, [
     formattedAmounts,
     currencies,
     account,
-    isnotMatic,
+    ethereum,
     noRoute,
     userHasSpecifiedInputOutput,
     showWrap,

diff --git a/src/components/WalletModal/WalletModal.tsx b/src/components/WalletModal/WalletModal.tsx
@@ -265,18 +265,18 @@ const WalletModal: React.FC<WalletModalProps> = ({
   function getModalContent() {
     if (error) {
       return (
-        <Box p={2} position='relative'>
+        <Box position='relative'>
           <Box position='absolute' top='16px' right='16px' display='flex'>
             <Close style={{ cursor: 'pointer' }} onClick={toggleWalletModal} />
           </Box>
-          <Box textAlign='center'>
+          <Box mt={2} textAlign='center'>
             <Typography variant='subtitle2'>
               {error instanceof UnsupportedChainIdError
                 ? 'Wrong Network'
                 : 'Error connecting'}
             </Typography>
           </Box>
-          <Box mt={3} textAlign='center'>
+          <Box mt={3} mb={2} textAlign='center'>
             <Typography variant='body2'>
               {error instanceof UnsupportedChainIdError
                 ? 'Please connect to the appropriate Polygon network.'

diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
@@ -10,7 +10,7 @@ import {
   useMediaQuery,
 } from '@material-ui/core';
 import Skeleton from '@material-ui/lab/Skeleton';
-import { Currency, ChainId } from '@uniswap/sdk';
+import { Currency } from '@uniswap/sdk';
 import { useTheme } from '@material-ui/core/styles';
 import Motif from 'assets/images/Motif.svg';
 import BuyWithFiat from 'assets/images/featured/BuywithFiat.svg';
@@ -43,9 +43,9 @@ import {
   formatCompact,
   getDaysCurrentYear,
   returnTokenFromKey,
+  isSupportedNetwork,
 } from 'utils';
 import { useGlobalData, useWalletModalToggle } from 'state/application/hooks';
-import { GlobalConst } from 'constants/index';
 import { useLairInfo, useTotalRewardsDistributed } from 'state/stake/hooks';
 
 const useStyles = makeStyles(({ palette, breakpoints }) => ({
@@ -424,8 +424,8 @@ const LandingPage: React.FC = () => {
   const [swapIndex, setSwapIndex] = useState(0);
   const [openStakeModal, setOpenStakeModal] = useState(false);
   const { palette, breakpoints } = useTheme();
-  const { account, chainId } = useActiveWeb3React();
-  const isnotMatic = chainId !== ChainId.MATIC;
+  const { account } = useActiveWeb3React();
+  const { ethereum } = window as any;
   const mobileWindowSize = useMediaQuery(breakpoints.down('sm'));
   const { initTransak } = useInitTransak();
   const toggleWalletModal = useWalletModalToggle();
@@ -579,14 +579,14 @@ const LandingPage: React.FC = () => {
               fontWeight: 500,
             }}
             onClick={() => {
-              isnotMatic
+              !isSupportedNetwork(ethereum)
                 ? addMaticToMetamask()
                 : account
                 ? history.push('/swap')
                 : toggleWalletModal();
             }}
           >
-            {isnotMatic
+            {!isSupportedNetwork(ethereum)
               ? 'Switch to Polygon'
               : account
               ? 'Enter App'

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1999,3 +1999,7 @@ export function getUSDString(usdValue?: CurrencyAmount) {
   if (Number(usdStr) > 0 && Number(usdStr) < 0.001) return '< $0.001';
   return `$${usdStr}`;
 }
+
+export function isSupportedNetwork(ethereum: any) {
+  return ethereum && Number(ethereum.chainId) === 137;
+}