Merge branch 'master' into fix-arb-on-orbit

audit-ci.jsonc

@@ -1,14 +1,5 @@
 {
   "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
   "low": true,
-  "allowlist": [
-    // elliptic
-    // waiting for it to release a fix but low severity so we can ignore it
-    // https://github.com/advisories/GHSA-49q7-c7j4-3p7m
-    "GHSA-49q7-c7j4-3p7m",
-    // https://github.com/advisories/GHSA-977x-g7h5-7qgw
-    "GHSA-977x-g7h5-7qgw",
-    // https://github.com/advisories/GHSA-f7q4-pwc6-w24p
-    "GHSA-f7q4-pwc6-w24p"
-  ]
+  "allowlist": []
 }

package.json

@@ -22,7 +22,8 @@
   "resolutions": {
     "**/@walletconnect/ethereum-provider": "2.13.1",
     "**/@ethersproject/providers/ws": "7.5.10",
-    "**/@synthetixio/synpress/ws": "8.17.1"
+    "**/@synthetixio/synpress/ws": "8.17.1",
+    "**/elliptic": "6.5.7"
   },
   "keywords": [],
   "author": "",

packages/arb-token-bridge-ui/package.json

@@ -22,7 +22,7 @@
     "@vercel/edge-config": "^0.4.1",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
-    "axios": "^1.6.6",
+    "axios": "^1.7.4",
     "boring-avatars": "^1.7.0",
     "cheerio": "^1.0.0-rc.12",
     "dayjs": "^1.11.8",
@@ -34,7 +34,7 @@
     "next-query-params": "^5.0.0",
     "overmind": "^28.0.1",
     "overmind-react": "^29.0.1",
-    "posthog-js": "^1.57.2",
+    "posthog-js": "^1.155.4",
     "query-string": "^8.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

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

@@ -4,7 +4,6 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 
 import { useAppState } from '../../state'
-import { sanitizeImageSrc } from '../../util'
 import { TokenSearch } from '../TransferPanel/TokenSearch'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
@@ -17,43 +16,31 @@ import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { Transition } from '../common/Transition'
 
-export function TokenButton(): JSX.Element {
+export type TokenButtonOptions = {
+  symbol?: string
+  disabled?: boolean
+}
+
+export function TokenButton({
+  options
+}: {
+  options?: TokenButtonOptions
+}): JSX.Element {
   const {
-    app: {
-      selectedToken,
-      arbTokenBridge: { bridgeTokens },
-      arbTokenBridgeLoaded
-    }
+    app: { selectedToken }
   } = useAppState()
+  const disabled = options?.disabled ?? false
+
   const [networks] = useNetworks()
   const { childChainProvider } = useNetworksRelationship(networks)
 
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
-  const tokenLogo = useMemo<string | undefined>(() => {
-    const selectedAddress = selectedToken?.address
-    if (!selectedAddress) {
-      return nativeCurrency.logoUrl
-    }
-    if (!arbTokenBridgeLoaded) {
-      return undefined
-    }
-    if (typeof bridgeTokens === 'undefined') {
-      return undefined
-    }
-    const logo = bridgeTokens[selectedAddress]?.logoURI
-    if (logo) {
-      return sanitizeImageSrc(logo)
+  const tokenSymbol = useMemo(() => {
+    if (typeof options?.symbol !== 'undefined') {
+      return options.symbol
     }
-    return undefined
-  }, [
-    nativeCurrency,
-    bridgeTokens,
-    selectedToken?.address,
-    arbTokenBridgeLoaded
-  ])
 
-  const tokenSymbol = useMemo(() => {
     if (!selectedToken) {
       return nativeCurrency.symbol
     }
@@ -62,7 +49,7 @@ export function TokenButton(): JSX.Element {
       erc20L1Address: selectedToken.address,
       chainId: networks.sourceChain.id
     })
-  }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol])
+  }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol, options])
 
   return (
     <>
@@ -73,6 +60,7 @@ export function TokenButton(): JSX.Element {
               className="arb-hover h-full w-max rounded-bl rounded-tl px-3 py-3 text-white"
               aria-label="Select Token"
               onClick={onPopoverButtonClick}
+              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 */}
@@ -90,12 +78,14 @@ export function TokenButton(): JSX.Element {
                 <span className="text-xl font-light sm:text-3xl">
                   {tokenSymbol}
                 </span>
-                <ChevronDownIcon
-                  className={twMerge(
-                    'h-3 w-3 text-gray-6 transition-transform duration-200',
-                    open ? '-rotate-180' : 'rotate-0'
-                  )}
-                />
+                {!disabled && (
+                  <ChevronDownIcon
+                    className={twMerge(
+                      'h-3 w-3 text-gray-6 transition-transform duration-200',
+                      open ? '-rotate-180' : 'rotate-0'
+                    )}
+                  />
+                )}
               </div>
             </Popover.Button>
 

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

@@ -564,10 +564,6 @@ export function TokenSearch({
       return
     }
 
-    if (typeof bridgeTokens === 'undefined') {
-      return
-    }
-
     try {
       // Native USDC on L2 won't have a corresponding L1 address
       const isNativeUSDC =
@@ -609,6 +605,10 @@ export function TokenSearch({
         return
       }
 
+      if (typeof bridgeTokens === 'undefined') {
+        return
+      }
+
       // Token not added to the bridge, so we'll handle importing it
       if (typeof bridgeTokens[lowercasedTokenAddress] === 'undefined') {
         setTokenQueryParam(lowercasedTokenAddress)

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 { constants, utils } from 'ethers'
+import { BigNumber, constants, utils } from 'ethers'
 import { useLatest } from 'react-use'
 import { useAccount, useChainId, useSigner } from 'wagmi'
 import { TransactionResponse } from '@ethersproject/providers'
@@ -49,22 +49,27 @@ import { isUserRejectedError } from '../../util/isUserRejectedError'
 import { getUsdcTokenAddressFromSourceChainId } from '../../state/cctpState'
 import { DepositStatus, MergedTransaction } from '../../state/app/state'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
-import { AssetType } from '../../hooks/arbTokenBridge.types'
+import {
+  AssetType,
+  DepositGasEstimates
+} from '../../hooks/arbTokenBridge.types'
 import {
   ImportTokenModalStatus,
   getWarningTokenDescription,
   useTokenFromSearchParams
 } from './TransferPanelUtils'
 import { useImportTokenModal } from '../../hooks/TransferPanel/useImportTokenModal'
 import { useTransferReadiness } from './useTransferReadiness'
-import { useGasSummary } from '../../hooks/TransferPanel/useGasSummary'
 import { useTransactionHistory } from '../../hooks/useTransactionHistory'
 import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { CctpTransferStarter } from '@/token-bridge-sdk/CctpTransferStarter'
 import { BridgeTransferStarterFactory } from '@/token-bridge-sdk/BridgeTransferStarterFactory'
-import { BridgeTransfer } from '@/token-bridge-sdk/BridgeTransferStarter'
+import {
+  BridgeTransfer,
+  TransferOverrides
+} from '@/token-bridge-sdk/BridgeTransferStarter'
 import { addDepositToCache } from '../TransactionHistory/helpers'
 import {
   convertBridgeSdkToMergedTransaction,
@@ -75,6 +80,7 @@ import { useSetInputAmount } from '../../hooks/TransferPanel/useSetInputAmount'
 import { getSmartContractWalletTeleportTransfersNotSupportedErrorMessage } from './useTransferReadinessUtils'
 import { useBalances } from '../../hooks/useBalances'
 import { captureSentryErrorWithExtraData } from '../../util/SentryUtils'
+import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported'
 
 const networkConnectionWarningToast = () =>
   warningToast(
@@ -125,6 +131,7 @@ export function TransferPanel() {
     isTeleportMode
   } = useNetworksRelationship(networks)
   const latestNetworks = useLatest(networks)
+  const isBatchTransferSupported = useIsBatchTransferSupported()
 
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
@@ -150,9 +157,9 @@ export function TransferPanel() {
 
   // Link the amount state directly to the amount in query params -  no need of useState
   // Both `amount` getter and setter will internally be using `useArbQueryParams` functions
-  const [{ amount }] = useArbQueryParams()
+  const [{ amount, amount2 }] = useArbQueryParams()
 
-  const setAmount = useSetInputAmount()
+  const { setAmount, setAmount2 } = useSetInputAmount()
 
   const [tokenImportDialogProps] = useDialog()
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
@@ -180,12 +187,7 @@ export function TransferPanel() {
 
   const [isCctp, setIsCctp] = useState(false)
 
-  const gasSummary = useGasSummary()
-
-  const { transferReady, errorMessage } = useTransferReadiness({
-    amount,
-    gasSummary
-  })
+  const { transferReady } = useTransferReadiness()
 
   const { color: destinationChainUIcolor } = getBridgeUiConfigForChain(
     networks.destinationChain.id
@@ -200,6 +202,7 @@ export function TransferPanel() {
   function clearAmountInput() {
     // clear amount input on transfer panel
     setAmount('')
+    setAmount2('')
   }
 
   useImportTokenModal({
@@ -861,11 +864,34 @@ export function TransferPanel() {
         )
       }
 
+      const overrides: TransferOverrides = {}
+
+      const isBatchTransfer = isBatchTransferSupported && Number(amount2) > 0
+
+      if (isBatchTransfer) {
+        // when sending additional ETH with ERC-20, we add the additional ETH value as maxSubmissionCost
+        const gasEstimates = (await bridgeTransferStarter.transferEstimateGas({
+          amount: amountBigNumber,
+          signer
+        })) as DepositGasEstimates
+
+        if (!gasEstimates.estimatedChildChainSubmissionCost) {
+          errorToast('Failed to estimate deposit maxSubmissionCost')
+          throw 'Failed to estimate deposit maxSubmissionCost'
+        }
+
+        overrides.maxSubmissionCost = utils
+          .parseEther(amount2)
+          .add(gasEstimates.estimatedChildChainSubmissionCost)
+        overrides.excessFeeRefundAddress = destinationAddress
+      }
+
       // finally, call the transfer function
       const transfer = await bridgeTransferStarter.transfer({
         amount: amountBigNumber,
         signer,
-        destinationAddress
+        destinationAddress,
+        overrides: Object.keys(overrides).length > 0 ? overrides : undefined
       })
 
       // transaction submitted callback
@@ -1028,7 +1054,7 @@ export function TransferPanel() {
           'sm:rounded sm:border'
         )}
       >
-        <TransferPanelMain amount={amount} errorMessage={errorMessage} />
+        <TransferPanelMain />
         <AdvancedSettings />
         <TransferPanelSummary
           amount={parseFloat(amount)}

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

@@ -22,7 +22,6 @@ import {
 import { ether } from '../../constants'
 import { useUpdateUSDCBalances } from '../../hooks/CCTP/useUpdateUSDCBalances'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
-import { TransferReadinessRichErrorMessage } from './useTransferReadinessUtils'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { TransferDisabledDialog } from './TransferDisabledDialog'
@@ -250,13 +249,7 @@ export function NetworkListboxPlusBalancesContainer({
   )
 }
 
-export function TransferPanelMain({
-  amount,
-  errorMessage
-}: {
-  amount: string
-  errorMessage?: TransferReadinessRichErrorMessage | string
-}) {
+export function TransferPanelMain() {
   const [networks] = useNetworks()
   const { childChain, childChainProvider, isTeleportMode } =
     useNetworksRelationship(networks)
@@ -356,8 +349,6 @@ export function TransferPanelMain({
   return (
     <div className="flex flex-col pb-6 lg:gap-y-1">
       <SourceNetworkBox
-        amount={amount}
-        errorMessage={errorMessage}
         customFeeTokenBalances={customFeeTokenBalances}
         showUsdcSpecificInfo={showUSDCSpecificInfo}
       />