ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: do not flicker when navigating tokens (#5013)

Browse Source
This commit is contained in:
Zach Pomerantz 2022-10-26 10:27:50 -07:00 committed by GitHub
parent 1f810f84be
commit e2fea4a5fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Widget/index.tsx
View File

@ -20,7 +20,7 @@ import {
getTokenAddress,
} from 'analytics/utils'
import { useActiveLocale } from 'hooks/useActiveLocale'
import { useCallback, useEffect, useState } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { useIsDarkMode } from 'state/user/hooks'
import { DARK_THEME, LIGHT_THEME } from 'theme/widget'
import { computeRealizedPriceImpact } from 'utils/prices'
@ -51,14 +51,23 @@ export default function Widget({ defaultToken, onTokensChange, onReviewSwapClick
const { inputs, tokenSelector } = useSyncWidgetInputs(defaultToken)
const { settings } = useSyncWidgetSettings()
const { transactions } = useSyncWidgetTransactions()
const lastValue = useRef([inputs.value.INPUT, inputs.value.OUTPUT])
useEffect(() => {
const [input, output] = [inputs.value.INPUT, inputs.value.OUTPUT]
const [lastInput, lastOutput] = lastValue.current
// Avoid calling onTokensChange if only the handler has changed.
if (input === lastInput && output === lastOutput) return
if (input && lastInput && input.equals(lastInput) && output && lastOutput && lastOutput.equals(lastOutput)) return
lastValue.current = [input, output]
onTokensChange?.(inputs.value.INPUT, inputs.value.OUTPUT)
}, [inputs.value.INPUT, inputs.value.OUTPUT, onTokensChange])
const onSwitchChain = useCallback(
// TODO(WEB-1757): Widget should not break if this rejects - upstream the catch to ignore it.
({ chainId }: AddEthereumChainParameter) => switchChain(connector, Number(chainId)).catch(() => undefined),
[connector]
)
useEffect(() => {
onTokensChange?.(inputs.value.INPUT, inputs.value.OUTPUT)
}, [inputs.value.INPUT, inputs.value.OUTPUT, onTokensChange])
const trace = useTrace({ section: SectionName.WIDGET })
const [initialQuoteDate, setInitialQuoteDate] = useState<Date>()