refactor: update url when remove add liquidity or swap on analytics p…

…age (#351) * chore: fix error overlay * feat: insert network route to pool/swap urls * chore: remove resolution
KyberNetwork · Jun 23, 2023 · 96690c0 · 96690c0
1 parent 1c3d6bb
commit 96690c0
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -97,4 +97,4 @@
     "deepmerge": "^4.2.2",
     "swr": "^1.0.1"
   }
-}
+}
diff --git a/src/components/PoolList/ListItem.js b/src/components/PoolList/ListItem.js
@@ -9,7 +9,7 @@ import Link, { CustomLink } from '../Link'
 import { MouseoverTooltip } from '../Tooltip'
 import CopyHelper from '../Copy'
 import { TYPE } from '../../Theme'
-import { shortenAddress, formattedNum } from '../../utils'
+import { shortenAddress, formattedNum, getPoolLink } from '../../utils'
 import { MAX_ALLOW_APY } from '../../constants'
 import useTheme from '../../hooks/useTheme'
 import { useNetworksInfo } from '../../contexts/NetworkInfo'
@@ -235,10 +235,7 @@ const ListItem = ({ pool, oddRow }) => {
       </DataText>
       <DataText grid-area='add_liquidity' alignItems='flex-end'>
         {
-          <Link
-            href={`${networkInfo.dmmSwapUrl}add/${pool.token0.id}/${pool.token1.id}/${pool.id}?networkId=${networkInfo.chainId}`}
-            target='_blank'
-          >
+          <Link href={getPoolLink(pool.token0.id, networkInfo, pool.token1.id, false, pool.id)} target='_blank'>
             <ButtonLight>+ Add</ButtonLight>
           </Link>
         }

diff --git a/src/components/SideNav/index.js b/src/components/SideNav/index.js
@@ -15,7 +15,7 @@ import { ApplicationModal, useModalOpen, useSessionStart } from '../../contexts/
 import { useDarkModeManager } from '../../contexts/LocalStorage'
 import SocialLinks from '../SocialLinks'
 import ThemeToggle from '../ThemeToggle'
-import { addNetworkIdQueryString } from '../../utils'
+import { constructSwapURL } from '../../utils'
 import Wallet from '../Icons/Wallet'
 import { Flex, Text } from 'rebass'
 import { useNetworksInfo } from '../../contexts/NetworkInfo'
@@ -181,7 +181,7 @@ function SideNav() {
 
                 <Divider />
 
-                <Link href={addNetworkIdQueryString(networksInfo[0].dmmSwapUrl, networksInfo[0])} external>
+                <Link href={constructSwapURL(networksInfo[0])} external>
                   <Option>
                     <Repeat size={16} style={{ marginRight: '.75rem' }} />
                     Swap

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -46,75 +46,50 @@ export function getTimeframe(timeWindow) {
   return utcStartTime
 }
 
-export function addNetworkIdQueryString(url, networkInfo) {
-  if (url.includes('?')) {
-    return `${url}&networkId=${networkInfo.chainId}`
-  }
+export function constructSwapURL(networkInfo) {
+  const chainRoute = networkInfo.urlKey
+  const swapUrl = networkInfo.dmmSwapUrl
 
-  return `${url}?networkId=${networkInfo.chainId}`
+  return `${swapUrl}swap/${chainRoute}`
 }
 
 export function getPoolLink(token0Address, networkInfo, token1Address = null, remove = false, poolAddress = null) {
   const nativeTokenSymbol = networkInfo.nativeTokenSymbol
+  const action = remove ? 'remove' : 'add'
+  const chainRoute = networkInfo.urlKey
+  const swapUrl = networkInfo.dmmSwapUrl
+
+  const token0 = token0Address?.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token0Address
+  const token1 = token1Address?.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token1Address
 
   if (poolAddress) {
     if (!token1Address) {
-      return addNetworkIdQueryString(
-        networkInfo.dmmSwapUrl +
-          (remove ? `remove` : `add`) +
-          `/${
-            token0Address.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token0Address
-          }/${nativeTokenSymbol}/${poolAddress}`,
-        networkInfo
-      )
-    } else {
-      return addNetworkIdQueryString(
-        networkInfo.dmmSwapUrl +
-          (remove ? `remove` : `add`) +
-          `/${token0Address.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token0Address}/${
-            token1Address.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token1Address
-          }/${poolAddress}`,
-        networkInfo
-      )
+      return `${swapUrl}${chainRoute}/${action}/${token0}/${nativeTokenSymbol}/${poolAddress}`
     }
+
+    return `${swapUrl}${chainRoute}/${action}/${token0}/${token1}/${poolAddress}`
   }
 
   if (!token1Address) {
-    return addNetworkIdQueryString(
-      networkInfo.dmmSwapUrl +
-        (remove ? `remove` : `add`) +
-        `/${
-          token0Address.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token0Address
-        }/${nativeTokenSymbol}`,
-      networkInfo
-    )
-  } else {
-    return addNetworkIdQueryString(
-      networkInfo.dmmSwapUrl +
-        (remove ? `remove` : `add`) +
-        `/${token0Address.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token0Address}/${
-          token1Address.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token1Address
-        }`,
-      networkInfo
-    )
+    return `${swapUrl}${chainRoute}/${action}/${token0}/${nativeTokenSymbol}`
   }
+
+  return `${swapUrl}${chainRoute}/${action}/${token0}/${token1}`
 }
 
 export function getSwapLink(token0Address, networkInfo, token1Address = null) {
   const nativeTokenSymbol = networkInfo.nativeTokenSymbol
+  const chainRoute = networkInfo.urlKey
+  const swapUrl = networkInfo.dmmSwapUrl
+
+  const tokenIn = token0Address?.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token0Address
+  const tokenOut = token1Address?.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token1Address
 
   if (!token1Address) {
-    return addNetworkIdQueryString(`${networkInfo.dmmSwapUrl}swap?inputCurrency=${token0Address}`, networkInfo)
-  } else {
-    return addNetworkIdQueryString(
-      `${networkInfo.dmmSwapUrl}swap?inputCurrency=${
-        token0Address.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token0Address
-      }&outputCurrency=${
-        token1Address.toLowerCase() === networkInfo.wethAddress.toLowerCase() ? nativeTokenSymbol : token1Address
-      }`,
-      networkInfo
-    )
+    return `${swapUrl}swap/${chainRoute}?inputCurrency=${token0Address}`
   }
+
+  return `${swapUrl}swap/${chainRoute}?inputCurrency=${tokenIn}&outputCurrency=${tokenOut}`
 }
 
 export function localNumber(val) {

diff --git a/yarn.lock b/yarn.lock
@@ -11051,9 +11051,9 @@ react-dom@^16.9.0:
     scheduler "^0.18.0"
 
 react-error-overlay@^6.0.9:
-  version "6.0.10"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"
-  integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
+  integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
 react-fast-compare@^2.0.4:
   version "2.0.4"