feat: move token state into query params

packages/arb-token-bridge-ui/src/components/App/App.tsx

@@ -18,7 +18,7 @@ import { TokenBridgeParams } from '../../hooks/useArbTokenBridge'
 import { WelcomeDialog } from './WelcomeDialog'
 import { BlockedDialog } from './BlockedDialog'
 import { AppContextProvider } from './AppContext'
-import { config, useActions, useAppState } from '../../state'
+import { config, useActions } from '../../state'
 import { MainContent } from '../MainContent/MainContent'
 import { ArbTokenBridgeStoreSync } from '../syncers/ArbTokenBridgeStoreSync'
 import { TokenListSyncer } from '../syncers/TokenListSyncer'
@@ -33,7 +33,6 @@ import { TOS_LOCALSTORAGE_KEY } from '../../constants'
 import { getProps } from '../../util/wagmi/setup'
 import { useAccountIsBlocked } from '../../hooks/useAccountIsBlocked'
 import { useCCTPIsBlocked } from '../../hooks/CCTP/useCCTPIsBlocked'
-import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { sanitizeQueryParams, useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { HeaderConnectWalletButton } from '../common/HeaderConnectWalletButton'
@@ -59,46 +58,22 @@ const rainbowkitTheme = merge(darkTheme(), {
 
 const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
   const actions = useActions()
-  const {
-    app: { selectedToken }
-  } = useAppState()
   const [networks] = useNetworks()
   const { childChain, childChainProvider, parentChain, parentChainProvider } =
     useNetworksRelationship(networks)
-  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   // We want to be sure this fetch is completed by the time we open the USDC modals
   useCCTPIsBlocked()
 
   const [tokenBridgeParams, setTokenBridgeParams] =
     useState<TokenBridgeParams | null>(null)
 
-  useEffect(() => {
-    if (!nativeCurrency.isCustom) {
-      return
-    }
-
-    const selectedTokenAddress = selectedToken?.address.toLowerCase()
-    const selectedTokenL2Address = selectedToken?.l2Address?.toLowerCase()
-    // This handles a super weird edge case where, for example:
-    //
-    // Your setup is: from Arbitrum One to Mainnet, and you have $ARB selected as the token you want to bridge over.
-    // You then switch your destination network to a network that has $ARB as its native currency.
-    // For this network, $ARB can only be bridged as the native currency, and not as a standard ERC-20, which is why we have to reset the selected token.
-    if (
-      selectedTokenAddress === nativeCurrency.address ||
-      selectedTokenL2Address === nativeCurrency.address
-    ) {
-      actions.app.setSelectedToken(null)
-    }
-  }, [selectedToken, nativeCurrency])
-
   // Listen for account and network changes
   useEffect(() => {
     // Any time one of those changes
     setTokenBridgeParams(null)
     actions.app.setConnectionState(ConnectionState.LOADING)
-    actions.app.reset(networks.sourceChain.id)
+    actions.app.reset()
     actions.app.setChainIds({
       l1NetworkChainId: parentChain.id,
       l2NetworkChainId: childChain.id

packages/arb-token-bridge-ui/src/components/TransferPanel/CustomFeeTokenApprovalDialog.tsx

@@ -10,12 +10,12 @@ import { formatAmount, formatUSD } from '../../util/NumberUtils'
 import { getExplorerUrl, isNetwork } from '../../util/networks'
 import { useGasPrice } from '../../hooks/useGasPrice'
 import { NativeCurrencyErc20 } from '../../hooks/useNativeCurrency'
-import { useAppState } from '../../state'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { shortenAddress } from '../../util/CommonUtils'
 import { NoteBox } from '../common/NoteBox'
 import { BridgeTransferStarterFactory } from '@/token-bridge-sdk/BridgeTransferStarterFactory'
+import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 
@@ -29,8 +29,7 @@ export function CustomFeeTokenApprovalDialog(
   const { customFeeToken, isOpen } = props
 
   const { ethToUSD } = useETHPrice()
-  const { app } = useAppState()
-  const { selectedToken } = app
+  const [selectedToken] = useSelectedToken()
 
   const [networks] = useNetworks()
   const { sourceChain, destinationChain } = networks

packages/arb-token-bridge-ui/src/components/TransferPanel/EstimatedGas.tsx

@@ -2,7 +2,6 @@ import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 
-import { useAppState } from '../../state'
 import { getNetworkName, isNetwork } from '../../util/networks'
 import { ChainId } from '../../types/ChainId'
 import { Tooltip } from '../common/Tooltip'
@@ -14,6 +13,7 @@ import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { NativeCurrencyPrice, useIsBridgingEth } from './NativeCurrencyPrice'
 import { isTokenNativeUSDC } from '../../util/TokenUtils'
+import { useSelectedToken } from '../../hooks/useSelectedToken'
 
 function getGasFeeTooltip(chainId: ChainId) {
   const { isEthereumMainnetOrTestnet } = isNetwork(chainId)
@@ -54,9 +54,7 @@ export function EstimatedGas({
 }: {
   chainType: 'source' | 'destination'
 }) {
-  const {
-    app: { selectedToken }
-  } = useAppState()
+  const [selectedToken] = useSelectedToken()
   const [networks] = useNetworks()
   const {
     childChain,

packages/arb-token-bridge-ui/src/components/TransferPanel/NativeCurrencyPrice.tsx

@@ -1,15 +1,13 @@
 import { NativeCurrency } from '../../hooks/useNativeCurrency'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
-import { useAppState } from '../../state'
 import { isNetwork } from '../../util/networks'
 import { useETHPrice } from '../../hooks/useETHPrice'
 import { formatUSD } from '../../util/NumberUtils'
+import { useSelectedToken } from '../../hooks/useSelectedToken'
 
 export function useIsBridgingEth(childChainNativeCurrency: NativeCurrency) {
-  const {
-    app: { selectedToken }
-  } = useAppState()
+  const [selectedToken] = useSelectedToken()
   const isBridgingEth =
     selectedToken === null && !childChainNativeCurrency.isCustom
   return isBridgingEth

packages/arb-token-bridge-ui/src/components/TransferPanel/OneNovaTransferDialog.tsx

@@ -1,7 +1,6 @@
 import { Tab } from '@headlessui/react'
 import Hop from '@/images/bridge/hop.png'
 
-import { useAppState } from '../../state'
 import { TabButton } from '../common/Tab'
 import { BridgesTable } from '../common/BridgesTable'
 import { SecurityNotGuaranteed } from './SecurityLabels'
@@ -10,6 +9,7 @@ import { FastBridgeInfo, FastBridgeNames } from '../../util/fastBridges'
 import { getNetworkName, isNetwork } from '../../util/networks'
 import { ChainId } from '../../types/ChainId'
 import { ether } from '../../constants'
+import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { useNetworks } from '../../hooks/useNetworks'
 
@@ -47,9 +47,7 @@ function getDialogSourceAndDestinationChains({
 }
 
 export function OneNovaTransferDialog(props: UseDialogProps) {
-  const {
-    app: { selectedToken }
-  } = useAppState()
+  const [selectedToken] = useSelectedToken()
   const [{ amount }] = useArbQueryParams()
   const [{ sourceChain, destinationChain }] = useNetworks()
 

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react'
+import { utils } from 'ethers'
 import { Popover } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 
-import { useAppState } from '../../state'
 import { TokenSearch } from '../TransferPanel/TokenSearch'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
@@ -17,6 +17,10 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { Transition } from '../common/Transition'
 import { SafeImage } from '../common/SafeImage'
 import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
+import { Loader } from '../common/atoms/Loader'
+import { useSelectedToken } from '../../hooks/useSelectedToken'
+import { useTokenLists } from '../../hooks/useTokenLists'
+import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 
 export type TokenButtonOptions = {
   symbol?: string
@@ -29,13 +33,13 @@ export function TokenButton({
 }: {
   options?: TokenButtonOptions
 }): JSX.Element {
-  const {
-    app: { selectedToken }
-  } = useAppState()
+  const [selectedToken] = useSelectedToken()
   const disabled = options?.disabled ?? false
 
   const [networks] = useNetworks()
-  const { childChainProvider } = useNetworksRelationship(networks)
+  const { childChain, childChainProvider } = useNetworksRelationship(networks)
+  const { isLoading: isLoadingTokenLists } = useTokenLists(childChain.id)
+  const [{ token: tokenFromSearchParams }] = useArbQueryParams()
 
   const tokensFromLists = useTokensFromLists()
   const tokensFromUser = useTokensFromUser()
@@ -57,6 +61,17 @@ export function TokenButton({
     })
   }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol, options])
 
+  const isLoadingToken = useMemo(() => {
+    // don't show loader if native currency is selected
+    if (!tokenFromSearchParams) {
+      return false
+    }
+    if (!utils.isAddress(tokenFromSearchParams)) {
+      return false
+    }
+    return isLoadingTokenLists
+  }, [tokenFromSearchParams, isLoadingTokenLists])
+
   const tokenLogoSrc = useMemo(() => {
     if (typeof options?.logoSrc !== 'undefined') {
       return options.logoSrc || nativeCurrency.logoUrl
@@ -90,19 +105,27 @@ export function TokenButton({
               disabled={disabled}
             >
               <div className="flex items-center gap-2">
-                <SafeImage
-                  src={tokenLogoSrc}
-                  alt={`${selectedToken?.symbol ?? nativeCurrency.symbol} logo`}
-                  className="h-5 w-5 shrink-0"
-                />
-                <span className="text-xl font-light">{tokenSymbol}</span>
-                {!disabled && (
-                  <ChevronDownIcon
-                    className={twMerge(
-                      'h-3 w-3 text-gray-6 transition-transform duration-200',
-                      open ? '-rotate-180' : 'rotate-0'
+                {isLoadingToken ? (
+                  <Loader size="small" color="white" />
+                ) : (
+                  <>
+                    <SafeImage
+                      src={tokenLogoSrc}
+                      alt={`${
+                        selectedToken?.symbol ?? nativeCurrency.symbol
+                      } logo`}
+                      className="h-5 w-5 shrink-0"
+                    />
+                    <span className="text-xl font-light">{tokenSymbol}</span>
+                    {!disabled && (
+                      <ChevronDownIcon
+                        className={twMerge(
+                          'h-3 w-3 text-gray-6 transition-transform duration-200',
+                          open ? '-rotate-180' : 'rotate-0'
+                        )}
+                      />
                     )}
-                  />
+                  </>
                 )}
               </div>
             </Popover.Button>

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx

@@ -4,7 +4,7 @@ import { useLatest } from 'react-use'
 import { create } from 'zustand'
 
 import { useERC20L1Address } from '../../hooks/useERC20L1Address'
-import { useActions, useAppState } from '../../state'
+import { useAppState } from '../../state'
 import {
   erc20DataToErc20BridgeToken,
   fetchErc20Data,
@@ -22,6 +22,7 @@ import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
 import { TokenInfo } from './TokenInfo'
 import { NoteBox } from '../common/NoteBox'
 import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
+import { useSelectedToken } from '../../hooks/useSelectedToken'
 
 enum ImportStatus {
   LOADING,
@@ -66,10 +67,10 @@ export function TokenImportDialog({
   const { address: walletAddress } = useAccount()
   const {
     app: {
-      arbTokenBridge: { bridgeTokens, token },
-      selectedToken
+      arbTokenBridge: { bridgeTokens, token }
     }
   } = useAppState()
+  const [selectedToken, setSelectedToken] = useSelectedToken()
   const [networks] = useNetworks()
   const {
     childChain,
@@ -78,7 +79,6 @@ export function TokenImportDialog({
     parentChainProvider,
     isTeleportMode
   } = useNetworksRelationship(networks)
-  const actions = useActions()
 
   const tokensFromUser = useTokensFromUser()
   const latestTokensFromUser = useLatest(tokensFromUser)
@@ -177,9 +177,9 @@ export function TokenImportDialog({
   const selectToken = useCallback(
     async (_token: ERC20BridgeToken) => {
       await token.updateTokenData(_token.address)
-      actions.app.setSelectedToken(_token)
+      setSelectedToken(_token.address)
     },
-    [token, actions]
+    [token, setSelectedToken]
   )
 
   useEffect(() => {
@@ -258,7 +258,6 @@ export function TokenImportDialog({
     l1Address,
     onClose,
     selectToken,
-    selectedToken,
     tokensFromUser
   ])