From 86484a579451c5a7a621f1e842813c4d8862b398 Mon Sep 17 00:00:00 2001
From: Korbinian <korbiniank@outlook.de>
Date: Mon, 10 Jun 2024 16:21:28 +0200
Subject: [PATCH 1/3] lock button via store when fee is calculating

---
 .../src/components/Bridge/FungibleBridge.svelte  |  3 +++
 .../StepNavigation/StepNavigation.svelte         |  4 ++--
 .../StepNavigation/StepNavigation.svelte         |  4 ++--
 .../ProcessingFee/ProcessingFee.svelte           | 16 ++++++----------
 .../ProcessingFee/RecommendedFee.svelte          |  7 +++----
 .../bridge-ui/src/components/Bridge/state.ts     |  1 +
 packages/bridge-ui/src/i18n/en.json              |  6 +++---
 7 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
index 346d036eea8..2e0c46e34e4 100644
--- a/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
+++ b/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
@@ -7,6 +7,7 @@
 
   import { ImportStep, ReviewStep, StepNavigation } from './FungibleBridgeComponents';
   import { ConfirmationStep, RecipientStep } from './SharedBridgeComponents';
+  import { processingFee } from './state';
   import { BridgeSteps, BridgingStatus } from './types';
 
   const handleTransactionDetailsClick = () => (activeStep = BridgeSteps.RECIPIENT);
@@ -48,6 +49,8 @@
       >{$t('bridge.step.confirm.title')}</Step>
   </Stepper>
 
+  $procesingFee: {$processingFee}
+
   <Card class="md:mt-[32px] w-full md:w-[524px]" title={stepTitle} text={stepDescription}>
     <div class="space-y-[30px] mt-[30px]">
       {#if activeStep === BridgeSteps.IMPORT}
diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte
index b81a7285e0d..83d86fd7ce6 100644
--- a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte
+++ b/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();
 
diff --git a/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/StepNavigation/StepNavigation.svelte b/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/StepNavigation/StepNavigation.svelte
index 3c64ba8af19..8d508846d7d 100644
--- a/packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/StepNavigation/StepNavigation.svelte
+++ b/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>
 
diff --git a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte
index f3108530292..8a1ee843239 100644
--- a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte
+++ b/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}
diff --git a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/RecommendedFee.svelte b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/RecommendedFee.svelte
index c7c783890a9..9c6a1ee7193 100644
--- a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/RecommendedFee.svelte
+++ b/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;
     }
   }
 
diff --git a/packages/bridge-ui/src/components/Bridge/state.ts b/packages/bridge-ui/src/components/Bridge/state.ts
index 2b33509e229..f6089db2618 100644
--- a/packages/bridge-ui/src/components/Bridge/state.ts
+++ b/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);
diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
index 7b9b503c630..9e602e4aab5 100644
--- a/packages/bridge-ui/src/i18n/en.json
+++ b/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.015 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.015 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.015 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": {

From c1a92af04a64a0d61ca6d2416619d09e080ad6b0 Mon Sep 17 00:00:00 2001
From: Korbinian <korbiniank@outlook.de>
Date: Mon, 10 Jun 2024 16:27:29 +0200
Subject: [PATCH 2/3] cleanup

---
 packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
index 2e0c46e34e4..346d036eea8 100644
--- a/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
+++ b/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
@@ -7,7 +7,6 @@
 
   import { ImportStep, ReviewStep, StepNavigation } from './FungibleBridgeComponents';
   import { ConfirmationStep, RecipientStep } from './SharedBridgeComponents';
-  import { processingFee } from './state';
   import { BridgeSteps, BridgingStatus } from './types';
 
   const handleTransactionDetailsClick = () => (activeStep = BridgeSteps.RECIPIENT);
@@ -49,8 +48,6 @@
       >{$t('bridge.step.confirm.title')}</Step>
   </Stepper>
 
-  $procesingFee: {$processingFee}
-
   <Card class="md:mt-[32px] w-full md:w-[524px]" title={stepTitle} text={stepDescription}>
     <div class="space-y-[30px] mt-[30px]">
       {#if activeStep === BridgeSteps.IMPORT}

From e513e126477ab5a7b70ae9e465c9433deea11646 Mon Sep 17 00:00:00 2001
From: Korbinian <korbiniank@outlook.de>
Date: Mon, 10 Jun 2024 16:50:54 +0200
Subject: [PATCH 3/3] fix i18n

---
 packages/bridge-ui/src/i18n/en.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
index 9e602e4aab5..04879abbfd7 100644
--- a/packages/bridge-ui/src/i18n/en.json
+++ b/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. Please add more ETH to your wallet (>= 0.015 ETH).",
+      "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 more ETH to your wallet (>= 0.015 ETH)",
+      "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 (>= 0.015 ETH). 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": {