feat(bridge-ui-v2): add dialog for claim with insufficient funds (#14742

) Co-authored-by: dave | d1onys1us <[email protected]>
taikoxyz · Sep 28, 2023 · 8bb835b · 8bb835b
1 parent 5f0bccc
commit 8bb835b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte b/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte
@@ -44,7 +44,7 @@
 
 <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
   <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
-    <button class="absolute right-6 top-[35px] z-50" on:click={closeModal}>
+    <button class="absolute right-6 top-[35px]" on:click={closeModal}>
       <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
     </button>
     <div class="w-full space-y-6">

diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
@@ -31,6 +31,10 @@
   import { network } from '$stores/network';
   import { pendingTransactions } from '$stores/pendingTransactions';
 
+  import InsufficientFunds from './InsufficientFunds.svelte';
+
+  const log = getLogger('components:Status');
+
   export let bridgeTx: BridgeTransaction;
 
   const log = getLogger('components:Status');
@@ -42,12 +46,10 @@
   let processable = false; // bridge tx state to be processed: claimed/retried/released
   let bridgeTxStatus: Maybe<MessageStatus>;
 
-  enum LoadingState {
-    CLAIMING = 'claiming',
-    RELEASING = 'releasing',
-  }
+  let modalOpen = false;
 
-  let loading: LoadingState | false = false;
+  // TODO: enum?
+  let loading: 'claiming' | 'releasing' | false = false;
 
   function onProcessable(isTxProcessable: boolean) {
     processable = isTxProcessable;
@@ -141,7 +143,7 @@
           warningToast($t('transactions.actions.claim.rejected'));
           break;
         case err instanceof InsufficientBalanceError:
-          errorToast($t('transactions.errors.insufficient_balance'));
+          modalOpen = true;
           break;
         case err instanceof InvalidProofError:
           errorToast($t('TODO: InvalidProofError'));
@@ -294,3 +296,5 @@
     <span>{$t('transactions.status.error.name')}</span>
   {/if}
 </div>
+
+<InsufficientFunds bind:modalOpen />
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
@@ -153,7 +153,12 @@
       "claim": {
         "tx": "Transaction sent to claim {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
         "success": "Transaction completed! Your funds have been successfully claimed on {network}.",
-        "rejected": "Request to claim rejected by user."
+        "rejected": "Request to claim rejected.",
+        "dialog": {
+          "title": "Please wait",
+          "description": "Insufficient balance to claim yourself. Please wait for the relayer to claim for you automatically. Refer to our guide for more information.",
+          "link": "Go to guide"
+        }
       },
       "release": {
         "tx": "Transaction sent to release {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",