fix: spurious Swap re-renders (#7333)

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

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

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