fix(bridge-ui-v2): processing fee and recipient not sticking (#15125)

Co-authored-by: Daniel Wang <[email protected]>

packages/bridge-ui-v2/README.md

@@ -48,7 +48,7 @@ These are the additional configuration files that have to be filled in:
 | **/config/configuredBridges.json**      | Defines the chains that are connected via taiko bridges and lists the contract addresses |
 | **/config/configuredChains.json**       | Defines some metadata for the chains, such as name, icons, explorer URL, etc.            |
 | **/config/configuredRelayer.json**      | If chains have a relayer, the URL and the chain IDs it covers are entered here           |
-| **/config/configuredCustomTokens.json** | Defines a list of tokens that should be available in the token dropdowns                  |
+| **/config/configuredCustomTokens.json** | Defines a list of tokens that should be available in the token dropdowns                 |
 
 ---
 

packages/bridge-ui-v2/src/components/Bridge/Amount.svelte

@@ -59,6 +59,7 @@
   }
 
   export async function validateAmount(token = $selectedToken, fee = $processingFee) {
+    if (!$network?.id) return;
     $validatingAmount = true; // During validation, we disable all the actions
     $insufficientBalance = false;
     $insufficientAllowance = false;

packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte

@@ -24,7 +24,13 @@
   import RecipientStep from './NFTBridgeSteps/RecipientStep.svelte';
   import ReviewStep from './NFTBridgeSteps/ReviewStep.svelte';
   import type { ProcessingFee } from './ProcessingFee';
-  import { activeBridge, destNetwork as destinationChain, selectedNFTs, selectedToken } from './state';
+  import {
+    activeBridge,
+    destNetwork as destinationChain,
+    recipientAddress,
+    selectedNFTs,
+    selectedToken,
+  } from './state';
   import { NFTSteps } from './types';
 
   let amountComponent: Amount;
@@ -35,6 +41,8 @@
   let contractAddress: Address | string = '';
   let bridgingStatus: 'pending' | 'done' = 'pending';
 
+  let hasEnoughEth: boolean = false;
+
   function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
     updateForm();
     activeStep = NFTSteps.CONFIRM;
@@ -89,12 +97,13 @@
     if (amountComponent) amountComponent.clearAmount();
     if (processingFeeComponent) processingFeeComponent.resetProcessingFee();
     if (addressInputComponent) addressInputComponent.clearAddress();
-    if (recipientStepComponent) recipientStepComponent.reset();
 
     // Update balance after bridging
     if (amountComponent) amountComponent.updateBalance();
     if (nftIdInputComponent) nftIdInputComponent.clearIds();
 
+    $recipientAddress = $account?.address || null;
+    // $processingFee = 0n;
     $selectedToken = ETHToken;
     importMethod === null;
     scanned = false;
@@ -198,6 +207,8 @@
   onDestroy(() => {
     resetForm();
   });
+
+  $: activeStep === NFTSteps.IMPORT && resetForm();
 </script>
 
 <div class="f-col">
@@ -224,10 +235,10 @@
           bind:validating={validatingImport} />
         <!-- REVIEW STEP -->
       {:else if activeStep === NFTSteps.REVIEW}
-        <ReviewStep on:editTransactionDetails={handleTransactionDetailsClick} />
+        <ReviewStep on:editTransactionDetails={handleTransactionDetailsClick} bind:hasEnoughEth />
         <!-- RECIPIENT STEP -->
       {:else if activeStep === NFTSteps.RECIPIENT}
-        <RecipientStep bind:this={recipientStepComponent} />
+        <RecipientStep bind:this={recipientStepComponent} bind:hasEnoughEth />
         <!-- CONFIRM STEP -->
       {:else if activeStep === NFTSteps.CONFIRM}
         <ConfirmationStep bind:bridgingStatus />

packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/RecipientStep.svelte

@@ -7,8 +7,8 @@
   export let hasEnoughEth: boolean = false;
 
   export const reset = () => {
-    recipientComponent.clearRecipient();
-    processingFeeComponent.resetProcessingFee();
+    recipientComponent?.clearRecipient();
+    processingFeeComponent?.resetProcessingFee();
   };
 </script>
 

packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte

@@ -14,7 +14,7 @@
 
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
-  let hasEnoughEth: boolean;
+  export let hasEnoughEth: boolean;
 
   const dispatch = createEventDispatcher();
 

packages/bridge-ui-v2/src/components/Icon/Icon.svelte

@@ -153,7 +153,7 @@
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M14.0003 0.916748C6.7746 0.916748 0.916992 6.77436 0.916992 14.0001C0.916992 21.2258 6.7746 27.0834 14.0003 27.0834C21.2261 27.0834 27.0837 21.2258 27.0837 14.0001C27.0837 6.77436 21.2261 0.916748 14.0003 0.916748ZM15.0067 9.97444C15.0067 9.41862 14.5562 8.96803 14.0003 8.96803C13.4445 8.96803 12.9939 9.41862 12.9939 9.97444V12.9937H9.97468C9.41886 12.9937 8.96828 13.4443 8.96828 14.0001C8.96828 14.5559 9.41886 15.0065 9.97468 15.0065H12.9939V18.0257C12.9939 18.5815 13.4445 19.0321 14.0003 19.0321C14.5562 19.0321 15.0067 18.5815 15.0067 18.0257V15.0065H18.026C18.5818 15.0065 19.0324 14.5559 19.0324 14.0001C19.0324 13.4443 18.5818 12.9937 18.026 12.9937H15.0067V9.97444Z" />
+      d="m10,1.98C5.57,1.98,1.98,5.57,1.98,10s3.59,8.02,8.02,8.02,8.02-3.59,8.02-8.02S14.43,1.98,10,1.98Zm.62,5.55c0-.34-.28-.62-.62-.62s-.62.28-.62.62v1.85h-1.85c-.34,0-.62.28-.62.62s.28.62.62.62h1.85v1.85c0,.34.28.62.62.62s.62-.28.62-.62v-1.85h1.85c.34,0,.62-.28.62-.62s-.28-.62-.62-.62h-1.85v-1.85Z" />
   {:else if type === 'circle'}
     <circle class={fillClass} cx="10" cy="10" r="6" />
   {:else if type === 'arrow-right'}

packages/bridge-ui-v2/src/components/NFTs/NFTCards/NFTCardGrid.svelte

@@ -40,7 +40,7 @@
         <span class="badge badge-primary badge-outline badge-xs px-[10px] h-[24px] ml-[10px]"
           ><span class="text-xs">{nftsGroup[0].type}</span></span>
       </div>
-      <div class="token-ids mt-[16px] grid gap-4 grid-3">
+      <div class="token-ids mt-[16px] grid gap-4 grid-cols-3">
         {#each nftsGroup as nft}
           {@const collectionAddress = nft.addresses[chainId]}
           {#if collectionAddress === undefined}