feat: show token tooltip in transfer summary

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

@@ -20,7 +20,7 @@ import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
 
 export type TokenButtonOptions = {
   symbol?: string
-  logoSrc?: string
+  logoSrc?: string | null
   disabled?: boolean
 }
 

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

@@ -0,0 +1,93 @@
+import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
+import { useNetworks } from '../../hooks/useNetworks'
+import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
+import { shortenAddress } from '../../util/CommonUtils'
+import { captureSentryErrorWithExtraData } from '../../util/SentryUtils'
+import { ExternalLink } from '../common/ExternalLink'
+import { Tooltip } from '../common/Tooltip'
+import { TokenLogo } from './TokenLogo'
+import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+
+const createBlockExplorerUrlForToken = ({
+  explorerLink,
+  tokenAddress
+}: {
+  explorerLink: string | undefined
+  tokenAddress: string | undefined
+}): string | undefined => {
+  if (!explorerLink) {
+    return undefined
+  }
+  if (!tokenAddress) {
+    return undefined
+  }
+  try {
+    const url = new URL(explorerLink)
+    url.pathname += `token/${tokenAddress}`
+    return url.toString()
+  } catch (error) {
+    captureSentryErrorWithExtraData({
+      error,
+      originFunction: 'createBlockExplorerUrlForToken'
+    })
+    return undefined
+  }
+}
+
+export const TokenInfoTooltip = ({
+  token
+}: {
+  token: ERC20BridgeToken | null
+}) => {
+  const [networks] = useNetworks()
+  const { isDepositMode, childChainProvider } =
+    useNetworksRelationship(networks)
+  const childChainNativeCurrency = useNativeCurrency({
+    provider: childChainProvider
+  })
+
+  if (!token) {
+    return <span>{childChainNativeCurrency.symbol}</span>
+  }
+
+  const tokenAddress = isDepositMode ? token.address : token.l2Address
+
+  const href = createBlockExplorerUrlForToken({
+    explorerLink: networks.sourceChain.blockExplorers?.default.url,
+    tokenAddress
+  })
+
+  return (
+    <Tooltip
+      wrapperClassName="underline"
+      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>
+            {href && tokenAddress && (
+              <ExternalLink
+                className="arb-hover text-xs text-gray-300 underline"
+                href={href}
+              >
+                <span>{shortenAddress(tokenAddress)}</span>
+              </ExternalLink>
+            )}
+          </div>
+        </div>
+      }
+      tippyProps={{
+        arrow: false,
+        interactive: true
+      }}
+    >
+      {token.symbol}
+    </Tooltip>
+  )
+}

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

@@ -0,0 +1,66 @@
+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
+ */
+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/TransferPanelMain/SourceNetworkBox.tsx

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

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

@@ -4,24 +4,23 @@ import { twMerge } from 'tailwind-merge'
 import Image from 'next/image'
 
 import { formatAmount } from '../../util/NumberUtils'
-import { getNetworkName, isNetwork } from '../../util/networks'
+import { getNetworkName } from '../../util/networks'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { useGasSummary } from '../../hooks/TransferPanel/useGasSummary'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
-import { TokenSymbolWithExplorerLink } from '../common/TokenSymbolWithExplorerLink'
 import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { NativeCurrencyPrice, useIsBridgingEth } from './NativeCurrencyPrice'
 import { useAppState } from '../../state'
 import { Loader } from '../common/atoms/Loader'
 import { Tooltip } from '../common/Tooltip'
-import { isTokenNativeUSDC } from '../../util/TokenUtils'
 import { NoteBox } from '../common/NoteBox'
 import { DISABLED_CHAIN_IDS } from './useTransferReadiness'
 import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { getConfirmationTime } from '../../util/WithdrawalUtils'
 import LightningIcon from '@/images/LightningIcon.svg'
+import { TokenInfoTooltip } from './TokenInfoTooltip'
 
 export type TransferPanelSummaryToken = {
   symbol: string
@@ -190,16 +189,6 @@ export function TransferPanelSummary({ token }: TransferPanelSummaryProps) {
   const [{ amount, amount2 }] = useArbQueryParams()
   const isBatchTransferSupported = useIsBatchTransferSupported()
 
-  const {
-    isArbitrumOne: isDestinationChainArbitrumOne,
-    isArbitrumSepolia: isDestinationChainArbitrumSepolia
-  } = isNetwork(networks.destinationChain.id)
-
-  const isDepositingUSDCtoArbOneOrArbSepolia =
-    isTokenNativeUSDC(token?.address) &&
-    isDepositMode &&
-    (isDestinationChainArbitrumOne || isDestinationChainArbitrumSepolia)
-
   if (gasSummaryStatus === 'unavailable') {
     return (
       <TransferPanelSummaryContainer>
@@ -242,16 +231,9 @@ export function TransferPanelSummary({ token }: TransferPanelSummaryProps) {
         <span>
           You will receive on {getNetworkName(networks.destinationChain.id)}:
         </span>
-        <span className="font-medium">
+        <span className="flex space-x-1 font-medium">
           <span className="tabular-nums">{formatAmount(Number(amount))}</span>{' '}
-          {isDepositingUSDCtoArbOneOrArbSepolia ? (
-            <>USDC</>
-          ) : (
-            <TokenSymbolWithExplorerLink
-              token={token}
-              isParentChain={!isDepositMode}
-            />
-          )}
+          <TokenInfoTooltip token={token} />
           {isBridgingEth && (
             <NativeCurrencyPrice amount={Number(amount)} showBrackets />
           )}