refactor: make getFastBridges reusable across components

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

@@ -50,11 +50,13 @@ export function DepositConfirmationDialog(
     tokenAddress && bridgeInfo && bridgeInfo.tokenSymbolOnArbitrum
 
   const fastBridges = [
-    ...getFastBridges({
-      from: from.id,
-      to: to.id,
-      tokenSymbol,
-      amount: props.amount
+    ...getFastBridges<'bridge'>({
+      deepLinkInfo: {
+        from: from.id,
+        to: to.id,
+        tokenSymbol,
+        amount: props.amount
+      }
     })
   ].filter(bridge => {
     return (

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

@@ -1,15 +1,13 @@
 import { Dialog as HeadlessUIDialog, Tab } from '@headlessui/react'
 import { XMarkIcon } from '@heroicons/react/24/outline'
-import Hop from '@/images/bridge/hop.png'
 
 import { useAppState } from '../../state'
 import { Button } from '../common/Button'
 import { TabButton } from '../common/Tab'
 import { BridgesTable } from '../common/BridgesTable'
 import { Dialog, UseDialogProps } from '../common/Dialog'
-import { FastBridgeInfo, FastBridgeNames } from '../../util/fastBridges'
+import { FastBridgeNames, getFastBridges } from '../../util/fastBridges'
 import { ChainId, getNetworkName } from '../../util/networks'
-import { ether } from '../../constants'
 
 export function OneNovaTransferDialog(
   props: UseDialogProps & {
@@ -32,19 +30,15 @@ export function OneNovaTransferDialog(
       ? ChainId.ArbitrumOne
       : ChainId.ArbitrumNova
 
-  const sourceNetworkSlug =
-    sourceChainId === ChainId.ArbitrumOne ? 'arbitrum' : 'nova'
-  const destinationNetworkSlug =
-    destinationChainId === ChainId.ArbitrumOne ? 'arbitrum' : 'nova'
-
-  const bridgeDeepLink = `https://app.hop.exchange/#/send?sourceNetwork=${sourceNetworkSlug}&destNetwork=${destinationNetworkSlug}&token=${
-    selectedToken?.symbol || ether.symbol
-  }&amount=${props.amount}`
-
-  // only enable Hop for now
-  const fastBridgeList: FastBridgeInfo[] = [
-    { name: FastBridgeNames.Hop, imageSrc: Hop, href: bridgeDeepLink }
-  ]
+  const fastBridges = getFastBridges<'bridge'>({
+    deepLinkInfo: {
+      from: sourceChainId,
+      to: destinationChainId,
+      tokenSymbol: selectedToken?.symbol ?? 'ETH',
+      amount: props.amount
+    },
+    supportedFastBridgeNames: [FastBridgeNames.Hop]
+  })
 
   return (
     <Dialog {...props} isCustom>
@@ -77,7 +71,7 @@ export function OneNovaTransferDialog(
               </p>
             </div>
 
-            <BridgesTable bridgeList={fastBridgeList} />
+            <BridgesTable bridgeList={fastBridges} />
             <div className="mt-2 flex flex-row justify-end space-x-2">
               <Button variant="secondary" onClick={() => props.onClose(false)}>
                 Cancel

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

@@ -7,8 +7,8 @@ import { Button } from '../../common/Button'
 import { ExternalLink } from '../../common/ExternalLink'
 import {
   SpecialTokenSymbol,
-  USDCFastBridges,
-  FastBridgeInfo
+  getFastBridges,
+  FastBridgeNames
 } from '../../../util/fastBridges'
 import { TabButton } from '../../common/Tab'
 import { BridgesTable } from '../../common/BridgesTable'
@@ -55,22 +55,34 @@ export function USDCDepositConfirmationDialog(props: Props) {
 
   const tokenSymbol = SpecialTokenSymbol.USDC
 
-  const fastBridges: FastBridgeInfo[] = USDCFastBridges.map(USDCFastBridge => ({
-    name: USDCFastBridge.name,
-    imageSrc: USDCFastBridge.imageSrc,
-    href: USDCFastBridge.getHref({
-      from: from.id,
-      to: to.id,
-      fromTokenAddress: isArbitrumGoerli
-        ? CommonAddress.Goerli.USDC
-        : CommonAddress.Mainnet.USDC,
-      toTokenAddress: isArbitrumGoerli
-        ? CommonAddress.ArbitrumGoerli.USDC
-        : CommonAddress.ArbitrumOne.USDC,
-      amount: props.amount,
-      transferMode: 'deposit'
+  const fastBridges = [
+    ...getFastBridges<'bridge'>({
+      deepLinkInfo: {
+        from: from.id,
+        to: to.id,
+        tokenSymbol: 'USDC',
+        amount: props.amount
+      },
+      supportedFastBridgeNames: [
+        FastBridgeNames.Celer,
+        FastBridgeNames.Wormhole
+      ]
+    }),
+    ...getFastBridges<'swap'>({
+      deepLinkInfo: {
+        from: from.id,
+        to: to.id,
+        fromTokenAddress: isArbitrumGoerli
+          ? CommonAddress.Goerli.USDC
+          : CommonAddress.Mainnet.USDC,
+        toTokenAddress: isArbitrumGoerli
+          ? CommonAddress.ArbitrumGoerli.USDC
+          : CommonAddress.ArbitrumOne.USDC,
+        amount: props.amount
+      },
+      supportedFastBridgeNames: [FastBridgeNames.LIFI, FastBridgeNames.Router]
     })
-  }))
+  ]
 
   return (
     <Dialog {...props} isCustom>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { Tab, Dialog as HeadlessUIDialog } from '@headlessui/react'
 import { XMarkIcon } from '@heroicons/react/24/outline'
@@ -7,9 +7,9 @@ import { Dialog, UseDialogProps } from '../../common/Dialog'
 import { Button } from '../../common/Button'
 import { ExternalLink } from '../../common/ExternalLink'
 import {
-  SpecialTokenSymbol,
-  USDCFastBridges,
-  FastBridgeInfo
+  getFastBridges,
+  FastBridgeNames,
+  SpecialTokenSymbol
 } from '../../../util/fastBridges'
 import { TabButton } from '../../common/Tab'
 import { BridgesTable } from '../../common/BridgesTable'
@@ -32,26 +32,34 @@ export function USDCWithdrawalConfirmationDialog(
   const toNetworkName = getNetworkName(to.id)
   const tokenSymbol = SpecialTokenSymbol.USDC
 
-  useEffect(() => {
-    setAllCheckboxesChecked(false)
-  }, [props.isOpen])
-
-  const fastBridges: FastBridgeInfo[] = USDCFastBridges.map(USDCFastBridge => ({
-    name: USDCFastBridge.name,
-    imageSrc: USDCFastBridge.imageSrc,
-    href: USDCFastBridge.getHref({
-      from: from.id,
-      to: to.id,
-      fromTokenAddress: isArbitrumGoerli
-        ? CommonAddress.ArbitrumGoerli.USDC
-        : CommonAddress.ArbitrumOne.USDC,
-      toTokenAddress: isArbitrumGoerli
-        ? CommonAddress.Goerli.USDC
-        : CommonAddress.Mainnet.USDC,
-      amount: props.amount,
-      transferMode: 'withdraw'
+  const fastBridges = [
+    ...getFastBridges<'bridge'>({
+      deepLinkInfo: {
+        from: from.id,
+        to: to.id,
+        tokenSymbol: 'USDC',
+        amount: props.amount
+      },
+      supportedFastBridgeNames: [
+        FastBridgeNames.Celer,
+        FastBridgeNames.Wormhole
+      ]
+    }),
+    ...getFastBridges<'swap'>({
+      deepLinkInfo: {
+        from: from.id,
+        to: to.id,
+        fromTokenAddress: isArbitrumGoerli
+          ? CommonAddress.ArbitrumGoerli.USDC
+          : CommonAddress.ArbitrumOne.USDC,
+        toTokenAddress: isArbitrumGoerli
+          ? CommonAddress.Goerli.USDC
+          : CommonAddress.Mainnet.USDC,
+        amount: props.amount
+      },
+      supportedFastBridgeNames: [FastBridgeNames.LIFI, FastBridgeNames.Router]
     })
-  }))
+  ]
 
   return (
     <Dialog {...props} isCustom>

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

@@ -28,6 +28,7 @@ import { useIsConnectedToArbitrum } from '../../hooks/useIsConnectedToArbitrum'
 import { CONFIRMATION_PERIOD_ARTICLE_LINK } from '../../constants'
 import { useChainLayers } from '../../hooks/useChainLayers'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { FastBridgeNames } from '../../util/fastBridges'
 
 const SECONDS_IN_DAY = 86400
 const SECONDS_IN_HOUR = 3600
@@ -66,11 +67,18 @@ export function WithdrawalConfirmationDialog(
   const from = isConnectedToArbitrum ? l2.network : l1.network
   const to = isConnectedToArbitrum ? l1.network : l2.network
 
-  const fastBridges = getFastBridges({
-    from: from.id,
-    to: to.id,
-    tokenSymbol: selectedToken?.symbol ?? nativeCurrency.symbol,
-    amount: props.amount
+  const fastBridges = getFastBridges<'bridge'>({
+    deepLinkInfo: {
+      from: from.id,
+      to: to.id,
+      tokenSymbol: selectedToken?.symbol ?? 'ETH',
+      amount: props.amount
+    },
+    disabledFastBridgeNames: [
+      FastBridgeNames.LIFI,
+      FastBridgeNames.Router,
+      FastBridgeNames.Wormhole
+    ]
   })
 
   const [checkbox1Checked, setCheckbox1Checked] = useState(false)
@@ -93,7 +101,7 @@ export function WithdrawalConfirmationDialog(
     }`
   }
 
-  const { isArbitrumOne, isOrbitChain } = isNetwork(l2.network.id)
+  const { isArbitrumOne } = isNetwork(l2.network.id)
 
   function closeWithReset(confirmed: boolean) {
     props.onClose(confirmed)