fix: defer layout effects (#3687)

* fix: use effect for color

* chore: clean up token defaults

* fix: condition updaters on active tokens

src/hooks/useColor.ts

@@ -3,7 +3,7 @@ import { SupportedChainId } from 'constants/chains'
 import uriToHttp from 'lib/utils/uriToHttp'
 import Vibrant from 'node-vibrant/lib/bundle.js'
 import { shade } from 'polished'
-import { useLayoutEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { hex } from 'wcag-contrast'
 
@@ -64,7 +64,7 @@ async function getColorFromUriPath(uri: string): Promise<string | null> {
 export function useColor(token?: Token) {
   const [color, setColor] = useState('#2172E5')
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     let stale = false
 
     if (token) {
@@ -87,7 +87,7 @@ export function useColor(token?: Token) {
 export function useListColor(listImageUri?: string) {
   const [color, setColor] = useState('#2172E5')
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     let stale = false
 
     if (listImageUri) {

src/lib/components/Swap/index.tsx

@@ -8,7 +8,7 @@ import { usePendingTransactions } from 'lib/hooks/transactions'
 import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import useHasFocus from 'lib/hooks/useHasFocus'
 import useOnSupportedNetwork from 'lib/hooks/useOnSupportedNetwork'
-import { useSyncTokenList } from 'lib/hooks/useTokenList'
+import { useIsTokenListLoaded, useSyncTokenList } from 'lib/hooks/useTokenList'
 import { displayTxHashAtom } from 'lib/state/swap'
 import { SwapTransactionInfo, Transaction, TransactionType, WrapTransactionInfo } from 'lib/state/transactions'
 import { useState } from 'react'
@@ -47,12 +47,11 @@ export interface SwapProps extends TokenDefaults, FeeOptions {
   onConnectWallet?: () => void
 }
 
-function Updaters(props: SwapProps & { disabled: boolean }) {
-  useSyncTokenList(props.tokenList)
+function Updaters(props: SwapProps) {
   useSyncTokenDefaults(props)
   useSyncConvenienceFee(props)
 
-  return props.disabled ? null : <SwapInfoUpdater />
+  return <SwapInfoUpdater />
 }
 
 export default function Swap(props: SwapProps) {
@@ -68,11 +67,14 @@ export default function Swap(props: SwapProps) {
   const onSupportedNetwork = useOnSupportedNetwork()
   const isDisabled = !(active && onSupportedNetwork)
 
+  useSyncTokenList(props.tokenList)
+  const isUpdateable = useIsTokenListLoaded() && !isDisabled
+
   const focused = useHasFocus(wrapper)
 
   return (
     <>
-      <Updaters {...props} disabled={isDisabled} />
+      {isUpdateable && <Updaters {...props} />}
       <Header title={<Trans>Swap</Trans>}>
         {active && <Wallet disabled={!account} onClick={props.onConnectWallet} />}
         <Settings disabled={isDisabled} />

src/lib/components/Widget.tsx

@@ -3,7 +3,7 @@ import { Provider as Eip1193Provider } from '@web3-react/types'
 import { DEFAULT_LOCALE, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales'
 import { Provider as AtomProvider } from 'jotai'
 import { TransactionsUpdater } from 'lib/hooks/transactions'
-import { ActiveWeb3Provider } from 'lib/hooks/useActiveWeb3React'
+import useActiveWeb3React, { ActiveWeb3Provider } from 'lib/hooks/useActiveWeb3React'
 import { BlockUpdater } from 'lib/hooks/useBlockNumber'
 import { Provider as I18nProvider } from 'lib/i18n'
 import { MulticallUpdater, store as multicallStore } from 'lib/state/multicall'
@@ -130,7 +130,7 @@ export default function Widget(props: PropsWithChildren<WidgetProps>) {
                 <ReduxProvider store={multicallStore}>
                   <AtomProvider>
                     <ActiveWeb3Provider provider={provider} jsonRpcEndpoint={jsonRpcEndpoint}>
-                      <Updaters />
+                      {useActiveWeb3React().active && <Updaters />}
                       {children}
                     </ActiveWeb3Provider>
                   </AtomProvider>

src/lib/hooks/swap/useSyncTokenDefaults.ts

@@ -5,7 +5,7 @@ import useActiveWeb3React from 'lib/hooks/useActiveWeb3React'
 import { useToken } from 'lib/hooks/useCurrency'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { Field, Swap, swapAtom } from 'lib/state/swap'
-import { useCallback, useLayoutEffect, useState } from 'react'
+import { useCallback, useLayoutEffect, useRef } from 'react'
 
 import useOnSupportedNetwork from '../useOnSupportedNetwork'
 
@@ -71,13 +71,11 @@ export default function useSyncTokenDefaults({
     updateSwap((swap) => ({ ...swap, ...defaultSwapState }))
   }, [defaultInputAmount, defaultInputToken, defaultOutputAmount, defaultOutputToken, updateSwap])
 
-  const [previousChainId, setPreviousChainId] = useState(chainId)
+  const lastChainId = useRef<number | undefined>(undefined)
   useLayoutEffect(() => {
-    setPreviousChainId(chainId)
-  }, [chainId])
-  useLayoutEffect(() => {
-    if (chainId && chainId !== previousChainId) {
+    if (chainId && chainId !== lastChainId.current) {
       setToDefaults()
     }
-  }, [chainId, previousChainId, setToDefaults])
+    lastChainId.current = chainId
+  }, [chainId, setToDefaults])
 }

src/lib/hooks/useCurrencyColor.ts

 import { Currency } from '@uniswap/sdk-core'
 import { useTheme } from 'lib/theme'
 import Vibrant from 'node-vibrant/lib/bundle.js'
-import { useEffect, useLayoutEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import useCurrencyLogoURIs from './useCurrencyLogoURIs'
 
@@ -57,7 +57,7 @@ export default function useCurrencyColor(token?: Currency) {
   const theme = useTheme()
   const logoURIs = useCurrencyLogoURIs(token)
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     let stale = false
 
     if (theme.tokenColorExtraction && token) {