fix: bug select imported token that has a similar symbol with whiteli…

…sted token (#2549) * fix bug select imported token with similar name to whitelisted token * Config sentry: add replayIntegration
KyberNetwork · Oct 18, 2024 · 8c80178 · 8c80178
1 parent bb6469f
commit 8c80178
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 134 deletions.
diff --git a/package.json b/package.json
@@ -59,8 +59,7 @@
     "@reach/dialog": "^0.17.0",
     "@reach/portal": "^0.17.0",
     "@reduxjs/toolkit": "1.9.3",
-    "@sentry/react": "^7.18.0",
-    "@sentry/tracing": "^7.18.0",
+    "@sentry/react": "^8.34.0",
     "@tanstack/react-query": "^5.52.1",
     "@use-gesture/react": "^10.2.27",
     "@zkmelabs/widget": "^0.1.3",

diff --git a/src/components/swapv2/LimitOrder/LimitOrderForm.tsx b/src/components/swapv2/LimitOrder/LimitOrderForm.tsx
@@ -96,7 +96,6 @@ type Props = {
   defaultOutputAmount?: string
   defaultActiveMakingAmount?: string
   defaultExpire?: Date
-  setIsSelectCurrencyManual?: (val: boolean) => void
   note?: string
   orderInfo?: LimitOrder
   flowState: TransactionFlowState
@@ -146,7 +145,6 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
     defaultActiveMakingAmount = '',
     defaultExpire,
     defaultRate = { rate: '', invertRate: '', invert: false },
-    setIsSelectCurrencyManual,
     note = '',
     orderInfo,
     flowState,
@@ -341,10 +339,9 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
         return
       }
       setCurrencyIn(currency)
-      setIsSelectCurrencyManual?.(true)
       resetRate && setRateInfo(rateInfo => ({ ...rateInfo, invertRate: '', rate: '', rateFraction: undefined }))
     },
-    [currencyOut, setCurrencyIn, setIsSelectCurrencyManual, switchCurrency],
+    [currencyOut, setCurrencyIn, switchCurrency],
   )
 
   const switchToWeth = useCallback(() => {
@@ -359,7 +356,6 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
       return
     }
     setCurrencyOut(currency)
-    setIsSelectCurrencyManual?.(true)
     setRateInfo({ ...rateInfo, invertRate: '', rate: '', rateFraction: undefined })
   }
 
@@ -368,7 +364,6 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
     if (isEdit) return
     setRotate(prev => !prev)
     switchCurrency()
-    setIsSelectCurrencyManual?.(true)
   }
 
   const parseInputAmount = tryParseAmount(inputAmount, currencyIn ?? undefined)

diff --git a/src/components/swapv2/LimitOrder/index.tsx b/src/components/swapv2/LimitOrder/index.tsx
@@ -4,24 +4,14 @@ import { memo, useState } from 'react'
 import { TutorialKeys } from 'components/Tutorial/TutorialSwap'
 import Tutorial from 'components/swapv2/LimitOrder/Tutorial'
 import { TRANSACTION_STATE_DEFAULT } from 'constants/index'
-import useSyncTokenSymbolToUrl from 'hooks/useSyncTokenSymbolToUrl'
-import { useLimitActionHandlers, useLimitState } from 'state/limit/hooks'
+import { useLimitState } from 'state/limit/hooks'
 import { TransactionFlowState } from 'types/TransactionFlowState'
 
 import LimitOrderForm from './LimitOrderForm'
 
-type Props = {
-  setIsSelectCurrencyManual: (v: boolean) => void
-  isSelectCurrencyManual: boolean
-}
-
-function LimitOrderComp({ setIsSelectCurrencyManual, isSelectCurrencyManual }: Props) {
-  const { onSelectPair } = useLimitActionHandlers()
-
+function LimitOrderComp() {
   const { currencyIn, currencyOut } = useLimitState()
 
-  useSyncTokenSymbolToUrl(currencyIn, currencyOut, onSelectPair, isSelectCurrencyManual)
-
   const [showTutorial, setShowTutorial] = useState(!localStorage.getItem(TutorialKeys.SHOWED_LO_GUIDE))
 
   // modal and loading
@@ -46,7 +36,6 @@ function LimitOrderComp({ setIsSelectCurrencyManual, isSelectCurrencyManual }: P
         setFlowState={setFlowState}
         currencyIn={currencyIn}
         currencyOut={currencyOut}
-        setIsSelectCurrencyManual={setIsSelectCurrencyManual}
         note={
           currencyOut?.isNative ? t`Note: Once your order is filled, you will receive ${name} (${symbol})` : undefined
         }

diff --git a/src/hooks/useSyncTokenSymbolToUrl.ts b/src/hooks/useSyncTokenSymbolToUrl.ts
@@ -1,17 +1,14 @@
-import { ChainId, Currency } from '@kyberswap/ks-sdk-core'
+import { Currency } from '@kyberswap/ks-sdk-core'
 import { stringify } from 'querystring'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { Params, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useCallback, useEffect } from 'react'
+import { Params, useLocation, useNavigate } from 'react-router-dom'
 
 import { APP_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
-import { NativeCurrencies } from 'constants/tokens'
 import { useActiveWeb3React } from 'hooks'
-import { filterTokensWithExactKeyword } from 'utils/filtering'
 import { convertToSlug, getSymbolSlug } from 'utils/string'
-import { convertSymbol } from 'utils/tokenInfo'
 
-import { useAllTokens, useIsLoadedTokenDefault } from './Tokens'
+import { useIsLoadedTokenDefault } from './Tokens'
 import useParsedQueryString from './useParsedQueryString'
 
 type TokenSymbolParams = {
@@ -43,16 +40,11 @@ export default function useSyncTokenSymbolToUrl(
   isSelectCurrencyManual: boolean,
   disabled = false,
 ) {
-  const params = useParams<TokenSymbolParams>()
-  const { fromCurrency, toCurrency, network } = getUrlMatchParams(params)
-
   const { chainId } = useActiveWeb3React()
   const navigate = useNavigate()
   const qs = useParsedQueryString()
   const { pathname } = useLocation()
   const isLoadedTokenDefault = useIsLoadedTokenDefault()
-  const allTokens = useAllTokens()
-  const firstTokenChainId = useMemo(() => Object.values(allTokens)[0]?.chainId, [allTokens])
 
   const currentPath = [APP_PATHS.SWAP, APP_PATHS.LIMIT].find(path => pathname.startsWith(path)) || APP_PATHS.SWAP
 
@@ -64,17 +56,6 @@ export default function useSyncTokenSymbolToUrl(
     [navigate, qs, currentPath],
   )
 
-  const findTokenBySymbol = useCallback(
-    (keyword: string, chainId: ChainId) => {
-      const nativeToken = NativeCurrencies[chainId]
-      if (keyword === getSymbolSlug(nativeToken)) {
-        return nativeToken
-      }
-      return filterTokensWithExactKeyword(chainId, Object.values(allTokens), keyword)[0]
-    },
-    [allTokens],
-  )
-
   const syncTokenSymbolToUrl = useCallback(
     (currencyIn: Currency | undefined, currencyOut: Currency | undefined) => {
       const symbolIn = getSymbolSlug(currencyIn)
@@ -86,54 +67,6 @@ export default function useSyncTokenSymbolToUrl(
     [redirect, chainId],
   )
 
-  const findTokenPairFromUrl = useCallback(
-    (chainId: ChainId) => {
-      if (!fromCurrency || !network) return
-      // net/symbol
-      const isSame = fromCurrency && fromCurrency === toCurrency
-      if (!toCurrency || isSame) {
-        const fromToken = findTokenBySymbol(fromCurrency, chainId)
-        if (fromToken) {
-          onCurrencySelection(fromToken)
-          if (isSame) redirect(`${network}/${fromCurrency}`)
-        } else {
-          redirect(network)
-        }
-        return
-      }
-
-      // net/sym-to-sym
-      const fromToken = findTokenBySymbol(convertSymbol(network, fromCurrency), chainId)
-      const toToken = findTokenBySymbol(convertSymbol(network, toCurrency), chainId)
-
-      if (!toToken || !fromToken) {
-        redirect(network)
-        return
-      }
-      onCurrencySelection(fromToken, toToken)
-    },
-    [findTokenBySymbol, redirect, onCurrencySelection, fromCurrency, network, toCurrency],
-  )
-
-  const checkedTokenFromUrlWhenInit = useRef(false)
-  useEffect(() => {
-    checkedTokenFromUrlWhenInit.current = false
-  }, [chainId])
-
-  useEffect(() => {
-    if (
-      !checkedTokenFromUrlWhenInit.current &&
-      isLoadedTokenDefault &&
-      chainId === firstTokenChainId &&
-      network === NETWORKS_INFO[chainId].route &&
-      !disabled
-    ) {
-      // call once
-      // setTimeout(() => findTokenPairFromUrl(chainId))
-      checkedTokenFromUrlWhenInit.current = true
-    }
-  }, [isLoadedTokenDefault, firstTokenChainId, chainId, network, disabled, findTokenPairFromUrl])
-
   // when token change, sync symbol to url
   useEffect(() => {
     if (isLoadedTokenDefault && isSelectCurrencyManual && !disabled) {

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable prettier/prettier */
 // Ordering is intentional and must be preserved: styling, polyfilling, tracing, and then functionality.
 import * as Sentry from '@sentry/react'
-import { BrowserTracing } from '@sentry/tracing'
 import '@zkmelabs/widget/dist/style.css'
 import AOS from 'aos'
 import 'aos/dist/aos.css'
@@ -50,14 +49,14 @@ if (ENV_LEVEL > ENV_TYPE.LOCAL) {
     dsn: SENTRY_DNS,
     environment: 'production',
     ignoreErrors: ['AbortError'],
-    integrations: [new BrowserTracing()],
+    integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
     tracesSampleRate: 0.1,
     normalizeDepth: 5,
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
   })
-  Sentry.configureScope(scope => {
-    scope.setTag('request_id', sentryRequestId)
-    scope.setTag('version', TAG)
-  })
+  Sentry.setTag('request_id', sentryRequestId)
+  Sentry.setTag('version', TAG)
 
   if (GTM_ID) {
     TagManager.initialize({

diff --git a/src/pages/SwapV3/index.tsx b/src/pages/SwapV3/index.tsx
@@ -95,7 +95,6 @@ export default function Swap() {
   const qs = useParsedQueryString<{ highlightBox: string }>()
   const [{ show: isShowTutorial = false }] = useTutorialSwapGuide()
   const [routeSummary, setRouteSummary] = useState<DetailedRouteSummary>()
-  const [isSelectCurrencyManually, setIsSelectCurrencyManually] = useState(false) // true when: select token input, output manually or click rotate token.
 
   const { pathname } = useLocation()
   const [searchParams, setSearchParams] = useSearchParams()
@@ -181,12 +180,7 @@ export default function Swap() {
               {activeTab === TAB.LIQUIDITY_SOURCES && (
                 <LiquiditySourcesPanel onBack={() => setActiveTab(TAB.SETTINGS)} />
               )}
-              {activeTab === TAB.LIMIT && (
-                <LimitOrder
-                  isSelectCurrencyManual={isSelectCurrencyManually}
-                  setIsSelectCurrencyManual={setIsSelectCurrencyManually}
-                />
-              )}
+              {activeTab === TAB.LIMIT && <LimitOrder />}
               {isCrossChainPage && <CrossChain visible={activeTab === TAB.CROSS_CHAIN} />}
               {activeTab === TAB.GAS_TOKEN && <GasTokenSetting onBack={() => setActiveTab(TAB.SWAP)} />}
             </AppBodyWrapped>

diff --git a/src/state/limit/hooks.ts b/src/state/limit/hooks.ts
@@ -53,17 +53,6 @@ export function useLimitActionHandlers() {
     [onCurrencySelection],
   )
 
-  const onSelectPair = useCallback(
-    (currencyIn: Currency | undefined, currencyOut: Currency | undefined, inputAmount?: string) => {
-      setCurrencyIn(currencyIn)
-      setCurrencyOut(currencyOut)
-      if (inputAmount !== undefined) {
-        setInputValue(inputAmount)
-      }
-    },
-    [setInputValue, setCurrencyIn, setCurrencyOut],
-  )
-
   const pushOrderNeedCreated = useCallback(
     (order: CreateOrderParam) => {
       dispatch(pushOrderNeedCreatedAction(order))
@@ -89,7 +78,6 @@ export function useLimitActionHandlers() {
     switchCurrency: onSwitchTokensV2,
     setCurrencyIn,
     setCurrencyOut,
-    onSelectPair,
     pushOrderNeedCreated,
     removeOrderNeedCreated,
     setOrderEditing,