feat: insert network route to Classic/Elastic pool urls (#1888)

* insert network route to add elastic liquidity url * insert network route to classic add liquidity url * move pools routes * group My Pools routes * group Farms routes * group Classic Create Pool routes * Classic Remove Pool routes * Elastic Remove Pool routes * Elastic Increase Liquidity routes * move pools routes * Classic Add Liquidity routes * group all prefixed routes and use optional params * check Elastic Create Pool routes * handle currency params for Swap, Limit pages * remove unused codes * block Solana routes to pools, farms * chore: update yarn lock * refactor: remove regex, use simple split to get tokens from url
KyberNetwork · Jun 22, 2023 · 458fedb · 458fedb
1 parent a7c0f14
commit 458fedb
Show file tree

Hide file tree

Showing 31 changed files with 306 additions and 253 deletions.
diff --git 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
@@ -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) => {
         )}
       </ButtonOutlined>
       <ButtonLight
-        onClick={() => {
-          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}`}
       >
         <Plus size={16} />
         <Text marginLeft="4px" fontSize="12px">

diff --git 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)
           }}
         >
           <Plus size={16} color={theme.primary} />
@@ -208,7 +209,10 @@ const ListItem = ({ poolData, userLiquidityPositions }: ListItemGroupProps) => {
           <ButtonEmpty
             padding="0"
             as={Link}
-            to={`/remove/${currencyId(currency0, chainId)}/${currencyId(currency1, chainId)}/${poolData.id}`}
+            to={`/${networkInfo.route}${APP_PATHS.CLASSIC_REMOVE_POOL}/${currencyId(currency0, chainId)}/${currencyId(
+              currency1,
+              chainId,
+            )}/${poolData.id}`}
             style={{
               background: rgba(theme.red, 0.2),
               minWidth: '28px',

diff --git a/src/components/PositionCard/index.tsx b/src/components/PositionCard/index.tsx
@@ -720,7 +720,10 @@ export default function FullPositionCard({
                 fontSize: '14px',
               }}
               as={Link}
-              to={`/remove/${currencyId(currency0, chainId)}/${currencyId(currency1, chainId)}/${pair.address}`}
+              to={`/${networkInfo.route}${APP_PATHS.CLASSIC_REMOVE_POOL}/${currencyId(currency0, chainId)}/${currencyId(
+                currency1,
+                chainId,
+              )}/${pair.address}`}
             >
               <Text width="max-content">
                 <Trans>Remove Liquidity</Trans>
@@ -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}`}
           >
             <Text width="max-content">
               <Trans>Add Liquidity</Trans>

diff --git 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 (
     <Wrapper key={pool.address}>
       <Link
-        to={`${APP_PATHS.ELASTIC_CREATE_POOL}/${token0Slug}/${token1Slug}/${pool.feeTier}`}
+        to={`/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${token0Slug}/${token1Slug}/${pool.feeTier}`}
         style={{
           textDecoration: 'none',
         }}

diff --git a/src/components/YieldPools/ElasticFarmGroup/FarmCard.tsx b/src/components/YieldPools/ElasticFarmGroup/FarmCard.tsx
@@ -72,7 +72,7 @@ const FarmCard = ({
   targetPercent,
   targetPercentByNFT,
 }: Props) => {
-  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 = ({
             <Flex alignItems="center">
               <DoubleCurrencyLogo currency0={pool.token0} currency1={pool.token1} size={20} />
               <Link
-                to={addliquidityElasticPool}
+                to={addLiquidityElasticPoolUrl}
                 style={{
                   textDecoration: 'none',
                 }}
@@ -362,7 +362,7 @@ const FarmCard = ({
           <Flex alignItems="center" height="36px">
             <DoubleCurrencyLogo currency0={pool.token0} currency1={pool.token1} size={20} />
             <Link
-              to={`${APP_PATHS.ELASTIC_CREATE_POOL}/${
+              to={`/${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}`}
               style={{

diff --git a/src/components/YieldPools/ElasticFarmGroup/Row.tsx b/src/components/YieldPools/ElasticFarmGroup/Row.tsx
@@ -65,7 +65,7 @@ const Row = ({
   onHarvest: () => 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 = ({
           <Flex alignItems="center">
             <DoubleCurrencyLogo currency0={farmingPool.token0} currency1={farmingPool.token1} />
             <Link
-              to={`${APP_PATHS.ELASTIC_CREATE_POOL}/${
+              to={`/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${
                 farmingPool.token0.isNative ? farmingPool.token0.symbol : farmingPool.token0.address
               }/${farmingPool.token1.isNative ? farmingPool.token1.symbol : farmingPool.token1.address}/${
                 farmingPool.pool.fee

diff --git a/src/components/YieldPools/ListItem.tsx b/src/components/YieldPools/ListItem.tsx
@@ -23,7 +23,7 @@ import Harvest from 'components/Icons/Harvest'
 import Modal from 'components/Modal'
 import Row, { RowBetween, RowFit } from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
-import { DMM_ANALYTICS_URL, MAX_ALLOW_APY } from 'constants/index'
+import { APP_PATHS, DMM_ANALYTICS_URL, MAX_ALLOW_APY } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { useToken } from 'hooks/Tokens'
 import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback'
@@ -67,7 +67,7 @@ interface ListItemProps {
 }
 
 const ListItem = ({ farm }: ListItemProps) => {
-  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) => {
               <Row>
                 <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={16} />
                 <Link
-                  to={`/add/${currencyIdFromAddress(farm.token0?.id, chainId)}/${currencyIdFromAddress(
-                    farm.token1?.id,
+                  to={`/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyIdFromAddress(
+                    farm.token0?.id,
                     chainId,
-                  )}/${farm.id}`}
+                  )}/${currencyIdFromAddress(farm.token1?.id, chainId)}/${farm.id}`}
                   style={{ textDecoration: 'none', marginRight: '6px' }}
                 >
                   {farm.token0?.symbol} - {farm.token1?.symbol}
@@ -465,9 +465,18 @@ const ListItem = ({ farm }: ListItemProps) => {
         <FarmCard joined={!!userStakedBalanceUSD}>
           <Row marginBottom="12px">
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
-            <Text fontSize="16px" fontWeight="500" marginRight="4px" color={theme.green}>
-              {currency0?.symbol} - {currency1?.symbol}
-            </Text>
+            <Link
+              to={`/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyIdFromAddress(
+                farm.token0?.id,
+                chainId,
+              )}/${currencyIdFromAddress(farm.token1?.id, chainId)}/${farm.id}`}
+              style={{ textDecoration: 'none', marginRight: '6px' }}
+            >
+              <Text fontSize="16px" fontWeight="500" marginRight="4px" color={theme.green}>
+                {currency0?.symbol} - {currency1?.symbol}
+              </Text>
+            </Link>
+
             <Text
               fontSize={12}
               lineHeight="16px"
@@ -782,10 +791,10 @@ const ListItem = ({ farm }: ListItemProps) => {
                   </GetLP>
                 </ExternalLink>
                 <Link
-                  to={`/add/${currencyIdFromAddress(farm.token0?.id, chainId)}/${currencyIdFromAddress(
-                    farm.token1?.id,
+                  to={`/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyIdFromAddress(
+                    farm.token0?.id,
                     chainId,
-                  )}/${farm.id}`}
+                  )}/${currencyIdFromAddress(farm.token1?.id, chainId)}/${farm.id}`}
                   style={{ textDecoration: 'none' }}
                 >
                   <GetLP style={{ textAlign: 'right' }}>

diff --git 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
@@ -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 = ({
                     <StyledInternalLink
                       onClick={handleDismissConfirmation}
                       id="unamplified-pool-link"
-                      to={`/add/${currencyIdA}/${currencyIdB}/${unAmplifiedPairAddress}`}
+                      to={`/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyIdA}/${currencyIdB}/${unAmplifiedPairAddress}`}
                     >
                       Go to unamplified pool
                     </StyledInternalLink>
@@ -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) && (
                   <StyledInternalLink
                     replace
-                    to={`/add/${currencyIdA}/${
+                    to={`/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyIdA}/${
                       currencyBIsETHER ? WETH[chainId].address : NativeCurrencies[chainId].symbol
                     }/${pairAddress}`}
                   >

diff --git 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 = ({
                     <StyledInternalLink
                       onClick={handleDismissConfirmation}
                       id="unamplified-pool-link"
-                      to={`/add/${currencyIdA}/${currencyIdB}/${unAmplifiedPairAddress}`}
+                      to={`/${networkInfo.route}${APP_PATHS.CLASSIC_ADD_LIQ}/${currencyIdA}/${currencyIdB}/${unAmplifiedPairAddress}`}
                     >
                       Go to unamplified pool
                     </StyledInternalLink>
@@ -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
@@ -48,6 +48,7 @@ export default function AddLiquidity() {
   }, [])
 
   if (!isEVM) return <Navigate to="/" />
+
   return (
     <>
       <PageWrapper>

diff --git a/src/pages/AddLiquidityV2/redirects.tsx → ...LiquidityV2/RedirectElasticCreatePool.tsx b/src/pages/AddLiquidityV2/redirects.tsx → ...LiquidityV2/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 <Navigate to={`${APP_PATHS.ELASTIC_CREATE_POOL}/${currencyIdA}`} replace />
+    return <Navigate to={`/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${currencyIdA}`} replace />
   }
+
   return <ProAmmAddLiquidity />
 }