block review step if funds too low

taikoxyz · Jun 5, 2024 · 028e7ea · 028e7ea
1 parent 8c4e9d0
commit 028e7ea
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/packages/bridge-ui/src/components/Alert/Alert.svelte b/packages/bridge-ui/src/components/Alert/Alert.svelte
@@ -23,7 +23,7 @@
       iconFillClass: 'fill-warning-content',
     },
     error: {
-      alertClass: 'alert-danger',
+      alertClass: 'alert-error',
       iconType: 'x-close-circle',
       iconFillClass: 'fill-error-content',
     },

diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
@@ -19,6 +19,7 @@
   let stepDescription: string;
 
   let hasEnoughEth: boolean = false;
+  let hasEnoughFundsToContinue: boolean = false;
   let exceedsQuota: boolean = false;
   let bridgingStatus: BridgingStatus;
   let needsManualReviewConfirmation: boolean;
@@ -58,7 +59,8 @@
           on:editTransactionDetails={handleTransactionDetailsClick}
           on:goBack={handleBackClick}
           bind:needsManualReviewConfirmation
-          bind:hasEnoughEth />
+          bind:hasEnoughEth
+          bind:hasEnoughFundsToContinue />
       {:else if activeStep === BridgeSteps.RECIPIENT}
         <!-- RECIPIENT STEP -->
         <RecipientStep bind:this={recipientStepComponent} bind:hasEnoughEth bind:needsManualRecipientConfirmation />
@@ -70,6 +72,7 @@
       <StepNavigation
         bind:activeStep
         bind:exceedsQuota
+        bind:hasEnoughFundsToContinue
         {bridgingStatus}
         bind:needsManualReviewConfirmation
         bind:needsManualRecipientConfirmation />

diff --git a/...ges/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte b/...ges/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte
@@ -6,15 +6,17 @@
   import { chainConfig } from '$chainConfig';
   import { Alert } from '$components/Alert';
   import { ProcessingFee, Recipient } from '$components/Bridge/SharedBridgeComponents';
-  import { destNetwork as destChain, enteredAmount, selectedToken } from '$components/Bridge/state';
+  import { destNetwork as destChain, enteredAmount, processingFee, selectedToken } from '$components/Bridge/state';
   import { PUBLIC_SLOW_L1_BRIDGING_WARNING } from '$env/static/public';
   import { LayerType } from '$libs/chain';
   import { isStablecoin, isSupported, isWrapped, type Token } from '$libs/token';
   import { isToken } from '$libs/token/isToken';
+  import { ethBalance } from '$stores/balance';
   import { connectedSourceChain } from '$stores/network';
 
   export let hasEnoughEth: boolean = false;
   export let needsManualReviewConfirmation = false;
+  export let hasEnoughFundsToContinue: boolean = false;
 
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
@@ -38,6 +40,12 @@
     needsManualReviewConfirmation = false;
   }
 
+  $: if ($processingFee + $enteredAmount > $ethBalance || !hasEnoughEth) {
+    hasEnoughFundsToContinue = false;
+  } else {
+    hasEnoughFundsToContinue = true;
+  }
+
   const dispatch = createEventDispatcher();
 
   const editTransactionDetails = () => {
@@ -85,6 +93,7 @@
 <!-- 
 Recipient & Processing Fee
 -->
+
 <div class="f-col">
   <div class="f-between-center mb-[10px]">
     <div class="font-bold text-primary-content">{$t('bridge.nft.step.review.recipient_details')}</div>
@@ -95,7 +104,9 @@ Recipient & Processing Fee
 </div>
 
 <div class="h-sep" />
-
+{#if !hasEnoughFundsToContinue}
+  <Alert type="error">{$t('bridge.alerts.not_enough_funds')}</Alert>
+{/if}
 {#if wrapped}
   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   <Alert type="warning">{@html wrappedAssetWarning}</Alert>

diff --git a/...ge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte b/...ge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte
@@ -11,6 +11,7 @@
   export let activeStep: BridgeSteps = BridgeSteps.IMPORT;
   export let validatingImport = false;
 
+  export let hasEnoughFundsToContinue: boolean;
   export let needsManualReviewConfirmation: boolean;
   export let needsManualRecipientConfirmation: boolean;
   export let bridgingStatus: BridgingStatus;
@@ -100,7 +101,10 @@
       </ActionButton>
     {/if}
 
-    <ActionButton priority="primary" disabled={disabled || !reviewConfirmed} on:click={() => handleNextStep()}>
+    <ActionButton
+      priority="primary"
+      disabled={disabled || !reviewConfirmed || !hasEnoughFundsToContinue}
+      on:click={() => handleNextStep()}>
       <span class="body-bold">{nextStepButtonText}</span>
     </ActionButton>
 

diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
@@ -39,6 +39,7 @@
       "nft_scan_again": "Scan again"
     },
     "alerts": {
+      "not_enough_funds": "You do not have enough funds to cover the processing fee and transaction fee",
       "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",