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;
+}