feat: ETH transfers custom native token chains part 1

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,12 +1,15 @@
 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'
+import {
+  nativeCurrencyEther,
+  useNativeCurrency
+} from '../../hooks/useNativeCurrency'
 import {
   onPopoverButtonClick,
   onPopoverClose,
@@ -17,6 +20,12 @@ 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 { useIsSelectedTokenEther } from '../../hooks/useIsSelectedTokenEther'
+import { ether } from '../../constants'
+import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 
 export type TokenButtonOptions = {
   symbol?: string
@@ -29,39 +38,61 @@ 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()
 
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+  const isSelectedTokenEther = useIsSelectedTokenEther()
 
   const tokenSymbol = useMemo(() => {
     if (typeof options?.symbol !== 'undefined') {
       return options.symbol
     }
 
     if (!selectedToken) {
-      return nativeCurrency.symbol
+      return isSelectedTokenEther ? ether.symbol : nativeCurrency.symbol
     }
 
     return sanitizeTokenSymbol(selectedToken.symbol, {
       erc20L1Address: selectedToken.address,
       chainId: networks.sourceChain.id
     })
-  }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol, options])
+  }, [
+    selectedToken,
+    networks.sourceChain.id,
+    nativeCurrency.symbol,
+    isSelectedTokenEther,
+    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
     }
 
+    if (isSelectedTokenEther) {
+      return nativeCurrencyEther.logoUrl
+    }
+
     if (selectedToken) {
       return (
         tokensFromLists[selectedToken.address]?.logoURI ??
@@ -71,6 +102,7 @@ export function TokenButton({
 
     return nativeCurrency.logoUrl
   }, [
+    isSelectedTokenEther,
     nativeCurrency.logoUrl,
     options,
     selectedToken,
@@ -90,19 +122,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>