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

fix: spurious Swap re-renders (#7333)

Browse Source
This commit is contained in:
Zach Pomerantz 2023-09-18 13:08:37 -07:00 committed by GitHub
parent 5ba046f111
commit 33c93b5ded
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Tokens/TokenDetails/index.tsx
View File

@ -248,10 +248,8 @@ export default function TokenDetails({
<div style={{ pointerEvents: isBlockedToken ? 'none' : 'auto' }}> <div style={{ pointerEvents: isBlockedToken ? 'none' : 'auto' }}>
<Swap <Swap
chainId={pageChainId} chainId={pageChainId}
prefilledState={{ initialInputCurrencyId={inputTokenAddress}
[Field.INPUT]: { currencyId: inputTokenAddress }, initialOutputCurrencyId={address === NATIVE_CHAIN_ID ? 'ETH' : address}
[Field.OUTPUT]: { currencyId: address === NATIVE_CHAIN_ID ? 'ETH' : address },
}}
onCurrencyChange={handleCurrencyChange} onCurrencyChange={handleCurrencyChange}
disableTokenInputs={pageChainId !== connectedChainId} disableTokenInputs={pageChainId !== connectedChainId}
/> />

23
src/pages/Swap/index.tsx
View File

@ -150,10 +150,8 @@ export default function SwapPage({ className }: { className?: string }) {
<Swap <Swap
className={className} className={className}
chainId={supportedChainId ?? ChainId.MAINNET} chainId={supportedChainId ?? ChainId.MAINNET}
prefilledState={{ initialInputCurrencyId={loadedUrlParams?.[Field.INPUT]?.currencyId}
[Field.INPUT]: { currencyId: loadedUrlParams?.[Field.INPUT]?.currencyId }, initialOutputCurrencyId={loadedUrlParams?.[Field.OUTPUT]?.currencyId}
[Field.OUTPUT]: { currencyId: loadedUrlParams?.[Field.OUTPUT]?.currencyId },
}}
disableTokenInputs={supportedChainId === undefined} disableTokenInputs={supportedChainId === undefined}
/> />
<NetworkAlert /> <NetworkAlert />
@ -172,13 +170,15 @@ export default function SwapPage({ className }: { className?: string }) {
*/ */
export function Swap({ export function Swap({
className, className,
prefilledState = {}, initialInputCurrencyId,
initialOutputCurrencyId,
chainId, chainId,
onCurrencyChange, onCurrencyChange,
disableTokenInputs = false, disableTokenInputs = false,
}: { }: {
className?: string className?: string
prefilledState?: Partial<SwapState> initialInputCurrencyId?: string | null
initialOutputCurrencyId?: string | null
chainId?: ChainId chainId?: ChainId
onCurrencyChange?: (selected: Pick<SwapState, Field.INPUT | Field.OUTPUT>) => void onCurrencyChange?: (selected: Pick<SwapState, Field.INPUT | Field.OUTPUT>) => void
disableTokenInputs?: boolean disableTokenInputs?: boolean
@ -187,8 +187,8 @@ export function Swap({
const trace = useTrace() const trace = useTrace()
// token warning stuff // token warning stuff
const prefilledInputCurrency = useCurrency(prefilledState?.[Field.INPUT]?.currencyId) const prefilledInputCurrency = useCurrency(initialInputCurrencyId)
const prefilledOutputCurrency = useCurrency(prefilledState?.[Field.OUTPUT]?.currencyId) const prefilledOutputCurrency = useCurrency(initialOutputCurrencyId)
const [loadedInputCurrency, setLoadedInputCurrency] = useState(prefilledInputCurrency) const [loadedInputCurrency, setLoadedInputCurrency] = useState(prefilledInputCurrency)
const [loadedOutputCurrency, setLoadedOutputCurrency] = useState(prefilledOutputCurrency) const [loadedOutputCurrency, setLoadedOutputCurrency] = useState(prefilledOutputCurrency)
@ -236,6 +236,13 @@ export function Swap({
const toggleWalletDrawer = useToggleAccountDrawer() const toggleWalletDrawer = useToggleAccountDrawer()
// swap state // swap state
const prefilledState = useMemo(
() => ({
[Field.INPUT]: { currencyId: initialInputCurrencyId },
[Field.OUTPUT]: { currencyId: initialOutputCurrencyId },
}),
[initialInputCurrencyId, initialOutputCurrencyId]
)
const [state, dispatch] = useReducer(swapReducer, { ...initialSwapState, ...prefilledState }) const [state, dispatch] = useReducer(swapReducer, { ...initialSwapState, ...prefilledState })
const { typedValue, recipient, independentField } = state const { typedValue, recipient, independentField } = state