Merge remote-tracking branch 'origin/master' into isDepositMode-tests

.github/workflows/e2e-tests.yml

@@ -95,6 +95,7 @@ jobs:
 
       - name: Run nitro testnode
         if: inputs.test_type != 'cctp'
+        timeout-minutes: 20
         uses: OffchainLabs/actions/run-nitro-test-node@a20a76172ce524832ac897bef2fa10a62ed81c29
         with:
           nitro-testnode-ref: badbcbea9b43d46e115da4d7c9f2f57c31af8431

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

@@ -10,7 +10,7 @@
     "@headlessui/react": "^1.7.8",
     "@headlessui/tailwindcss": "^0.1.2",
     "@heroicons/react": "^2.0.18",
-    "@offchainlabs/cobalt": "^0.3.11",
+    "@offchainlabs/cobalt": "^0.3.12",
     "@rainbow-me/rainbowkit": "^0.12.16",
     "@rehooks/local-storage": "^2.4.4",
     "@sentry/react": "^8.33.1",
@@ -23,30 +23,30 @@
     "axios": "^1.7.4",
     "boring-avatars": "^1.7.0",
     "cheerio": "^1.0.0-rc.12",
-    "dayjs": "^1.11.8",
+    "dayjs": "^1.11.13",
     "ethers": "^5.6.0",
     "exponential-backoff": "^3.1.1",
-    "graphql": "^16.8.1",
+    "graphql": "^16.9.0",
     "lodash-es": "^4.17.21",
-    "next": "^14.2.12",
+    "next": "^14.2.15",
     "next-query-params": "^5.0.0",
     "overmind": "^28.0.1",
     "overmind-react": "^29.0.1",
-    "posthog-js": "^1.155.4",
+    "posthog-js": "^1.200.0",
     "query-string": "^8.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-loader-spinner": "^5.4.5",
     "react-syntax-highlighter": "^15.6.1",
     "react-toastify": "^9.1.1",
-    "react-use": "^17.2.4",
+    "react-use": "^17.6.0",
     "react-virtualized": "^9.22.3",
     "sharp": "^0.33.5",
     "swr": "^2.1.2",
-    "tailwind-merge": "^2.0.0",
+    "tailwind-merge": "^2.5.5",
     "use-query-params": "^2.2.1",
     "wagmi": "^0.12.18",
-    "zod": "^3.22.4",
+    "zod": "^3.24.1",
     "zustand": "^4.3.9"
   },
   "scripts": {
@@ -109,14 +109,14 @@
     "jest": "^29.4.0",
     "jest-environment-jsdom": "^29.4.0",
     "patch-package": "^8.0.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.49",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.11",
-    "satori": "^0.10.11",
-    "start-server-and-test": "^2.0.0",
-    "tailwindcss": "^3.2.4",
-    "ts-node": "^10.9.1",
+    "satori": "^0.12.0",
+    "start-server-and-test": "^2.0.9",
+    "tailwindcss": "^3.4.16",
+    "ts-node": "^10.9.2",
     "typescript": "^5.2.2"
   }
 }

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

@@ -1,4 +1,6 @@
 import { useCallback } from 'react'
+import { useAccount, useNetwork } from 'wagmi'
+
 import { GET_HELP_LINK } from '../../constants'
 import { useClaimWithdrawal } from '../../hooks/useClaimWithdrawal'
 import { useClaimCctp } from '../../state/cctpState'
@@ -13,7 +15,6 @@ import { getNetworkName } from '../../util/networks'
 import { errorToast } from '../common/atoms/Toast'
 import { Button } from '../common/Button'
 import { useSwitchNetworkWithConfig } from '../../hooks/useSwitchNetworkWithConfig'
-import { useNetwork } from 'wagmi'
 import { isDepositReadyToRedeem } from '../../state/app/utils'
 import { useRedeemRetryable } from '../../hooks/useRedeemRetryable'
 import { TransferCountdown } from '../common/TransferCountdown'
@@ -23,6 +24,7 @@ import { useRedeemTeleporter } from '../../hooks/useRedeemTeleporter'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { formatAmount } from '../../util/NumberUtils'
 import { useTransactionHistoryAddressStore } from './TransactionHistorySearchBar'
+import { Tooltip } from '../common/Tooltip'
 
 export function TransactionsTableRowAction({
   tx,
@@ -33,10 +35,17 @@ export function TransactionsTableRowAction({
   isError: boolean
   type: 'deposits' | 'withdrawals'
 }) {
+  const { address: connectedAddress } = useAccount()
   const { chain } = useNetwork()
   const { switchNetworkAsync } = useSwitchNetworkWithConfig()
   const networkName = getNetworkName(chain?.id ?? 0)
-  const { sanitizedAddress } = useTransactionHistoryAddressStore()
+  const { sanitizedAddress: searchedAddress } =
+    useTransactionHistoryAddressStore()
+
+  const isViewingAnotherAddress =
+    connectedAddress &&
+    searchedAddress &&
+    connectedAddress.toLowerCase() !== searchedAddress.toLowerCase()
 
   const tokenSymbol = sanitizeTokenSymbol(tx.asset, {
     erc20L1Address: tx.tokenAddress,
@@ -47,10 +56,10 @@ export function TransactionsTableRowAction({
   const { claim: claimCctp, isClaiming: isClaimingCctp } = useClaimCctp(tx)
   const { redeem, isRedeeming: isRetryableRedeeming } = useRedeemRetryable(
     tx,
-    sanitizedAddress
+    searchedAddress
   )
   const { redeem: teleporterRedeem, isRedeeming: isTeleporterRedeeming } =
-    useRedeemTeleporter(tx, sanitizedAddress)
+    useRedeemTeleporter(tx, searchedAddress)
 
   const isRedeeming = isRetryableRedeeming || isTeleporterRedeeming
 
@@ -162,16 +171,25 @@ export function TransactionsTableRowAction({
     return isClaiming || isClaimingCctp ? (
       <span className="my-2 animate-pulse text-xs">Claiming...</span>
     ) : (
-      <Button
-        aria-label={`Claim ${formatAmount(Number(tx.value), {
-          symbol: tokenSymbol
-        })}`}
-        variant="primary"
-        className="w-14 rounded bg-green-400 p-2 text-xs text-black"
-        onClick={handleClaim}
+      <Tooltip
+        content={
+          <span>{`Funds will arrive at ${searchedAddress} on ${getNetworkName(
+            tx.destinationChainId
+          )} once the claim transaction succeeds.`}</span>
+        }
+        show={isViewingAnotherAddress}
       >
-        Claim
-      </Button>
+        <Button
+          aria-label={`Claim ${formatAmount(Number(tx.value), {
+            symbol: tokenSymbol
+          })}`}
+          variant="primary"
+          className="w-14 rounded bg-green-400 p-2 text-xs text-black"
+          onClick={handleClaim}
+        >
+          Claim
+        </Button>
+      </Tooltip>
     )
   }
 

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

@@ -34,9 +34,9 @@ import { TokenLogoFallback } from './TokenInfo'
 import { useBalanceOnSourceChain } from '../../hooks/useBalanceOnSourceChain'
 import { useSourceChainNativeCurrencyDecimals } from '../../hooks/useSourceChainNativeCurrencyDecimals'
 
-function tokenListIdsToNames(ids: number[]): string {
+function tokenListIdsToNames(ids: string[]): string {
   return ids
-    .map((tokenListId: number) => listIdsToNames[tokenListId])
+    .map((tokenListId: string) => listIdsToNames[tokenListId])
     .join(', ')
 }
 
@@ -90,7 +90,7 @@ function TokenListInfo({ token }: { token: ERC20BridgeToken | null }) {
       return 'Native USDC on Arbitrum Sepolia'
     }
 
-    const listIds: Set<number> = token.listIds
+    const listIds: Set<string> = token.listIds
     const listIdsSize = listIds.size
     if (listIdsSize === 0) {
       return 'Added by User'

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

@@ -47,7 +47,7 @@ import { useSetInputAmount } from '../../hooks/TransferPanel/useSetInputAmount'
 
 export const ARB_ONE_NATIVE_USDC_TOKEN = {
   ...ArbOneNativeUSDC,
-  listIds: new Set<number>(),
+  listIds: new Set<string>(),
   type: TokenType.ERC20,
   // the address field is for L1 address but native USDC does not have an L1 address
   // the L2 address is used instead to avoid errors
@@ -57,7 +57,7 @@ export const ARB_ONE_NATIVE_USDC_TOKEN = {
 
 export const ARB_SEPOLIA_NATIVE_USDC_TOKEN = {
   ...ArbOneNativeUSDC,
-  listIds: new Set<number>(),
+  listIds: new Set<string>(),
   type: TokenType.ERC20,
   address: CommonAddress.ArbitrumSepolia.USDC,
   l2Address: CommonAddress.ArbitrumSepolia.USDC

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

@@ -16,7 +16,7 @@ const commonUSDC = {
   type: TokenType.ERC20,
   symbol: 'USDC',
   decimals: 6,
-  listIds: new Set<number>()
+  listIds: new Set<string>()
 }
 
 export function useUpdateUSDCTokenData() {

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

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
+import Image from 'next/image'
 
 import { formatAmount } from '../../util/NumberUtils'
 import { getNetworkName, isNetwork } from '../../util/networks'
@@ -20,6 +21,7 @@ import { NoteBox } from '../common/NoteBox'
 import { DISABLED_CHAIN_IDS } from './useTransferReadiness'
 import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { getConfirmationTime } from '../../util/WithdrawalUtils'
+import LightningIcon from '@/images/LightningIcon.svg'
 
 export type TransferPanelSummaryToken = {
   symbol: string
@@ -284,21 +286,27 @@ function ConfirmationTimeInfo({ chainId }: { chainId: number }) {
   return (
     <>
       <span className="whitespace-nowrap">Confirmation time:</span>
-      <span className="flex items-center font-medium">
+      <span className="flex flex-col items-start font-medium sm:flex-row sm:items-center">
         <span className="hidden sm:inline">
           {confirmationTimeInReadableFormat}
         </span>
         <span className="sm:hidden">
           {confirmationTimeInReadableFormatShort}
         </span>
         {fastWithdrawalActive && (
-          <Tooltip
-            content={
-              'Fast Withdrawals relies on a committee of validators. In the event of a committee outage, your withdrawal falls back to the 7 day challenge period secured by Arbitrum Fraud Proofs.'
-            }
-          >
-            <InformationCircleIcon className="ml-1 h-3 w-3" />
-          </Tooltip>
+          <div className="flex items-center">
+            <Tooltip
+              content={
+                'Fast Withdrawals relies on a committee of validators. In the event of a committee outage, your withdrawal falls back to the 7 day challenge period secured by Arbitrum Fraud Proofs.'
+              }
+            >
+              <InformationCircleIcon className="h-3 w-3 sm:ml-1" />
+            </Tooltip>
+            <div className="ml-1 flex space-x-0.5 text-[#FFD000]">
+              <Image src={LightningIcon} alt="Lightning Icon" />
+              <span className="font-normal">FAST</span>
+            </div>
+          </div>
         )}
       </span>
     </>

packages/arb-token-bridge-ui/src/hooks/arbTokenBridge.types.ts

@@ -90,7 +90,7 @@ export interface BridgeToken {
   address: string
   l2Address?: string
   logoURI?: string
-  listIds: Set<number> // no listID indicates added by user
+  listIds: Set<string> // no listID indicates added by user
   isL2Native?: boolean
 }
 
@@ -140,8 +140,8 @@ export interface ArbTokenBridgeEth {
 export interface ArbTokenBridgeToken {
   add: (erc20L1orL2Address: string) => Promise<void>
   addL2NativeToken: (erc20L2Address: string) => void
-  addTokensFromList: (tokenList: TokenList, listID: number) => void
-  removeTokensFromList: (listID: number) => void
+  addTokensFromList: (tokenList: TokenList, listID: string) => void
+  removeTokensFromList: (listID: string) => void
   updateTokenData: (l1Address: string) => Promise<void>
   triggerOutbox: (params: {
     event: L2ToL1EventResultPlus

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

@@ -136,7 +136,7 @@ export const useArbTokenBridge = (
 
   const l1NetworkID = useMemo(() => String(l1.network.id), [l1.network.id])
 
-  const removeTokensFromList = (listID: number) => {
+  const removeTokensFromList = (listID: string) => {
     setBridgeTokens(prevBridgeTokens => {
       const newBridgeTokens = { ...prevBridgeTokens }
       for (const address in bridgeTokens) {
@@ -153,7 +153,7 @@ export const useArbTokenBridge = (
     })
   }
 
-  const addTokensFromList = async (arbTokenList: TokenList, listId: number) => {
+  const addTokensFromList = async (arbTokenList: TokenList, listId: string) => {
     const l1ChainID = l1.network.id
     const l2ChainID = l2.network.id
 

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

@@ -15,6 +15,7 @@ import { fetchErc20Data } from '../util/TokenUtils'
 import { fetchNativeCurrency } from './useNativeCurrency'
 import { getProviderForChainId } from '@/token-bridge-sdk/utils'
 import { captureSentryErrorWithExtraData } from '../util/SentryUtils'
+import { useTransactionHistoryAddressStore } from '../components/TransactionHistory/TransactionHistorySearchBar'
 
 export type UseClaimWithdrawalResult = {
   claim: () => Promise<void>
@@ -28,8 +29,11 @@ export function useClaimWithdrawal(
     app: { arbTokenBridge }
   } = useAppState()
   const { address } = useAccount()
+  const { sanitizedAddress } = useTransactionHistoryAddressStore()
   const { data: signer } = useSigner({ chainId: tx.parentChainId })
-  const { updatePendingTransaction } = useTransactionHistory(address)
+  const { updatePendingTransaction } = useTransactionHistory(
+    sanitizedAddress ?? address
+  )
   const [isClaiming, setIsClaiming] = useState(false)
 
   const claim = useCallback(async () => {

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

@@ -838,7 +838,7 @@ export const useTransactionHistory = (
 
   if (isLoadingTxsWithoutStatus || error) {
     return {
-      transactions: [],
+      transactions: newTransactionsData || [],
       loading: isLoadingTxsWithoutStatus,
       error,
       failedChainPairs: [],

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

@@ -3,12 +3,7 @@ import { isValidTeleportChainPair } from '@/token-bridge-sdk/teleport'
 
 import { MergedTransaction } from '../state/app/state'
 import { useRemainingTimeCctp } from '../state/cctpState'
-import {
-  getBlockNumberReferenceChainIdByChainId,
-  getConfirmPeriodBlocks,
-  getL1BlockTime,
-  isNetwork
-} from '../util/networks'
+import { isNetwork } from '../util/networks'
 import { getConfirmationTime } from '../util/WithdrawalUtils'
 
 const DEPOSIT_TIME_MINUTES = {
@@ -31,13 +26,6 @@ const DEPOSIT_TIME_MINUTES_ORBIT = {
   testnet: 1
 }
 
-/**
- * Buffer for after a node is confirmable but isn't yet confirmed.
- * A rollup block (RBlock) typically gets asserted every 30-60 minutes.
- */
-const CONFIRMATION_BUFFER_MINUTES = 60
-const SECONDS_IN_MIN = 60
-
 type UseTransferDurationResult = {
   approximateDurationInMinutes: number
   estimatedMinutesLeft: number | null
@@ -122,22 +110,10 @@ export function getWithdrawalConfirmationDate({
   // For new txs createdAt won't be defined yet, we default to the current time in that case
   const createdAtDate = createdAt ? dayjs(createdAt) : dayjs()
 
-  const { confirmationTimeInSeconds, fastWithdrawalActive } =
-    getConfirmationTime(withdrawalFromChainId)
-  if (fastWithdrawalActive && confirmationTimeInSeconds) {
-    return createdAtDate.add(confirmationTimeInSeconds, 'second')
-  }
-
-  const blockNumberReferenceChainId = getBlockNumberReferenceChainIdByChainId({
-    chainId: withdrawalFromChainId
-  })
-  // the block time is always base chain's block time regardless of withdrawing from L3 to L2 or from L2 to L1
-  // and similarly, the confirm period blocks is always the number of blocks on the base chain
-  const confirmationSeconds =
-    getL1BlockTime(blockNumberReferenceChainId) *
-      getConfirmPeriodBlocks(withdrawalFromChainId) +
-    CONFIRMATION_BUFFER_MINUTES * SECONDS_IN_MIN
-  return createdAtDate.add(confirmationSeconds, 'second')
+  const { confirmationTimeInSeconds } = getConfirmationTime(
+    withdrawalFromChainId
+  )
+  return createdAtDate.add(confirmationTimeInSeconds, 'second')
 }
 
 function getWithdrawalDuration(tx: MergedTransaction) {