feat(bridge-ui-v2): insufficient funds modal (#14759)

taikoxyz · Sep 28, 2023 · 161a7bd · 161a7bd
1 parent 7380946
commit 161a7bd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
@@ -32,6 +32,10 @@
   const handleStatusDialog = () => {
     openStatusDialog = !openStatusDialog;
   };
+
+  const handleInsufficientFunds = (e: CustomEvent) => {
+    dispatch('insufficientFunds', e.detail);
+  };
 </script>
 
 <dialog id={dialogId} class="modal modal-bottom" class:modal-open={detailsOpen}>

diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
@@ -31,11 +31,10 @@
   import { network } from '$stores/network';
   import { pendingTransactions } from '$stores/pendingTransactions';
 
-  import InsufficientFunds from './InsufficientFunds.svelte';
+  export let bridgeTx: BridgeTransaction;
 
   const log = getLogger('components:Status');
-
-  export let bridgeTx: BridgeTransaction;
+  const dispatch = createEventDispatcher();
 
   const log = getLogger('components:Status');
   const dispatch = createEventDispatcher();
@@ -46,10 +45,12 @@
   let processable = false; // bridge tx state to be processed: claimed/retried/released
   let bridgeTxStatus: Maybe<MessageStatus>;
 
-  let modalOpen = false;
+  enum LoadingState {
+    CLAIMING = 'claiming',
+    RELEASING = 'releasing',
+  }
 
-  // TODO: enum?
-  let loading: 'claiming' | 'releasing' | false = false;
+  let loading: LoadingState | false = false;
 
   function onProcessable(isTxProcessable: boolean) {
     processable = isTxProcessable;
@@ -143,7 +144,7 @@
           warningToast($t('transactions.actions.claim.rejected'));
           break;
         case err instanceof InsufficientBalanceError:
-          modalOpen = true;
+          dispatch('insufficientFunds', { tx: bridgeTx });
           break;
         case err instanceof InvalidProofError:
           errorToast($t('TODO: InvalidProofError'));
@@ -269,7 +270,7 @@
 <div class="Status f-items-center space-x-1">
   {#if !processable}
     <StatusDot type="pending" />
-    <span>{$t('transactions.status.initiated.name')}</span>
+    <span>{$t('transactions.status.processing.name')}</span>
   {:else if loading}
     <div class="f-items-center space-x-2">
       <Spinner />
@@ -296,5 +297,3 @@
     <span>{$t('transactions.status.error.name')}</span>
   {/if}
 </div>
-
-<InsufficientFunds bind:modalOpen />
diff --git a/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte
@@ -60,8 +60,8 @@
     <div class="inline-flex flex-col px-[37px] text-base">
       <br />
       {$t('transactions.status.dialog.description')}
-      <h4 class={classes.headline}>{$t('transactions.status.initiated.name')}</h4>
-      {$t('transactions.status.initiated.description')}
+      <h4 class={classes.headline}>{$t('transactions.status.processing.name')}</h4>
+      {$t('transactions.status.processing.description')}
       <h4 class={classes.headline}>{$t('transactions.status.claim.name')}</h4>
       {$t('transactions.status.claim.description')}
       <h4 class={classes.headline}>{$t('transactions.status.claimed.name')}</h4>