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

)

Co-authored-by: dave | d1onys1us <[email protected]>

packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  import { Button } from '$components/Button';
+  import { Icon } from '$components/Icon';
+  import { PUBLIC_GUIDE_URL } from '$env/static/public';
+  import { uid } from '$libs/util/uid';
+
+  export let modalOpen = false;
+
+  let dialogId = `dialog-${uid()}`;
+
+  function closeModal() {
+    removeEscKeyListener();
+    modalOpen = false;
+  }
+
+  let escKeyListener: (event: KeyboardEvent) => void;
+
+  const addEscKeyListener = () => {
+    escKeyListener = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeModal();
+      }
+    };
+    window.addEventListener('keydown', escKeyListener);
+  };
+
+  const removeEscKeyListener = () => {
+    window.removeEventListener('keydown', escKeyListener);
+  };
+
+  onDestroy(() => {
+    removeEscKeyListener();
+  });
+
+  $: if (modalOpen) {
+    addEscKeyListener();
+  } else {
+    removeEscKeyListener();
+  }
+</script>
+
+<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]" on:click={closeModal}>
+      <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
+    </button>
+    <div class="w-full space-y-6">
+      <h3 class="title-body-bold mb-7">{$t('transactions.actions.claim.dialog.title')}</h3>
+      <div class="body-regular text-secondary-content mb-3 flex flex-col items-end">
+        <div>
+          {$t('transactions.actions.claim.dialog.description')}
+        </div>
+        <a href={PUBLIC_GUIDE_URL} target="_blank" class="flex link py-[10px]">
+          {$t('transactions.actions.claim.dialog.link')}<Icon type="arrow-top-right" />
+        </a>
+      </div>
+
+      <Button
+        type="primary"
+        class="px-[28px] py-[10px] rounded-full w-full border-primary-brand"
+        hasBorder={true}
+        on:click={closeModal}>
+        <span class="body-bold">{$t('common.ok')}</span>
+      </Button>
+    </div>
+  </div>
+</dialog>

packages/bridge-ui-v2/src/components/Transactions/Status.svelte

@@ -31,6 +31,8 @@
   import { network } from '$stores/network';
   import { pendingTransactions } from '$stores/pendingTransactions';
 
+  import InsufficientFunds from './InsufficientFunds.svelte';
+
   const log = getLogger('components:Status');
 
   export let bridgeTx: BridgeTransaction;
@@ -41,6 +43,8 @@
   let processable = false; // bridge tx state to be processed: claimed/retried/released
   let bridgeTxStatus: Maybe<MessageStatus>;
 
+  let modalOpen = false;
+
   // TODO: enum?
   let loading: 'claiming' | 'releasing' | false = false;
 
@@ -136,7 +140,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'));
@@ -289,3 +293,5 @@
     <span>{$t('transactions.status.error.name')}</span>
   {/if}
 </div>
+
+<InsufficientFunds bind:modalOpen />

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

@@ -141,7 +141,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."
+        "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.",