feat: transaction history for batch transfers

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionHistoryTable.tsx

@@ -31,6 +31,14 @@ import { TransactionsTableRow } from './TransactionsTableRow'
 import { EmptyTransactionHistory } from './EmptyTransactionHistory'
 import { Address } from '../../util/AddressUtils'
 
+export const EstimatedAmountTooltip = ({ children }: PropsWithChildren) => {
+  return (
+    <Tooltip content="This is an estimate amount. The final amount may have minor fluctuations based on the total gas used.">
+      {children}
+    </Tooltip>
+  )
+}
+
 export const ContentWrapper = ({
   children,
   className = ''

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableDetails.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image'
 import dayjs from 'dayjs'
 import CctpLogoColor from '@/images/CctpLogoColor.svg'
 import ArbitrumLogo from '@/images/ArbitrumLogo.svg'
+import EthereumLogoRoundLight from '@/images/EthereumLogoRoundLight.svg'
 
 import { useTxDetailsStore } from './TransactionHistory'
 import { getExplorerUrl, getNetworkName, isNetwork } from '../../util/networks'
@@ -22,6 +23,8 @@ import { shortenAddress } from '../../util/CommonUtils'
 import { isTxCompleted } from './helpers'
 import { Address } from '../../util/AddressUtils'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
+import { isBatchTransfer } from '../../util/TokenDepositUtils'
+import { EstimatedAmountTooltip } from './TransactionHistoryTable'
 
 const DetailsBox = ({
   children,
@@ -135,17 +138,41 @@ export const TransactionsTableDetails = ({
                       <span>{dayjs(tx.createdAt).format('MMMM DD, YYYY')}</span>
                       <span>{dayjs(tx.createdAt).format('h:mma')}</span>
                     </div>
-                    <div className="flex items-center space-x-2">
-                      <TransactionsTableTokenImage tx={tx} />
-                      <span>
-                        {formatAmount(Number(tx.value), {
-                          symbol: tokenSymbol
-                        })}
-                      </span>
-                      {showPriceInUsd && (
-                        <span className="text-white/70">
-                          {formatUSD(ethToUSD(Number(tx.value)))}
+                    <div className="flex flex-col space-y-1">
+                      <div className="flex items-center space-x-2">
+                        <TransactionsTableTokenImage tx={tx} />
+                        <span>
+                          {formatAmount(Number(tx.value), {
+                            symbol: tokenSymbol
+                          })}
                         </span>
+                        {showPriceInUsd && (
+                          <span className="text-white/70">
+                            {formatUSD(ethToUSD(Number(tx.value)))}
+                          </span>
+                        )}
+                      </div>
+                      {isBatchTransfer(tx) && (
+                        <EstimatedAmountTooltip>
+                          <div className="flex items-center space-x-2">
+                            <Image
+                              height={20}
+                              width={20}
+                              alt="ETH logo"
+                              src={EthereumLogoRoundLight}
+                            />
+                            <span className="ml-2">
+                              {formatAmount(Number(tx.value2), {
+                                symbol: ether.symbol
+                              })}
+                            </span>
+                            {isNetwork(tx.sourceChainId).isEthereumMainnet && (
+                              <span className="text-white/70">
+                                {formatUSD(ethToUSD(Number(tx.value2)))}
+                              </span>
+                            )}
+                          </div>
+                        </EstimatedAmountTooltip>
                       )}
                     </div>
                   </div>

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTableRow.tsx

@@ -7,6 +7,8 @@ import {
   CheckCircleIcon,
   XCircleIcon
 } from '@heroicons/react/24/outline'
+import EthereumLogoRoundLight from '@/images/EthereumLogoRoundLight.svg'
+import Image from 'next/image'
 
 import { DepositStatus, MergedTransaction } from '../../state/app/state'
 import { formatAmount } from '../../util/NumberUtils'
@@ -28,6 +30,9 @@ import { TransactionsTableTokenImage } from './TransactionsTableTokenImage'
 import { useTxDetailsStore } from './TransactionHistory'
 import { TransactionsTableExternalLink } from './TransactionsTableExternalLink'
 import { Address } from '../../util/AddressUtils'
+import { ether } from '../../constants'
+import { isBatchTransfer } from '../../util/TokenDepositUtils'
+import { EstimatedAmountTooltip } from './TransactionHistoryTable'
 
 const StatusLabel = ({ tx }: { tx: MergedTransaction }) => {
   const { sourceChainId, destinationChainId } = tx
@@ -170,18 +175,37 @@ export function TransactionsTableRow({
       )}
     >
       <div className="pr-3 align-middle">{txRelativeTime}</div>
-      <div className="flex items-center pr-3 align-middle">
-        <TransactionsTableExternalLink
-          href={`${getExplorerUrl(sourceChainId)}/token/${tx.tokenAddress}`}
-          disabled={!tx.tokenAddress}
-        >
-          <TransactionsTableTokenImage tx={tx} />
-          <span className="ml-2">
-            {formatAmount(Number(tx.value), {
-              symbol: tokenSymbol
-            })}
-          </span>
-        </TransactionsTableExternalLink>
+      <div className="flex flex-col space-y-1">
+        <div className="flex items-center pr-3 align-middle">
+          <TransactionsTableExternalLink
+            href={`${getExplorerUrl(sourceChainId)}/token/${tx.tokenAddress}`}
+            disabled={!tx.tokenAddress}
+          >
+            <TransactionsTableTokenImage tx={tx} />
+            <span className="ml-2">
+              {formatAmount(Number(tx.value), {
+                symbol: tokenSymbol
+              })}
+            </span>
+          </TransactionsTableExternalLink>
+        </div>
+        {isBatchTransfer(tx) && (
+          <EstimatedAmountTooltip>
+            <div className="flex items-center pr-3 align-middle">
+              <Image
+                height={20}
+                width={20}
+                alt="ETH logo"
+                src={EthereumLogoRoundLight}
+              />
+              <span className="ml-2">
+                {formatAmount(Number(tx.value2), {
+                  symbol: ether.symbol
+                })}
+              </span>
+            </div>
+          </EstimatedAmountTooltip>
+        )}
       </div>
       <div className="flex items-center space-x-2">
         <TransactionsTableExternalLink

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

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { useState, useMemo } from 'react'
 import Tippy from '@tippyjs/react'
-import { BigNumber, constants, utils } from 'ethers'
+import { constants, utils } from 'ethers'
 import { useLatest } from 'react-use'
 import { useAccount, useChainId, useSigner } from 'wagmi'
 import { TransactionResponse } from '@ethersproject/providers'
@@ -930,6 +930,8 @@ export function TransferPanel() {
 
     const { sourceChainTransaction } = bridgeTransfer
 
+    const isBatchTransfer = isBatchTransferSupported && Number(amount2) > 0
+
     const timestampCreated = Math.floor(Date.now() / 1000).toString()
 
     const txHistoryCompatibleObject = convertBridgeSdkToMergedTransaction({
@@ -941,6 +943,7 @@ export function TransferPanel() {
       destinationAddress,
       nativeCurrency,
       amount: amountBigNumber,
+      amount2: isBatchTransfer ? utils.parseEther(amount2) : undefined,
       timestampCreated
     })
 
@@ -959,6 +962,7 @@ export function TransferPanel() {
           destinationAddress,
           nativeCurrency,
           amount: amountBigNumber,
+          amount2: isBatchTransfer ? utils.parseEther(amount2) : undefined,
           timestampCreated
         })
       )

packages/arb-token-bridge-ui/src/components/TransferPanel/bridgeSdkConversionUtils.ts

@@ -23,6 +23,7 @@ type SdkToUiConversionProps = {
   destinationAddress?: string
   nativeCurrency: NativeCurrency
   amount: BigNumber
+  amount2?: BigNumber
   timestampCreated: string
 }
 
@@ -34,7 +35,8 @@ export const convertBridgeSdkToMergedTransaction = ({
   walletAddress,
   destinationAddress,
   nativeCurrency,
-  amount
+  amount,
+  amount2
 }: SdkToUiConversionProps): MergedTransaction => {
   const { transferType } = bridgeTransfer
   const isDeposit =
@@ -57,6 +59,7 @@ export const convertBridgeSdkToMergedTransaction = ({
       amount,
       selectedToken ? selectedToken.decimals : nativeCurrency.decimals
     ),
+    value2: amount2 ? utils.formatEther(amount2) : undefined,
     depositStatus: isDeposit ? DepositStatus.L1_PENDING : undefined,
     uniqueId: null,
     isWithdrawal: !isDeposit,
@@ -78,6 +81,7 @@ export const convertBridgeSdkToPendingDepositTransaction = ({
   nativeCurrency,
   destinationAddress,
   amount,
+  amount2,
   timestampCreated
 }: SdkToUiConversionProps): Deposit => {
   const transaction =
@@ -95,6 +99,7 @@ export const convertBridgeSdkToPendingDepositTransaction = ({
       amount,
       selectedToken ? selectedToken.decimals : nativeCurrency.decimals
     ),
+    value2: amount2 ? utils.formatEther(amount2) : undefined,
     parentChainId,
     childChainId,
     direction: 'deposit',

packages/arb-token-bridge-ui/src/hooks/useTransactions.ts

@@ -89,6 +89,7 @@ type TransactionBase = {
   type: TxnType
   status?: TxnStatus
   value: string | null
+  value2?: string
   txID?: string
   assetName: string
   assetType: AssetType

packages/arb-token-bridge-ui/src/state/app/state.ts

@@ -53,6 +53,7 @@ export interface MergedTransaction {
   asset: string
   assetType: AssetType
   value: string | null
+  value2?: string
   uniqueId: BigNumber | null
   isWithdrawal: boolean
   blockNum: number | null

packages/arb-token-bridge-ui/src/state/app/utils.ts

@@ -153,6 +153,7 @@ export const transformDeposit = (
     asset: tx.assetName || '',
     assetType: tx.assetType,
     value: tx.value,
+    value2: tx.value2,
     uniqueId: null, // not needed
     isWithdrawal: false,
     blockNum: tx.blockNumber || null,

packages/arb-token-bridge-ui/src/util/TokenDepositUtils.ts

@@ -8,10 +8,12 @@ import {
   fetchErc20ParentChainGatewayAddress,
   getL2ERC20Address
 } from './TokenUtils'
-import { DepositGasEstimates } from '../hooks/arbTokenBridge.types'
+import { AssetType, DepositGasEstimates } from '../hooks/arbTokenBridge.types'
 import { addressIsSmartContract } from './AddressUtils'
 import { getChainIdFromProvider } from '../token-bridge-sdk/utils'
 import { captureSentryErrorWithExtraData } from './SentryUtils'
+import { MergedTransaction } from '../state/app/state'
+import { isExperimentalFeatureEnabled } from '.'
 
 async function fetchTokenFallbackGasEstimates({
   inboxAddress,
@@ -216,3 +218,14 @@ async function addressIsCustomGatewayToken({
     childChainNetwork.tokenBridge?.parentCustomGateway.toLowerCase()
   )
 }
+
+export function isBatchTransfer(tx: MergedTransaction) {
+  return (
+    isExperimentalFeatureEnabled('batch') &&
+    !tx.isCctp &&
+    !tx.isWithdrawal &&
+    tx.assetType === AssetType.ERC20 &&
+    typeof tx.value2 !== 'undefined' &&
+    Number(tx.value2) > 0
+  )
+}

packages/arb-token-bridge-ui/src/util/deposits/helpers.ts

@@ -8,6 +8,7 @@ import {
   EthL1L3DepositStatus,
   Erc20L1L3DepositStatus
 } from '@arbitrum/sdk'
+import { utils } from 'ethers'
 
 import { Provider } from '@ethersproject/providers'
 import { AssetType } from '../../hooks/arbTokenBridge.types'
@@ -26,6 +27,10 @@ import {
 } from '../../token-bridge-sdk/teleport'
 import { getProviderForChainId } from '../../token-bridge-sdk/utils'
 
+// max amount that will be consider gas only for max submission fee
+// anything above that we assume users sent extra ETH in amount2
+const MAX_SUBMISSION_FEE_THRESHOLD = 0.0001
+
 export const updateAdditionalDepositData = async ({
   depositTx,
   l1Provider,
@@ -110,14 +115,90 @@ export const updateAdditionalDepositData = async ({
     })
   }
 
-  // finally, else if the transaction is not ETH ie. it's a ERC20 token deposit
-  return updateTokenDepositStatusData({
+  // ERC-20 deposit
+  const tokenDeposit = await updateTokenDepositStatusData({
     depositTx,
     l1ToL2Msg: l1ToL2Msg as ParentToChildMessageReader,
     timestampCreated,
     l1Provider,
     l2Provider
   })
+
+  // check local storage first, fallback to fetching on chain
+  if (depositTx.value2) {
+    return { ...tokenDeposit, value2: depositTx.value2 }
+  }
+
+  const { value2 } = await getBatchTransferDepositData({
+    l1ToL2Msg: l1ToL2Msg as ParentToChildMessageReader,
+    depositStatus: depositTx.status
+  })
+
+  return {
+    ...tokenDeposit,
+    value2
+  }
+}
+
+const getBatchTransferDepositData = async ({
+  l1ToL2Msg,
+  depositStatus
+}: {
+  l1ToL2Msg: ParentToChildMessageReader
+  depositStatus: TxnStatus | undefined
+}): Promise<{
+  value2: Transaction['value2']
+}> => {
+  let value2: Transaction['value2']
+
+  // get maxSubmissionCost, which is the amount of ETH sent in batched ERC-20 deposit + max gas cost
+  const maxSubmissionCost = Number(
+    utils.formatEther(l1ToL2Msg.messageData.maxSubmissionFee.toString())
+  )
+
+  // we deduct gas cost from max submission fee, which leaves us with amount2 (extra ETH sent with ERC-20)
+  if (depositStatus === 'success') {
+    // if success, we use the actual gas cost
+    const gasCost = await getRetryableExecutionTxFeeOnChildChain({
+      l1ToL2Msg
+    })
+
+    if (!gasCost) {
+      return { value2: undefined }
+    }
+
+    value2 = String(Number(maxSubmissionCost) - Number(gasCost))
+  } else {
+    // when not success, we don't know the final gas cost yet so we use estimates
+    const estimatedGasCost = utils.formatEther(
+      l1ToL2Msg.messageData.gasLimit.mul(l1ToL2Msg.messageData.maxFeePerGas)
+    )
+
+    value2 = String(Number(maxSubmissionCost) - Number(estimatedGasCost))
+  }
+
+  if (Number(value2) < MAX_SUBMISSION_FEE_THRESHOLD) {
+    // ETH amount too little to distinguish between gas used, won't show
+    return { value2: undefined }
+  }
+
+  return { value2 }
+}
+
+const getRetryableExecutionTxFeeOnChildChain = async ({
+  l1ToL2Msg
+}: {
+  l1ToL2Msg: ParentToChildMessageReader
+}) => {
+  const childReceipt = await l1ToL2Msg.getAutoRedeemAttempt()
+
+  if (!childReceipt) {
+    return undefined
+  }
+
+  const { gasUsed, effectiveGasPrice } = childReceipt
+
+  return utils.formatEther(gasUsed.mul(effectiveGasPrice))
 }
 
 const updateETHDepositStatusData = async ({