From 179161702462fbd62b0c2de86063bd1de05bb254 Mon Sep 17 00:00:00 2001 From: 3mp8r3 <3mp8r3@gmail.com> Date: Mon, 7 Feb 2022 16:41:26 +0800 Subject: [PATCH 1/3] add reusable function to check if network is not matic and use it to fix not able to switch to matic when the user is on other network. --- src/components/AddLiquidity/AddLiquidity.tsx | 19 +++++++++++++------ src/components/Header/Header.tsx | 11 +++++++---- src/components/Swap/Swap.tsx | 5 ++--- src/pages/LandingPage/LandingPage.tsx | 7 ++++--- src/utils/index.ts | 5 +++++ 5 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx index 0d0fd59f5..c1e66dd27 100755 --- 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, + checkNetworkisNotMatic, } from 'utils'; import { wrappedCurrency } from 'utils/wrappedCurrency'; import { ReactComponent as AddLiquidityIcon } from 'assets/images/AddLiquidityIcon.svg'; @@ -169,10 +170,7 @@ const AddLiquidity: React.FC<{ : parsedAmounts[dependentField]?.toSignificant(6) ?? '', }; - const { ethereum } = window as any; - - const isnotMatic = - ethereum && ethereum.isMetaMask && Number(ethereum.chainId) !== 137; + const isnotMatic = checkNetworkisNotMatic(); const toggleWalletModal = useWalletModalToggle(); const [approvingA, setApprovingA] = useState(false); const [approvingB, setApprovingB] = useState(false); @@ -385,6 +383,15 @@ const AddLiquidity: React.FC<{ setTxHash(''); }, [onFieldAInput, txHash]); + const buttonText = useMemo(() => { + if (account) { + return error ?? 'Supply'; + } else if (isnotMatic) { + return 'Switch to Polygon'; + } + return 'Connect Wallet'; + }, [account, isnotMatic, error]); + const modalHeader = () => { return ( @@ -594,7 +601,7 @@ const AddLiquidity: React.FC<{ } onClick={account ? onAdd : connectWallet} > - {account ? error ?? 'Supply' : 'Connect Wallet'} + {buttonText} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 003392bd2..f939ed6ac 100755 --- 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,11 @@ import { useAllTransactions, } from 'state/transactions/hooks'; import { TransactionDetails } from 'state/transactions/reducer'; -import { shortenAddress, addMaticToMetamask } from 'utils'; +import { + shortenAddress, + addMaticToMetamask, + checkNetworkisNotMatic, +} from 'utils'; import useENSName from 'hooks/useENSName'; import { WalletModal } from 'components'; import { useActiveWeb3React } from 'hooks'; @@ -276,7 +279,7 @@ const newTransactionsFirst = (a: TransactionDetails, b: TransactionDetails) => { const Header: React.FC = () => { const classes = useStyles(); const { pathname } = useLocation(); - const { account, chainId } = useActiveWeb3React(); + const { account } = useActiveWeb3React(); const { ENSName } = useENSName(account ?? undefined); const [openDetailMenu, setOpenDetailMenu] = useState(false); const theme = useTheme(); @@ -292,7 +295,7 @@ const Header: React.FC = () => { const confirmed = sortedRecentTransactions .filter((tx: any) => tx.receipt) .map((tx: any) => tx.hash); - const isnotMatic = chainId !== ChainId.MATIC; + const isnotMatic = checkNetworkisNotMatic(); const tabletWindowSize = useMediaQuery(theme.breakpoints.down('sm')); const mobileWindowSize = useMediaQuery(theme.breakpoints.down('xs')); const toggleWalletModal = useWalletModalToggle(); diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx index 716cb2625..bb8ed6e2c 100755 --- 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, + checkNetworkisNotMatic, 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(false); - const isnotMatic = - ethereum && ethereum.isMetaMask && Number(ethereum.chainId) !== 137; + const isnotMatic = checkNetworkisNotMatic(); const [mainPrice, setMainPrice] = useState(true); const priceImpactSeverity = warningSeverity(priceImpactWithoutFee); const isValid = !swapInputError; diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 61ccaf944..96cedfbb9 100755 --- 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,6 +43,7 @@ import { formatCompact, getDaysCurrentYear, returnTokenFromKey, + checkNetworkisNotMatic, } from 'utils'; import { useGlobalData, useWalletModalToggle } from 'state/application/hooks'; import { GlobalConst } from 'constants/index'; @@ -424,8 +425,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 isnotMatic = checkNetworkisNotMatic(); const mobileWindowSize = useMediaQuery(breakpoints.down('sm')); const { initTransak } = useInitTransak(); const toggleWalletModal = useWalletModalToggle(); diff --git a/src/utils/index.ts b/src/utils/index.ts index 1e5611cb1..6ab445189 100755 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1999,3 +1999,8 @@ export function getUSDString(usdValue?: CurrencyAmount) { if (Number(usdStr) > 0 && Number(usdStr) < 0.001) return '< $0.001'; return `$${usdStr}`; } + +export function checkNetworkisNotMatic() { + const { ethereum } = window as any; + return ethereum && ethereum.isMetaMask && Number(ethereum.chainId) !== 137; +} From 478a7912f6b6e135ae621000cb49766c92bd707f Mon Sep 17 00:00:00 2001 From: 3mp8r3 <3mp8r3@gmail.com> Date: Mon, 7 Feb 2022 16:44:00 +0800 Subject: [PATCH 2/3] Fix padding on wallet modal --- src/components/WalletModal/WalletModal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/WalletModal/WalletModal.tsx b/src/components/WalletModal/WalletModal.tsx index 32f2faec1..0513f95e7 100755 --- a/src/components/WalletModal/WalletModal.tsx +++ b/src/components/WalletModal/WalletModal.tsx @@ -265,18 +265,18 @@ const WalletModal: React.FC = ({ function getModalContent() { if (error) { return ( - + - + {error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'} - + {error instanceof UnsupportedChainIdError ? 'Please connect to the appropriate Polygon network.' From 9e61601ae3a9358f302a631edb307828f4a3eb0b Mon Sep 17 00:00:00 2001 From: 3mp8r3 <3mp8r3@gmail.com> Date: Tue, 8 Feb 2022 09:24:27 +0800 Subject: [PATCH 3/3] update function to check supported network --- src/components/AddLiquidity/AddLiquidity.tsx | 10 ++++---- src/components/Header/Header.tsx | 26 ++++++++++---------- src/components/Swap/Swap.tsx | 12 +++++---- src/pages/LandingPage/LandingPage.tsx | 9 +++---- src/utils/index.ts | 5 ++-- 5 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx index c1e66dd27..d2c56b736 100755 --- a/src/components/AddLiquidity/AddLiquidity.tsx +++ b/src/components/AddLiquidity/AddLiquidity.tsx @@ -37,7 +37,7 @@ import { calculateSlippageAmount, calculateGasMargin, returnTokenFromKey, - checkNetworkisNotMatic, + isSupportedNetwork, } from 'utils'; import { wrappedCurrency } from 'utils/wrappedCurrency'; import { ReactComponent as AddLiquidityIcon } from 'assets/images/AddLiquidityIcon.svg'; @@ -170,7 +170,7 @@ const AddLiquidity: React.FC<{ : parsedAmounts[dependentField]?.toSignificant(6) ?? '', }; - const isnotMatic = checkNetworkisNotMatic(); + const { ethereum } = window as any; const toggleWalletModal = useWalletModalToggle(); const [approvingA, setApprovingA] = useState(false); const [approvingB, setApprovingB] = useState(false); @@ -367,7 +367,7 @@ const AddLiquidity: React.FC<{ }; const connectWallet = () => { - if (isnotMatic) { + if (!isSupportedNetwork(ethereum)) { addMaticToMetamask(); } else { toggleWalletModal(); @@ -386,11 +386,11 @@ const AddLiquidity: React.FC<{ const buttonText = useMemo(() => { if (account) { return error ?? 'Supply'; - } else if (isnotMatic) { + } else if (!isSupportedNetwork(ethereum)) { return 'Switch to Polygon'; } return 'Connect Wallet'; - }, [account, isnotMatic, error]); + }, [account, ethereum, error]); const modalHeader = () => { return ( diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index f939ed6ac..192fa9c41 100755 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -9,11 +9,7 @@ import { useAllTransactions, } from 'state/transactions/hooks'; import { TransactionDetails } from 'state/transactions/reducer'; -import { - shortenAddress, - addMaticToMetamask, - checkNetworkisNotMatic, -} from 'utils'; +import { shortenAddress, addMaticToMetamask, isSupportedNetwork } from 'utils'; import useENSName from 'hooks/useENSName'; import { WalletModal } from 'components'; import { useActiveWeb3React } from 'hooks'; @@ -280,6 +276,7 @@ const Header: React.FC = () => { const classes = useStyles(); const { pathname } = useLocation(); const { account } = useActiveWeb3React(); + const { ethereum } = window as any; const { ENSName } = useENSName(account ?? undefined); const [openDetailMenu, setOpenDetailMenu] = useState(false); const theme = useTheme(); @@ -295,7 +292,6 @@ const Header: React.FC = () => { const confirmed = sortedRecentTransactions .filter((tx: any) => tx.receipt) .map((tx: any) => tx.hash); - const isnotMatic = checkNetworkisNotMatic(); const tabletWindowSize = useMediaQuery(theme.breakpoints.down('sm')); const mobileWindowSize = useMediaQuery(theme.breakpoints.down('xs')); const toggleWalletModal = useWalletModalToggle(); @@ -466,7 +462,7 @@ const Header: React.FC = () => { > - {!isnotMatic && account ? ( + {isSupportedNetwork(ethereum) && account ? ( { { - if (!isnotMatic) { + if (isSupportedNetwork(ethereum)) { toggleWalletModal(); } }} > - {isnotMatic ? 'Wrong Network' : 'Connect Wallet'} - {isnotMatic && ( + {!isSupportedNetwork(ethereum) ? 'Wrong Network' : 'Connect Wallet'} + {!isSupportedNetwork(ethereum) && ( { )} diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx index bb8ed6e2c..99c6e4b9e 100755 --- a/src/components/Swap/Swap.tsx +++ b/src/components/Swap/Swap.tsx @@ -36,7 +36,7 @@ import useWrapCallback, { WrapType } from 'hooks/useWrapCallback'; import useToggledVersion, { Version } from 'hooks/useToggledVersion'; import { addMaticToMetamask, - checkNetworkisNotMatic, + isSupportedNetwork, confirmPriceImpactWithoutFee, halfAmountSpend, maxAmountSpend, @@ -206,7 +206,7 @@ const Swap: React.FC<{ const { priceImpactWithoutFee } = computeTradePriceBreakdown(trade); const [approvalSubmitted, setApprovalSubmitted] = useState(false); - const isnotMatic = checkNetworkisNotMatic(); + const { ethereum } = window as any; const [mainPrice, setMainPrice] = useState(true); const priceImpactSeverity = warningSeverity(priceImpactWithoutFee); const isValid = !swapInputError; @@ -229,7 +229,7 @@ const Swap: React.FC<{ }, [approval, approvalSubmitted]); const connectWallet = () => { - if (isnotMatic) { + if (!isSupportedNetwork(ethereum)) { addMaticToMetamask(); } else { toggleWalletModal(); @@ -276,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/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 96cedfbb9..cbc4fb42b 100755 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -43,10 +43,9 @@ import { formatCompact, getDaysCurrentYear, returnTokenFromKey, - checkNetworkisNotMatic, + 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 }) => ({ @@ -426,7 +425,7 @@ const LandingPage: React.FC = () => { const [openStakeModal, setOpenStakeModal] = useState(false); const { palette, breakpoints } = useTheme(); const { account } = useActiveWeb3React(); - const isnotMatic = checkNetworkisNotMatic(); + const { ethereum } = window as any; const mobileWindowSize = useMediaQuery(breakpoints.down('sm')); const { initTransak } = useInitTransak(); const toggleWalletModal = useWalletModalToggle(); @@ -580,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 index 6ab445189..b3a418eb1 100755 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -2000,7 +2000,6 @@ export function getUSDString(usdValue?: CurrencyAmount) { return `$${usdStr}`; } -export function checkNetworkisNotMatic() { - const { ethereum } = window as any; - return ethereum && ethereum.isMetaMask && Number(ethereum.chainId) !== 137; +export function isSupportedNetwork(ethereum: any) { + return ethereum && Number(ethereum.chainId) === 137; }