feat: show token tooltip in transfer summary

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

@@ -15,12 +15,11 @@ import {
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { Transition } from '../common/Transition'
-import { SafeImage } from '../common/SafeImage'
-import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
+import { TokenLogo } from './TokenLogo'
 
 export type TokenButtonOptions = {
   symbol?: string
-  logoSrc?: string
+  logoSrc?: string | null
   disabled?: boolean
 }
 
@@ -37,9 +36,6 @@ export function TokenButton({
   const [networks] = useNetworks()
   const { childChainProvider } = useNetworksRelationship(networks)
 
-  const tokensFromLists = useTokensFromLists()
-  const tokensFromUser = useTokensFromUser()
-
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const tokenSymbol = useMemo(() => {
@@ -57,27 +53,6 @@ export function TokenButton({
     })
   }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol, options])
 
-  const tokenLogoSrc = useMemo(() => {
-    if (typeof options?.logoSrc !== 'undefined') {
-      return options.logoSrc || nativeCurrency.logoUrl
-    }
-
-    if (selectedToken) {
-      return (
-        tokensFromLists[selectedToken.address]?.logoURI ??
-        tokensFromUser[selectedToken.address]?.logoURI
-      )
-    }
-
-    return nativeCurrency.logoUrl
-  }, [
-    nativeCurrency.logoUrl,
-    options,
-    selectedToken,
-    tokensFromLists,
-    tokensFromUser
-  ])
-
   return (
     <>
       <Popover className="relative">
@@ -90,11 +65,7 @@ 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"
-                />
+                <TokenLogo srcOverride={options?.logoSrc} />
                 <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
                   <ChevronDownIcon

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

@@ -0,0 +1,82 @@
+import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
+import { useNetworks } from '../../hooks/useNetworks'
+import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
+import { Tooltip } from '../common/Tooltip'
+import { TokenLogo } from './TokenLogo'
+import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { ExternalLink } from '../common/ExternalLink'
+import { shortenAddress } from '../../util/CommonUtils'
+import { getExplorerUrl } from '../../util/networks'
+import { ChainId } from '../../types/ChainId'
+import { isTokenNativeUSDC } from '../../util/TokenUtils'
+
+export function BlockExplorerTokenLink({
+  chainId,
+  address
+}: {
+  chainId: ChainId
+  address: string | undefined
+}) {
+  if (typeof address === 'undefined') {
+    return null
+  }
+
+  return (
+    <ExternalLink
+      href={`${getExplorerUrl(chainId)}/token/${address}`}
+      className="arb-hover text-xs underline"
+      onClick={e => e.stopPropagation()}
+    >
+      {shortenAddress(address).toLowerCase()}
+    </ExternalLink>
+  )
+}
+
+export const TokenInfoTooltip = ({
+  token
+}: {
+  token: ERC20BridgeToken | null
+}) => {
+  const [networks] = useNetworks()
+  const { isDepositMode, childChainProvider } =
+    useNetworksRelationship(networks)
+  const childChainNativeCurrency = useNativeCurrency({
+    provider: childChainProvider
+  })
+
+  if (!token || isTokenNativeUSDC(token.address)) {
+    return <span>{token?.symbol ?? childChainNativeCurrency.symbol}</span>
+  }
+
+  const tokenAddress = isDepositMode ? token.l2Address : token.address
+
+  return (
+    <Tooltip
+      wrapperClassName="underline cursor-pointer"
+      theme="dark"
+      content={
+        <div className="flex items-center space-x-2">
+          <TokenLogo srcOverride={token.logoURI} className="h-7 w-7" />
+          <div className="flex flex-col">
+            <div className="flex space-x-1">
+              <span className="text-lg font-normal">{token.symbol}</span>
+              <span className="pt-[4px] text-xs font-normal text-gray-400">
+                {token.name}
+              </span>
+            </div>
+            <BlockExplorerTokenLink
+              chainId={networks.destinationChain.id}
+              address={tokenAddress}
+            />
+          </div>
+        </div>
+      }
+      tippyProps={{
+        arrow: false,
+        interactive: true
+      }}
+    >
+      {token.symbol}
+    </Tooltip>
+  )
+}

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

@@ -0,0 +1,67 @@
+import { useMemo } from 'react'
+
+import { useAppState } from '../../state'
+import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
+import { useNetworks } from '../../hooks/useNetworks'
+import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
+import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { SafeImage } from '../common/SafeImage'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Shows the selected token logo by default.
+ * @param {Object} props
+ * @param {string | null} [props.srcOverride] - Optional URL to override default token logo source
+ * @param {string | undefined} [props.className] - Class name override
+ */
+export const TokenLogo = ({
+  srcOverride,
+  className
+}: {
+  srcOverride?: string | null
+  className?: string
+}) => {
+  const {
+    app: { selectedToken }
+  } = useAppState()
+  const tokensFromLists = useTokensFromLists()
+  const tokensFromUser = useTokensFromUser()
+
+  const [networks] = useNetworks()
+  const { childChainProvider } = useNetworksRelationship(networks)
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+
+  const src = useMemo(() => {
+    // Override to show the native currency logo
+    if (srcOverride === null) {
+      return nativeCurrency.logoUrl
+    }
+
+    if (typeof srcOverride !== 'undefined') {
+      return srcOverride
+    }
+
+    if (selectedToken) {
+      return (
+        tokensFromLists[selectedToken.address]?.logoURI ??
+        tokensFromUser[selectedToken.address]?.logoURI
+      )
+    }
+
+    return nativeCurrency.logoUrl
+  }, [
+    nativeCurrency.logoUrl,
+    selectedToken,
+    srcOverride,
+    tokensFromLists,
+    tokensFromUser
+  ])
+
+  return (
+    <SafeImage
+      src={src}
+      alt="Token logo"
+      className={twMerge('h-5 w-5 shrink-0', className)}
+    />
+  )
+}

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

@@ -4,7 +4,6 @@ import {
   CheckCircleIcon,
   ExclamationCircleIcon
 } from '@heroicons/react/24/outline'
-import { Chain } from 'wagmi'
 
 import { Loader } from '../common/atoms/Loader'
 import { useAppState } from '../../state'
@@ -13,26 +12,25 @@ import {
   SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID
 } from '../../util/TokenListUtils'
 import { formatAmount } from '../../util/NumberUtils'
-import { shortenAddress } from '../../util/CommonUtils'
 import {
   isTokenArbitrumOneNativeUSDC,
   isTokenArbitrumSepoliaNativeUSDC,
   sanitizeTokenName,
   sanitizeTokenSymbol
 } from '../../util/TokenUtils'
 import { SafeImage } from '../common/SafeImage'
-import { getExplorerUrl, getNetworkName } from '../../util/networks'
+import { getNetworkName } from '../../util/networks'
 import { Tooltip } from '../common/Tooltip'
 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 { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { TokenLogoFallback } from './TokenInfo'
 import { useBalanceOnSourceChain } from '../../hooks/useBalanceOnSourceChain'
 import { useSourceChainNativeCurrencyDecimals } from '../../hooks/useSourceChainNativeCurrencyDecimals'
+import { BlockExplorerTokenLink } from './TokenInfoTooltip'
 
 function tokenListIdsToNames(ids: string[]): string {
   return ids
@@ -48,28 +46,6 @@ function StyledLoader() {
   )
 }
 
-function BlockExplorerTokenLink({
-  chain,
-  address
-}: {
-  chain: Chain
-  address: string | undefined
-}) {
-  if (typeof address === 'undefined') {
-    return null
-  }
-
-  return (
-    <ExternalLink
-      href={`${getExplorerUrl(chain.id)}/token/${address}`}
-      className="arb-hover text-xs underline"
-      onClick={e => e.stopPropagation()}
-    >
-      {shortenAddress(address).toLowerCase()}
-    </ExternalLink>
-  )
-}
-
 function TokenListInfo({ token }: { token: ERC20BridgeToken | null }) {
   const [networks] = useNetworks()
   const { childChain, childChainProvider } = useNetworksRelationship(networks)
@@ -311,7 +287,7 @@ function TokenContractLink({ token }: { token: ERC20BridgeToken | null }) {
   if (isCustomFeeTokenRow && isDepositMode) {
     return (
       <BlockExplorerTokenLink
-        chain={parentChain}
+        chainId={parentChain.id}
         address={nativeCurrency.address}
       />
     )
@@ -323,15 +299,21 @@ function TokenContractLink({ token }: { token: ERC20BridgeToken | null }) {
 
   if (isDepositMode) {
     return token?.isL2Native ? (
-      <BlockExplorerTokenLink chain={childChain} address={token.address} />
+      <BlockExplorerTokenLink chainId={childChain.id} address={token.address} />
     ) : (
-      <BlockExplorerTokenLink chain={parentChain} address={token.address} />
+      <BlockExplorerTokenLink
+        chainId={parentChain.id}
+        address={token.address}
+      />
     )
   }
 
   if (typeof token.l2Address !== 'undefined') {
     return (
-      <BlockExplorerTokenLink chain={childChain} address={token.l2Address} />
+      <BlockExplorerTokenLink
+        chainId={childChain.id}
+        address={token.l2Address}
+      />
     )
   }
   return (

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

@@ -161,11 +161,10 @@ export function SourceNetworkBox() {
             )
           )
         : undefined,
-      logoSrc: nativeCurrency.logoUrl
+      logoSrc: null
     }),
     [
       nativeCurrency.symbol,
-      nativeCurrency.logoUrl,
       nativeCurrencyBalances.sourceBalance,
       nativeCurrencyDecimalsOnSourceChain
     ]