feat: adds support for fast confirmation times

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

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react'
+import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 
 import { formatAmount } from '../../util/NumberUtils'
@@ -13,10 +14,12 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { NativeCurrencyPrice, useIsBridgingEth } from './NativeCurrencyPrice'
 import { useAppState } from '../../state'
 import { Loader } from '../common/atoms/Loader'
+import { Tooltip } from '../common/Tooltip'
 import { isTokenNativeUSDC } from '../../util/TokenUtils'
 import { NoteBox } from '../common/NoteBox'
 import { DISABLED_CHAIN_IDS } from './useTransferReadiness'
 import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported'
+import { getConfirmationTime } from '../../util/WithdrawalUtils'
 
 export type TransferPanelSummaryToken = {
   symbol: string
@@ -259,6 +262,37 @@ export function TransferPanelSummary({ token }: TransferPanelSummaryProps) {
           )}
         </span>
       </div>
+      {(isDestinationChainArbitrumOne || isDestinationChainArbitrumSepolia) && (
+        <div
+          className={twMerge(
+            'grid grid-cols-[260px_auto] items-center text-sm font-light'
+          )}
+        >
+          <ConfirmationTimeInfo chainId={networks.sourceChain.id} />
+        </div>
+      )}
     </TransferPanelSummaryContainer>
   )
 }
+
+function ConfirmationTimeInfo({ chainId }: { chainId: number }) {
+  const { confirmationTimeInReadableFormat, isDefaultConfirmationTime } =
+    getConfirmationTime(chainId)
+  return (
+    <>
+      <span>Confirmation time:</span>
+      <span className="flex items-center font-medium">
+        {confirmationTimeInReadableFormat}
+        {!isDefaultConfirmationTime && (
+          <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>
+        )}
+      </span>
+    </>
+  )
+}

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

@@ -12,12 +12,16 @@ import { useAppState } from '../../state'
 import { trackEvent } from '../../util/AnalyticsUtils'
 import { getNetworkName, isNetwork } from '../../util/networks'
 import { getFastBridges } from '../../util/fastBridges'
-import { CONFIRMATION_PERIOD_ARTICLE_LINK } from '../../constants'
+import {
+  CONFIRMATION_PERIOD_ARTICLE_LINK,
+  FAST_WITHDRAWAL_DOCS_ARTICLE_LINK
+} from '../../constants'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { SecurityGuaranteed, SecurityNotGuaranteed } from './SecurityLabels'
 import { getWithdrawalConfirmationDate } from '../../hooks/useTransferDuration'
+import { getConfirmationTime } from '../../util/WithdrawalUtils'
 
 function getCalendarUrl(
   withdrawalDate: dayjs.Dayjs,
@@ -42,6 +46,8 @@ export function WithdrawalConfirmationDialog(
   const { childChain, childChainProvider, parentChain } =
     useNetworksRelationship(networks)
 
+  const { fastWithdrawalActive } = getConfirmationTime(childChain.id)
+
   const [selectedIndex, setSelectedIndex] = useState(0)
 
   const destinationNetworkName = getNetworkName(parentChain.id)
@@ -63,9 +69,14 @@ export function WithdrawalConfirmationDialog(
 
   const [checkbox1Checked, setCheckbox1Checked] = useState(false)
   const [checkbox2Checked, setCheckbox2Checked] = useState(false)
+  const [checkbox3Checked, setCheckbox3Checked] = useState(false)
 
   const { isArbitrumOne } = isNetwork(childChain.id)
-  const bothCheckboxesChecked = checkbox1Checked && checkbox2Checked
+
+  const allCheckboxesChecked =
+    checkbox1Checked &&
+    checkbox2Checked &&
+    (fastWithdrawalActive ? checkbox3Checked : true)
 
   const estimatedConfirmationDate = getWithdrawalConfirmationDate({
     createdAt: null,
@@ -81,6 +92,7 @@ export function WithdrawalConfirmationDialog(
 
     setCheckbox1Checked(false)
     setCheckbox2Checked(false)
+    setCheckbox3Checked(false)
     setSelectedIndex(0)
   }
 
@@ -91,7 +103,7 @@ export function WithdrawalConfirmationDialog(
       className="max-w-[700px]"
       title={`Move funds to ${destinationNetworkName}`}
       actionButtonProps={{
-        disabled: !bothCheckboxesChecked,
+        disabled: !allCheckboxesChecked,
         hidden: isFastBridgesTab
       }}
     >
@@ -157,6 +169,26 @@ export function WithdrawalConfirmationDialog(
                   onChange={setCheckbox2Checked}
                 />
 
+                {fastWithdrawalActive && (
+                  <Checkbox
+                    label={
+                      <span className="font-light">
+                        I understand that ~{confirmationPeriod} is an estimate,
+                        and it&apos;s possible the committee fails and it will
+                        default back to the 8 days.{' '}
+                        <ExternalLink
+                          href={FAST_WITHDRAWAL_DOCS_ARTICLE_LINK}
+                          className="underline"
+                        >
+                          Learn more.
+                        </ExternalLink>
+                      </span>
+                    }
+                    checked={checkbox3Checked}
+                    onChange={setCheckbox3Checked}
+                  />
+                )}
+
                 <div className="flex">
                   <SecurityGuaranteed />
                 </div>

packages/arb-token-bridge-ui/src/constants.ts

@@ -20,6 +20,8 @@ export const ETH_BALANCE_ARTICLE_LINK = `${SUPPORT_LINK_BASE}/hc/en-us/articles/
 
 export const CONFIRMATION_PERIOD_ARTICLE_LINK = `${SUPPORT_LINK_BASE}/hc/en-us/articles/18213843096091`
 
+export const FAST_WITHDRAWAL_DOCS_ARTICLE_LINK = `${DOCS_DOMAIN}/run-arbitrum-node/arbos-releases/arbos31#additional-requirement-for-arbitrum-orbit-chains-who-wish-to-enable-fast-withdrawals`
+
 export const ORBIT_QUICKSTART_LINK =
   'https://docs.arbitrum.io/launch-orbit-chain/orbit-quickstart'
 

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

@@ -9,6 +9,7 @@ import {
   getL1BlockTime,
   isNetwork
 } from '../util/networks'
+import { getConfirmationTime } from '../util/WithdrawalUtils'
 
 const DEPOSIT_TIME_MINUTES = {
   mainnet: 15,

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

@@ -9,6 +9,8 @@ import { BigNumber } from 'ethers'
 import { GasEstimates } from '../hooks/arbTokenBridge.types'
 import { Address } from './AddressUtils'
 import { captureSentryErrorWithExtraData } from './SentryUtils'
+import { getBridgeUiConfigForChain } from './bridgeUiConfig'
+import { isNetwork } from './networks'
 
 export async function withdrawInitTxEstimateGas({
   amount,
@@ -105,3 +107,58 @@ export async function withdrawInitTxEstimateGas({
     }
   }
 }
+
+const SECONDS_IN_MINUTE = 60
+const SECONDS_IN_HOUR = 3600
+const SECONDS_IN_DAY = 86400
+const DEFAULT_CONFIRMATION_TIME = 7 * SECONDS_IN_DAY
+const DEFAULT_FAST_WITHDRAWAL_TIME = SECONDS_IN_DAY
+const DEFAULT_TESTNET_CONFIRMATION_TIME = SECONDS_IN_HOUR
+
+function formatDuration(seconds: number): string {
+  if (seconds < SECONDS_IN_MINUTE) return `${seconds} seconds`
+  if (seconds < SECONDS_IN_HOUR)
+    return `${Math.round(seconds / SECONDS_IN_MINUTE)} minutes`
+  if (seconds < SECONDS_IN_DAY)
+    return `${Math.round(seconds / SECONDS_IN_HOUR)} hours`
+  return `${Math.round(seconds / SECONDS_IN_DAY)} days`
+}
+
+/**
+ * Calculate confirmation time for bridge transactions.
+ * @param {number} chainId - The ID of the parent chain.
+ */
+export function getConfirmationTime(chainId: number) {
+  const { fastWithdrawalTime, fastWithdrawalActive } =
+    getBridgeUiConfigForChain(chainId)
+  const isTestnet = isNetwork(chainId).isTestnet
+
+  const isDefaultConfirmationTime = !fastWithdrawalActive
+  const isDefaultFastWithdrawal = fastWithdrawalActive && !fastWithdrawalTime
+  const isCustomFastWithdrawal = fastWithdrawalActive && !!fastWithdrawalTime
+
+  let confirmationTimeInSeconds: number
+
+  if (isDefaultFastWithdrawal) {
+    confirmationTimeInSeconds = DEFAULT_FAST_WITHDRAWAL_TIME
+  } else if (isCustomFastWithdrawal) {
+    confirmationTimeInSeconds = fastWithdrawalTime / 1000
+  } else {
+    confirmationTimeInSeconds = isTestnet
+      ? DEFAULT_TESTNET_CONFIRMATION_TIME
+      : DEFAULT_CONFIRMATION_TIME
+  }
+
+  const confirmationTimeInReadableFormat = formatDuration(
+    confirmationTimeInSeconds
+  )
+
+  return {
+    fastWithdrawalActive,
+    isDefaultConfirmationTime,
+    isDefaultFastWithdrawal,
+    isCustomFastWithdrawal,
+    confirmationTimeInSeconds,
+    confirmationTimeInReadableFormat
+  }
+}

packages/arb-token-bridge-ui/src/util/orbitChainsData.json

@@ -856,7 +856,9 @@
           "name": "RARI Testnet",
           "description": "A testnet chain designed specifically for NFT royalties and creator empowerment.",
           "logo": "/images/RARIMainnetLogo.svg"
-        }
+        },
+        "fastWithdrawalTime": 1800000,
+        "fastWithdrawalActive": true
       }
     },
     {

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

@@ -17,6 +17,8 @@ export type BridgeUiConfig = {
     description?: string
   }
   nativeTokenData?: NativeCurrencyBase
+  fastWithdrawalTime?: number
+  fastWithdrawalActive?: boolean
 }
 
 export type OrbitChainConfig = ChainWithRpcUrl & {