chore(bridge-ui-v2): status explanation for mobile view (#14678)

taikoxyz · Sep 28, 2023 · 14bf142 · 14bf142
1 parent cbaf51a
commit 14bf142
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/packages/bridge-ui-v2/src/components/Activities/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Activities/MobileDetailsDialog.svelte
@@ -11,18 +11,25 @@
 
   import ChainSymbolName from './ChainSymbolName.svelte';
   import Status from './Status.svelte';
+  import StatusInfoDialog from './StatusInfoDialog.svelte';
 
   export let closeDetails = noop;
   export let detailsOpen = false;
 
   export let selectedItem: BridgeTransaction | null;
 
+  let openStatusDialog = false;
+
   let tooltipOpen = false;
   const openToolTip = (event: Event) => {
     event.stopPropagation();
     tooltipOpen = !tooltipOpen;
   };
   let dialogId = `dialog-${uid()}`;
+
+  const handleStatusDialog = () => {
+    openStatusDialog = !openStatusDialog;
+  };
 </script>
 
 <dialog id={dialogId} class="modal modal-bottom" class:modal-open={detailsOpen}>
@@ -54,7 +61,9 @@
               <button on:click={openToolTip}>
                 <span>{$t('activities.header.status')}</span>
               </button>
-              <Tooltip position="right" bind:tooltipOpen>TODO: add description about status here</Tooltip>
+              <button on:click={handleStatusDialog} class="flex justify-start content-center">
+                <Icon type="question-circle" />
+              </button>
             </div>
           </h4>
           <div class="f-items-center space-x-1">
@@ -77,3 +86,5 @@
 
   <button class="overlay-backdrop" on:click={closeDetails} />
 </dialog>
+
+<StatusInfoDialog bind:modalOpen={openStatusDialog} noIcon />
diff --git a/packages/bridge-ui-v2/src/components/Activities/StatusInfoDialog.svelte b/packages/bridge-ui-v2/src/components/Activities/StatusInfoDialog.svelte
@@ -4,8 +4,11 @@
   import { Icon } from '$components/Icon';
   import { uid } from '$libs/util/uid';
 
-  let dialogId = `dialog-${uid()}`;
-  let modalOpen = false;
+  export let modalOpen = false;
+
+  export let noIcon = false;
+
+  const dialogId = `dialog-${uid()}`;
 
   const closeModal = () => (modalOpen = false);
 
@@ -34,7 +37,9 @@
   on:click={openModal}
   on:focus={openModal}
   class=" ml-[4px]">
-  <Icon type="question-circle" />
+  {#if !noIcon}
+    <Icon type="question-circle" />
+  {/if}
 </button>
 
 <svelte:window on:keydown={closeModalIfKeyDown} />