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.

Sign up for GitHub

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

Jump to bottom

fix bug params currency #1244

Merged
merged 1 commit into from
Aug 15, 2022
Merged

fix bug params currency #1244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 3 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"@reach/dialog": "^0.17.0",
"@reach/portal": "^0.17.0",
"@reduxjs/toolkit": "^1.7.1",
"@trivago/prettier-plugin-sort-imports": "^3.3.0",
"@types/aos": "^3.0.4",
"@types/big.js": "^6.0.0",
"@types/d3": "^7.1.0",
Expand All @@ -38,6 +39,7 @@
"@types/rebass": "^4.0.5",
"@types/recharts": "^1.8.23",
"@types/styled-components": "^5.1.25",
"@types/ua-parser-js": "^0.7.36",
"@types/wcag-contrast": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^4",
"@typescript-eslint/parser": "^4",
Expand All @@ -57,6 +59,7 @@
"copy-to-clipboard": "^3.2.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-better-styled-components": "^1.1.2",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
Expand Down Expand Up @@ -132,17 +135,13 @@
"@kyberswap/ks-sdk-classic": "^0.0.13",
"@kyberswap/ks-sdk-core": "^0.0.13",
"@kyberswap/ks-sdk-elastic": "^0.0.43",
"@lingui/detect-locale": "^3.10.4",
"@lingui/react": "^3.14.0",
"@sentry/react": "^6.16.1",
"@trivago/prettier-plugin-sort-imports": "^3.3.0",
"@typeform/embed-react": "^1.2.4",
"@types/ua-parser-js": "^0.7.36",
"aos": "^2.3.4",
"d3": "^7.3.0",
"dayjs": "^1.10.7",
"env-cmd": "^10.1.0",
"eslint-plugin-better-styled-components": "^1.1.2",
"eslint-plugin-unused-imports": "^2.0.0",
"firebase": "^9.8.2",
"graphql": "^15.5.0",
Expand Down
1 change: 0 additions & 1 deletion src/hooks/useActiveNetwork.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export function useActiveNetwork() {

const locationWithoutNetworkId = useMemo(() => {
// Delete networkId from qs object
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { networkId, ...qsWithoutNetworkId } = qs

return { ...location, search: stringify({ ...qsWithoutNetworkId }) }
Expand Down
30 changes: 7 additions & 23 deletions src/pages/SwapV2/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { ChainId, Currency, CurrencyAmount, NativeCurrency, Token } from '@kyberswap/ks-sdk-core'
import { Trans, t } from '@lingui/macro'
import JSBI from 'jsbi'
import { debounce } from 'lodash'
import { stringify } from 'qs'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { BrowserView } from 'react-device-detect'
Expand Down Expand Up @@ -241,6 +240,7 @@ export default function Swap({ history }: RouteComponentProps) {
tradeComparer,
onRefresh,
loading: loadingAPI,
isPairNotfound,
} = useDerivedSwapInfoV2()

const currencyIn = currencies[Field.INPUT]
Expand Down Expand Up @@ -631,32 +631,17 @@ export default function Swap({ history }: RouteComponentProps) {
if (isSelectCurencyMannual) syncUrl(currencyIn, currencyOut) // when we select token manual
}, [currencyIn, currencyOut, isSelectCurencyMannual, syncUrl])

const refLoadedCurrency = useRef<{
currencyIn: Currency | null | undefined
currencyOut: Currency | null | undefined
}>({ currencyIn: null, currencyOut: null })

// swap?inputCurrency=xxx&outputCurrency=yyy. xxx yyy not exist in chain => remove params => select default pair
useEffect(() => {
refLoadedCurrency.current = { currencyIn: loadedInputCurrency, currencyOut: loadedOutputCurrency }
}, [loadedInputCurrency, loadedOutputCurrency])

const checkParamWrong = useCallback(() => {
const { currencyIn, currencyOut } = refLoadedCurrency.current
if (!currencyIn || !currencyOut) {
if (isPairNotfound) {
const newQuery = { ...qs }
if (!currencyIn) delete newQuery.inputCurrency
if (!currencyOut) delete newQuery.outputCurrency
delete newQuery.inputCurrency
delete newQuery.outputCurrency
history.replace({
search: stringify(newQuery),
})
}
}, [qs, history])

// swap?inputCurrency=xxx&outputCurrency=yyy. xxx yyy not exist in chain => remove params => select default pair
const checkParamWrongDebounce = useMemo(() => debounce(checkParamWrong, 300), [checkParamWrong])
useEffect(() => {
checkParamWrongDebounce()
}, [chainId, checkParamWrongDebounce])
}, [isPairNotfound, history, qs])

useEffect(() => {
if (isExpertMode) {
Expand All @@ -674,8 +659,7 @@ export default function Swap({ history }: RouteComponentProps) {
})}`
: ''
}`
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currencyIn, currencyOut, chainId, currencyId, window.location.origin])
}, [currencyIn, currencyOut, chainId])

const { isInWhiteList: isPairInWhiteList, canonicalUrl } = checkPairInWhiteList(
chainId,
Expand Down
12 changes: 8 additions & 4 deletions src/state/swap/reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { createReducer } from '@reduxjs/toolkit'
import { parse } from 'qs'

import { FeeConfig } from 'hooks/useSwapV2Callback'

Expand Down Expand Up @@ -30,14 +31,17 @@ export interface SwapState {
readonly feeConfig: FeeConfig | undefined
}

const { search } = window.location
const { inputCurrency, outputCurrency } = parse(search.indexOf('?') === 0 ? search.substring(1) : search)

const initialState: SwapState = {
independentField: Field.INPUT,
typedValue: '',
[Field.INPUT]: {
currencyId: '',
currencyId: inputCurrency?.toString() || '',
},
[Field.OUTPUT]: {
currencyId: '',
currencyId: outputCurrency?.toString() || '',
Copy link
Contributor Author

@nguyenhoaidanh nguyenhoaidanh Aug 12, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we visit web the first time, if inputCurrency/outputCurrency exist in url. set it to default value of initialState .
This will reduce the number of times re-render.
Because

  • if url is. /swap?inputCurrency=xxx ==> state change from '' => xxx. it cause my app rerender.

},
recipient: null,
saveGas: false,
Expand Down Expand Up @@ -72,14 +76,14 @@ export default createReducer<SwapState>(initialState, builder =>
...state,
typedValue: '',
independentField: state.independentField === Field.INPUT ? Field.OUTPUT : Field.INPUT,
[field]: { currencyId: currencyId },
[field]: { currencyId },
[otherField]: { currencyId: state[field].currencyId },
}
} else {
// the normal case
return {
...state,
[field]: { currencyId: currencyId },
[field]: { currencyId },
}
}
})
Expand Down
17 changes: 16 additions & 1 deletion src/state/swap/useAggregator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export function useDerivedSwapInfoV2(): {
inputError?: string
onRefresh: (resetRoute: boolean, minimumLoadingTime: number) => void
loading: boolean
isPairNotfound: boolean
} {
const { account } = useActiveWeb3React()

Expand Down Expand Up @@ -147,6 +148,9 @@ export function useDerivedSwapInfoV2(): {
inputError = t`Insufficient ${amountIn.currency.symbol} balance`
}

// inputCurrency/outputCurrency null is loading, undefined is not found, see useToken for detail
const isPairNotfound = inputCurrency === undefined && outputCurrency === undefined

return useMemo(
() => ({
currencies,
Expand All @@ -157,7 +161,18 @@ export function useDerivedSwapInfoV2(): {
inputError,
onRefresh: onUpdateCallback,
loading,
isPairNotfound,
}),
[currencies, currencyBalances, inputError, loading, onUpdateCallback, parsedAmount, tradeComparer, v2Trade],
[
currencies,
currencyBalances,
inputError,
loading,
onUpdateCallback,
parsedAmount,
tradeComparer,
v2Trade,
isPairNotfound,
],
)
}
41 changes: 33 additions & 8 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@
jsesc "^2.5.1"
source-map "^0.5.0"

"@babel/generator@^7.11.6", "@babel/generator@^7.12.1", "@babel/generator@^7.17.3", "@babel/generator@^7.17.7", "@babel/generator@^7.18.10":
"@babel/generator@^7.11.6", "@babel/generator@^7.12.1", "@babel/generator@^7.18.10":
version "7.18.10"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.10.tgz#794f328bfabdcbaf0ebf9bf91b5b57b61fa77a2a"
integrity sha512-0+sW7e3HjQbiHbj1NeU/vN8ornohYlacAfZIaXhdoGweQqgcNy69COVciYYqEXJ/v+9OBA7Frxm4CVAuNqKeNA==
Expand All @@ -238,6 +238,15 @@
"@jridgewell/gen-mapping" "^0.3.2"
jsesc "^2.5.1"

"@babel/generator@^7.17.3", "@babel/generator@^7.17.7":
version "7.18.12"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.12.tgz#fa58daa303757bd6f5e4bbca91b342040463d9f4"
integrity sha512-dfQ8ebCN98SvyL7IxNMCUtZQSq5R7kxgN+r8qYTGDmmSion1hX2C0zq2yo1bsCDhXixokv1SAWTZUMYbO/V5zg==
dependencies:
"@babel/types" "^7.18.10"
"@jridgewell/gen-mapping" "^0.3.2"
jsesc "^2.5.1"

"@babel/helper-annotate-as-pure@^7.15.4", "@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
Expand Down Expand Up @@ -453,11 +462,16 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==

"@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.3", "@babel/parser@^7.14.7", "@babel/parser@^7.17.3", "@babel/parser@^7.17.8", "@babel/parser@^7.18.10", "@babel/parser@^7.7.0":
"@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.3", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.7.0":
version "7.18.10"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.10.tgz#94b5f8522356e69e8277276adf67ed280c90ecc1"
integrity sha512-TYk3OA0HKL6qNryUayb5UUEhM/rkOQozIBEA5ITXh5DWrSp0TlUQXMyZmnWxG/DizSWBeeQ0Zbc5z8UGaaqoeg==

"@babel/parser@^7.17.3", "@babel/parser@^7.17.8", "@babel/parser@^7.18.11":
version "7.18.11"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9"
integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==

"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
Expand Down Expand Up @@ -1242,7 +1256,7 @@
debug "^4.1.0"
globals "^11.1.0"

"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.17.3", "@babel/traverse@^7.18.10", "@babel/traverse@^7.18.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.18.10", "@babel/traverse@^7.18.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
version "7.18.10"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.10.tgz#37ad97d1cb00efa869b91dd5d1950f8a6cf0cb08"
integrity sha512-J7ycxg0/K9XCtLyHf0cz2DqDihonJeIo+z+HEdRe9YuT8TY4A66i+Ab2/xZCEW7Ro60bPCBBfqqboHSamoV3+g==
Expand All @@ -1258,6 +1272,22 @@
debug "^4.1.0"
globals "^11.1.0"

"@babel/traverse@^7.17.3":
version "7.18.11"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.11.tgz#3d51f2afbd83ecf9912bcbb5c4d94e3d2ddaa16f"
integrity sha512-TG9PiM2R/cWCAy6BPJKeHzNbu4lPzOSZpeMfeNErskGpTJx6trEvFaVCbDvpcxwy49BKWmEPwiW8mrysNiDvIQ==
dependencies:
"@babel/code-frame" "^7.18.6"
"@babel/generator" "^7.18.10"
"@babel/helper-environment-visitor" "^7.18.9"
"@babel/helper-function-name" "^7.18.9"
"@babel/helper-hoist-variables" "^7.18.6"
"@babel/helper-split-export-declaration" "^7.18.6"
"@babel/parser" "^7.18.11"
"@babel/types" "^7.18.10"
debug "^4.1.0"
globals "^11.1.0"

"@babel/[email protected]":
version "7.17.0"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
Expand Down Expand Up @@ -2845,11 +2875,6 @@
make-plural "^6.2.2"
messageformat-parser "^4.1.3"

"@lingui/detect-locale@^3.10.4":
version "3.14.0"
resolved "https://registry.yarnpkg.com/@lingui/detect-locale/-/detect-locale-3.14.0.tgz#efbec423a8bf0e2785db320c5d015e4023ae8f8b"
integrity sha512-IELWULt9I+iyVlxGES21cXoOwTcPSIisElAmr3/KJlqvJ9zXT3s4w4Jxw9j5oHJjdxBDRkifwpnVmGd57wrmzg==

"@lingui/loader@^3.14.0":
version "3.14.0"
resolved "https://registry.yarnpkg.com/@lingui/loader/-/loader-3.14.0.tgz#f8f00532f1788ffcccb76ec89f742d4714bc4b0f"
Expand Down