feat: ETH transfers custom native token chains part 1

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

@@ -19,6 +19,8 @@ import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { Loader } from '../common/atoms/Loader'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { useTokenLists } from '../../hooks/useTokenLists'
+import { useIsSelectedTokenEther } from '../../hooks/useIsSelectedTokenEther'
+import { ether } from '../../constants'
 
 export type TokenButtonOptions = {
   symbol?: string
@@ -39,21 +41,28 @@ export function TokenButton({
   const [{ token: tokenFromSearchParams }] = useArbQueryParams()
 
   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

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

@@ -27,7 +27,11 @@ import { StatusBadge } from '../common/StatusBadge'
 import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { ExternalLink } from '../common/ExternalLink'
 import { useAccountType } from '../../hooks/useAccountType'
-import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import {
+  isNativeCurrencyEther,
+  NativeCurrencyEther,
+  useNativeCurrency
+} from '../../hooks/useNativeCurrency'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { TokenLogoFallback } from './TokenInfo'
@@ -70,14 +74,23 @@ function BlockExplorerTokenLink({
   )
 }
 
-function TokenListInfo({ token }: { token: ERC20BridgeToken | null }) {
+function TokenListInfo({
+  token
+}: {
+  token: ERC20BridgeToken | NativeCurrencyEther | null
+}) {
   const [networks] = useNetworks()
-  const { childChain, childChainProvider } = useNetworksRelationship(networks)
+  const { childChain, childChainProvider, parentChain } =
+    useNetworksRelationship(networks)
   const { isCustom: childChainNativeCurrencyIsCustom } = useNativeCurrency({
     provider: childChainProvider
   })
 
   const tokenListInfo = useMemo(() => {
+    if (isNativeCurrencyEther(token)) {
+      return null
+    }
+
     if (!token) {
       return null
     }
@@ -110,6 +123,16 @@ function TokenListInfo({ token }: { token: ERC20BridgeToken | null }) {
     )
   }, [token])
 
+  if (isNativeCurrencyEther(token)) {
+    const parentChainName = getNetworkName(parentChain.id)
+
+    return (
+      <span className="flex text-xs text-white/70">
+        Native token on {parentChainName}
+      </span>
+    )
+  }
+
   if (!token) {
     const nativeTokenChain = getNetworkName(
       (childChainNativeCurrencyIsCustom ? childChain : networks.sourceChain).id
@@ -136,18 +159,24 @@ function TokenListInfo({ token }: { token: ERC20BridgeToken | null }) {
 
 interface TokenRowProps {
   style?: React.CSSProperties
-  onTokenSelected: (token: ERC20BridgeToken | null) => void
-  token: ERC20BridgeToken | null
+  onTokenSelected: (parentErc20Address: string | null) => void
+  token: ERC20BridgeToken | NativeCurrencyEther | null
 }
 
-function useTokenInfo(token: ERC20BridgeToken | null) {
+function useTokenInfo(token: ERC20BridgeToken | NativeCurrencyEther | null) {
   const [networks] = useNetworks()
   const { childChain, childChainProvider, parentChain, isDepositMode } =
     useNetworksRelationship(networks)
   const chainId = isDepositMode ? parentChain.id : childChain.id
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const name = useMemo(() => {
+    if (isNativeCurrencyEther(token)) {
+      return sanitizeTokenName(token.name, {
+        chainId
+      })
+    }
+
     if (token) {
       return sanitizeTokenName(token.name, {
         erc20L1Address: token.address,
@@ -159,6 +188,12 @@ function useTokenInfo(token: ERC20BridgeToken | null) {
   }, [token, nativeCurrency.name, chainId])
 
   const symbol = useMemo(() => {
+    if (isNativeCurrencyEther(token)) {
+      return sanitizeTokenSymbol(token.symbol, {
+        chainId
+      })
+    }
+
     if (token) {
       return sanitizeTokenSymbol(token.symbol, {
         erc20L1Address: token.address,
@@ -169,7 +204,19 @@ function useTokenInfo(token: ERC20BridgeToken | null) {
     return nativeCurrency.symbol
   }, [token, nativeCurrency.symbol, chainId])
 
+  const parentAddress = useMemo(() => {
+    if (isNativeCurrencyEther(token)) {
+      return null
+    }
+
+    return token?.symbol ?? null
+  }, [token])
+
   const logoURI = useMemo(() => {
+    if (isNativeCurrencyEther(token)) {
+      return token.logoUrl
+    }
+
     if (!token) {
       return nativeCurrency.logoUrl
     }
@@ -180,6 +227,10 @@ function useTokenInfo(token: ERC20BridgeToken | null) {
   const balance = useBalanceOnSourceChain(token)
 
   const isArbitrumToken = useMemo(() => {
+    if (isNativeCurrencyEther(token)) {
+      return false
+    }
+
     if (!token) {
       return false
     }
@@ -199,6 +250,10 @@ function useTokenInfo(token: ERC20BridgeToken | null) {
   }, [token, isArbitrumToken])
 
   const isBridgeable = useMemo(() => {
+    if (isNativeCurrencyEther(token)) {
+      return true
+    }
+
     if (!token) {
       return true
     }
@@ -217,6 +272,7 @@ function useTokenInfo(token: ERC20BridgeToken | null) {
   return {
     name,
     symbol,
+    parentAddress,
     logoURI,
     balance,
     isArbitrumToken,
@@ -237,7 +293,11 @@ function ArbitrumTokenBadge() {
   )
 }
 
-function TokenBalance({ token }: { token: ERC20BridgeToken | null }) {
+function TokenBalance({
+  token
+}: {
+  token: ERC20BridgeToken | NativeCurrencyEther | null
+}) {
   const {
     app: {
       arbTokenBridge: { bridgeTokens }
@@ -258,6 +318,10 @@ function TokenBalance({ token }: { token: ERC20BridgeToken | null }) {
       return true
     }
 
+    if (isNativeCurrencyEther(token)) {
+      return true
+    }
+
     if (!token) {
       return true
     }
@@ -299,7 +363,11 @@ function TokenBalance({ token }: { token: ERC20BridgeToken | null }) {
   )
 }
 
-function TokenContractLink({ token }: { token: ERC20BridgeToken | null }) {
+function TokenContractLink({
+  token
+}: {
+  token: ERC20BridgeToken | NativeCurrencyEther | null
+}) {
   const [networks] = useNetworks()
   const { childChain, childChainProvider, parentChain, isDepositMode } =
     useNetworksRelationship(networks)
@@ -308,6 +376,10 @@ function TokenContractLink({ token }: { token: ERC20BridgeToken | null }) {
 
   const isCustomFeeTokenRow = token === null && nativeCurrency.isCustom
 
+  if (isNativeCurrencyEther(token)) {
+    return null
+  }
+
   if (isCustomFeeTokenRow && isDepositMode) {
     return (
       <BlockExplorerTokenLink
@@ -355,10 +427,18 @@ export function TokenRow({
     isBridgeable: tokenIsBridgeable
   } = useTokenInfo(token)
 
+  const tokenQueryParamParentAddressOrKey = useMemo(() => {
+    if (isNativeCurrencyEther(token)) {
+      return 'eth'
+    }
+
+    return token?.address.toLowerCase() ?? null
+  }, [token])
+
   return (
     <button
       type="button"
-      onClick={() => onTokenSelected(token)}
+      onClick={() => onTokenSelected(tokenQueryParamParentAddressOrKey)}
       style={{ ...style, minHeight: '84px' }}
       disabled={!tokenIsBridgeable}
       className={twMerge(