fix: incorrectly memoized hooks (#3471)

* fix: incorrectly memoized hooks

* fix: finish memoizing useUSDCPrice

src/hooks/useCurrentBlockTimestamp.ts

 import { BigNumber } from '@ethersproject/bignumber'
 import { useSingleCallResult } from 'lib/hooks/multicall'
+import { useEffect, useState } from 'react'
 
 import { useInterfaceMulticall } from './useContract'
 
 // gets the current timestamp from the blockchain
 export default function useCurrentBlockTimestamp(): BigNumber | undefined {
+  const [lastBlock, setLastBlock] = useState<BigNumber | undefined>()
   const multicall = useInterfaceMulticall()
-  return useSingleCallResult(multicall, 'getCurrentBlockTimestamp')?.result?.[0]
+  const block: BigNumber | undefined = useSingleCallResult(multicall, 'getCurrentBlockTimestamp')?.result?.[0]
+  useEffect(() => {
+    // If block xor lastBlock are undefined, or if block has progressed, then update lastBlock.
+    // This prevents updates when the block doesn't change, because the returned BigNumber will still be referentially unique.
+    if (Boolean(block) !== Boolean(lastBlock) || (block && lastBlock && !block.eq(lastBlock))) {
+      setLastBlock(block)
+    }
+  }, [block, lastBlock])
+  return lastBlock
 }

src/hooks/useUSDCPrice.ts

@@ -78,17 +78,18 @@ export function useStablecoinAmountFromFiatValue(fiatValue: string | null | unde
   const { chainId } = useActiveWeb3React()
   const stablecoin = chainId ? STABLECOIN_AMOUNT_OUT[chainId]?.currency : undefined
 
+  return useMemo(() => {
     if (fiatValue === null || fiatValue === undefined || !chainId || !stablecoin) {
       return undefined
     }
 
     // trim for decimal precision when parsing
     const parsedForDecimals = parseFloat(fiatValue).toFixed(stablecoin.decimals).toString()
-
     try {
       // parse USD string into CurrencyAmount based on stablecoin decimals
       return tryParseCurrencyAmount(parsedForDecimals, stablecoin)
     } catch (error) {
       return undefined
     }
+  }, [chainId, fiatValue, stablecoin])
 }

src/lib/components/TokenSelect/index.tsx

@@ -113,6 +113,7 @@ export default function TokenSelect({ value, collapsed, disabled, onSelect }: To
   usePrefetchBalances()
 
   const [open, setOpen] = useState(false)
+  const onOpen = useCallback(() => setOpen(true), [])
   const selectAndClose = useCallback(
     (value: Currency) => {
       onSelect(value)
@@ -122,7 +123,7 @@ export default function TokenSelect({ value, collapsed, disabled, onSelect }: To
   )
   return (
     <>
-      <TokenButton value={value} collapsed={collapsed} disabled={disabled} onClick={() => setOpen(true)} />
+      <TokenButton value={value} collapsed={collapsed} disabled={disabled} onClick={onOpen} />
       {open && (
         <Dialog color="module" onClose={() => setOpen(false)}>
           <TokenSelectDialog value={value} onSelect={selectAndClose} />

src/lib/hooks/swap/index.ts

@@ -83,7 +83,7 @@ export function useIsAmountPopulated() {
 export function useSwapAmount(field: Field): [string | undefined, (amount: string) => void] {
   const amount = useAtomValue(amountAtom)
   const isFieldIndependent = useIsSwapFieldIndependent(field)
-  const value = useMemo(() => (isFieldIndependent ? amount : undefined), [amount, isFieldIndependent])
+  const value = isFieldIndependent ? amount : undefined
   const updateSwap = useUpdateAtom(swapAtom)
   const updateAmount = useCallback(
     (amount: string) =>
@@ -101,8 +101,9 @@ export function useSwapCurrencyAmount(field: Field): CurrencyAmount<Currency> |
   const isAmountPopulated = useIsAmountPopulated()
   const [swapAmount] = useSwapAmount(field)
   const [swapCurrency] = useSwapCurrency(field)
+  const currencyAmount = useMemo(() => tryParseCurrencyAmount(swapAmount, swapCurrency), [swapAmount, swapCurrency])
   if (isFieldIndependent && isAmountPopulated) {
-    return tryParseCurrencyAmount(swapAmount, swapCurrency)
+    return currencyAmount
   }
   return
 }

src/lib/hooks/useAllowedSlippage.ts

@@ -2,6 +2,7 @@ import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import useAutoSlippageTolerance from 'hooks/useAutoSlippageTolerance'
 import { useAtomValue } from 'jotai/utils'
 import { autoSlippageAtom, maxSlippageAtom } from 'lib/state/settings'
+import { useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 
 export function toPercent(maxSlippage: number | undefined): Percent | undefined {
@@ -13,7 +14,8 @@ export function toPercent(maxSlippage: number | undefined): Percent | undefined
 /** Returns the user-inputted max slippage. */
 export default function useAllowedSlippage(trade: InterfaceTrade<Currency, Currency, TradeType> | undefined): Percent {
   const autoSlippage = useAutoSlippageTolerance(trade)
-  const maxSlippage = toPercent(useAtomValue(maxSlippageAtom))
+  const maxSlippageValue = useAtomValue(maxSlippageAtom)
+  const maxSlippage = useMemo(() => toPercent(maxSlippageValue), [maxSlippageValue])
   return useAtomValue(autoSlippageAtom) ? autoSlippage : maxSlippage ?? autoSlippage
 }