Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: bug select imported token that has a similar symbol with whitelisted token #2549

Merged
merged 3 commits into from
Oct 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 1 addition & 6 deletions src/components/swapv2/LimitOrder/LimitOrderForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,6 @@ type Props = {
defaultOutputAmount?: string
defaultActiveMakingAmount?: string
defaultExpire?: Date
setIsSelectCurrencyManual?: (val: boolean) => void
note?: string
orderInfo?: LimitOrder
flowState: TransactionFlowState
Expand Down Expand Up @@ -146,7 +145,6 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
defaultActiveMakingAmount = '',
defaultExpire,
defaultRate = { rate: '', invertRate: '', invert: false },
setIsSelectCurrencyManual,
note = '',
orderInfo,
flowState,
Expand Down Expand Up @@ -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(() => {
Expand All @@ -359,7 +356,6 @@ const LimitOrderForm = forwardRef<LimitOrderFormHandle, Props>(function LimitOrd
return
}
setCurrencyOut(currency)
setIsSelectCurrencyManual?.(true)
setRateInfo({ ...rateInfo, invertRate: '', rate: '', rateFraction: undefined })
}

Expand All @@ -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)
Expand Down
15 changes: 2 additions & 13 deletions src/components/swapv2/LimitOrder/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
}
Expand Down
75 changes: 4 additions & 71 deletions src/hooks/useSyncTokenSymbolToUrl.ts
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -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

Expand All @@ -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)
Expand All @@ -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) {
Expand Down
11 changes: 5 additions & 6 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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({
Expand Down
8 changes: 1 addition & 7 deletions src/pages/SwapV3/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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>
Expand Down
12 changes: 0 additions & 12 deletions src/state/limit/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand All @@ -89,7 +78,6 @@ export function useLimitActionHandlers() {
switchCurrency: onSwitchTokensV2,
setCurrencyIn,
setCurrencyOut,
onSelectPair,
pushOrderNeedCreated,
removeOrderNeedCreated,
setOrderEditing,
Expand Down
Loading
Loading