feat: Add new routes components #2279

chrstph-dvx · 2025-02-24T16:12:57Z

BREAKING CHANGES: Removed TransferPanelSummary

Summary

Steps to test

vercel · 2025-02-24T16:13:05Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
arbitrum-token-bridge	✅ Ready (Inspect)	Visit Preview	Mar 11, 2025 4:09pm

dewanshparashar · 2025-02-25T12:42:19Z

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

+
+/**
+ * Display CCTP routes:
+ *  - Mainnet/Arb1, Sepolia/ArbSepolia


For USDC transfers, I don't think now we need the dialog for selection of Canonical vs CCTP bridge after choosing the route in summary panel.

Also should we have a permanent route option for opening 3rd party bridge's dialog?

dewanshparashar · 2025-02-25T12:46:45Z

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

+ *  - Mainnet/Arb1, Sepolia/ArbSepolia
+ *  - Native USDC on Arbitrum, USDC on L1
+ * Display layerzero:
+ *  - Mainnet/Arb1, Sepolia/ArbSepolia


LayerZero OFT v2 is only available for mainnets at the moment, not Sepolia/ArbSepolia.

dewanshparashar · 2025-02-25T12:50:08Z

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

+  if (isOftV2Transfer) {
+    return (
+      <Wrapper>
+        <LayerZeroRoute onRouteSelected={onRouteSelected} />


I'd recommend this be named as OftV2Route and not layerzero since OFT v1 is quite different from this, and it will be confusing if we even plan on integrating it.

dewanshparashar · 2025-02-25T12:53:24Z

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

+    <div
+      className={twMerge(
+        'group cursor-pointer rounded border border-[#ffffff33] text-white transition-colors',
+        selected && 'border-white'


Design nit: I think the selected route option should stand out a bit more because we want user to select the absolute correct route before transferring. It should maybe have a selected/checked badge and a slightly different color and a thicker border.

dewanshparashar · 2025-02-25T12:57:11Z

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

@@ -1188,11 +1197,9 @@ export function TransferPanel() {
        )}
      >
        <TransferPanelMain />
+        <Routes onRouteSelected={setSelectedRoute} />


I think when there is only 1 route option, it should show selected by default (currently it isn't showing which route is selected on load), and if we're not selecting any route by default then the move funds button should be disabled.

Also, if multiple routes are an option then are we selecting the first route by default?

By default no route are selected

That was my thought as well, seems like an UX issue. No routes are selected by default, but the transfer button is enabled so there is a default route. IMHO a route should be always selected in that case, or the transfer button should be disabled.

Yep, some logic was missing, it's fixed now. Button is disabled until we select a route. But it make sense to auto select a route if we have only one, good point

dewanshparashar · 2025-02-25T13:01:14Z

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

@@ -0,0 +1,22 @@
+import { create } from 'zustand'
+
+export type RouteType = 'arbitrum' | 'layerzero' | 'cctp'


I think this should be an enum, and this should come from bridge-sdk and should be linked with transfer-type otherwise we're creating a lot of disjointed types trying to express the same information?

Eg. in bridge-sdk, we have TransferType = ${Asset}_${TxType} | 'cctp' | 'oftV2'.
At the very least the Route names and Transfer type names should be consistent.

TransferType carries a lot of information that we don't need, we have only 3 types here. And TransferType has 8. Also in ArbitrumRoute for example we would have a transferType that might be different than the actual transfer

dewanshparashar · 2025-02-25T13:03:10Z

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

+              {isLoadingGasEstimate ? (
+                <Loader size="small" color="white" />
+              ) : gasCost ? (
+                formatAmount(BigNumber.from(gasCost), {


Are we okay with removing the feature of showing the fiat/dollar value of the gas fee? IMHO it's a pretty useful feature.

dewanshparashar · 2025-02-25T13:07:14Z

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

+   * If source and destination chains are using the same currency, we display combined cost for both child and parent chain.
+   * If they use a different currency, we display cost for child chain only
+   */
+  const gasCost =


Might need to revisit the gas logic here because I get N/A being displayed intermittently.
(This was while transferring 0.00001 XAI from ArbOne to XAI chain, but I saw this issue in other cases as well)

Original

As discussed offline, we should also cover existing cases where ETH + native gas token gas is shown together

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

brtkx · 2025-02-25T15:18:03Z

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

+              height={15}
+              alt="duration"
+            />
+            <span className="ml-1">


Could we also add the old tooltip and the bolt icon for fast withdrawals?

Old source:

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

Lines 337 to 351 in 9ab3102

{fastWithdrawalActive && (

<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>

)}

Ref image:

brtkx · 2025-02-25T15:20:36Z

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

+   * If source and destination chains are using the same currency, we display combined cost for both child and parent chain.
+   * If they use a different currency, we display cost for child chain only
+   */
+  const gasCost =


As discussed offline, we should also cover existing cases where ETH + native gas token gas is shown together

brtkx · 2025-02-25T15:23:12Z

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

+   */
+  const isUsdcTransfer = isTokenNativeUSDC(token?.address)
+  const overrideToken = isDepositMode ? bridgedUsdcToken : nativeUsdcToken
+  const duration =


nit: could we rename duration to durationMs so it's easier to understand right away

brtkx · 2025-02-25T15:26:02Z

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

+            <span className="ml-1">{bridge}</span>
+          </div>
+        </div>
+        {tag && (


I think we could reuse these?
https://github.com/OffchainLabs/arbitrum-token-bridge/blob/9ab310208b722331fc81756d6bfb0ed767538c13/packages/arb-token-bridge-ui/src/components/TransferPanel/SecurityLabels.tsx

brtkx · 2025-02-25T15:31:14Z

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

+        <div className="flex flex-col">
+          <span>You will receive:</span>
+          <div className="flex items-center text-lg">
+            {'logoURI' in token ? (


Can we use this instead? It also handles native token logos. You don't have to specify logoURI with this one, by default it will use the selected token logo.

https://github.com/OffchainLabs/arbitrum-token-bridge/blob/9ab310208b722331fc81756d6bfb0ed767538c13/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenLogo.tsx

brtkx · 2025-02-25T15:40:50Z

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

@@ -135,7 +135,9 @@ export function getWithdrawalConfirmationDate({
  return dayjs(createdAt).add(confirmationTimeInSeconds, 'second')
 }

-function getWithdrawalDuration(tx: MergedTransaction) {
+export function getWithdrawalDuration(
+  tx: Pick<MergedTransaction, 'createdAt' | 'sourceChainId'>


We could also change tx to { createdAt, sourceChainId }

brtkx · 2025-02-26T15:52:06Z

Showing routes has a delay after typing amount. Maybe we could have some loading state?

Screen.Recording.2025-02-26.at.16.50.12.mov

fionnachan · 2025-02-27T03:35:47Z

did we intentionally take out the ability to search a token by its child chain address on the token search panel on this PR?
if a user types a figure to the amount input when it's not USDC or ETH, the app crashes

chrstph-dvx · 2025-03-03T11:19:06Z

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

+function getGasCostAndToken({
+  childChainNativeCurrency,
+  parentChainNativeCurrency,
+  gasSummaryStatus,
+  estimatedChildChainGasFees,
+  estimatedParentChainGasFees,
+  isDepositMode,
+  selectedToken
+}: {
+  childChainNativeCurrency: NativeCurrency
+  parentChainNativeCurrency: NativeCurrency
+  gasSummaryStatus: UseGasSummaryResult['status']
+  estimatedChildChainGasFees: UseGasSummaryResult['estimatedChildChainGasFees']
+  estimatedParentChainGasFees: UseGasSummaryResult['estimatedParentChainGasFees']
+  isDepositMode: boolean
+  selectedToken: ERC20BridgeToken | null
+}): {


This function is accepting lots of parameters rather than being a hook with lots of internal calls to hook to make it easier to test

BREAKING CHANGES: Removed TransferPanelSummary

chrstph-dvx requested review from dewanshparashar and brtkx and removed request for dewanshparashar February 24, 2025 16:13

cla-bot bot added the cla-signed label Feb 24, 2025

chrstph-dvx requested a review from dewanshparashar February 24, 2025 16:13

vercel bot deployed to Preview February 24, 2025 16:17 View deployment

dewanshparashar reviewed Feb 25, 2025

View reviewed changes

chrstph-dvx marked this pull request as draft February 25, 2025 13:40

vercel bot had a problem deploying to Preview February 25, 2025 14:56 Failure

vercel bot had a problem deploying to Preview February 25, 2025 15:17 Failure

brtkx reviewed Feb 25, 2025

View reviewed changes

vercel bot deployed to Preview February 25, 2025 16:07 View deployment

vercel bot deployed to Preview February 25, 2025 22:56 View deployment

vercel bot deployed to Preview February 26, 2025 23:28 View deployment

vercel bot deployed to Preview February 26, 2025 23:58 View deployment

vercel bot deployed to Preview February 27, 2025 20:17 View deployment

chrstph-dvx commented Mar 3, 2025

View reviewed changes

vercel bot deployed to Preview March 3, 2025 11:21 View deployment

vercel bot deployed to Preview March 4, 2025 21:17 View deployment

chrstph-dvx marked this pull request as ready for review March 10, 2025 13:54

chrstph-dvx force-pushed the add-new-routes-flow branch from 561c903 to e7ad9ce Compare March 10, 2025 14:54

vercel bot deployed to Preview March 10, 2025 14:58 View deployment

vercel bot deployed to Preview March 10, 2025 15:24 View deployment

chrstph-dvx added 4 commits March 11, 2025 16:05

feat: Add new routes components

1844746

BREAKING CHANGES: Removed TransferPanelSummary

Fix modals and MoveFundsButton logic

b95b371

Clear route when changing networks

988c5eb

Fix MoveFundsButton disabled state

8181ce1

chrstph-dvx added 11 commits March 11, 2025 16:05

Fix onClose in USDC modals

e0b1ad2

Review comments

b18e265

Address comments

8156b48

Fix selected route logic

4e11398

Add batch transfer, remove fast withdrawal

ba1b11a

Fix selected state

9438585

Fix check for amount2

c493cbe

Fix border for selected state

2915077

Update design

bd51add

Fix transfer for oft

ba27b26

Remove shadow on check svg

b96cedb

chrstph-dvx force-pushed the add-new-routes-flow branch from 9b22d5a to b96cedb Compare March 11, 2025 16:05

vercel bot deployed to Preview March 11, 2025 16:09 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add new routes components #2279

feat: Add new routes components #2279

chrstph-dvx commented Feb 24, 2025 •

edited

Loading

vercel bot commented Feb 24, 2025 •

edited

Loading

dewanshparashar Feb 25, 2025

dewanshparashar Feb 25, 2025

dewanshparashar Feb 25, 2025

dewanshparashar Feb 25, 2025

dewanshparashar Feb 25, 2025

dewanshparashar Feb 25, 2025

chrstph-dvx Feb 25, 2025

brtkx Feb 25, 2025 •

edited

Loading

chrstph-dvx Feb 25, 2025

dewanshparashar Feb 25, 2025

chrstph-dvx Feb 25, 2025

dewanshparashar Feb 25, 2025

dewanshparashar Feb 25, 2025

brtkx Feb 25, 2025

brtkx Feb 25, 2025

brtkx Feb 25, 2025

brtkx Feb 25, 2025

brtkx Feb 25, 2025

brtkx Feb 25, 2025

brtkx Feb 25, 2025

brtkx commented Feb 26, 2025

fionnachan commented Feb 27, 2025

chrstph-dvx Mar 3, 2025

		@@ -0,0 +1,22 @@
		import { create } from 'zustand'

		export type RouteType = 'arbitrum' \| 'layerzero' \| 'cctp'

	{fastWithdrawalActive && (
	<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>
	)}

feat: Add new routes components #2279

Are you sure you want to change the base?

feat: Add new routes components #2279

Conversation

chrstph-dvx commented Feb 24, 2025 • edited Loading

Summary

Steps to test

vercel bot commented Feb 24, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brtkx Feb 25, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brtkx commented Feb 26, 2025

fionnachan commented Feb 27, 2025

Choose a reason for hiding this comment

chrstph-dvx commented Feb 24, 2025 •

edited

Loading

vercel bot commented Feb 24, 2025 •

edited

Loading

brtkx Feb 25, 2025 •

edited

Loading