diff --git a/package.json b/package.json index 478f281355..01e89979b7 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "react-qrcode-logo": "^2.8.0", "react-redux": "^7.2.9", "react-rnd": "10.4.1", - "react-router-dom": "^6.4.3", + "react-router-dom": "6.5.0", "react-spring": "^9.6.1", "react-use": "^15.3.4", "react-use-gesture": "^6.0.14", diff --git a/src/components/PoolList/ItemCard/index.tsx b/src/components/PoolList/ItemCard/index.tsx index e5d12aabbd..a0d9f6a25c 100644 --- a/src/components/PoolList/ItemCard/index.tsx +++ b/src/components/PoolList/ItemCard/index.tsx @@ -4,7 +4,7 @@ import { parseUnits } from 'ethers/lib/utils' import JSBI from 'jsbi' import { useEffect, useState } from 'react' import { AlertTriangle, BarChart2, Minus, Plus, Share2 } from 'react-feather' -import { Link, useNavigate } from 'react-router-dom' +import { Link } from 'react-router-dom' import { Box, Flex, Text } from 'rebass' import styled from 'styled-components' @@ -71,7 +71,6 @@ const formatPriceMax = (price?: Fraction) => { const ItemCard = ({ poolData, myLiquidity }: ListItemProps) => { const { chainId, networkInfo } = useActiveWeb3React() const amp = new Fraction(poolData.amp).divide(JSBI.BigInt(SUBGRAPH_AMP_MULTIPLIER)) - const navigate = useNavigate() const [showDetail, setShowDetail] = useState(false) const { data: uniqueAndActiveFarms } = useActiveAndUniqueFarmsData() @@ -179,7 +178,10 @@ const ItemCard = ({ poolData, myLiquidity }: ListItemProps) => { as={Link} to={ isHaveLiquidity - ? `/remove/${currencyId(currency0, chainId)}/${currencyId(currency1, chainId)}/${poolData.id}` + ? `/${networkInfo.route}${APP_PATHS.CLASSIC_REMOVE_POOL}/${currencyId(currency0, chainId)}/${currencyId( + currency1, + chainId, + )}/${poolData.id}` : `${APP_PATHS.SWAP}/${networkInfo.route}?inputCurrency=${currencyId( currency0, chainId, @@ -207,15 +209,16 @@ const ItemCard = ({ poolData, myLiquidity }: ListItemProps) => { )} { - const url = `/add/${currencyId(currency0, chainId)}/${currencyId(currency1, chainId)}/${poolData.id}` - navigate(url) - }} + as={Link} style={{ padding: '10px', fontWeight: 500, height: '36px', }} + to={`/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyId(currency0, chainId)}/${currencyId( + currency1, + chainId, + )}/${poolData.id}`} > diff --git a/src/components/PoolList/ListItem.tsx b/src/components/PoolList/ListItem.tsx index a450b9173f..60a6bb925a 100644 --- a/src/components/PoolList/ListItem.tsx +++ b/src/components/PoolList/ListItem.tsx @@ -5,7 +5,7 @@ import { rgba } from 'polished' import React from 'react' import { AlertTriangle, Info, Minus, Plus, Share2 } from 'react-feather' import { useDispatch } from 'react-redux' -import { Link, useNavigate } from 'react-router-dom' +import { Link } from 'react-router-dom' import { Flex, Text } from 'rebass' import { ButtonEmpty } from 'components/Button' @@ -43,8 +43,6 @@ const ListItem = ({ poolData, userLiquidityPositions }: ListItemGroupProps) => { const amp = new Fraction(poolData.amp).divide(JSBI.BigInt(10000)) - const navigate = useNavigate() - const { data: uniqueAndActiveFarms } = useActiveAndUniqueFarmsData() const farm = uniqueAndActiveFarms.find(f => f.id.toLowerCase() === poolData.id.toLowerCase()) @@ -196,10 +194,13 @@ const ListItem = ({ poolData, userLiquidityPositions }: ListItemGroupProps) => { width: '28px', height: '28px', }} + as={Link} + to={`/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyId(currency0, chainId)}/${currencyId( + currency1, + chainId, + )}/${poolData.id}`} onClick={(e: React.MouseEvent) => { e.stopPropagation() - const url = `/add/${currencyId(currency0, chainId)}/${currencyId(currency1, chainId)}/${poolData.id}` - navigate(url) }} > @@ -208,7 +209,10 @@ const ListItem = ({ poolData, userLiquidityPositions }: ListItemGroupProps) => { Remove Liquidity @@ -744,7 +747,10 @@ export default function FullPositionCard({ padding="10px" style={{ fontSize: '14px' }} as={Link} - to={`/add/${currencyId(currency0, chainId)}/${currencyId(currency1, chainId)}/${pair.address}`} + to={`/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyId(currency0, chainId)}/${currencyId( + currency1, + chainId, + )}/${pair.address}`} > Add Liquidity diff --git a/src/components/ProAmm/ProAmmPoolStat.tsx b/src/components/ProAmm/ProAmmPoolStat.tsx index ca573fddbc..f9e83c2029 100644 --- a/src/components/ProAmm/ProAmmPoolStat.tsx +++ b/src/components/ProAmm/ProAmmPoolStat.tsx @@ -117,7 +117,7 @@ export default function ProAmmPoolStat({ pool, onShared, userPositions, onClickP return ( { - const { chainId } = useActiveWeb3React() + const { chainId, networkInfo } = useActiveWeb3React() const [isRevertPrice, setIsRevertPrice] = useState(false) const theme = useTheme() const currentTimestamp = Math.floor(Date.now() / 1000) @@ -84,7 +84,7 @@ const FarmCard = ({ const [, setFarmAddress] = useShareFarmAddress() const [showPosition, setShowPosition] = useState(false) - const addliquidityElasticPool = `${APP_PATHS.ELASTIC_CREATE_POOL}/${ + const addLiquidityElasticPoolUrl = `/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${ pool.token0.isNative ? pool.token0.symbol : pool.token0.address }/${pool.token1.isNative ? pool.token1.symbol : pool.token1.address}/${pool.pool.fee}` @@ -114,7 +114,7 @@ const FarmCard = ({ void tokenPrices: { [key: string]: number } }) => { - const { chainId } = useActiveWeb3React() + const { chainId, networkInfo } = useActiveWeb3React() const theme = useTheme() const currentTimestamp = Math.floor(Date.now() / 1000) const [viewMode] = useViewMode() @@ -312,7 +312,7 @@ const Row = ({ { - const { account, chainId, isEVM } = useActiveWeb3React() + const { account, chainId, isEVM, networkInfo } = useActiveWeb3React() const toggleWalletModal = useWalletModalToggle() const currentTimestamp = Math.floor(Date.now() / 1000) const [viewMode] = useViewMode() @@ -311,10 +311,10 @@ const ListItem = ({ farm }: ListItemProps) => { {farm.token0?.symbol} - {farm.token1?.symbol} @@ -465,9 +465,18 @@ const ListItem = ({ farm }: ListItemProps) => { - - {currency0?.symbol} - {currency1?.symbol} - + + + {currency0?.symbol} - {currency1?.symbol} + + + { diff --git a/src/hooks/useSyncTokenSymbolToUrl.ts b/src/hooks/useSyncTokenSymbolToUrl.ts index 0d0279490b..6c8c47e58b 100644 --- a/src/hooks/useSyncTokenSymbolToUrl.ts +++ b/src/hooks/useSyncTokenSymbolToUrl.ts @@ -19,10 +19,17 @@ type TokenSymbolParams = { toCurrency: string network: string } + const getUrlMatchParams = (params: Params): TokenSymbolParams => { - const fromCurrency = (params.fromCurrency || '').toLowerCase() - const toCurrency = (params.toCurrency || '').toLowerCase() + const currencyParam = (params.currency || '').toLowerCase() const network: string = convertToSlug(params.network || '') + + let fromCurrency = '', + toCurrency = '' + + const matches = currencyParam.split('-to-') + fromCurrency ||= matches[0] + toCurrency ||= matches[1] return { fromCurrency, toCurrency, network } } diff --git a/src/pages/AddLiquidity/TokenPair.tsx b/src/pages/AddLiquidity/TokenPair.tsx index 38c0effac0..f320fbf847 100644 --- a/src/pages/AddLiquidity/TokenPair.tsx +++ b/src/pages/AddLiquidity/TokenPair.tsx @@ -23,7 +23,7 @@ import TransactionConfirmationModal, { ConfirmationModalContent, TransactionErrorContent, } from 'components/TransactionConfirmationModal' -import { AMP_HINT } from 'constants/index' +import { AMP_HINT, APP_PATHS } from 'constants/index' import { EVMNetworkInfo } from 'constants/networks/type' import { NativeCurrencies } from 'constants/tokens' import { PairState } from 'data/Reserves' @@ -447,7 +447,7 @@ const TokenPair = ({ Go to unamplified pool @@ -483,7 +483,7 @@ const TokenPair = ({ onSwitchCurrency={() => { chainId && navigate( - `/add/${ + `/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${ currencyAIsETHER ? WETH[chainId].address : NativeCurrencies[chainId].symbol }/${currencyIdB}/${pairAddress}`, { replace: true }, @@ -521,7 +521,7 @@ const TokenPair = ({ {pairAddress && chainId && (currencyBIsWETH || currencyBIsETHER) && ( diff --git a/src/pages/AddLiquidity/ZapIn.tsx b/src/pages/AddLiquidity/ZapIn.tsx index 59f3b46187..d3eedc558b 100644 --- a/src/pages/AddLiquidity/ZapIn.tsx +++ b/src/pages/AddLiquidity/ZapIn.tsx @@ -25,7 +25,7 @@ import TransactionConfirmationModal, { } from 'components/TransactionConfirmationModal' import ZapError from 'components/ZapError' import FormattedPriceImpact from 'components/swapv2/FormattedPriceImpact' -import { AMP_HINT } from 'constants/index' +import { AMP_HINT, APP_PATHS } from 'constants/index' import { EVMNetworkInfo } from 'constants/networks/type' import { NativeCurrencies } from 'constants/tokens' import { PairState } from 'data/Reserves' @@ -447,7 +447,7 @@ const ZapIn = ({ Go to unamplified pool @@ -499,12 +499,15 @@ const ZapIn = ({ replace to={ independentField === Field.CURRENCY_A - ? `/add/${ + ? `/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${ selectedCurrencyIsETHER ? currencyId(WETH[chainId], chainId) : currencyId(NativeCurrencies[chainId], chainId) }/${currencyId(currencies[dependentField] as Currency, chainId)}/${pairAddress}` - : `/add/${currencyId(currencies[dependentField] as Currency, chainId)}/${ + : `/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyId( + currencies[dependentField] as Currency, + chainId, + )}/${ selectedCurrencyIsETHER ? currencyId(WETH[chainId], chainId) : NativeCurrencies[chainId].symbol diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index 1a80df4b68..afeb2ad995 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/src/pages/AddLiquidity/index.tsx @@ -48,6 +48,7 @@ export default function AddLiquidity() { }, []) if (!isEVM) return + return ( <> diff --git a/src/pages/AddLiquidityV2/redirects.tsx b/src/pages/AddLiquidityV2/RedirectElasticCreatePool.tsx similarity index 75% rename from src/pages/AddLiquidityV2/redirects.tsx rename to src/pages/AddLiquidityV2/RedirectElasticCreatePool.tsx index 562bcc8335..b39d7dafc9 100644 --- a/src/pages/AddLiquidityV2/redirects.tsx +++ b/src/pages/AddLiquidityV2/RedirectElasticCreatePool.tsx @@ -6,10 +6,10 @@ import { useActiveWeb3React } from 'hooks' import ProAmmAddLiquidity from './index' -export function RedirectDuplicateTokenIds() { +export default function RedirectElasticCreatePool() { const { currencyIdA, currencyIdB } = useParams() - const { chainId } = useActiveWeb3React() + const { chainId, networkInfo } = useActiveWeb3React() // prevent weth + eth const isETHOrWETHA = currencyIdA === 'ETH' || currencyIdA === WETH[chainId].address @@ -20,7 +20,8 @@ export function RedirectDuplicateTokenIds() { currencyIdB && (currencyIdA.toLowerCase() === currencyIdB.toLowerCase() || (isETHOrWETHA && isETHOrWETHB)) ) { - return + return } + return } diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx index 13045a155e..f4e5f61dde 100644 --- a/src/pages/AddLiquidityV2/index.tsx +++ b/src/pages/AddLiquidityV2/index.tsx @@ -521,33 +521,33 @@ export default function AddLiquidity() { (currencyANew: Currency) => { const [idA, idB] = handleCurrencySelect(currencyANew, currencyIdB) if (idB === undefined) { - navigate(`${APP_PATHS.ELASTIC_CREATE_POOL}/${idA}`) + navigate(`/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${idA}`) } else { - navigate(`${APP_PATHS.ELASTIC_CREATE_POOL}/${idA}/${idB}`) + navigate(`/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${idA}/${idB}`) } }, - [handleCurrencySelect, currencyIdB, navigate], + [handleCurrencySelect, currencyIdB, navigate, networkInfo.route], ) const handleCurrencyBSelect = useCallback( (currencyBNew: Currency) => { const [idB, idA] = handleCurrencySelect(currencyBNew, currencyIdA) if (idA === undefined) { - navigate(`${APP_PATHS.ELASTIC_CREATE_POOL}/${idB}`) + navigate(`/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${idB}`) } else { - navigate(`${APP_PATHS.ELASTIC_CREATE_POOL}/${idA}/${idB}`) + navigate(`/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${idA}/${idB}`) } }, - [handleCurrencySelect, currencyIdA, navigate], + [handleCurrencySelect, currencyIdA, navigate, networkInfo.route], ) const handleFeePoolSelect = useCallback( (newFeeAmount: FeeAmount) => { onLeftRangeInput('') onRightRangeInput('') - navigate(`${APP_PATHS.ELASTIC_CREATE_POOL}/${currencyIdA}/${currencyIdB}/${newFeeAmount}`) + navigate(`/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${currencyIdA}/${currencyIdB}/${newFeeAmount}`) }, - [currencyIdA, currencyIdB, navigate, onLeftRangeInput, onRightRangeInput], + [currencyIdA, currencyIdB, navigate, networkInfo.route, onLeftRangeInput, onRightRangeInput], ) const handleDismissConfirmation = useCallback(() => { @@ -1018,7 +1018,7 @@ export default function AddLiquidity() { onSwitchCurrency={() => { chainId && navigate( - `${APP_PATHS.ELASTIC_CREATE_POOL}/${ + `/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${ baseCurrencyIsETHER ? WETH[chainId].address : NativeCurrencies[chainId].symbol }/${currencyIdB}/${feeAmount}`, { replace: true }, @@ -1048,7 +1048,7 @@ export default function AddLiquidity() { onSwitchCurrency={() => { chainId && navigate( - `${APP_PATHS.ELASTIC_CREATE_POOL}/${currencyIdA}/${ + `/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${currencyIdA}/${ quoteCurrencyIsETHER ? WETH[chainId].address : NativeCurrencies[chainId].symbol }/${feeAmount}`, { replace: true }, @@ -1182,7 +1182,7 @@ export default function AddLiquidity() { onCleared={() => { onFieldAInput('0') onFieldBInput('0') - navigate(APP_PATHS.ELASTIC_CREATE_POOL) + navigate(`/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}`) }} onBack={() => { navigate(`${APP_PATHS.POOLS}/${networkInfo.route}?tab=elastic`) @@ -1256,7 +1256,7 @@ export default function AddLiquidity() { ) : ( diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 70275e1e7b..7782a0ebb6 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -5,7 +5,7 @@ import * as Sentry from '@sentry/react' import { Suspense, lazy, useEffect } from 'react' import { isMobile } from 'react-device-detect' import { AlertTriangle } from 'react-feather' -import { Navigate, Route, Routes, useLocation } from 'react-router-dom' +import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom' import { useNetwork, usePrevious } from 'react-use' import { Flex, Text } from 'rebass' import styled from 'styled-components' @@ -33,21 +33,17 @@ import { useGlobalMixpanelEvents } from 'hooks/useMixpanel' import useSessionExpiredGlobal from 'hooks/useSessionExpire' import { useSyncNetworkParamWithStore } from 'hooks/useSyncNetworkParamWithStore' import useTheme from 'hooks/useTheme' +import { RedirectPathToSwapV3Network } from 'pages/SwapV3/redirects' +import KyberAIExplore from 'pages/TrueSightV2' +import TruesightFooter from 'pages/TrueSightV2/components/TruesightFooter' +import KyberAILandingPage from 'pages/TrueSightV2/pages/LandingPage' +import Verify from 'pages/Verify' import { useHolidayMode } from 'state/user/hooks' import DarkModeQueryParamReader from 'theme/DarkModeQueryParamReader' import { getLimitOrderContract, isAddressString, shortenAddress } from 'utils' -import { RedirectDuplicateTokenIds } from './AddLiquidityV2/redirects' import ElasticLegacyNotice from './ElasticLegacy/ElasticLegacyNotice' -import { RedirectPathToFarmNetwork } from './Farm/redirect' import Icons from './Icons' -import { RedirectPathToMyPoolsNetwork } from './Pool/redirect' -import { RedirectPathToPoolsNetwork } from './Pools/redirect' -import { RedirectPathToSwapV3Network } from './SwapV3/redirects' -import KyberAIExplore from './TrueSightV2' -import TruesightFooter from './TrueSightV2/components/TruesightFooter' -import KyberAILandingPage from './TrueSightV2/pages/LandingPage' -import Verify from './Verify' // test page for swap only through elastic const ElasticSwap = lazy(() => import('./ElasticSwap')) @@ -55,31 +51,30 @@ const SwapV2 = lazy(() => import('./SwapV2')) const SwapV3 = lazy(() => import('./SwapV3')) const Bridge = lazy(() => import('./Bridge')) const Pools = lazy(() => import('./Pools')) -const Pool = lazy(() => import('./Pool')) +const MyPools = lazy(() => import('./Pool')) const Farm = lazy(() => import('./Farm')) const PoolFinder = lazy(() => import('./PoolFinder')) -const CreatePool = lazy(() => import('./CreatePool')) -const ProAmmRemoveLiquidity = lazy(() => import('./RemoveLiquidityProAmm')) -const RedirectCreatePoolDuplicateTokenIds = lazy(() => import('./CreatePool/RedirectDuplicateTokenIds')) -const RedirectOldCreatePoolPathStructure = lazy(() => import('./CreatePool/RedirectOldCreatePoolPathStructure')) +const ElasticRemoveLiquidity = lazy(() => import('pages/RemoveLiquidityProAmm')) +const RedirectCreatePool = lazy(() => import('pages/CreatePool/RedirectCreatePool')) -const AddLiquidity = lazy(() => import('./AddLiquidity')) -const IncreaseLiquidity = lazy(() => import('./IncreaseLiquidity')) +const RedirectElasticCreatePool = lazy(() => import('pages/AddLiquidityV2/RedirectElasticCreatePool')) -const RemoveLiquidity = lazy(() => import('./RemoveLiquidity')) +const AddLiquidity = lazy(() => import('pages/AddLiquidity')) +const ElasticIncreaseLiquidity = lazy(() => import('pages/IncreaseLiquidity')) -const KyberDAOStakeKNC = lazy(() => import('./KyberDAO/StakeKNC')) -const KyberDAOVote = lazy(() => import('./KyberDAO/Vote')) -const AboutKyberSwap = lazy(() => import('./About/AboutKyberSwap')) -const AboutKNC = lazy(() => import('./About/AboutKNC')) +const RemoveLiquidity = lazy(() => import('pages/RemoveLiquidity')) -const BuyCrypto = lazy(() => import('./BuyCrypto')) +const KyberDAOStakeKNC = lazy(() => import('pages/KyberDAO/StakeKNC')) +const KyberDAOVote = lazy(() => import('pages/KyberDAO/Vote')) +const AboutKyberSwap = lazy(() => import('pages//About/AboutKyberSwap')) +const AboutKNC = lazy(() => import('pages/About/AboutKNC')) +const BuyCrypto = lazy(() => import('pages/BuyCrypto')) -const Campaign = lazy(() => import('./Campaign')) -const GrantProgramPage = lazy(() => import('./GrantProgram')) -const NotificationCenter = lazy(() => import('./NotificationCenter')) +const Campaign = lazy(() => import('pages/Campaign')) +const GrantProgramPage = lazy(() => import('pages/GrantProgram')) +const NotificationCenter = lazy(() => import('pages/NotificationCenter')) const AppWrapper = styled.div` display: flex; @@ -125,6 +120,83 @@ const SwapPage = () => { return {chainId === ChainId.SOLANA ? : } } +const RedirectWithNetworkPrefix = () => { + const { networkInfo } = useActiveWeb3React() + const location = useLocation() + + return ( + + ) +} + +const RedirectWithNetworkSuffix = () => { + const { networkInfo } = useActiveWeb3React() + const location = useLocation() + + return ( + + ) +} + +const RoutesWithNetworkPrefix = () => { + const { network } = useParams() + const { networkInfo } = useActiveWeb3React() + const location = useLocation() + + useSyncNetworkParamWithStore() + + if (!network) { + return + } + + if (network === NETWORKS_INFO_CONFIG[ChainId.SOLANA].route) { + return + } + + const chainInfoFromParam = Object.values(NETWORKS_INFO_CONFIG).find(info => info.route === network) + if (!chainInfoFromParam) { + return + } + + return ( + + } /> + } + /> + } + /> + + } + /> + } + /> + } /> + + } /> + + ) +} + export default function App() { const { account, chainId, networkInfo } = useActiveWeb3React() const { pathname } = useLocation() @@ -242,75 +314,47 @@ export default function App() { } /> - } /> - } /> - } /> + {/* From react-router-dom@6.5.0, :fromCurrency-to-:toCurrency no long works, need to manually parse the params */} + } /> {CHAINS_SUPPORT_CROSS_CHAIN.includes(chainId) && ( } /> )} {getLimitOrderContract(chainId) && ( - <> - } - /> - } /> - } /> - + } /> )} } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - } - /> - } - /> - - } /> - } /> - } - /> - } - /> - } /> + <> + {/* Pools Routes */} + } /> + } /> + + + <> + {/* Farms Routes */} + } /> + } /> + + + <> + {/* My Pools Routes */} + } /> + } /> + + + <> + {/* These are old routes and will soon be deprecated - Check: RoutesWithNetworkParam */} + } /> + } /> + } /> + + } /> + } /> + } /> + - } /> - } - /> - } - /> - } - /> - - } - /> } /> } /> } /> @@ -361,6 +405,8 @@ export default function App() { } /> + } /> + } /> diff --git a/src/pages/CreatePool/RedirectCreatePool.tsx b/src/pages/CreatePool/RedirectCreatePool.tsx new file mode 100644 index 0000000000..a211db0975 --- /dev/null +++ b/src/pages/CreatePool/RedirectCreatePool.tsx @@ -0,0 +1,24 @@ +import { Navigate, useParams } from 'react-router-dom' + +import { APP_PATHS } from 'constants/index' +import { useActiveWeb3React } from 'hooks' + +import CreatePool from './index' + +const OLD_PATH_STRUCTURE = /^(0x[a-fA-F0-9]{40})-(0x[a-fA-F0-9]{40})$/ +export default function RedirectCreatePool() { + const { currencyIdA, currencyIdB } = useParams() + + const { networkInfo } = useActiveWeb3React() + if (currencyIdA?.toLowerCase() === currencyIdB?.toLowerCase()) { + return + } + + // Support old format + const match = currencyIdA?.match(OLD_PATH_STRUCTURE) + if (match?.length && !currencyIdB) { + return + } + + return +} diff --git a/src/pages/CreatePool/RedirectDuplicateTokenIds.tsx b/src/pages/CreatePool/RedirectDuplicateTokenIds.tsx deleted file mode 100644 index fc7fb9728f..0000000000 --- a/src/pages/CreatePool/RedirectDuplicateTokenIds.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Navigate, useParams } from 'react-router-dom' - -import { APP_PATHS } from 'constants/index' - -import CreatePool from './index' - -export default function RedirectDuplicateTokenIds() { - const { currencyIdA, currencyIdB } = useParams() - if (currencyIdA?.toLowerCase() === currencyIdB?.toLowerCase()) { - return - } - return -} diff --git a/src/pages/CreatePool/RedirectOldCreatePoolPathStructure.tsx b/src/pages/CreatePool/RedirectOldCreatePoolPathStructure.tsx deleted file mode 100644 index e0210f9470..0000000000 --- a/src/pages/CreatePool/RedirectOldCreatePoolPathStructure.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Navigate, useParams } from 'react-router-dom' - -import CreatePool from './index' - -const OLD_PATH_STRUCTURE = /^(0x[a-fA-F0-9]{40})-(0x[a-fA-F0-9]{40})$/ -export default function RedirectOldCreatePoolPathStructure() { - const { currencyIdA } = useParams() - - const match = currencyIdA?.match(OLD_PATH_STRUCTURE) - if (match?.length) { - return - } - - return -} diff --git a/src/pages/CreatePool/index.tsx b/src/pages/CreatePool/index.tsx index 0f1602bf31..61ef21862a 100644 --- a/src/pages/CreatePool/index.tsx +++ b/src/pages/CreatePool/index.tsx @@ -349,32 +349,36 @@ export default function CreatePool() { // support WETH if (isWrappedTokenInPool(currencyA, selectedCurrencyA)) { - navigate(`/create/${newCurrencyIdA}/${currencyIdB}`) + navigate(`/${networkInfo.route}${APP_PATHS.CLASSIC_CREATE_POOL}/${newCurrencyIdA}/${currencyIdB}`) } else if (newCurrencyIdA === currencyIdB) { - navigate(`/create/${currencyIdB}/${currencyIdA}`) + navigate(`/${networkInfo.route}${APP_PATHS.CLASSIC_CREATE_POOL}/${currencyIdB}/${currencyIdA}`) } else { - navigate(`/create/${newCurrencyIdA}/${currencyIdB}`) + navigate(`/${networkInfo.route}${APP_PATHS.CLASSIC_CREATE_POOL}/${newCurrencyIdA}/${currencyIdB}`) } }, - [currencyIdB, navigate, currencyIdA, isWrappedTokenInPool, currencyA, chainId], + [chainId, isWrappedTokenInPool, currencyA, currencyIdB, navigate, networkInfo.route, currencyIdA], ) const handleCurrencyBSelect = useCallback( (selectedCurrencyB: Currency) => { const newCurrencyIdB = currencyId(selectedCurrencyB, chainId) if (isWrappedTokenInPool(currencyB, selectedCurrencyB)) { - navigate(`/create/${currencyIdA}/${newCurrencyIdB}`) + navigate(`/${networkInfo.route}${APP_PATHS.CLASSIC_CREATE_POOL}/${currencyIdA}/${newCurrencyIdB}`) } else if (newCurrencyIdB === currencyIdA) { if (currencyIdB) { - navigate(`/create/${currencyIdB}/${currencyIdA}`) + navigate(`/${networkInfo.route}${APP_PATHS.CLASSIC_CREATE_POOL}/${currencyIdB}/${currencyIdA}`) } else { - navigate(`/create/${newCurrencyIdB}`) + navigate(`/${networkInfo.route}${APP_PATHS.CLASSIC_CREATE_POOL}/${newCurrencyIdB}`) } } else { - navigate(`/create/${currencyIdA ? currencyIdA : 'ETH'}/${newCurrencyIdB}`) + navigate( + `/${networkInfo.route}${APP_PATHS.CLASSIC_CREATE_POOL}/${ + currencyIdA ? currencyIdA : 'ETH' + }/${newCurrencyIdB}`, + ) } }, - [currencyIdA, navigate, currencyIdB, isWrappedTokenInPool, currencyB, chainId], + [chainId, isWrappedTokenInPool, currencyB, currencyIdA, navigate, networkInfo.route, currencyIdB], ) const handleDismissConfirmation = useCallback(() => { @@ -461,7 +465,7 @@ export default function CreatePool() { Go to unamplified pool diff --git a/src/pages/Farm/redirect.tsx b/src/pages/Farm/redirect.tsx deleted file mode 100644 index 241da3b4ce..0000000000 --- a/src/pages/Farm/redirect.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Navigate, useLocation } from 'react-router-dom' - -import { APP_PATHS } from 'constants/index' -import { useActiveWeb3React } from 'hooks' - -export function RedirectPathToFarmNetwork() { - const location = useLocation() - const { networkInfo } = useActiveWeb3React() - return -} diff --git a/src/pages/IncreaseLiquidity/index.tsx b/src/pages/IncreaseLiquidity/index.tsx index 4cbb4269e2..79af98ae46 100644 --- a/src/pages/IncreaseLiquidity/index.tsx +++ b/src/pages/IncreaseLiquidity/index.tsx @@ -602,7 +602,7 @@ export default function IncreaseLiquidity() { onSwitchCurrency={() => { chainId && navigate( - `/elastic/increase/${ + `/${networkInfo.route}${APP_PATHS.ELASTIC_INCREASE_LIQ}/${ baseCurrencyIsETHER ? WETH[chainId].address : NativeCurrencies[chainId].symbol }/${currencyIdB}/${feeAmount}/${tokenId}`, { @@ -641,7 +641,7 @@ export default function IncreaseLiquidity() { onSwitchCurrency={() => { chainId && navigate( - `/elastic/increase/${currencyIdA}/${ + `/${networkInfo.route}${APP_PATHS.ELASTIC_INCREASE_LIQ}/${currencyIdA}/${ quoteCurrencyIsETHER ? WETH[chainId].address : NativeCurrencies[chainId].symbol }/${feeAmount}/${tokenId}`, { replace: true }, diff --git a/src/pages/Pool/redirect.tsx b/src/pages/Pool/redirect.tsx deleted file mode 100644 index 9f8e2123c7..0000000000 --- a/src/pages/Pool/redirect.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Navigate, useLocation } from 'react-router-dom' - -import { APP_PATHS } from 'constants/index' -import { useActiveWeb3React } from 'hooks' - -export function RedirectPathToMyPoolsNetwork() { - const location = useLocation() - const { networkInfo } = useActiveWeb3React() - return -} diff --git a/src/pages/Pools/index.tsx b/src/pages/Pools/index.tsx index d32462cd62..4b61ca27b9 100644 --- a/src/pages/Pools/index.tsx +++ b/src/pages/Pools/index.tsx @@ -154,16 +154,15 @@ const Pools = () => { mixpanelHandler(MIXPANEL_TYPE.ELASTIC_CREATE_POOL_INITIATED) } - const url = - tab === VERSION.CLASSIC - ? `/create/${currencyIdA === '' ? undefined : currencyIdA}/${currencyIdB === '' ? undefined : currencyIdB}` - : `${APP_PATHS.ELASTIC_CREATE_POOL}${ - currencyIdA && currencyIdB - ? `/${currencyIdA}/${currencyIdB}` - : currencyIdA || currencyIdB - ? `/${currencyIdA || currencyIdB}` - : '' - }` + const path = tab === VERSION.CLASSIC ? APP_PATHS.CLASSIC_CREATE_POOL : APP_PATHS.ELASTIC_CREATE_POOL + let url = `/${networkInfo.route}${path}` + + if (currencyIdA) { + url += `/${currencyIdA}` + if (currencyIdB) { + url += `/${currencyIdB}` + } + } navigate(url) } diff --git a/src/pages/Pools/redirect.tsx b/src/pages/Pools/redirect.tsx deleted file mode 100644 index acae9a4fcc..0000000000 --- a/src/pages/Pools/redirect.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Navigate, useLocation } from 'react-router-dom' - -import { APP_PATHS } from 'constants/index' -import { useActiveWeb3React } from 'hooks' - -export function RedirectPathToPoolsNetwork() { - const location = useLocation() - const { networkInfo } = useActiveWeb3React() - return -} diff --git a/src/pages/ProAmmPool/PositionListItem.tsx b/src/pages/ProAmmPool/PositionListItem.tsx index 5b80c43088..fbdc5b550d 100644 --- a/src/pages/ProAmmPool/PositionListItem.tsx +++ b/src/pages/ProAmmPool/PositionListItem.tsx @@ -417,7 +417,7 @@ function PositionListItem({ { mixpanelHandler(MIXPANEL_TYPE.ELASTIC_REMOVE_LIQUIDITY_INITIATED, { token_1: token0?.symbol || '', @@ -440,10 +440,10 @@ function PositionListItem({ fontSize: '14px', }} as={Link} - to={`/elastic/increase/${currencyId(currency0, chainId)}/${currencyId( - currency1, + to={`/${networkInfo.route}${APP_PATHS.ELASTIC_INCREASE_LIQ}/${currencyId( + currency0, chainId, - )}/${feeAmount}/${positionDetails.tokenId}`} + )}/${currencyId(currency1, chainId)}/${feeAmount}/${positionDetails.tokenId}`} onClick={() => { mixpanelHandler(MIXPANEL_TYPE.ELASTIC_INCREASE_LIQUIDITY_INITIATED, { token_1: token0?.symbol || '', diff --git a/src/pages/ProAmmPools/CardItem.tsx b/src/pages/ProAmmPools/CardItem.tsx index 6b44109c64..d446389a06 100644 --- a/src/pages/ProAmmPools/CardItem.tsx +++ b/src/pages/ProAmmPools/CardItem.tsx @@ -107,7 +107,7 @@ export default function ProAmmPoolCardItem({ pool, onShared, userPositions }: Li return ( { - const url = `${APP_PATHS.ELASTIC_CREATE_POOL}/${token0Slug}/${token1Slug}/${pool.feeTier}` + const url = `/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${token0Slug}/${token1Slug}/${pool.feeTier}` navigate(url) }} > diff --git a/src/pages/ProAmmPools/ListItem.tsx b/src/pages/ProAmmPools/ListItem.tsx index 56ec34e19c..61d1935c95 100644 --- a/src/pages/ProAmmPools/ListItem.tsx +++ b/src/pages/ProAmmPools/ListItem.tsx @@ -161,7 +161,7 @@ export default function ProAmmPoolListItem({ pool, onShared, userPositions }: Li
{ e.stopPropagation() - const url = `${APP_PATHS.ELASTIC_CREATE_POOL}/${token0Slug}/${token1Slug}/${pool.feeTier}` + const url = `/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${token0Slug}/${token1Slug}/${pool.feeTier}` mixpanelHandler(MIXPANEL_TYPE.ELASTIC_ADD_LIQUIDITY_IN_LIST_INITIATED, { token_1: token0Symbol, token_2: token1Symbol, diff --git a/src/pages/RemoveLiquidity/TokenPair.tsx b/src/pages/RemoveLiquidity/TokenPair.tsx index fe67eb9399..4770c8037b 100644 --- a/src/pages/RemoveLiquidity/TokenPair.tsx +++ b/src/pages/RemoveLiquidity/TokenPair.tsx @@ -24,7 +24,7 @@ import TransactionConfirmationModal, { ConfirmationModalContent, TransactionErrorContent, } from 'components/TransactionConfirmationModal' -import { EIP712Domain } from 'constants/index' +import { APP_PATHS, EIP712Domain } from 'constants/index' import { EVMNetworkInfo } from 'constants/networks/type' import { NativeCurrencies } from 'constants/tokens' import { useActiveWeb3React, useWeb3React } from 'hooks' @@ -660,7 +660,7 @@ export default function TokenPair({ {pairAddress && chainId && (currencyAIsETHER || currencyAIsWETH) && ( @@ -686,7 +686,7 @@ export default function TokenPair({ {pairAddress && chainId && (currencyBIsWETH || currencyBIsETHER) && ( diff --git a/src/pages/RemoveLiquidity/ZapOut.tsx b/src/pages/RemoveLiquidity/ZapOut.tsx index 25727b8c8b..fbe0d1ea79 100644 --- a/src/pages/RemoveLiquidity/ZapOut.tsx +++ b/src/pages/RemoveLiquidity/ZapOut.tsx @@ -35,7 +35,7 @@ import TransactionConfirmationModal, { } from 'components/TransactionConfirmationModal' import ZapError from 'components/ZapError' import FormattedPriceImpact from 'components/swapv2/FormattedPriceImpact' -import { EIP712Domain } from 'constants/index' +import { APP_PATHS, EIP712Domain } from 'constants/index' import { EVMNetworkInfo } from 'constants/networks/type' import { NativeCurrencies } from 'constants/tokens' import { useActiveWeb3React, useWeb3React } from 'hooks' @@ -724,12 +724,15 @@ export default function ZapOut({ replace to={ independentTokenField === Field.CURRENCY_A - ? `/remove/${ + ? `/${networkInfo.route}${APP_PATHS.CLASSIC_REMOVE_POOL}/${ selectedCurrencyIsETHER ? currencyId(WETH[chainId], chainId) : currencyId(NativeCurrencies[chainId], chainId) }/${currencyId(currencies[dependentTokenField] as Currency, chainId)}/${pairAddress}` - : `/remove/${currencyId(currencies[dependentTokenField] as Currency, chainId)}/${ + : `/${networkInfo.route}${APP_PATHS.CLASSIC_REMOVE_POOL}/${currencyId( + currencies[dependentTokenField] as Currency, + chainId, + )}/${ selectedCurrencyIsETHER ? currencyId(WETH[chainId], chainId) : currencyId(NativeCurrencies[chainId], chainId) diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx index 01af26fbd9..724edb4df9 100644 --- a/src/pages/RemoveLiquidity/index.tsx +++ b/src/pages/RemoveLiquidity/index.tsx @@ -19,6 +19,7 @@ import { Container, LiquidityProviderModeWrapper, PageWrapper, PoolName, TopBar export default function RemoveLiquidity() { const { currencyIdA = '', currencyIdB = '', pairAddress = '' } = useParams() + const currencyA = useCurrency(currencyIdA) ?? undefined const currencyB = useCurrency(currencyIdB) ?? undefined const { chainId, isEVM } = useActiveWeb3React() diff --git a/yarn.lock b/yarn.lock index 57ed56f10d..24b355fb45 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3047,10 +3047,10 @@ conventional-recommended-bump "^6.1.0" semver "7.3.8" -"@remix-run/router@1.0.5": - version "1.0.5" - resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.5.tgz#d5c65626add4c3c185a89aa5bd38b1e42daec075" - integrity sha512-my0Mycd+jruq/1lQuO5LBB6WTlL/e8DTCYWp44DfMTDcXz8DcTlgF0ISaLsGewt+ctHN+yA8xMq3q/N7uWJPug== +"@remix-run/router@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.1.0.tgz#b48db8148c8a888e50580a8152b6f68161c49406" + integrity sha512-rGl+jH/7x1KBCQScz9p54p0dtPLNeKGb3e0wD2H5/oZj41bwQUnXdzbj2TbUAFhvD7cp9EyEQA4dEgpUFa1O7Q== "@rollup/pluginutils@^5.0.2": version "5.0.2" @@ -14700,20 +14700,20 @@ react-rnd@10.4.1: react-draggable "4.4.5" tslib "2.3.1" -react-router-dom@^6.4.3: - version "6.4.5" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.5.tgz#4fdb12efef4f3848c693a76afbeaed1f6ca02047" - integrity sha512-a7HsgikBR0wNfroBHcZUCd9+mLRqZS8R5U1Z1mzLWxFXEkUT3vR1XXmSIVoVpxVX8Bar0nQYYYc9Yipq8dWwAA== +react-router-dom@6.5.0: + version "6.5.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.5.0.tgz#3970bdcaa7c710a6e0b478a833ba0b4b8ae61a6f" + integrity sha512-/XzRc5fq80gW1ctiIGilyKFZC/j4kfe75uivMsTChFbkvrK4ZrF3P3cGIc1f/SSkQ4JiJozPrf+AwUHHWVehVg== dependencies: - "@remix-run/router" "1.0.5" - react-router "6.4.5" + "@remix-run/router" "1.1.0" + react-router "6.5.0" -react-router@6.4.5: - version "6.4.5" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.5.tgz#73f382af2c8b9a86d74e761a7c5fc3ce7cb0024d" - integrity sha512-1RQJ8bM70YEumHIlNUYc6mFfUDoWa5EgPDenK/fq0bxD8DYpQUi/S6Zoft+9DBrh2xmtg92N5HMAJgGWDhKJ5Q== +react-router@6.5.0: + version "6.5.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.5.0.tgz#b53f15543a60750c925609d2e38037ac5aed6dd3" + integrity sha512-fqqUSU0NC0tSX0sZbyuxzuAzvGqbjiZItBQnyicWlOUmzhAU8YuLgRbaCL2hf3sJdtRy4LP/WBrWtARkMvdGPQ== dependencies: - "@remix-run/router" "1.0.5" + "@remix-run/router" "1.1.0" react-side-effect@^2.1.0: version "2.1.2"