Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…

…earbtokenbridge

.github/workflows/core-batch-poster-monitor.yml

@@ -23,11 +23,8 @@ jobs:
       with:
         repository: OffchainLabs/arbitrum-token-bridge
 
-    - name: Restore node_modules
-      uses: OffchainLabs/actions/node-modules/restore@main
-
-    - name: Install dependencies
-      run: yarn install
+    - name: Install node_modules
+      uses: OffchainLabs/actions/node-modules/install@main
 
     - name: Generate chains JSON
       run: yarn workspace arb-token-bridge-ui generateCoreChainsToMonitor

.github/workflows/orbit-batch-poster-monitor.yml

@@ -21,11 +21,8 @@ jobs:
       with:
         repository: OffchainLabs/arbitrum-token-bridge
 
-    - name: Restore node_modules
-      uses: OffchainLabs/actions/node-modules/restore@main
-
-    - name: Install dependencies
-      run: yarn install
+    - name: Install node_modules
+      uses: OffchainLabs/actions/node-modules/install@main
 
     - name: Generate chains JSON
       run: yarn workspace arb-token-bridge-ui generateOrbitChainsToMonitor

audit-ci.jsonc

@@ -9,6 +9,9 @@
     // https://github.com/advisories/GHSA-977x-g7h5-7qgw
     "GHSA-977x-g7h5-7qgw",
     // https://github.com/advisories/GHSA-f7q4-pwc6-w24p
-    "GHSA-f7q4-pwc6-w24p"
+    "GHSA-f7q4-pwc6-w24p",
+    // axios
+    // https://github.com/advisories/GHSA-8hc4-vh64-cxmj
+    "GHSA-8hc4-vh64-cxmj"
   ]
 }

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.6",
+    "@offchainlabs/cobalt": "0.3.7",
     "@rainbow-me/rainbowkit": "^0.12.16",
     "@rehooks/local-storage": "^2.4.4",
     "@sentry/react": "^7.73.0",
@@ -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/App/WelcomeDialog.tsx

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/react'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { useCallback } from 'react'
 import { useLocalStorage } from '@uidotdev/usehooks'
@@ -7,6 +6,7 @@ import { ExternalLink } from '../common/ExternalLink'
 import { errorToast } from '../common/atoms/Toast'
 import { TOS_LOCALSTORAGE_KEY } from '../../constants'
 import { Button } from '../common/Button'
+import { captureSentryErrorWithExtraData } from '../../util/SentryUtils'
 
 export function WelcomeDialog() {
   const [, setTosAccepted] = useLocalStorage<boolean>(
@@ -23,7 +23,10 @@ export function WelcomeDialog() {
       openConnectModal?.()
     } catch (error) {
       errorToast('Failed to open up RainbowKit Connect Modal')
-      Sentry.captureException(error)
+      captureSentryErrorWithExtraData({
+        error,
+        originFunction: 'WelcomeDialog closeHandler'
+      })
     }
   }, [openConnectModal, setTosAccepted])
 

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

@@ -1,5 +1,4 @@
 import { ReactNode, useMemo } from 'react'
-import dayjs from 'dayjs'
 import { twMerge } from 'tailwind-merge'
 import {
   ArrowTopRightOnSquareIcon,
@@ -8,7 +7,7 @@ import {
 } from '@heroicons/react/24/outline'
 
 import { DepositStatus, MergedTransaction } from '../../state/app/state'
-import { getExplorerUrl, getNetworkName, isNetwork } from '../../util/networks'
+import { getExplorerUrl, getNetworkName } from '../../util/networks'
 import {
   getDestinationNetworkTxId,
   isTxClaimable,
@@ -19,12 +18,7 @@ import {
 } from './helpers'
 import { TransactionsTableRowAction } from './TransactionsTableRowAction'
 import { ExternalLink } from '../common/ExternalLink'
-import {
-  WithdrawalCountdown,
-  getTxConfirmationDate
-} from '../common/WithdrawalCountdown'
-import { DepositCountdown } from '../common/DepositCountdown'
-import { useRemainingTime } from '../../state/cctpState'
+import { TransferCountdown } from '../common/TransferCountdown'
 import { isDepositReadyToRedeem } from '../../state/app/utils'
 import { Address } from '../../util/AddressUtils'
 import { isTeleport } from '@/token-bridge-sdk/teleport'
@@ -33,30 +27,12 @@ import {
   secondRetryableLegForTeleportRequiresRedeem
 } from '../../util/RetryableUtils'
 import { TransactionsTableDetailsTeleporterSteps } from './TransactionsTableDetailsTeleporterSteps'
+import {
+  minutesToHumanReadableTime,
+  useTransferDuration
+} from '../../hooks/useTransferDuration'
 import { isTeleporterTransaction } from '../../hooks/useTransactions'
 
-function getTransferDurationText(tx: MergedTransaction) {
-  const { isTestnet, isOrbitChain } = isNetwork(tx.childChainId)
-
-  if (tx.isCctp) {
-    return isTestnet ? 'a minute' : '10 minutes'
-  }
-
-  if (!tx.isWithdrawal) {
-    if (isOrbitChain && !isTeleport(tx)) {
-      return 'a minute'
-    }
-    return isTestnet ? '10 minutes' : '15 minutes'
-  }
-
-  // withdrawals
-  return getTxConfirmationDate({
-    createdAt: dayjs(),
-    withdrawalFromChainId: tx.childChainId
-    // we set from to current time so that we get the full withdrawal confirmation time
-  }).from(dayjs(), true)
-}
-
 function needsToClaimTransfer(tx: MergedTransaction) {
   return tx.isCctp || tx.isWithdrawal
 }
@@ -193,7 +169,7 @@ export const TransactionsTableDetailsSteps = ({
   tx: MergedTransaction
   address: Address | undefined
 }) => {
-  const { remainingTime: cctpRemainingTime } = useRemainingTime(tx)
+  const { approximateDurationInMinutes } = useTransferDuration(tx)
 
   const { sourceChainId } = tx
 
@@ -254,19 +230,12 @@ export const TransactionsTableDetailsSteps = ({
         <Step
           pending={isTxPending(tx)}
           done={!isTxPending(tx) && !isSourceChainDepositFailure}
-          text={`Wait ~${getTransferDurationText(tx)}`}
+          text={`Wait ~${minutesToHumanReadableTime(
+            approximateDurationInMinutes
+          )}`}
           endItem={
             isTxPending(tx) && (
-              <div>
-                {tx.isCctp && <>{cctpRemainingTime}</>}
-                {!tx.isCctp &&
-                  (tx.isWithdrawal ? (
-                    <WithdrawalCountdown tx={tx} />
-                  ) : (
-                    <DepositCountdown tx={tx} />
-                  ))}
-                <span> remaining</span>
-              </div>
+              <TransferCountdown tx={tx} textAfterTime="remaining" />
             )
           }
         />

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

@@ -20,7 +20,12 @@ import {
   Step,
   TransactionFailedOnNetwork
 } from './TransactionsTableDetailsSteps'
-import { DepositCountdown } from '../common/DepositCountdown'
+import { TransferCountdown } from '../common/TransferCountdown'
+import {
+  getOrbitDepositDuration,
+  getStandardDepositDuration,
+  minutesToHumanReadableTime
+} from '../../hooks/useTransferDuration'
 
 const TeleportMiddleStepFailureExplanationNote = ({
   tx
@@ -73,16 +78,16 @@ export const TransactionsTableDetailsTeleporterSteps = ({
   tx: TeleporterMergedTransaction
   address: Address | undefined
 }) => {
-  const { isTestnet: isTestnetTx } = isNetwork(tx.childChainId)
-
-  const l2TxID = tx.l1ToL2MsgData?.childTxId
+  const l2TxID = tx.parentToChildMsgData?.childTxId
   const isFirstRetryableLegSucceeded =
     typeof l2TxID !== 'undefined' &&
     typeof tx.l2ToL3MsgData?.l2ForwarderRetryableTxID === 'undefined'
   const l2ChainId = tx.l2ToL3MsgData?.l2ChainId
   const isFirstRetryableLegFailed = firstRetryableLegRequiresRedeem(tx)
   const l2ForwarderRequiresRedeem = l2ForwarderRetryableRequiresRedeem(tx)
 
+  const { isTestnet } = isNetwork(tx.sourceChainId)
+
   const isFirstRetryableLegResolved =
     isFirstRetryableLegSucceeded || isFirstRetryableLegFailed
 
@@ -117,25 +122,25 @@ export const TransactionsTableDetailsTeleporterSteps = ({
     ? firstRetryableRedeemButton
     : firstTransactionExternalLink
 
-  const firstRetryableWaitingDuration = isTestnetTx
-    ? '10 minutes'
-    : '15 minutes'
-
-  const secondRetryableWaitingDuration = isTestnetTx ? '1 minute' : '5 minutes'
+  const firstRetryableWaitingDuration = getStandardDepositDuration(isTestnet)
+  const secondRetryableWaitingDuration = getOrbitDepositDuration(isTestnet)
 
   return (
     <>
       {/* show waiting time for first leg of teleporter tx */}
       <Step
         pending={!isFirstRetryableLegResolved}
         done={isFirstRetryableLegResolved}
-        text={`Wait ~${firstRetryableWaitingDuration}`}
+        text={`Wait ~${minutesToHumanReadableTime(
+          firstRetryableWaitingDuration
+        )}`}
         endItem={
           !isFirstRetryableLegResolved && (
-            <div>
-              <DepositCountdown tx={tx} firstTxOnly={true} />
-              <span> remaining</span>
-            </div>
+            <TransferCountdown
+              tx={tx}
+              firstLegOnly={true}
+              textAfterTime="remaining"
+            />
           )
         }
       />
@@ -160,7 +165,9 @@ export const TransactionsTableDetailsTeleporterSteps = ({
       <Step
         pending={isFirstRetryableLegSucceeded && !isSecondRetryableLegResolved}
         done={isSecondRetryableLegResolved}
-        text={`Wait ~${secondRetryableWaitingDuration}`}
+        text={`Wait ~${minutesToHumanReadableTime(
+          secondRetryableWaitingDuration
+        )}`}
       />
     </>
   )

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

@@ -1,12 +1,12 @@
 import { useCallback } from 'react'
 import { GET_HELP_LINK } from '../../constants'
 import { useClaimWithdrawal } from '../../hooks/useClaimWithdrawal'
+import { useClaimCctp } from '../../state/cctpState'
 import {
   DepositStatus,
   MergedTransaction,
   TeleporterMergedTransaction
 } from '../../state/app/state'
-import { useClaimCctp, useRemainingTime } from '../../state/cctpState'
 import { trackEvent } from '../../util/AnalyticsUtils'
 import { isUserRejectedError } from '../../util/isUserRejectedError'
 import { getNetworkName } from '../../util/networks'
@@ -16,8 +16,7 @@ import { useSwitchNetworkWithConfig } from '../../hooks/useSwitchNetworkWithConf
 import { useNetwork } from 'wagmi'
 import { isDepositReadyToRedeem } from '../../state/app/utils'
 import { useRedeemRetryable } from '../../hooks/useRedeemRetryable'
-import { WithdrawalCountdown } from '../common/WithdrawalCountdown'
-import { DepositCountdown } from '../common/DepositCountdown'
+import { TransferCountdown } from '../common/TransferCountdown'
 import { Address } from '../../util/AddressUtils'
 import { getChainIdForRedeemingRetryable } from '../../util/RetryableUtils'
 import { isTeleport } from '@/token-bridge-sdk/teleport'
@@ -54,8 +53,6 @@ export function TransactionsTableRowAction({
   const { redeem: teleporterRedeem, isRedeeming: isTeleporterRedeeming } =
     useRedeemTeleporter(tx, address)
 
-  const { remainingTime: cctpRemainingTime } = useRemainingTime(tx)
-
   const isRedeeming = isRetryableRedeeming || isTeleporterRedeeming
 
   const chainIdForRedeemingRetryable = getChainIdForRedeemingRetryable(tx)
@@ -153,13 +150,7 @@ export function TransactionsTableRowAction({
     return (
       <div className="flex flex-col text-center text-xs">
         <span>Time left:</span>
-        {tx.isCctp && <>{cctpRemainingTime}</>}
-        {!tx.isCctp &&
-          (tx.isWithdrawal ? (
-            <WithdrawalCountdown tx={tx} />
-          ) : (
-            <DepositCountdown tx={tx} />
-          ))}
+        <TransferCountdown tx={tx} />
       </div>
     )
   }