diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx index 0d0fd59f5..d2c56b736 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, + 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 ( @@ -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..192fa9c41 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,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 = () => { > - {!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 716cb2625..99c6e4b9e 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, + 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(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 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.' diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 61ccaf944..cbc4fb42b 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,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 index 1e5611cb1..b3a418eb1 100755 --- 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; +}