feat: network box redesign

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

@@ -15,9 +15,12 @@ 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'
 
 export type TokenButtonOptions = {
   symbol?: string
+  logoSrc?: string | null
   disabled?: boolean
 }
 
@@ -34,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(() => {
@@ -51,6 +57,27 @@ 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">
@@ -63,18 +90,11 @@ 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={tokenLogoSrc}
+                  alt={`${selectedToken?.symbol ?? nativeCurrency.symbol} logo`}
+                  className="h-5 w-5 shrink-0"
+                />
                 <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
                   <ChevronDownIcon

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>
   )

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 } 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 { childChainProvider, isTeleportMode } =