From fc0bf229a7e2bab80f9a582e231f0a535410a599 Mon Sep 17 00:00:00 2001 From: Jordan Frankfurt Date: Mon, 31 Jul 2023 10:04:22 -0500 Subject: [PATCH] fix: improve v2 network support (#7012) * fix: improve v2 network support * add an unsupported message to all v2 pages * test: add v2 pool tests * add guard on transaction callbacks * fix: dep array --------- Co-authored-by: eddie <66155195+just-toby@users.noreply.github.com> --- src/components/V2Unsupported/index.tsx | 28 ++++++++++++++++++ src/constants/chains.ts | 11 ++----- src/hooks/useNetworkSupportsV2.ts | 7 +++++ src/pages/AddLiquidityV2/index.tsx | 7 ++++- src/pages/MigrateV2/MigrateV2Pair.tsx | 40 +++++++++++++++----------- src/pages/MigrateV2/index.tsx | 5 ++++ src/pages/Pool/index.tsx | 6 ++-- src/pages/Pool/v2.tsx | 32 +++++++-------------- src/pages/PoolFinder/index.tsx | 5 ++++ src/pages/RemoveLiquidity/index.tsx | 10 ++++++- 10 files changed, 100 insertions(+), 51 deletions(-) create mode 100644 src/components/V2Unsupported/index.tsx create mode 100644 src/hooks/useNetworkSupportsV2.ts diff --git a/src/components/V2Unsupported/index.tsx b/src/components/V2Unsupported/index.tsx new file mode 100644 index 0000000000..a1f9b36f86 --- /dev/null +++ b/src/components/V2Unsupported/index.tsx @@ -0,0 +1,28 @@ +import { Trans } from '@lingui/macro' +import { AutoColumn } from 'components/Column' +import styled from 'styled-components/macro' +import { ThemedText } from 'theme' + +const TextWrapper = styled.div` + border: 1px solid ${({ theme }) => theme.textPrimary}; + padding: 16px 12px; + border-radius: 12px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +` + +export function V2Unsupported() { + return ( + + + + + Uniswap V2 is not available on this network. + + + + + ) +} diff --git a/src/constants/chains.ts b/src/constants/chains.ts index e0738bf28d..4f1a49fa34 100644 --- a/src/constants/chains.ts +++ b/src/constants/chains.ts @@ -41,16 +41,9 @@ export const SUPPORTED_GAS_ESTIMATE_CHAIN_IDS = [ ] as const /** - * Unsupported networks for V2 pool behavior. + * Supported networks for V2 pool behavior. */ -export const UNSUPPORTED_V2POOL_CHAIN_IDS = [ - ChainId.POLYGON, - ChainId.OPTIMISM, - ChainId.ARBITRUM_ONE, - ChainId.BNB, - ChainId.ARBITRUM_GOERLI, - ChainId.AVALANCHE, -] as const +export const SUPPORTED_V2POOL_CHAIN_IDS = [ChainId.MAINNET, ChainId.GOERLI] as const export const TESTNET_CHAIN_IDS = [ ChainId.GOERLI, diff --git a/src/hooks/useNetworkSupportsV2.ts b/src/hooks/useNetworkSupportsV2.ts new file mode 100644 index 0000000000..ab567b3c23 --- /dev/null +++ b/src/hooks/useNetworkSupportsV2.ts @@ -0,0 +1,7 @@ +import { useWeb3React } from '@web3-react/core' +import { SUPPORTED_V2POOL_CHAIN_IDS } from 'constants/chains' + +export function useNetworkSupportsV2() { + const { chainId } = useWeb3React() + return chainId && SUPPORTED_V2POOL_CHAIN_IDS.includes(chainId) +} diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx index daa00b9c73..1060b1620c 100644 --- a/src/pages/AddLiquidityV2/index.tsx +++ b/src/pages/AddLiquidityV2/index.tsx @@ -9,6 +9,8 @@ import { useToggleAccountDrawer } from 'components/AccountDrawer' import { sendEvent } from 'components/analytics' import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter' import { SwitchLocaleLink } from 'components/SwitchLocaleLink' +import { V2Unsupported } from 'components/V2Unsupported' +import { useNetworkSupportsV2 } from 'hooks/useNetworkSupportsV2' import { useCallback, useState } from 'react' import { Plus } from 'react-feather' import { useLocation, useNavigate, useParams } from 'react-router-dom' @@ -132,9 +134,10 @@ export default function AddLiquidity() { const [approvalB, approveBCallback] = useApproveCallback(parsedAmounts[Field.CURRENCY_B], router?.address) const addTransaction = useTransactionAdder() + const networkSupportsV2 = useNetworkSupportsV2() async function onAdd() { - if (!chainId || !provider || !account || !router) return + if (!chainId || !provider || !account || !router || !networkSupportsV2) return const { [Field.CURRENCY_A]: parsedAmountA, [Field.CURRENCY_B]: parsedAmountB } = parsedAmounts if (!parsedAmountA || !parsedAmountB || !currencyA || !currencyB || !deadline) { @@ -318,6 +321,8 @@ export default function AddLiquidity() { const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B) + if (!networkSupportsV2) return + return ( <> diff --git a/src/pages/MigrateV2/MigrateV2Pair.tsx b/src/pages/MigrateV2/MigrateV2Pair.tsx index 5e3065c3b3..5ca0efe387 100644 --- a/src/pages/MigrateV2/MigrateV2Pair.tsx +++ b/src/pages/MigrateV2/MigrateV2Pair.tsx @@ -14,8 +14,10 @@ import RangeSelector from 'components/RangeSelector' import RateToggle from 'components/RateToggle' import SettingsTab from 'components/Settings' import { Dots } from 'components/swap/styleds' +import { V2Unsupported } from 'components/V2Unsupported' import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback' import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp' +import { useNetworkSupportsV2 } from 'hooks/useNetworkSupportsV2' import { PoolState, usePool } from 'hooks/usePools' import useTransactionDeadline from 'hooks/useTransactionDeadline' import { useV2LiquidityTokenPermit } from 'hooks/useV2LiquidityTokenPermit' @@ -262,6 +264,8 @@ function V2PairMigration({ const addTransaction = useTransactionAdder() const isMigrationPending = useIsTransactionPending(pendingMigrationHash ?? undefined) + const networkSupportsV2 = useNetworkSupportsV2() + const migrate = useCallback(() => { if ( !migrator || @@ -272,7 +276,8 @@ function V2PairMigration({ typeof tickUpper !== 'number' || !v3Amount0Min || !v3Amount1Min || - !chainId + !chainId || + !networkSupportsV2 ) return @@ -354,31 +359,34 @@ function V2PairMigration({ setConfirmingMigration(false) }) }, [ - chainId, - isNotUniswap, migrator, - noLiquidity, - blockTimestamp, - token0, - token1, - feeAmount, - pairBalance, - tickLower, - tickUpper, - sqrtPrice, - v3Amount0Min, - v3Amount1Min, account, deadline, + blockTimestamp, + tickLower, + tickUpper, + v3Amount0Min, + v3Amount1Min, + chainId, + networkSupportsV2, signatureData, - addTransaction, - pair, + noLiquidity, + pair.address, + pairBalance.quotient, + token0.address, + token1.address, + feeAmount, + sqrtPrice, + isNotUniswap, currency0, currency1, + addTransaction, ]) const isSuccessfullyMigrated = !!pendingMigrationHash && JSBI.equal(pairBalance.quotient, ZERO) + if (!networkSupportsV2) return + return ( diff --git a/src/pages/MigrateV2/index.tsx b/src/pages/MigrateV2/index.tsx index d70d7a8815..45b58cff8c 100644 --- a/src/pages/MigrateV2/index.tsx +++ b/src/pages/MigrateV2/index.tsx @@ -7,6 +7,8 @@ import { useWeb3React } from '@web3-react/core' import MigrateSushiPositionCard from 'components/PositionCard/Sushi' import MigrateV2PositionCard from 'components/PositionCard/V2' import { SwitchLocaleLink } from 'components/SwitchLocaleLink' +import { V2Unsupported } from 'components/V2Unsupported' +import { useNetworkSupportsV2 } from 'hooks/useNetworkSupportsV2' import { PairState, useV2Pairs } from 'hooks/useV2Pairs' import { ReactNode, useMemo } from 'react' import { Text } from 'rebass' @@ -110,6 +112,9 @@ export default function MigrateV2() { const v2Pairs = useV2Pairs(tokenPairsWithV2Balance) const v2IsLoading = fetchingPairBalances || v2Pairs.some(([pairState]) => pairState === PairState.LOADING) + const networkSupportsV2 = useNetworkSupportsV2() + if (!networkSupportsV2) return + return ( <> diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx index 9b54ae3872..2034c275d9 100644 --- a/src/pages/Pool/index.tsx +++ b/src/pages/Pool/index.tsx @@ -1,6 +1,5 @@ import { Trans } from '@lingui/macro' import { BrowserEvent, InterfaceElementName, InterfaceEventName, InterfacePageName } from '@uniswap/analytics-events' -import { V2_FACTORY_ADDRESSES } from '@uniswap/sdk-core' import { useWeb3React } from '@web3-react/core' import { Trace, TraceEvent } from 'analytics' import { useToggleAccountDrawer } from 'components/AccountDrawer' @@ -12,6 +11,7 @@ import { RowBetween, RowFixed } from 'components/Row' import { SwitchLocaleLink } from 'components/SwitchLocaleLink' import { isSupportedChain } from 'constants/chains' import { useFilterPossiblyMaliciousPositions } from 'hooks/useFilterPossiblyMaliciousPositions' +import { useNetworkSupportsV2 } from 'hooks/useNetworkSupportsV2' import { useV3Positions } from 'hooks/useV3Positions' import { useMemo } from 'react' import { AlertTriangle, BookOpen, ChevronDown, ChevronsRight, Inbox, Layers } from 'react-feather' @@ -190,6 +190,7 @@ function WrongNetworkCard() { export default function Pool() { const { account, chainId } = useWeb3React() + const networkSupportsV2 = useNetworkSupportsV2() const toggleWalletDrawer = useToggleAccountDrawer() const theme = useTheme() @@ -217,7 +218,6 @@ export default function Pool() { } const showConnectAWallet = Boolean(!account) - const showV2Features = Boolean(V2_FACTORY_ADDRESSES[chainId]) const menuItems = [ { @@ -262,7 +262,7 @@ export default function Pool() { Pools - {showV2Features && ( + {networkSupportsV2 && ( trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })), [trackedTokenPairs] @@ -145,7 +143,7 @@ export default function Pool() { <> - + @@ -176,18 +174,10 @@ export default function Pool() { - + - {unsupportedV2Network ? ( - - - - - Uniswap V2 is not available on this network. - - - - + {!networkSupportsV2 ? ( + ) : ( diff --git a/src/pages/PoolFinder/index.tsx b/src/pages/PoolFinder/index.tsx index cefbec34b6..db059a356b 100644 --- a/src/pages/PoolFinder/index.tsx +++ b/src/pages/PoolFinder/index.tsx @@ -3,6 +3,8 @@ import { InterfacePageName } from '@uniswap/analytics-events' import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core' import { useWeb3React } from '@web3-react/core' import { Trace } from 'analytics' +import { V2Unsupported } from 'components/V2Unsupported' +import { useNetworkSupportsV2 } from 'hooks/useNetworkSupportsV2' import JSBI from 'jsbi' import { useCallback, useEffect, useState } from 'react' import { Plus } from 'react-feather' @@ -96,6 +98,9 @@ export default function PoolFinder() { ) + const networkSupportsV2 = useNetworkSupportsV2() + if (!networkSupportsV2) return + return ( <> diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx index df04b82355..df0518f5eb 100644 --- a/src/pages/RemoveLiquidity/index.tsx +++ b/src/pages/RemoveLiquidity/index.tsx @@ -8,7 +8,9 @@ import { useWeb3React } from '@web3-react/core' import { TraceEvent } from 'analytics' import { useToggleAccountDrawer } from 'components/AccountDrawer' import { sendEvent } from 'components/analytics' +import { V2Unsupported } from 'components/V2Unsupported' import { isSupportedChain } from 'constants/chains' +import { useNetworkSupportsV2 } from 'hooks/useNetworkSupportsV2' import { useV2LiquidityTokenPermit } from 'hooks/useV2LiquidityTokenPermit' import { PositionPageUnsupportedContent } from 'pages/Pool/PositionPage' import { useCallback, useMemo, useState } from 'react' @@ -157,8 +159,12 @@ function RemoveLiquidity() { // tx sending const addTransaction = useTransactionAdder() + const networkSupportsV2 = useNetworkSupportsV2() + async function onRemove() { - if (!chainId || !provider || !account || !deadline || !router) throw new Error('missing dependencies') + if (!chainId || !provider || !account || !deadline || !router || !networkSupportsV2) { + throw new Error('missing dependencies') + } const { [Field.CURRENCY_A]: currencyAmountA, [Field.CURRENCY_B]: currencyAmountB } = parsedAmounts if (!currencyAmountA || !currencyAmountB) { throw new Error('missing currency amounts') @@ -439,6 +445,8 @@ function RemoveLiquidity() { liquidityPercentChangeCallback ) + if (!networkSupportsV2) return + return ( <>