From 5fb64fcd000d84ef21b30bb80df2d70f94c6935a Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 13 Sep 2024 15:35:09 +0200
Subject: [PATCH 01/20] network box redesign

---
 .../TransferPanel/TransferPanelMain.tsx       |  38 +---
 .../DestinationNetworkBox.tsx                 | 192 ++++++++----------
 .../TransferPanelMain/SourceNetworkBox.tsx    |  26 ++-
 3 files changed, 105 insertions(+), 151 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
index 0a07b7aaaf..cae7be148f 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
@@ -3,7 +3,6 @@ import { ArrowsUpDownIcon, ArrowDownIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 import { utils } from 'ethers'
 import { Chain, useAccount } from 'wagmi'
-import { useMedia } from 'react-use'
 
 import { useAppState } from '../../state'
 import { getExplorerUrl, isNetwork } from '../../util/networks'
@@ -138,7 +137,6 @@ function CustomAddressBanner({
 export function NetworkContainer({
   network,
   customAddress,
-  bgLogoHeight = 58,
   children
 }: {
   network: Chain
@@ -147,13 +145,7 @@ export function NetworkContainer({
   children: React.ReactNode
 }) {
   const { address } = useAccount()
-  const {
-    color,
-    network: { logo: networkLogo }
-  } = getBridgeUiConfigForChain(network.id)
-  const isSmallScreen = useMedia('(max-width: 639px)')
-
-  const backgroundImage = `url(${networkLogo})`
+  const { color } = getBridgeUiConfigForChain(network.id)
 
   const walletAddressLowercased = address?.toLowerCase()
 
@@ -182,13 +174,7 @@ export function NetworkContainer({
           showCustomAddressBanner && 'rounded-t-none'
         )}
       >
-        <div
-          className="absolute left-0 top-0 h-full w-full bg-[-2px_0] bg-no-repeat bg-origin-content p-3 opacity-50"
-          style={{
-            backgroundImage,
-            backgroundSize: `auto ${bgLogoHeight + (isSmallScreen ? -12 : 0)}px`
-          }}
-        />
+        <div className="absolute left-0 top-0 h-full w-full bg-[-2px_0] bg-no-repeat bg-origin-content p-3 opacity-50" />
         <div className="relative space-y-3.5 bg-contain bg-no-repeat p-3 sm:flex-row">
           {children}
         </div>
@@ -197,26 +183,6 @@ export function NetworkContainer({
   )
 }
 
-export function BalancesContainer({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col flex-nowrap items-end break-all text-sm tracking-[.25px] text-white sm:text-lg">
-      {children}
-    </div>
-  )
-}
-
-export function NetworkListboxPlusBalancesContainer({
-  children
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <div className="flex flex-row flex-wrap items-center justify-between gap-1 gap-y-2.5 whitespace-nowrap">
-      {children}
-    </div>
-  )
-}
-
 export function TransferPanelMain() {
   const [networks] = useNetworks()
   const { childChain, childChainProvider, isTeleportMode } =
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index eab8ef604e..09eb626baa 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -1,17 +1,11 @@
 import { constants } from 'ethers'
+import Image from 'next/image'
 
 import { useNetworks } from '../../../hooks/useNetworks'
 import { useDestinationAddressStore } from '../AdvancedSettings'
-import {
-  BalancesContainer,
-  NetworkContainer,
-  NetworkListboxPlusBalancesContainer
-} from '../TransferPanelMain'
-import { TokenBalance } from './TokenBalance'
+import { NetworkContainer } from '../TransferPanelMain'
 import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
-import { NetworkType } from './utils'
 import { useAppState } from '../../../state'
-import { sanitizeTokenSymbol } from '../../../util/TokenUtils'
 import { useBalances } from '../../../hooks/useBalances'
 import { CommonAddress } from '../../../util/CommonAddressUtils'
 import { isNetwork } from '../../../util/networks'
@@ -26,54 +20,33 @@ import {
 import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
 import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { useArbQueryParams } from '../../../hooks/useArbQueryParams'
-import { ether } from '../../../constants'
 import { formatAmount } from '../../../util/NumberUtils'
 import { Loader } from '../../common/atoms/Loader'
+import { getBridgeUiConfigForChain } from '../../../util/bridgeUiConfig'
 
-function NativeCurrencyDestinationBalance({ prefix }: { prefix?: string }) {
-  const nativeCurrencyBalances = useNativeCurrencyBalances()
-  const [networks] = useNetworks()
-  const nativeCurrency = useNativeCurrency({
-    provider: networks.destinationChainProvider
-  })
-  const { isDepositMode } = useNetworksRelationship(networks)
-
-  if (nativeCurrency.isCustom) {
-    return (
-      <TokenBalance
-        forToken={nativeCurrency}
-        balance={nativeCurrencyBalances.destinationBalance}
-        on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
-        prefix={prefix}
-      />
-    )
-  }
-  if (!nativeCurrencyBalances.destinationBalance) {
-    return (
-      <p className="flex items-center gap-1">
-        <span className="font-light">{prefix}</span>
-        <Loader color="white" size="small" />
-      </p>
-    )
-  }
-
+function BalanceRow({
+  symbol,
+  balance
+}: {
+  symbol: string
+  balance: string | undefined
+}) {
   return (
-    <p>
-      <span className="font-light">{prefix}</span>
-      <span
-        aria-label={`ETH balance amount on ${
-          isDepositMode ? NetworkType.childChain : NetworkType.parentChain
-        }`}
-      >
-        {formatAmount(nativeCurrencyBalances.destinationBalance, {
-          symbol: ether.symbol
-        })}
-      </span>
-    </p>
+    <div className="flex justify-between py-3 text-sm">
+      <span>{symbol}</span>
+      <div className="flex">
+        Balance:{' '}
+        {balance ? (
+          balance
+        ) : (
+          <Loader wrapperClass="ml-2" size="small" color="white" />
+        )}
+      </div>
+    </div>
   )
 }
 
-function DestinationNetworkBalance({
+function BalancesContainer({
   showUsdcSpecificInfo
 }: {
   showUsdcSpecificInfo: boolean
@@ -84,69 +57,66 @@ function DestinationNetworkBalance({
   const [networks] = useNetworks()
   const { childChain, childChainProvider, isDepositMode } =
     useNetworksRelationship(networks)
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
   const { isArbitrumOne } = isNetwork(childChain.id)
 
+  const [{ amount2 }] = useArbQueryParams()
+  const isBatchTransferSupported = useIsBatchTransferSupported()
+
   const { erc20ChildBalances } = useBalances()
   const nativeCurrencyBalances = useNativeCurrencyBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
 
-  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+  const selectedTokenDestinationBalance = isDepositMode
+    ? selectedTokenBalances.childBalance
+    : selectedTokenBalances.parentBalance
 
-  if (selectedToken) {
-    return (
-      <>
-        <TokenBalance
+  const selectedTokenOrNativeCurrencyBalance = selectedToken
+    ? selectedTokenDestinationBalance
+    : nativeCurrencyBalances.destinationBalance
+
+  return (
+    <div
+      className="rounded px-4 text-white [&>*+*]:border-t [&>*+*]:border-gray-600"
+      style={{ backgroundColor: '#00000050' }}
+    >
+      <BalanceRow
+        symbol={selectedToken ? selectedToken.symbol : nativeCurrency.symbol}
+        balance={
+          selectedTokenOrNativeCurrencyBalance
+            ? formatAmount(selectedTokenOrNativeCurrencyBalance, {
+                decimals: selectedToken
+                  ? selectedToken.decimals
+                  : nativeCurrency.decimals
+              })
+            : undefined
+        }
+      />
+      {isBatchTransferSupported && Number(amount2) > 0 && (
+        <BalanceRow
+          symbol={nativeCurrency.symbol}
           balance={
-            isDepositMode
-              ? selectedTokenBalances.childBalance
-              : selectedTokenBalances.parentBalance
-          }
-          on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
-          forToken={selectedToken}
-          tokenSymbolOverride={
-            // we need to send the proper, sanitized token-name to the component
-            selectedToken?.symbol
-              ? sanitizeTokenSymbol(selectedToken?.symbol, {
-                  chainId: networks.destinationChain.id,
-                  erc20L1Address: selectedToken?.address
+            nativeCurrencyBalances.destinationBalance
+              ? formatAmount(nativeCurrencyBalances.destinationBalance, {
+                  decimals: nativeCurrency.decimals
                 })
               : undefined
           }
-          prefix="Balance: "
         />
-        {/* In deposit mode, when user selected USDC on mainnet,
-        the UI shows the Arb One balance of both USDC.e and native USDC */}
-        {showUsdcSpecificInfo && isDepositMode && (
-          <TokenBalance
-            balance={
-              (isArbitrumOne
-                ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
-                : erc20ChildBalances?.[CommonAddress.ArbitrumSepolia.USDC]) ??
+      )}
+      {showUsdcSpecificInfo && isDepositMode && (
+        <BalanceRow
+          symbol="USDC.e"
+          balance={formatAmount(
+            (isArbitrumOne
+              ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
+              : erc20ChildBalances?.[CommonAddress.ArbitrumSepolia.USDC]) ??
               constants.Zero
-            }
-            on={NetworkType.childChain}
-            forToken={
-              selectedToken ? { ...selectedToken, symbol: 'USDC' } : null
-            }
-            tokenSymbolOverride="USDC"
-          />
-        )}
-      </>
-    )
-  }
-
-  if (nativeCurrency.isCustom) {
-    return (
-      <TokenBalance
-        on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
-        balance={nativeCurrencyBalances.destinationBalance}
-        forToken={nativeCurrency}
-        prefix="Balance: "
-      />
-    )
-  }
-
-  return <NativeCurrencyDestinationBalance prefix="Balance: " />
+          )}
+        />
+      )}
+    </div>
+  )
 }
 
 export function DestinationNetworkBox({
@@ -156,12 +126,13 @@ export function DestinationNetworkBox({
 }) {
   const [networks] = useNetworks()
   const { destinationAddress } = useDestinationAddressStore()
-  const [{ amount2 }] = useArbQueryParams()
-  const isBatchTransferSupported = useIsBatchTransferSupported()
   const [
     destinationNetworkSelectionDialogProps,
     openDestinationNetworkSelectionDialog
   ] = useDialog()
+  const {
+    network: { logo: networkLogo }
+  } = getBridgeUiConfigForChain(networks.destinationChain.id)
 
   return (
     <>
@@ -169,20 +140,21 @@ export function DestinationNetworkBox({
         network={networks.destinationChain}
         customAddress={destinationAddress}
       >
-        <NetworkListboxPlusBalancesContainer>
+        <div className="flex justify-between">
           <NetworkButton
             type="destination"
             onClick={openDestinationNetworkSelectionDialog}
           />
-          <BalancesContainer>
-            <DestinationNetworkBalance
-              showUsdcSpecificInfo={showUsdcSpecificInfo}
+          <div className="relative h-[44px] w-[44px]">
+            <Image
+              src={networkLogo}
+              alt={`${networks.destinationChain.name} logo`}
+              layout={'fill'}
+              objectFit={'contain'}
             />
-            {isBatchTransferSupported && Number(amount2) > 0 && (
-              <NativeCurrencyDestinationBalance />
-            )}
-          </BalancesContainer>
-        </NetworkListboxPlusBalancesContainer>
+          </div>
+        </div>
+        <BalancesContainer showUsdcSpecificInfo={showUsdcSpecificInfo} />
         <EstimatedGas chainType="destination" />
       </NetworkContainer>
       <NetworkSelectionContainer
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
index d84ab52fa3..286bd4851d 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
@@ -6,6 +6,7 @@ import {
   useState
 } from 'react'
 import { utils } from 'ethers'
+import Image from 'next/image'
 import { PlusCircleIcon } from '@heroicons/react/24/outline'
 
 import { getNetworkName } from '../../../util/networks'
@@ -37,6 +38,7 @@ import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsB
 import { Button } from '../../common/Button'
 import { useSelectedTokenDecimals } from '../../../hooks/TransferPanel/useSelectedTokenDecimals'
 import { useBalanceOnSourceChain } from '../../../hooks/useBalanceOnSourceChain'
+import { getBridgeUiConfigForChain } from '../../../util/bridgeUiConfig'
 
 function Amount2ToggleButton({
   onClick
@@ -81,6 +83,10 @@ export function SourceNetworkBox({
   const { errorMessages } = useTransferReadiness()
   const ethBalanceSourceChain = useBalanceOnSourceChain(null)
 
+  const {
+    network: { logo: networkLogo }
+  } = getBridgeUiConfigForChain(networks.sourceChain.id)
+
   const isMaxAmount = amount === AmountQueryParamEnum.MAX
   const isMaxAmount2 = amount2 === AmountQueryParamEnum.MAX
 
@@ -139,11 +145,21 @@ export function SourceNetworkBox({
 
   return (
     <>
-      <NetworkContainer bgLogoHeight={138} network={networks.sourceChain}>
-        <NetworkButton
-          type="source"
-          onClick={openSourceNetworkSelectionDialog}
-        />
+      <NetworkContainer network={networks.sourceChain}>
+        <div className="flex justify-between">
+          <NetworkButton
+            type="source"
+            onClick={openSourceNetworkSelectionDialog}
+          />
+          <div className="relative h-[44px] w-[44px]">
+            <Image
+              src={networkLogo}
+              alt={`${networks.sourceChain.name} logo`}
+              layout={'fill'}
+              objectFit={'contain'}
+            />
+          </div>
+        </div>
 
         <div className="flex flex-col gap-1">
           <TransferPanelMainInput

From 79a5f764d4bcd692d961e3e0a263819a0989864d Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 13 Sep 2024 15:39:40 +0200
Subject: [PATCH 02/20] padding fix

---
 .../TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index 09eb626baa..16423f8ad7 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -77,7 +77,7 @@ function BalancesContainer({
 
   return (
     <div
-      className="rounded px-4 text-white [&>*+*]:border-t [&>*+*]:border-gray-600"
+      className="rounded px-3 text-white [&>*+*]:border-t [&>*+*]:border-gray-600"
       style={{ backgroundColor: '#00000050' }}
     >
       <BalanceRow

From a88fddd0ffe505daf19fb3d94522c0f3ae7199e7 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 13 Sep 2024 16:20:45 +0200
Subject: [PATCH 03/20] logo fixes

---
 .../public/images/USDCLogo.svg                |  5 ++++
 .../components/TransferPanel/TokenButton.tsx  | 24 +++++++++----------
 .../components/TransferPanel/TokenInfo.tsx    | 10 ++++++--
 .../DestinationNetworkBox.tsx                 | 21 ++++++++++++++--
 4 files changed, 44 insertions(+), 16 deletions(-)
 create mode 100644 packages/arb-token-bridge-ui/public/images/USDCLogo.svg

diff --git a/packages/arb-token-bridge-ui/public/images/USDCLogo.svg b/packages/arb-token-bridge-ui/public/images/USDCLogo.svg
new file mode 100644
index 0000000000..5dfea926e6
--- /dev/null
+++ b/packages/arb-token-bridge-ui/public/images/USDCLogo.svg
@@ -0,0 +1,5 @@
+<svg data-name="86977684-12db-4850-8f30-233a7c267d11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
+  <path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/>
+  <path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/>
+  <path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/>
+</svg>
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
index eaa43c8007..79b683abbf 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -15,6 +15,8 @@ import {
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { Transition } from '../common/Transition'
+import { SafeImage } from '../common/SafeImage'
+import { TokenLogoFallback } from './TokenInfo'
 
 export type TokenButtonOptions = {
   symbol?: string
@@ -63,18 +65,16 @@ export function TokenButton({
               disabled={disabled}
             >
               <div className="flex items-center gap-2">
-                {/* Commenting it out until we update the token image source files to be of better quality */}
-                {/* {tokenLogo && ( 
-                 // SafeImage is used for token logo, we don't know at buildtime
-                where those images will be loaded from // It would throw error
-                if it's loaded from external domains // eslint-disable-next-line
-                @next/next/no-img-element 
-                 <img
-                    src={tokenLogo}
-                    alt="Token logo"
-                    className="h-5 w-5 sm:h-7 sm:w-7"
-                  />
-                )} */}
+                <SafeImage
+                  src={
+                    selectedToken
+                      ? selectedToken.logoURI
+                      : nativeCurrency.logoUrl
+                  }
+                  alt={`${selectedToken?.symbol ?? nativeCurrency.symbol} logo`}
+                  className="h-5 w-5 shrink-0"
+                  fallback={<TokenLogoFallback className="h-5 w-5 text-xs" />}
+                />
                 <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
                   <ChevronDownIcon
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfo.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfo.tsx
index 624317d359..39d98c7f62 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfo.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenInfo.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { ExternalLink } from '../common/ExternalLink'
@@ -16,9 +17,14 @@ import {
 } from '../../util/TokenUtils'
 import { SafeImage } from '../common/SafeImage'
 
-export function TokenLogoFallback() {
+export function TokenLogoFallback({ className }: { className?: string }) {
   return (
-    <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/30 bg-gray-dark text-sm font-medium">
+    <div
+      className={twMerge(
+        'flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/30 bg-gray-dark text-sm font-medium',
+        className
+      )}
+    >
       ?
     </div>
   )
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index 16423f8ad7..a6c8593caa 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -23,17 +23,29 @@ import { useArbQueryParams } from '../../../hooks/useArbQueryParams'
 import { formatAmount } from '../../../util/NumberUtils'
 import { Loader } from '../../common/atoms/Loader'
 import { getBridgeUiConfigForChain } from '../../../util/bridgeUiConfig'
+import { SafeImage } from '../../common/SafeImage'
+import { TokenLogoFallback } from '../TokenInfo'
 
 function BalanceRow({
   symbol,
-  balance
+  balance,
+  tokenLogoUri
 }: {
   symbol: string
   balance: string | undefined
+  tokenLogoUri: string | undefined
 }) {
   return (
     <div className="flex justify-between py-3 text-sm">
-      <span>{symbol}</span>
+      <div className="flex items-center space-x-2">
+        <SafeImage
+          src={tokenLogoUri}
+          alt={`${symbol} logo`}
+          className="h-4 w-4 shrink-0"
+          fallback={<TokenLogoFallback className="h-4 w-4 text-xs" />}
+        />
+        <span>{symbol}</span>
+      </div>
       <div className="flex">
         Balance:{' '}
         {balance ? (
@@ -91,6 +103,9 @@ function BalancesContainer({
               })
             : undefined
         }
+        tokenLogoUri={
+          selectedToken ? selectedToken.logoURI : nativeCurrency.logoUrl
+        }
       />
       {isBatchTransferSupported && Number(amount2) > 0 && (
         <BalanceRow
@@ -102,6 +117,7 @@ function BalancesContainer({
                 })
               : undefined
           }
+          tokenLogoUri={nativeCurrency.logoUrl}
         />
       )}
       {showUsdcSpecificInfo && isDepositMode && (
@@ -113,6 +129,7 @@ function BalancesContainer({
               : erc20ChildBalances?.[CommonAddress.ArbitrumSepolia.USDC]) ??
               constants.Zero
           )}
+          tokenLogoUri="/images/USDCLogo.svg"
         />
       )}
     </div>

From f7003c5ecb79f18ae8096e588bcd8ddc39b065b0 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 13 Sep 2024 16:24:20 +0200
Subject: [PATCH 04/20] fix

---
 .../src/components/TransferPanel/TokenButton.tsx                | 2 +-
 .../TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
index 79b683abbf..4b2015124c 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -73,7 +73,7 @@ export function TokenButton({
                   }
                   alt={`${selectedToken?.symbol ?? nativeCurrency.symbol} logo`}
                   className="h-5 w-5 shrink-0"
-                  fallback={<TokenLogoFallback className="h-5 w-5 text-xs" />}
+                  fallback={<TokenLogoFallback className="h-5 w-5" />}
                 />
                 <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index a6c8593caa..c9e8e1d232 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -37,7 +37,7 @@ function BalanceRow({
 }) {
   return (
     <div className="flex justify-between py-3 text-sm">
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center space-x-1.5">
         <SafeImage
           src={tokenLogoUri}
           alt={`${symbol} logo`}

From b549a7ec47e87be0b51ce2493b35bcf60c25d345 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 13 Sep 2024 16:55:45 +0200
Subject: [PATCH 05/20] fix

---
 .../components/TransferPanel/TokenButton.tsx  | 21 ++++--
 .../DestinationNetworkBox.tsx                 | 65 +++++++++++++++----
 2 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
index 4b2015124c..34f9d20fb4 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -17,6 +17,7 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { Transition } from '../common/Transition'
 import { SafeImage } from '../common/SafeImage'
 import { TokenLogoFallback } from './TokenInfo'
+import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
 
 export type TokenButtonOptions = {
   symbol?: string
@@ -36,6 +37,9 @@ export function TokenButton({
   const [networks] = useNetworks()
   const { childChainProvider } = useNetworksRelationship(networks)
 
+  const tokensFromLists = useTokensFromLists()
+  const tokensFromUser = useTokensFromUser()
+
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const tokenSymbol = useMemo(() => {
@@ -53,6 +57,17 @@ export function TokenButton({
     })
   }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol, options])
 
+  const tokenLogoSrc = useMemo(() => {
+    if (selectedToken) {
+      return (
+        tokensFromLists[selectedToken.address]?.logoURI ??
+        tokensFromUser[selectedToken.address]?.logoURI
+      )
+    }
+
+    return nativeCurrency.logoUrl
+  }, [nativeCurrency.logoUrl, selectedToken, tokensFromLists, tokensFromUser])
+
   return (
     <>
       <Popover className="relative">
@@ -66,11 +81,7 @@ export function TokenButton({
             >
               <div className="flex items-center gap-2">
                 <SafeImage
-                  src={
-                    selectedToken
-                      ? selectedToken.logoURI
-                      : nativeCurrency.logoUrl
-                  }
+                  src={tokenLogoSrc}
                   alt={`${selectedToken?.symbol ?? nativeCurrency.symbol} logo`}
                   className="h-5 w-5 shrink-0"
                   fallback={<TokenLogoFallback className="h-5 w-5" />}
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index c9e8e1d232..c1b5d7b07f 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { constants } from 'ethers'
 import Image from 'next/image'
 
@@ -25,21 +26,59 @@ import { Loader } from '../../common/atoms/Loader'
 import { getBridgeUiConfigForChain } from '../../../util/bridgeUiConfig'
 import { SafeImage } from '../../common/SafeImage'
 import { TokenLogoFallback } from '../TokenInfo'
+import { useTokensFromLists, useTokensFromUser } from '../TokenSearchUtils'
 
 function BalanceRow({
-  symbol,
-  balance,
-  tokenLogoUri
+  parentErc20Address,
+  balance
 }: {
-  symbol: string
+  parentErc20Address?: string
   balance: string | undefined
-  tokenLogoUri: string | undefined
 }) {
+  const [networks] = useNetworks()
+  const { childChainProvider } = useNetworksRelationship(networks)
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+
+  const tokensFromLists = useTokensFromLists()
+  const tokensFromUser = useTokensFromUser()
+
+  const tokenLogoSrc = useMemo(() => {
+    if (parentErc20Address) {
+      return (
+        tokensFromLists[parentErc20Address]?.logoURI ??
+        tokensFromUser[parentErc20Address]?.logoURI
+      )
+    }
+
+    return nativeCurrency.logoUrl
+  }, [
+    nativeCurrency.logoUrl,
+    parentErc20Address,
+    tokensFromLists,
+    tokensFromUser
+  ])
+
+  const symbol = useMemo(() => {
+    if (parentErc20Address) {
+      return (
+        tokensFromLists[parentErc20Address]?.symbol ??
+        tokensFromUser[parentErc20Address]?.symbol
+      )
+    }
+
+    return nativeCurrency.symbol
+  }, [
+    nativeCurrency.symbol,
+    parentErc20Address,
+    tokensFromLists,
+    tokensFromUser
+  ])
+
   return (
     <div className="flex justify-between py-3 text-sm">
       <div className="flex items-center space-x-1.5">
         <SafeImage
-          src={tokenLogoUri}
+          src={tokenLogoSrc}
           alt={`${symbol} logo`}
           className="h-4 w-4 shrink-0"
           fallback={<TokenLogoFallback className="h-4 w-4 text-xs" />}
@@ -93,7 +132,7 @@ function BalancesContainer({
       style={{ backgroundColor: '#00000050' }}
     >
       <BalanceRow
-        symbol={selectedToken ? selectedToken.symbol : nativeCurrency.symbol}
+        parentErc20Address={selectedToken?.address}
         balance={
           selectedTokenOrNativeCurrencyBalance
             ? formatAmount(selectedTokenOrNativeCurrencyBalance, {
@@ -103,13 +142,9 @@ function BalancesContainer({
               })
             : undefined
         }
-        tokenLogoUri={
-          selectedToken ? selectedToken.logoURI : nativeCurrency.logoUrl
-        }
       />
       {isBatchTransferSupported && Number(amount2) > 0 && (
         <BalanceRow
-          symbol={nativeCurrency.symbol}
           balance={
             nativeCurrencyBalances.destinationBalance
               ? formatAmount(nativeCurrencyBalances.destinationBalance, {
@@ -117,19 +152,21 @@ function BalancesContainer({
                 })
               : undefined
           }
-          tokenLogoUri={nativeCurrency.logoUrl}
         />
       )}
       {showUsdcSpecificInfo && isDepositMode && (
         <BalanceRow
-          symbol="USDC.e"
+          parentErc20Address={
+            isArbitrumOne
+              ? CommonAddress.Ethereum.USDC
+              : CommonAddress.ArbitrumOne.USDC
+          }
           balance={formatAmount(
             (isArbitrumOne
               ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
               : erc20ChildBalances?.[CommonAddress.ArbitrumSepolia.USDC]) ??
               constants.Zero
           )}
-          tokenLogoUri="/images/USDCLogo.svg"
         />
       )}
     </div>

From ee0dec94f9a6d5af043e16df7ae23c66c5d7a658 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 13 Sep 2024 17:05:49 +0200
Subject: [PATCH 06/20] fix

---
 .../arb-token-bridge-ui/src/components/common/SafeImage.tsx  | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx b/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx
index 1499a30500..bdff0c013c 100644
--- a/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx
@@ -22,11 +22,6 @@ export function SafeImage(props: SafeImageProps) {
       image.onload = () => setValidImageSrc(sanitizedImageSrc)
       image.src = sanitizedImageSrc
     }
-
-    return function cleanup() {
-      // Abort previous loading
-      image.src = ''
-    }
   }, [src])
 
   if (!validImageSrc) {

From fa1df8646f0e50e861046b368ec8a2917054c110 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 13 Sep 2024 17:14:37 +0200
Subject: [PATCH 07/20] fix

---
 .../src/components/TransferPanel/TokenButton.tsx    | 13 ++++++++++++-
 .../TransferPanelMain/SourceNetworkBox.tsx          |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
index 34f9d20fb4..f344e1ce9c 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -21,6 +21,7 @@ import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
 
 export type TokenButtonOptions = {
   symbol?: string
+  logoSrc?: string | null
   disabled?: boolean
 }
 
@@ -58,6 +59,10 @@ 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 ??
@@ -66,7 +71,13 @@ export function TokenButton({
     }
 
     return nativeCurrency.logoUrl
-  }, [nativeCurrency.logoUrl, selectedToken, tokensFromLists, tokensFromUser])
+  }, [
+    nativeCurrency.logoUrl,
+    options,
+    selectedToken,
+    tokensFromLists,
+    tokensFromUser
+  ])
 
   return (
     <>
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
index 286bd4851d..365d829ac2 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
@@ -135,6 +135,7 @@ export function SourceNetworkBox({
   const tokenButtonOptionsAmount2 = useMemo(
     () => ({
       symbol: nativeCurrency.symbol,
+      logoSrc: null,
       disabled: true,
       balance: ethBalanceSourceChain
         ? Number(utils.formatEther(ethBalanceSourceChain))

From 31687f2337336f2148ebcf6685143d4b865e745c Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 20 Sep 2024 15:13:07 +0200
Subject: [PATCH 08/20] fix

---
 .../components/TransferPanel/TokenButton.tsx  |  1 -
 .../DestinationNetworkBox.tsx                 | 56 ++++++++++++-------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
index f344e1ce9c..465191104b 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -95,7 +95,6 @@ export function TokenButton({
                   src={tokenLogoSrc}
                   alt={`${selectedToken?.symbol ?? nativeCurrency.symbol} logo`}
                   className="h-5 w-5 shrink-0"
-                  fallback={<TokenLogoFallback className="h-5 w-5" />}
                 />
                 <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index c2dcc0b3cb..f0297b3f3a 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -22,7 +22,6 @@ import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
 import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { getBridgeUiConfigForChain } from '../../../util/bridgeUiConfig'
 import { SafeImage } from '../../common/SafeImage'
-import { TokenLogoFallback } from '../TokenInfo'
 import { useTokensFromLists, useTokensFromUser } from '../TokenSearchUtils'
 import { formatAmount } from '../../../util/NumberUtils'
 import { Loader } from '../../common/atoms/Loader'
@@ -30,13 +29,16 @@ import { useAmount2InputVisibility } from './SourceNetworkBox'
 
 function BalanceRow({
   parentErc20Address,
-  balance
+  balance,
+  symbolOverride
 }: {
   parentErc20Address?: string
   balance: string | undefined
+  symbolOverride?: string
 }) {
   const [networks] = useNetworks()
-  const { childChainProvider } = useNetworksRelationship(networks)
+  const { childChainProvider, isDepositMode } =
+    useNetworksRelationship(networks)
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const tokensFromLists = useTokensFromLists()
@@ -59,6 +61,10 @@ function BalanceRow({
   ])
 
   const symbol = useMemo(() => {
+    if (symbolOverride) {
+      return symbolOverride
+    }
+
     if (parentErc20Address) {
       return (
         tokensFromLists[parentErc20Address]?.symbol ??
@@ -68,6 +74,7 @@ function BalanceRow({
 
     return nativeCurrency.symbol
   }, [
+    symbolOverride,
     nativeCurrency.symbol,
     parentErc20Address,
     tokensFromLists,
@@ -81,18 +88,21 @@ function BalanceRow({
           src={tokenLogoSrc}
           alt={`${symbol} logo`}
           className="h-4 w-4 shrink-0"
-          fallback={<TokenLogoFallback className="h-4 w-4 text-xs" />}
         />
         <span>{symbol}</span>
       </div>
-      <div className="flex">
+      <span
+        aria-label={`${symbol} balance amount on ${
+          isDepositMode ? 'childChain' : 'parentChain'
+        }`}
+      >
         Balance:{' '}
         {balance ? (
           balance
         ) : (
           <Loader wrapperClass="ml-2" size="small" color="white" />
         )}
-      </div>
+      </span>
     </div>
   )
 }
@@ -131,6 +141,25 @@ function BalancesContainer({
       className="rounded px-3 text-white [&>*+*]:border-t [&>*+*]:border-gray-600"
       style={{ backgroundColor: '#00000050' }}
     >
+      {showUsdcSpecificInfo && isDepositMode && (
+        <BalanceRow
+          parentErc20Address={
+            isArbitrumOne
+              ? CommonAddress.Ethereum.USDC
+              : CommonAddress.ArbitrumOne.USDC
+          }
+          balance={formatAmount(
+            (isArbitrumOne
+              ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
+              : erc20ChildBalances?.[CommonAddress.ArbitrumSepolia.USDC]) ??
+              constants.Zero,
+            {
+              decimals: selectedToken?.decimals
+            }
+          )}
+          symbolOverride="USDC"
+        />
+      )}
       <BalanceRow
         parentErc20Address={selectedToken?.address}
         balance={
@@ -154,21 +183,6 @@ function BalancesContainer({
           }
         />
       )}
-      {showUsdcSpecificInfo && isDepositMode && (
-        <BalanceRow
-          parentErc20Address={
-            isArbitrumOne
-              ? CommonAddress.Ethereum.USDC
-              : CommonAddress.ArbitrumOne.USDC
-          }
-          balance={formatAmount(
-            (isArbitrumOne
-              ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
-              : erc20ChildBalances?.[CommonAddress.ArbitrumSepolia.USDC]) ??
-              constants.Zero
-          )}
-        />
-      )}
     </div>
   )
 }

From d76e933df4d4d4ea3a52858bcce0fde488f6b5db Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 20 Sep 2024 15:51:22 +0200
Subject: [PATCH 09/20] fix e2e

---
 .../DestinationNetworkBox.tsx                 | 26 ++++++++++---------
 .../tests/e2e/specs/login.cy.ts               | 16 +++++-------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index f0297b3f3a..692a8507bf 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -91,18 +91,20 @@ function BalanceRow({
         />
         <span>{symbol}</span>
       </div>
-      <span
-        aria-label={`${symbol} balance amount on ${
-          isDepositMode ? 'childChain' : 'parentChain'
-        }`}
-      >
-        Balance:{' '}
-        {balance ? (
-          balance
-        ) : (
-          <Loader wrapperClass="ml-2" size="small" color="white" />
-        )}
-      </span>
+      <div>
+        <span>Balance: </span>
+        <span
+          aria-label={`${symbol} balance amount on ${
+            isDepositMode ? 'childChain' : 'parentChain'
+          }`}
+        >
+          {balance ? (
+            balance
+          ) : (
+            <Loader wrapperClass="ml-2" size="small" color="white" />
+          )}
+        </span>
+      </div>
     </div>
   )
 }
diff --git a/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts b/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts
index 0b6286f7e3..3bfe66980d 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/specs/login.cy.ts
@@ -18,7 +18,7 @@ describe('Login Account', () => {
       val => (l1ETHbal = formatAmount(val))
     )
     getInitialETHBalance(Cypress.env('ARB_RPC_URL')).then(
-      val => (l2ETHbal = formatAmount(val, { symbol: 'ETH' }))
+      val => (l2ETHbal = formatAmount(val))
     )
   })
 
@@ -33,16 +33,14 @@ describe('Login Account', () => {
 
   it('should connect wallet using MetaMask and display L1 and L2 balances', () => {
     cy.login({ networkType: 'parentChain' })
-    // Balance: is in a different element so we check for siblings
-    cy.findByText(l1ETHbal)
+    cy.findByLabelText(`ETH balance amount on parentChain`)
+      .contains(l1ETHbal)
       .should('be.visible')
-      .siblings()
-      .contains('Balance: ')
-    // Balance: is in a different element so we check for siblings
-    cy.findByText(l2ETHbal)
+
+    cy.findByLabelText(`ETH balance amount on childChain`)
+      .contains(l2ETHbal)
       .should('be.visible')
-      .siblings()
-      .contains('Balance: ')
+
     cy.findSourceChainButton(getL1NetworkName())
     cy.findDestinationChainButton(getL2NetworkName())
   })

From e95db612cbbeda76e157acfa553d0217ec452659 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Mon, 25 Nov 2024 19:01:03 +0100
Subject: [PATCH 10/20] fix

---
 .../TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index 692a8507bf..da4405d214 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -173,6 +173,7 @@ function BalancesContainer({
               })
             : undefined
         }
+        symbolOverride={showUsdcSpecificInfo ? 'USDC.e' : undefined}
       />
       {isBatchTransferSupported && isAmount2InputVisible && (
         <BalanceRow

From 33b6b34fa4639d5dbc0fedc4f39a509c49cea8ef Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Wed, 27 Nov 2024 14:33:18 +0100
Subject: [PATCH 11/20] fix conflicts

---
 packages/arb-token-bridge-ui/public/images/UsdcLogo.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/public/images/UsdcLogo.svg b/packages/arb-token-bridge-ui/public/images/UsdcLogo.svg
index 4c84db6f00..5dfea926e6 100644
--- a/packages/arb-token-bridge-ui/public/images/UsdcLogo.svg
+++ b/packages/arb-token-bridge-ui/public/images/UsdcLogo.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="86977684-12db-4850-8f30-233a7c267d11" viewBox="0 0 2000 2000">
+<svg data-name="86977684-12db-4850-8f30-233a7c267d11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
   <path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/>
   <path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/>
   <path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/>

From ed1e9a6be3adda587473fe573baa6905883da804 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Wed, 27 Nov 2024 15:21:55 +0100
Subject: [PATCH 12/20] fix

---
 .../DestinationNetworkBox.tsx                 | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index 65175a1ba8..a1fa8c26ca 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -26,6 +26,7 @@ import { formatAmount } from '../../../util/NumberUtils'
 import { Loader } from '../../common/atoms/Loader'
 import { useAmount2InputVisibility } from './SourceNetworkBox'
 import { useArbQueryParams } from '../../../hooks/useArbQueryParams'
+import { useIsCctpTransfer } from '../hooks/useIsCctpTransfer'
 
 function BalanceRow({
   parentErc20Address,
@@ -109,11 +110,7 @@ function BalanceRow({
   )
 }
 
-function BalancesContainer({
-  showUsdcSpecificInfo
-}: {
-  showUsdcSpecificInfo: boolean
-}) {
+function BalancesContainer() {
   const {
     app: { selectedToken }
   } = useAppState()
@@ -122,6 +119,7 @@ function BalancesContainer({
     useNetworksRelationship(networks)
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
   const { isArbitrumOne } = isNetwork(childChain.id)
+  const isCctpTransfer = useIsCctpTransfer()
 
   const isBatchTransferSupported = useIsBatchTransferSupported()
   const { isAmount2InputVisible } = useAmount2InputVisibility()
@@ -143,7 +141,7 @@ function BalancesContainer({
       className="rounded px-3 text-white [&>*+*]:border-t [&>*+*]:border-gray-600"
       style={{ backgroundColor: '#00000050' }}
     >
-      {showUsdcSpecificInfo && isDepositMode && (
+      {isCctpTransfer && isDepositMode && (
         <BalanceRow
           parentErc20Address={
             isArbitrumOne
@@ -173,7 +171,7 @@ function BalancesContainer({
               })
             : undefined
         }
-        symbolOverride={showUsdcSpecificInfo ? 'USDC.e' : undefined}
+        symbolOverride={isCctpTransfer ? 'USDC.e' : undefined}
       />
       {isBatchTransferSupported && isAmount2InputVisible && (
         <BalanceRow
@@ -190,11 +188,7 @@ function BalancesContainer({
   )
 }
 
-export function DestinationNetworkBox({
-  showUsdcSpecificInfo
-}: {
-  showUsdcSpecificInfo: boolean
-}) {
+export function DestinationNetworkBox() {
   const [networks] = useNetworks()
   const [{ destinationAddress }] = useArbQueryParams()
   const [
@@ -225,7 +219,7 @@ export function DestinationNetworkBox({
             />
           </div>
         </div>
-        <BalancesContainer showUsdcSpecificInfo={showUsdcSpecificInfo} />
+        <BalancesContainer />
         <EstimatedGas chainType="destination" />
       </NetworkContainer>
       <NetworkSelectionContainer

From 4031e0948ef7befbeae61f7321c512abb851315f Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Wed, 27 Nov 2024 15:27:20 +0100
Subject: [PATCH 13/20] usdc logo

---
 packages/arb-token-bridge-ui/public/images/UsdcLogo.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/public/images/UsdcLogo.svg b/packages/arb-token-bridge-ui/public/images/UsdcLogo.svg
index 5dfea926e6..4c84db6f00 100644
--- a/packages/arb-token-bridge-ui/public/images/UsdcLogo.svg
+++ b/packages/arb-token-bridge-ui/public/images/UsdcLogo.svg
@@ -1,4 +1,4 @@
-<svg data-name="86977684-12db-4850-8f30-233a7c267d11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
+<svg xmlns="http://www.w3.org/2000/svg" data-name="86977684-12db-4850-8f30-233a7c267d11" viewBox="0 0 2000 2000">
   <path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/>
   <path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/>
   <path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/>

From 2ad61c0886498ce3a323c4c5bc1d0a353e6d94ed Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Wed, 27 Nov 2024 15:28:51 +0100
Subject: [PATCH 14/20] usdc logo

---
 packages/arb-token-bridge-ui/public/images/USDCLogo.svg | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 packages/arb-token-bridge-ui/public/images/USDCLogo.svg

diff --git a/packages/arb-token-bridge-ui/public/images/USDCLogo.svg b/packages/arb-token-bridge-ui/public/images/USDCLogo.svg
deleted file mode 100644
index 5dfea926e6..0000000000
--- a/packages/arb-token-bridge-ui/public/images/USDCLogo.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg data-name="86977684-12db-4850-8f30-233a7c267d11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
-  <path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/>
-  <path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/>
-  <path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/>
-</svg>

From f267c7a9e80354740bd163aa09dacc1f067ceb75 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Wed, 27 Nov 2024 16:04:11 +0100
Subject: [PATCH 15/20] fix

---
 .../src/components/TransferPanel/TokenButton.tsx   |  1 -
 .../src/components/common/SafeImage.tsx            | 14 ++++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
index 465191104b..d679d1be6b 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
@@ -16,7 +16,6 @@ import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { Transition } from '../common/Transition'
 import { SafeImage } from '../common/SafeImage'
-import { TokenLogoFallback } from './TokenInfo'
 import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
 
 export type TokenButtonOptions = {
diff --git a/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx b/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx
index bdff0c013c..486da33450 100644
--- a/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/SafeImage.tsx
@@ -11,6 +11,7 @@ export function SafeImage(props: SafeImageProps) {
   const [validImageSrc, setValidImageSrc] = useState<false | string>(false)
 
   useEffect(() => {
+    let mounted = true
     const image = new Image()
 
     if (typeof src === 'undefined') {
@@ -18,10 +19,19 @@ export function SafeImage(props: SafeImageProps) {
     } else {
       const sanitizedImageSrc = sanitizeImageSrc(src)
 
-      image.onerror = () => setValidImageSrc(false)
-      image.onload = () => setValidImageSrc(sanitizedImageSrc)
+      image.onerror = () => {
+        if (mounted) setValidImageSrc(false)
+      }
+      image.onload = () => {
+        if (mounted) setValidImageSrc(sanitizedImageSrc)
+      }
       image.src = sanitizedImageSrc
     }
+
+    return () => {
+      mounted = false
+      image.src = ''
+    }
   }, [src])
 
   if (!validImageSrc) {

From 761de7eb6ad5756bccbdeeb47eb8813305296175 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Mon, 30 Dec 2024 12:18:32 +0100
Subject: [PATCH 16/20] fix token symbol

---
 .../TransferPanelMain/DestinationNetworkBox.tsx        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index a1fa8c26ca..7fc6251d87 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -27,6 +27,7 @@ import { Loader } from '../../common/atoms/Loader'
 import { useAmount2InputVisibility } from './SourceNetworkBox'
 import { useArbQueryParams } from '../../../hooks/useArbQueryParams'
 import { useIsCctpTransfer } from '../hooks/useIsCctpTransfer'
+import { sanitizeTokenSymbol } from '../../../util/TokenUtils'
 
 function BalanceRow({
   parentErc20Address,
@@ -171,7 +172,14 @@ function BalancesContainer() {
               })
             : undefined
         }
-        symbolOverride={isCctpTransfer ? 'USDC.e' : undefined}
+        symbolOverride={
+          selectedToken
+            ? sanitizeTokenSymbol(selectedToken.symbol, {
+                chainId: networks.destinationChain.id,
+                erc20L1Address: selectedToken?.address
+              })
+            : undefined
+        }
       />
       {isBatchTransferSupported && isAmount2InputVisible && (
         <BalanceRow

From 3b8eb4a70d9d22acbc1e90ad8b4bc7402261de5e Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Wed, 15 Jan 2025 17:05:14 +0100
Subject: [PATCH 17/20] remove chaining

---
 .../TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index 7fc6251d87..ba94534c70 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -176,7 +176,7 @@ function BalancesContainer() {
           selectedToken
             ? sanitizeTokenSymbol(selectedToken.symbol, {
                 chainId: networks.destinationChain.id,
-                erc20L1Address: selectedToken?.address
+                erc20L1Address: selectedToken.address
               })
             : undefined
         }

From 4d6e07486b3344e673cd0057374b998acdfa4479 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Thu, 16 Jan 2025 14:04:31 +0100
Subject: [PATCH 18/20] fix tests

---
 packages/arb-token-bridge-ui/tests/support/commands.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/arb-token-bridge-ui/tests/support/commands.ts b/packages/arb-token-bridge-ui/tests/support/commands.ts
index 64f4367fbe..b33df35b1c 100644
--- a/packages/arb-token-bridge-ui/tests/support/commands.ts
+++ b/packages/arb-token-bridge-ui/tests/support/commands.ts
@@ -141,10 +141,12 @@ export const fillCustomDestinationAddress = () => {
 
   // unlock custom destination address input
   cy.findByLabelText('Custom destination input lock')
+    .scrollIntoView()
     .should('be.visible')
     .click()
 
   cy.findByLabelText('Custom Destination Address Input')
+    .scrollIntoView()
     .should('be.visible')
     .type(Cypress.env('CUSTOM_DESTINATION_ADDRESS'))
 }

From 6c1e3bbf88191d5839bc99b417808d465b34f182 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Thu, 16 Jan 2025 15:42:38 +0100
Subject: [PATCH 19/20] fix decimals

---
 .../TransferPanelMain/DestinationNetworkBox.tsx           | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
index ba94534c70..4d2417e1fb 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -166,9 +166,7 @@ function BalancesContainer() {
         balance={
           selectedTokenOrNativeCurrencyBalance
             ? formatAmount(selectedTokenOrNativeCurrencyBalance, {
-                decimals: selectedToken
-                  ? selectedToken.decimals
-                  : nativeCurrency.decimals
+                decimals: selectedToken ? selectedToken.decimals : 18
               })
             : undefined
         }
@@ -185,9 +183,7 @@ function BalancesContainer() {
         <BalanceRow
           balance={
             nativeCurrencyBalances.destinationBalance
-              ? formatAmount(nativeCurrencyBalances.destinationBalance, {
-                  decimals: nativeCurrency.decimals
-                })
+              ? formatAmount(nativeCurrencyBalances.destinationBalance)
               : undefined
           }
         />

From b83eaf9fbe5fd885e36d591092c67574565a5a84 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 17 Jan 2025 13:14:31 +0100
Subject: [PATCH 20/20] fix types

---
 .../src/components/TransferPanel/TokenButton.tsx                | 2 +-
 .../TransferPanel/TransferPanelMain/SourceNetworkBox.tsx        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
index d679d1be6b..196a01c634 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenButton.tsx
+++ b/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 | null
+  logoSrc?: string
   disabled?: boolean
 }
 
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
index c411850a87..9c0a6c31f6 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
@@ -152,7 +152,6 @@ export function SourceNetworkBox() {
   const tokenButtonOptionsAmount2 = useMemo(
     () => ({
       symbol: nativeCurrency.symbol,
-      logoSrc: null,
       disabled: true,
       balance: nativeCurrencyBalances.sourceBalance
         ? Number(