Add bridge form #724

vyorkin · 2025-03-09T13:53:04Z

paymaster transactions
Gasback

github-actions · 2025-03-19T19:52:26Z

📦 build.zip [updated at Apr 10, 3:54:04 PM UTC]

zerts · 2025-03-20T11:40:39Z

src/ui/components/SlidingRectangle/index.ts

removed ✅

zerts · 2025-03-20T11:42:14Z

src/ui/components/SlidingRectangle/SlidingRectangle.tsx

+import React from 'react';
+import { animated, useTransition } from '@react-spring/web';
+
+export function SlidingRectangle({


It looks like this component doesn't work :(

Probably because the animation works before image is loaded and shown

Ok, this didn't work before, so you don't need to fix it

Added to the "tech debt" list, lets fix this in a separate PR

Uhm, what exactly isn't working? It seems to work for me in both Swap and Bridge forms

zerts · 2025-03-20T11:44:07Z

src/ui/pages/BridgeForm/useBridgeTokens.ts

+    direction,
+  });
+
+  invariant(


This check has been already made in config.ts file

thanks! updated ✅

zerts · 2025-03-20T11:53:23Z

src/ui/components/FiatInputValue/FiatInputValue.tsx

+}) {
+  const { currency } = useCurrency();
+
+  const asset = name === 'receiveInput' ? receiveAsset : spendAsset;


May be it is the right time to deprecate receiveInput editing?
This feature is not well-supported and backend suggests not to use it if possible.

Wasn't aware that it isn't well-supported... It works perfectly in a swap form. Did you mean it isn't well supported only for bridge? Or in swap as well?

It is not well supported under the hood :(
For bridge it is not supported at all

Yes, I don't allow editing receiveInput in bridge, but regarding removing support for editing receiveInput in SwapForm... maybe lets discuss separately?

zerts · 2025-03-20T11:57:28Z

src/ui/shared/requests/useQuotes.ts

+      if (receiveChainInput) {
+        searchParams.append('output_chain', receiveChainInput);
+      }
+      if (slippage) {


Slippage has been already defined on line 123 + there should be if (slippage != null) to allow 0

oh, good catch, we always have slippagePercent (since we always have default slippage), so there is no need for this condition at all, updated ✅

zerts · 2025-03-20T12:02:35Z

src/ui/components/FiatInputValue/FiatInputValue.tsx

Is this just a copy of existing file with another props? Then we shouldn't forget to replace the previous on with this

updated ✅

zerts · 2025-03-20T12:13:56Z

src/ui/pages/BridgeForm/ReverseButton/styles.module.css

+  color: var(--neutral-500);
+}
+
+.reverseButton:focus .spinArrow {


This style triggers animation on focus, not on click. Which works with click but not with keyboard navigation

thanks, I copied this part from webapp as is :)
I just removed :focus for now

zerts · 2025-03-20T12:14:59Z

src/ui/pages/BridgeForm/SuccessState/SuccessState.tsx

@@ -0,0 +1,181 @@
+import React from 'react';


This state should be changed with the new pending animation. It was merged some time ago so may be is worth using here too

updated ✅

zerts · 2025-03-20T12:16:10Z

src/ui/pages/BridgeForm/LabeledNetworkSelect/LabeledNetworkSelect.tsx

+  title: string;
+  value: string;
+  networks: Networks | null;
+  openDialog: () => void;


onClick or onDialogOpen?

we have openDialog everywhere else (I mean in all variants of the DisclosureButton), so I decided to keep it as is

zerts · 2025-03-20T12:18:28Z

src/ui/pages/BridgeForm/getAvailablePositions.ts

+    map[position.asset.asset_code] = position;
+  }
+
+  return { sorted, map };


map: Object.fromEntries(sorted.map(position => ([position.asset.asset_code, position])));

However, not important :)

this code block used the for loop before I extracted the function, so I left this unchanged,
you think its worth changing to Object.fromEntries + .map? the loop should be more efficient afaik

zerts · 2025-03-20T12:23:56Z

src/ui/pages/BridgeForm/shared/types.ts

+  receiverAddressInput?: string | null;
+  showReceiverAddressInput?: boolean;
+
+  gas?: string;


Gas is not used

removed gas field for now ✅

zerts · 2025-03-20T12:29:50Z

src/ui/pages/BridgeForm/useBridgeTokens.ts

+    queryFn: () => getBridgeTokens({ inputChain, outputChain, direction }),
+    suspense: false,
+    retry: false,
+    enabled,


May be it is better to type here enabled: Boolean(enabled) && Boolean(inputChain) && Boolean(outputChain)?
P.S. it is probably good that you restricted enabled no be not-undefined

yes, good idea, updated ✅

zerts · 2025-03-20T12:32:07Z

src/ui/pages/BridgeForm/useBridgeTokens.ts

+export class TransactionsApiError extends HTTPError {
+  static interpretError(parsedError: ParsedHttpError) {
+    if (parsedError.detail && parsedError.detail.length > 0) {
+      const [{ msg }] = parsedError.detail;


Ok, I see that this was taken from web app. Then let's hope it works correctly :))

zerts · 2025-03-20T12:48:51Z

src/ui/pages/BridgeForm/BridgeLine/BridgeLine.tsx

+        Bridge
+      </UIText>
+      <span>
+        {isLoading && !quote ? (


It looks like we allow user to see and use quote when the loading is not done yet?
May be we need to add such check here and to the main form?

Isn't it the point to show the progression of quotes? But we don't allow submit during isLoading

zerts · 2025-03-20T13:38:25Z

src/ui/pages/BridgeForm/BridgeForm.tsx

+                transaction={currentTransaction}
+                from={address}
+                chain={spendChain}
+                paymasterEligible={false}


Let's add // TODO: here to enable this one in the next releases

zerts · 2025-03-20T14:22:08Z

src/ui/pages/BridgeForm/BridgeForm.tsx

+
+  const positions = positionsResponse?.data ?? null;
+
+  const defaultFormValues = getDefaultFormValues({ networks, positions });


let's wrap this with useMemo

updated ✅

zerts · 2025-03-20T14:27:31Z

src/ui/pages/BridgeForm/BridgeForm.tsx

+                network.id in positionDistribution
+              }
+              onChangeSourceChain={(value) =>
+                setUserFormState((state) => ({


Do I understand right that this can be replaced with handleChange?

yes, thanks! updated ✅

zerts · 2025-03-20T14:27:46Z

src/ui/pages/BridgeForm/BridgeForm.tsx

+                }))
+              }
+              onChangeDestinationChain={(value) =>
+                setUserFormState((state) => ({


#724 (comment)

zerts · 2025-03-27T13:35:37Z

src/ui/pages/SwapForm/fieldsets/SpendTokenField/SpendTokenField.tsx

+      'spendInput',
+      'chainInput',
+    ]);
+  const { receiveAsset, spendAsset } = swapView;


these 2 vars can be extracted on line:28 :)
Not critical though

updated ✅

src/ui/pages/BridgeForm/LabeledNetworkSelect/LabeledNetworkSelect.tsx

vyorkin · 2025-04-09T07:47:14Z

src/ui/pages/BridgeForm/ZerionFeeLine/ZerionFeeLine.tsx

          >
            <QuestionIcon
-              role="decoration"
+              role="presentation"


changed to presentation, idk what that "decoration" role means, it is "presentation" in other places

Awesome thanks

vyorkin · 2025-04-09T07:48:59Z

src/ui/pages/BridgeForm/SuccessState/SuccessState.tsx

-        explorerUrl={
-          hash ? networks.getExplorerTxUrlByName(spendChain, hash) : undefined
-        }
+        explorerUrl={explorerUrl ?? explorerFallbackUrl}


as we discussed It makes more sense to display links like this when briding (instead of explorer link to the "send" (first/source) tx of only), but in case there is no explorer link available we still might want to show that fallback link

vyorkin · 2025-04-09T07:49:49Z

src/ui/pages/BridgeForm/BridgeLine/BridgeLine.tsx

              <UIText color="var(--primary)" kind="small/accent">
-                {quote?.estimated_seconds
-                  ? `~${formatSeconds(Number(quote.estimated_seconds))}`
+                {quote?.seconds_estimation


estimated_seconds is deprecated, long live seconds_estimation

vyorkin · 2025-04-09T07:51:33Z

src/ui/pages/BridgeForm/BridgeForm.tsx

+  const bridgeTransaction = useMemo(
+    () => (selectedQuote ? getQuoteTx(selectedQuote) : null),
+    [selectedQuote]
+  );


I extracted this getQuoteTx fn, looks like it doesn't make much sense to prepare that transaction data structure inside the useQuotes hook, it is like a separate concern...

vyorkin · 2025-04-09T07:52:02Z

src/shared/types/Quote.ts

  enough_allowance?: boolean;
  enough_balance: boolean;
-  slippage_type?: 'normal' | 'zero-slippage';
-  estimated_seconds?: string | null;


vyorkin · 2025-04-09T07:53:05Z

src/shared/types/Quote.ts

+  output_amount_min: string;
+
  token_spender: string;
-  exchanges: ExchangeWithName[] | null;


I didn't find this field in the API docs and we don't use it

vyorkin · 2025-04-09T07:54:27Z

src/ui/shared/requests/useQuotes.ts

+    input_asset_id: params.inputAssetId,
+    output_asset_id: params.outputAssetId,


input_token and output_token parameters are deprecated and replaced with those having the _asset_id suffix

vyorkin · 2025-04-09T07:56:25Z

src/ui/shared/requests/useQuotes.ts

+        outputAssetId: receiveTokenInput,
+        inputPosition: spendPosition,
+        outputPosition: receivePosition,
+        sort: 'amount',


By default we sort by the amount to prioritize the best quote

vyorkin · 2025-04-09T08:03:36Z

src/ui/pages/SendTransaction/TransactionConfiguration/TransactionConfiguration.tsx

-            width: 16,
-            height: 16,
+            width: 20,
+            height: 20,


it is 20x20 in design

vyorkin · 2025-04-09T08:06:31Z

src/ui/pages/SwapForm/SwapForm.tsx

    address,
    userSlippage,
-    primaryInput,
+    primaryInput: primaryInput ?? 'spend',


There was an assumption for the primaryInput to be of type 'spend' anyway, let's make it explicit (less undefined types)

zerts · 2025-04-10T09:07:39Z

src/ui/pages/SwapForm/SwapForm.tsx

+  const { refetch: refetchQuotes } = quotesData;
+
+  const defaultQuote = quotesData.quotes?.[0] ?? null;
+  // TODO: add support for quote selection, useState


I will have a hard merge...

zerts · 2025-04-10T09:12:03Z

src/ui/pages/BridgeForm/BridgeLine/BridgeLine.tsx

+                  position: 'relative',
+                  width: 20,
+                  height: 20,
+                  // overflow: 'hidden',


deleted ✅ thanks

zerts · 2025-04-10T09:17:15Z

src/ui/pages/BridgeForm/BridgeForm.tsx

-    transaction: bridgeTransaction,
-    quote,
-    refetch: refetchQuotes,
-  } = quotesData;


tbh, I think, I'll move quote selection logic inside quotesData when it is done. Just to avoid doubling the logic in swap/bridge ¯\_(ツ)_/¯

everdimension · 2025-04-10T10:19:05Z

src/ui/shared/requests/useQuotes.ts

+  if (params.refetchHash) {
+    searchParams.append('refetchId', params.refetchHash.toString());
+  }


why is this needed?

removed ✅ I don't even remember where I get this lines from

everdimension · 2025-04-10T10:22:43Z

src/ui/shared/requests/useQuotes.ts

+  maxFee?: string;
+  sourceId?: string;
+  sort?: QuoteSortType;
+  refetchHash?: number;


everdimension · 2025-04-10T10:24:08Z

src/ui/shared/requests/useQuotes.ts

+      const { slippagePercent } = getSlippageOptions({
+        chain,
+        userSlippage,
+      });


can be oneline

vyorkin self-assigned this Mar 9, 2025

vyorkin force-pushed the feature/add-native-bridge-WLT-5555 branch 2 times, most recently from 2c88d2e to 2d7eb48 Compare March 17, 2025 16:25

vyorkin marked this pull request as ready for review March 19, 2025 18:40

vyorkin requested review from everdimension and zerts March 19, 2025 21:25

zerts reviewed Mar 20, 2025

View reviewed changes

vyorkin force-pushed the feature/add-native-bridge-WLT-5555 branch 2 times, most recently from 5aaac0e to 6667062 Compare March 27, 2025 00:19

zerts reviewed Mar 27, 2025

View reviewed changes

zerts approved these changes Mar 27, 2025

View reviewed changes

everdimension reviewed Apr 1, 2025

View reviewed changes

src/ui/pages/BridgeForm/LabeledNetworkSelect/LabeledNetworkSelect.tsx Outdated Show resolved Hide resolved

vyorkin commented Apr 9, 2025

View reviewed changes

vyorkin force-pushed the feature/add-native-bridge-WLT-5555 branch from 0b2610d to c21d6ae Compare April 9, 2025 07:58

vyorkin commented Apr 9, 2025

View reviewed changes

vyorkin force-pushed the feature/add-native-bridge-WLT-5555 branch from c21d6ae to e4b170e Compare April 9, 2025 08:04

vyorkin commented Apr 9, 2025

View reviewed changes

vyorkin force-pushed the feature/add-native-bridge-WLT-5555 branch from e4b170e to 5f89015 Compare April 9, 2025 08:11

Update useQuotes: use v2 endpoint, other fixes

4183422

vyorkin force-pushed the feature/add-native-bridge-WLT-5555 branch from b8f9340 to 4183422 Compare April 9, 2025 09:38

zerts reviewed Apr 10, 2025

View reviewed changes

everdimension reviewed Apr 10, 2025

View reviewed changes

Cleanup

ff5ab29

everdimension reviewed Apr 10, 2025

View reviewed changes

vyorkin added 2 commits April 10, 2025 13:24

Updates

27e24c9

Fix

354e5bd

zerts approved these changes Apr 10, 2025

View reviewed changes

vyorkin added 2 commits April 10, 2025 14:44

Fix

c96a9a4

Cleanup

3df3d58

everdimension approved these changes Apr 10, 2025

View reviewed changes

vyorkin merged commit 51aa48d into main Apr 10, 2025
3 checks passed

vyorkin deleted the feature/add-native-bridge-WLT-5555 branch April 10, 2025 16:27


		const positions = positionsResponse?.data ?? null;

		const defaultFormValues = getDefaultFormValues({ networks, positions });

		input_asset_id: params.inputAssetId,
		output_asset_id: params.outputAssetId,

Add bridge form #724

Add bridge form #724

Uh oh!

Conversation

vyorkin commented Mar 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vyorkin commented Mar 9, 2025 •

edited

Loading

github-actions bot commented Mar 19, 2025 •

edited

Loading

vyorkin Apr 9, 2025 •

edited

Loading