fix(bridge-ui): lock continue button when fee is calculating (#17548)

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

Author: KorbinianK

packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
-  import { importDone } from '$components/Bridge/state';
+  import { calculatingProcessingFee, importDone } from '$components/Bridge/state';
   import { BridgeSteps, BridgingStatus } from '$components/Bridge/types';
   import { ActionButton } from '$components/Button';
   import { Icon } from '$components/Icon';
@@ -66,7 +66,7 @@
     manuallyConfirmedRecipientStep = false;
   };
 
-  $: disabled = !$account || !$account.isConnected;
+  $: disabled = !$account || !$account.isConnected || $calculatingProcessingFee;
 
   $: nextStepButtonText = getStepText();
 

packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/StepNavigation/StepNavigation.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
-  import { importDone } from '$components/Bridge/state';
+  import { calculatingProcessingFee, importDone } from '$components/Bridge/state';
   import { BridgeSteps, BridgingStatus, ImportMethod } from '$components/Bridge/types';
   import { ActionButton } from '$components/Button';
   import { StepBack } from '$components/Stepper';
@@ -69,7 +69,7 @@
       {/if}
     {/if}
     {#if activeStep === BridgeSteps.REVIEW}
-      <ActionButton priority="primary" on:click={() => handleNextStep()}>
+      <ActionButton priority="primary" disabled={$calculatingProcessingFee} on:click={() => handleNextStep()}>
         <span class="body-bold">{nextStepButtonText}</span>
       </ActionButton>
 

packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte

@@ -5,7 +5,7 @@
 
   import Alert from '$components/Alert/Alert.svelte';
   import FlatAlert from '$components/Alert/FlatAlert.svelte';
-  import { gasLimitZero, processingFee, processingFeeMethod } from '$components/Bridge/state';
+  import { calculatingProcessingFee, gasLimitZero, processingFee, processingFeeMethod } from '$components/Bridge/state';
   import { ActionButton, CloseButton } from '$components/Button';
   import { InputBox } from '$components/InputBox';
   import { LoadingText } from '$components/LoadingText';
@@ -26,7 +26,6 @@
   let dialogId = `dialog-${uid()}`;
 
   let recommendedAmount = BigInt(0);
-  let calculatingRecommendedAmount = false;
   let errorCalculatingRecommendedAmount = false;
 
   let calculatingEnoughEth = false;
@@ -161,7 +160,7 @@
     <div class="f-between-center">
       <span class="text-secondary-content">{$t('processing_fee.title')}</span>
       <span class=" text-primary-content mt-[4px]">
-        {#if calculatingRecommendedAmount}
+        {#if $calculatingProcessingFee}
           <LoadingText mask="0.0017730224073" /> ETH
         {:else if errorCalculatingRecommendedAmount && $processingFeeMethod === ProcessingFeeMethod.RECOMMENDED}
           <FlatAlert type="warning" message={$t('processing_fee.recommended.error')} />
@@ -175,7 +174,7 @@
   </div>
 {:else if textOnly}
   <span class="text-primary-content mt-[4px] {$$props.class}">
-    {#if calculatingRecommendedAmount}
+    {#if $calculatingProcessingFee}
       <LoadingText mask="0.0017730224073" />
     {:else if errorCalculatingRecommendedAmount && $processingFeeMethod === ProcessingFeeMethod.RECOMMENDED}
       <span class="text-warning-sentiment">{$t('processing_fee.recommended.error')}</span>
@@ -201,7 +200,7 @@
     </div>
 
     <span class="body-small-regular text-secondary-content mt-[4px]">
-      {#if calculatingRecommendedAmount}
+      {#if $calculatingProcessingFee}
         <LoadingText mask="0.0001" /> ETH
       {:else if errorCalculatingRecommendedAmount && $processingFeeMethod === ProcessingFeeMethod.RECOMMENDED}
         <FlatAlert type="warning" message={$t('processing_fee.recommended.error')} />
@@ -234,7 +233,7 @@
                 </label>
                 <span class="body-small-regular text-secondary-content">
                   <!-- TODO: think about the UI for this part. Talk to Jane -->
-                  {#if calculatingRecommendedAmount}
+                  {#if $calculatingProcessingFee}
                     <LoadingText mask="0.0001" /> ETH
                   {:else if errorCalculatingRecommendedAmount}
                     <FlatAlert type="warning" message={$t('processing_fee.recommended.error')} />
@@ -383,10 +382,7 @@
   </div>
 {/if}
 
-<RecommendedFee
-  bind:amount={recommendedAmount}
-  bind:calculating={calculatingRecommendedAmount}
-  bind:error={errorCalculatingRecommendedAmount} />
+<RecommendedFee bind:amount={recommendedAmount} bind:error={errorCalculatingRecommendedAmount} />
 
 <NoneOption
   bind:enoughEth={hasEnoughEth}

packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/RecommendedFee.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
 
-  import { destNetwork, selectedToken } from '$components/Bridge/state';
+  import { calculatingProcessingFee, destNetwork, selectedToken } from '$components/Bridge/state';
   import { processingFeeComponent } from '$config';
   import { recommendProcessingFee } from '$libs/fee';
   import type { NFT, Token } from '$libs/token';
   import { connectedSourceChain } from '$stores/network';
 
   export let amount: bigint;
-  export let calculating = false;
   export let error = false;
 
   let interval: ReturnType<typeof setInterval>;
@@ -17,7 +16,7 @@
     // Without token nor destination chain we cannot compute this fee
     if (!token || !destChainId) return;
 
-    calculating = true;
+    $calculatingProcessingFee = true;
     error = false;
 
     try {
@@ -30,7 +29,7 @@
       console.error(err);
       error = true;
     } finally {
-      calculating = false;
+      $calculatingProcessingFee = false;
     }
   }
 

packages/bridge-ui/src/components/Bridge/state.ts

@@ -35,6 +35,7 @@ export const bridging = writable<boolean>(false);
 export const approving = writable<boolean>(false);
 export const computingBalance = writable<boolean>(false);
 export const validatingAmount = writable<boolean>(false);
+export const calculatingProcessingFee = writable<boolean>(false);
 
 // Errors state
 export const errorComputingBalance = writable<boolean>(false);

packages/bridge-ui/src/i18n/en.json

@@ -39,7 +39,7 @@
       "nft_scan_again": "Scan again"
     },
     "alerts": {
-      "not_enough_funds": "You do not have enough ETH to cover the processing fee and transaction fee",
+      "not_enough_funds": "You do not have enough ETH to cover the processing fee and transaction fee. Please add more ETH to your wallet (>= 0.0015 ETH).",
       "slow_bridging": "Please note: Bridging to L1 will take around 24hrs!",
       "smart_contract_wallet": "It seems you are using a smart contract wallet. Please double check that the recipient matches your wallet on the destination or change it accordingly.",
       "stable_coin": "You are bridging a stable coin. For USDC, we are currently partnering with <a target=\"_blank\" href=\"https://stargate.finance/transfer\" class=\"link\">Stargate Bridge</a> for liquidity. Consider using their bridge, as the ecosystem partners are likely using their bridged version",
@@ -291,7 +291,7 @@
     },
     "title": "Faucet",
     "warning": {
-      "insufficient_balance": "You don't have enough ETH to complete the transaction. Please add some ETH to your wallet.",
+      "insufficient_balance": "You don't have enough ETH to complete the transaction. Please add more ETH to your wallet (>= 0.0015 ETH)",
       "no_connected": "Please connect your wallet to mint tokens.",
       "not_mintable": "This token is not mintable on this network. Please switch to the correct network.",
       "token_minted": "You have already minted this token.",
@@ -503,7 +503,7 @@
               "title": "What is \"Connected to the correct chain\"?"
             },
             "funds": {
-              "description": "In order to claim the transaction yourself, you need enough funds on the destination chain. If you've kept the default processing fee, the relayer will likely claim for you soon.",
+              "description": "In order to claim the transaction yourself, you need enough funds on the destination chain (>= 0.0015 ETH). If you've kept the default processing fee, the relayer will likely claim for you soon.",
               "title": "What is \"Sufficient funds to claim\"?"
             },
             "quota": {