feat: new amount input design (#1860)

OffchainLabs · Sep 2, 2024 · 6c49689 · 6c49689
1 parent deb6e6b
commit 6c49689
Show file tree

Hide file tree

Showing 11 changed files with 304 additions and 223 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
@@ -57,7 +57,7 @@ export function TokenButton({
         {({ open }) => (
           <>
             <Popover.Button
-              className="arb-hover h-full w-max rounded-bl rounded-tl px-3 py-3 text-white"
+              className="arb-hover h-full w-max rounded-bl rounded-tl px-3 pb-1 pt-2 text-white"
               aria-label="Select Token"
               onClick={onPopoverButtonClick}
               disabled={disabled}
@@ -75,9 +75,7 @@ export function TokenButton({
                     className="h-5 w-5 sm:h-7 sm:w-7"
                   />
                 )} */}
-                <span className="text-xl font-light sm:text-3xl">
-                  {tokenSymbol}
-                </span>
+                <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
                   <ChevronDownIcon
                     className={twMerge(
@@ -92,7 +90,7 @@ export function TokenButton({
             <Transition
               // we don't unmount on leave here because otherwise transition won't work with virtualized lists
               options={{ unmountOnLeave: false }}
-              className="fixed left-0 top-0 z-20 sm:absolute sm:top-[76px] sm:max-w-[466px]"
+              className="fixed right-0 top-0 z-20 sm:absolute sm:top-[76px] sm:max-w-[466px]"
               afterLeave={onPopoverClose}
             >
               <Popover.Panel

diff --git a/...-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/...-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -29,25 +29,103 @@ import {
   NetworkSelectionContainer
 } from '../../common/NetworkSelectionContainer'
 
-export function DestinationNetworkBox({
+function DestinationNetworkBalance({
   customFeeTokenBalances,
   showUsdcSpecificInfo
 }: {
   customFeeTokenBalances: Balances
   showUsdcSpecificInfo: boolean
 }) {
-  const { address: walletAddress } = useAccount()
+  const {
+    app: { selectedToken }
+  } = useAppState()
   const [networks] = useNetworks()
   const { childChain, childChainProvider, isDepositMode } =
     useNetworksRelationship(networks)
   const { isArbitrumOne } = isNetwork(childChain.id)
-  const {
-    app: { selectedToken }
-  } = useAppState()
+
   const { ethParentBalance, ethChildBalance, erc20ChildBalances } =
     useBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
+
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+
+  if (selectedToken) {
+    return (
+      <>
+        <TokenBalance
+          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
+                })
+              : 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]) ??
+              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={
+          isDepositMode
+            ? customFeeTokenBalances.childBalance
+            : customFeeTokenBalances.parentBalance
+        }
+        forToken={nativeCurrency}
+        prefix="Balance: "
+      />
+    )
+  }
+
+  return (
+    <ETHBalance
+      balance={isDepositMode ? ethChildBalance : ethParentBalance}
+      on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
+      prefix="Balance: "
+    />
+  )
+}
+
+export function DestinationNetworkBox({
+  customFeeTokenBalances,
+  showUsdcSpecificInfo
+}: {
+  customFeeTokenBalances: Balances
+  showUsdcSpecificInfo: boolean
+}) {
+  const { address: walletAddress } = useAccount()
+  const [networks] = useNetworks()
   const { destinationAddress } = useDestinationAddressStore()
   const destinationAddressOrWalletAddress = destinationAddress || walletAddress
   const [
@@ -58,7 +136,6 @@ export function DestinationNetworkBox({
   return (
     <>
       <NetworkContainer
-        bgLogoHeight={58}
         network={networks.destinationChain}
         customAddress={destinationAddress}
       >
@@ -70,87 +147,10 @@ export function DestinationNetworkBox({
           <BalancesContainer>
             {destinationAddressOrWalletAddress &&
               utils.isAddress(destinationAddressOrWalletAddress) && (
-                <>
-                  <TokenBalance
-                    balance={
-                      isDepositMode
-                        ? selectedTokenBalances.childBalance
-                        : selectedTokenBalances.parentBalance
-                    }
-                    on={
-                      isDepositMode
-                        ? NetworkType.childChain
-                        : NetworkType.parentChain
-                    }
-                    forToken={selectedToken}
-                    prefix={selectedToken ? 'Balance: ' : ''}
-                    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
-                          })
-                        : undefined
-                    }
-                  />
-                  {/* In deposit mode, when user selected USDC on mainnet,
-              the UI shows the Arb One balance of both USDC.e and native USDC */}
-                  {isDepositMode && showUsdcSpecificInfo && (
-                    <TokenBalance
-                      balance={
-                        (isArbitrumOne
-                          ? erc20ChildBalances?.[CommonAddress.ArbitrumOne.USDC]
-                          : erc20ChildBalances?.[
-                              CommonAddress.ArbitrumSepolia.USDC
-                            ]) ?? constants.Zero
-                      }
-                      on={NetworkType.childChain}
-                      forToken={
-                        selectedToken
-                          ? { ...selectedToken, symbol: 'USDC' }
-                          : null
-                      }
-                      tokenSymbolOverride="USDC"
-                    />
-                  )}
-                  {nativeCurrency.isCustom ? (
-                    <>
-                      <TokenBalance
-                        on={
-                          isDepositMode
-                            ? NetworkType.childChain
-                            : NetworkType.parentChain
-                        }
-                        balance={
-                          isDepositMode
-                            ? customFeeTokenBalances.childBalance
-                            : customFeeTokenBalances.parentBalance
-                        }
-                        forToken={nativeCurrency}
-                        prefix={selectedToken ? '' : 'Balance: '}
-                      />
-                      {!isDepositMode && (
-                        <ETHBalance
-                          balance={ethParentBalance}
-                          on={NetworkType.parentChain}
-                        />
-                      )}
-                    </>
-                  ) : (
-                    <ETHBalance
-                      balance={
-                        isDepositMode ? ethChildBalance : ethParentBalance
-                      }
-                      prefix={selectedToken ? '' : 'Balance: '}
-                      on={
-                        isDepositMode
-                          ? NetworkType.childChain
-                          : NetworkType.parentChain
-                      }
-                    />
-                  )}
-                </>
+                <DestinationNetworkBalance
+                  customFeeTokenBalances={customFeeTokenBalances}
+                  showUsdcSpecificInfo={showUsdcSpecificInfo}
+                />
               )}
           </BalancesContainer>
         </NetworkListboxPlusBalancesContainer>

diff --git a/...s/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/...s/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx
@@ -1,27 +1,17 @@
 import { ChangeEventHandler, useCallback, useEffect, useMemo } from 'react'
+import { utils } from 'ethers'
 
 import { getNetworkName } from '../../../util/networks'
 import {
   NetworkButton,
   NetworkSelectionContainer
 } from '../../common/NetworkSelectionContainer'
-import {
-  BalancesContainer,
-  ETHBalance,
-  NetworkContainer,
-  NetworkListboxPlusBalancesContainer
-} from '../TransferPanelMain'
-import { TokenBalance } from './TokenBalance'
-import { NetworkType } from './utils'
+import { NetworkContainer } from '../TransferPanelMain'
 import { useAppState } from '../../../state'
 import { useNetworks } from '../../../hooks/useNetworks'
 import { useNativeCurrency } from '../../../hooks/useNativeCurrency'
 import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
-import {
-  Balances,
-  useSelectedTokenBalances
-} from '../../../hooks/TransferPanel/useSelectedTokenBalances'
-import { useBalances } from '../../../hooks/useBalances'
+import { Balances } from '../../../hooks/TransferPanel/useSelectedTokenBalances'
 import {
   ETH_BALANCE_ARTICLE_LINK,
   USDC_LEARN_MORE_LINK
@@ -39,6 +29,7 @@ import { useDialog } from '../../common/Dialog'
 import { useTransferReadiness } from '../useTransferReadiness'
 import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { useSelectedTokenDecimals } from '../../../hooks/TransferPanel/useSelectedTokenDecimals'
+import { useBalanceOnSourceChain } from '../../../hooks/useBalanceOnSourceChain'
 
 export function SourceNetworkBox({
   customFeeTokenBalances,
@@ -53,8 +44,6 @@ export function SourceNetworkBox({
   const {
     app: { selectedToken }
   } = useAppState()
-  const { ethParentBalance, ethChildBalance } = useBalances()
-  const selectedTokenBalances = useSelectedTokenBalances()
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
   const [{ amount, amount2 }] = useArbQueryParams()
   const { setAmount, setAmount2 } = useSetInputAmount()
@@ -66,6 +55,7 @@ export function SourceNetworkBox({
   const isBatchTransferSupported = useIsBatchTransferSupported()
   const decimals = useSelectedTokenDecimals()
   const { errorMessages } = useTransferReadiness()
+  const ethBalanceSourceChain = useBalanceOnSourceChain(null)
 
   const isMaxAmount = amount === AmountQueryParamEnum.MAX
   const isMaxAmount2 = amount2 === AmountQueryParamEnum.MAX
@@ -109,69 +99,21 @@ export function SourceNetworkBox({
   const tokenButtonOptionsAmount2 = useMemo(
     () => ({
       symbol: nativeCurrency.symbol,
-      disabled: true
+      disabled: true,
+      balance: ethBalanceSourceChain
+        ? Number(utils.formatEther(ethBalanceSourceChain))
+        : undefined
     }),
-    [nativeCurrency.symbol]
+    [ethBalanceSourceChain, nativeCurrency.symbol]
   )
 
   return (
     <>
       <NetworkContainer bgLogoHeight={138} network={networks.sourceChain}>
-        <NetworkListboxPlusBalancesContainer>
-          <NetworkButton
-            type="source"
-            onClick={openSourceNetworkSelectionDialog}
-          />
-          <BalancesContainer>
-            <TokenBalance
-              on={
-                isDepositMode ? NetworkType.parentChain : NetworkType.childChain
-              }
-              balance={
-                isDepositMode
-                  ? selectedTokenBalances.parentBalance
-                  : selectedTokenBalances.childBalance
-              }
-              forToken={selectedToken}
-              prefix={selectedToken ? 'Balance: ' : ''}
-            />
-            {nativeCurrency.isCustom ? (
-              <>
-                <TokenBalance
-                  on={
-                    isDepositMode
-                      ? NetworkType.parentChain
-                      : NetworkType.childChain
-                  }
-                  balance={
-                    isDepositMode
-                      ? customFeeTokenBalances.parentBalance
-                      : customFeeTokenBalances.childBalance
-                  }
-                  forToken={nativeCurrency}
-                  prefix={selectedToken ? '' : 'Balance: '}
-                />
-                {/* Only show ETH balance on parent chain */}
-                {isDepositMode && (
-                  <ETHBalance
-                    balance={ethParentBalance}
-                    on={NetworkType.parentChain}
-                  />
-                )}
-              </>
-            ) : (
-              <ETHBalance
-                balance={isDepositMode ? ethParentBalance : ethChildBalance}
-                prefix={selectedToken ? '' : 'Balance: '}
-                on={
-                  isDepositMode
-                    ? NetworkType.parentChain
-                    : NetworkType.childChain
-                }
-              />
-            )}
-          </BalancesContainer>
-        </NetworkListboxPlusBalancesContainer>
+        <NetworkButton
+          type="source"
+          onClick={openSourceNetworkSelectionDialog}
+        />
 
         <div className="flex flex-col gap-1">
           <TransferPanelMainInput
@@ -182,6 +124,7 @@ export function SourceNetworkBox({
             maxAmount={maxAmount}
             isMaxAmount={isMaxAmount}
             decimals={decimals}
+            customFeeTokenBalances={customFeeTokenBalances}
           />
 
           {isBatchTransferSupported && (
@@ -190,10 +133,11 @@ export function SourceNetworkBox({
               errorMessage={errorMessages?.inputAmount2}
               value={amount2}
               onChange={handleAmount2Change}
-              tokenButtonOptions={tokenButtonOptionsAmount2}
+              options={tokenButtonOptionsAmount2}
               maxAmount={maxAmount2}
               isMaxAmount={isMaxAmount2}
               decimals={nativeCurrency.decimals}
+              customFeeTokenBalances={customFeeTokenBalances}
             />
           )}