fix(bridge): reported issue fixes (#12368)

* feat(bridge): add button with tooltip component * fix(bridge): white text not appearing * fix(bridge): close token dropdown on click
taikoxyz · Jan 12, 2023 · 0e596cb · 0e596cb
1 parent cc4a9bd
commit 0e596cb
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 42 deletions.
diff --git a/packages/bridge-ui/src/components/ButtonWithTooltip.svelte b/packages/bridge-ui/src/components/ButtonWithTooltip.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Tooltip from "./Tooltip.svelte";
+
+  export let onClick: () => void;
+</script>
+
+<div class="label-text flex items-center">
+  <slot name="buttonText"></slot>
+  <button
+    class="inline-block cursor-pointer ml-1"
+    on:click={onClick}
+  >
+    <Tooltip />
+  </button>
+</div>
diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte
@@ -27,6 +27,7 @@
   import { fetchSigner, switchNetwork } from "@wagmi/core";
   import Tooltip from "./Tooltip.svelte";
   import Bridge from "../constants/abi/Bridge";
+  import ButtonWithTooltip from "./ButtonWithTooltip.svelte";
 
   export let transaction: BridgeTransaction;
 
@@ -114,7 +115,7 @@
   }, 20 * 1000);
 </script>
 
-<tr>
+<tr class="text-white">
   <td>
     <svelte:component this={fromChain.icon} height={18} width={18} />
     <span class="ml-2 hidden md:inline-block">{fromChain.name}</span>
@@ -131,6 +132,8 @@
   </td>
 
   <td>
+    <ButtonWithTooltip onClick={() => ($showMessageStatusTooltip = true)}>
+      <span slot="buttonText">
     {#if !processable}
       Pending
     {:else if !transaction.receipt && transaction.status === MessageStatus.New}
@@ -147,29 +150,28 @@
           controlsLayout={[]}
         />
       </div>
-    {:else if transaction.receipt && transaction.status === MessageStatus.New}
-      <span
-        class="cursor-pointer border rounded p-1"
-        on:click={async () => await claim(transaction)}
-      >
-        Claim
+        {:else if transaction.receipt && transaction.status === MessageStatus.New}
+          <span
+            class="cursor-pointer border rounded p-1"
+            on:click={async () => await claim(transaction)}
+          >
+            Claim
+          </span>
+        {:else if transaction.status === MessageStatus.Retriable}
+          <span
+            class="cursor-pointer border rounded p-1"
+            on:click={async () => await claim(transaction)}
+          >
+            Retry
+          </span>
+        {:else if transaction.status === MessageStatus.Failed}
+          <!-- todo: releaseTokens() on src bridge with proof from destBridge-->
+          Failed
+        {:else if transaction.status === MessageStatus.Done}
+          <span class="border border-transparent p-0">Claimed</span>
+        {/if}
       </span>
-    {:else if transaction.status === MessageStatus.Retriable}
-      <span
-        class="cursor-pointer border rounded p-1"
-        on:click={async () => await claim(transaction)}
-      >
-        Retry
-      </span>
-    {:else if transaction.status === MessageStatus.Failed}
-      <!-- todo: releaseTokens() on src bridge with proof from destBridge-->
-      Failed
-    {:else if transaction.status === MessageStatus.Done}
-      <span class="border border-transparent p-0">Claimed</span>
-    {/if}
-    <span class="inline-block" on:click={() => ($showMessageStatusTooltip = true)}>
-      <Tooltip />
-    </span>
+    </ButtonWithTooltip>
   </td>
 
   <td>

diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte
@@ -10,7 +10,7 @@
   {#if $transactions.length}
     <table class="table-auto">
       <thead>
-        <tr>
+        <tr class="text-white">
           <th>From</th>
           <th>To</th>
           <th>Amount</th>

diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -7,6 +7,8 @@
   import { ChevronDown } from "svelte-heros-v2";
   import { successToast } from "../../utils/toast";
 
+  let dropdownElement: HTMLDivElement;
+
   async function select(t: Token) {
     if (t === $token) return;
     token.set(t);
@@ -16,15 +18,21 @@
       bridgeType.set(BridgeType.ERC20);
     }
     successToast(`Token changed to ${t.symbol.toUpperCase()}`);
+
+    // to close the dropdown on click
+    dropdownElement?.classList.remove('dropdown-open');
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
   }
 </script>
 
-<div class="dropdown dropdown-bottom">
+<div class="dropdown dropdown-bottom" bind:this={dropdownElement}>
   <label
     tabindex="0"
     class="flex items-center justify-center hover:cursor-pointer"
   >
-    <svelte:component this={$token.logoComponent} class="inline-block" />
+    <svelte:component this={$token.logoComponent} />
     <p class="px-2 text-sm">{$token.symbol.toUpperCase()}</p>
     <ChevronDown size='20' />
   </label>

diff --git a/packages/bridge-ui/src/components/form/Memo.svelte b/packages/bridge-ui/src/components/form/Memo.svelte
@@ -1,22 +1,17 @@
 <script lang="ts">
   import TooltipModal from "../modals/TooltipModal.svelte";
   import Tooltip from "../Tooltip.svelte";
+  import ButtonWithTooltip from "../ButtonWithTooltip.svelte";
 
   export let memo: string = "";
   let showMemo: boolean = false;
   let tooltipOpen: boolean = false;
 </script>
 
 <div class="flex flex-row justify-between mb-2">
-  <span class="label-text">
-    Memo
-    <span
-      class="inline-block cursor-pointer"
-      on:click={() => (tooltipOpen = true)}
-    >
-      <Tooltip />
-    </span>
-  </span>
+  <ButtonWithTooltip onClick={() => (tooltipOpen = true)}>
+    <span slot="buttonText">Memo</span>
+  </ButtonWithTooltip>
   <input
     type="checkbox"
     class="toggle rounded-full duration-300"

diff --git a/packages/bridge-ui/src/components/form/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee.svelte
@@ -8,6 +8,7 @@
   import { recommendProcessingFee } from "../../utils/recommendProcessingFee";
   import Tooltip from "../Tooltip.svelte";
   import TooltipModal from "../modals/TooltipModal.svelte";
+  import ButtonWithTooltip from "../ButtonWithTooltip.svelte";
 
   export let customFee: string;
   export let recommendedFee: string = "0";
@@ -35,12 +36,9 @@
 
 <div class="my-10">
   <div class="flex flex-row justify-between">
-    <span class="text-left label-text">
-      {$_("bridgeForm.processingFeeLabel")}
-      <span class="inline-block" on:click={() => (tooltipOpen = true)}>
-        <Tooltip />
-      </span>
-    </span>
+    <ButtonWithTooltip onClick={() => (tooltipOpen = true)}>
+      <span slot="buttonText">{$_("bridgeForm.processingFeeLabel")}</span>
+    </ButtonWithTooltip>
   </div>
 
   {#if $processingFee === ProcessingFeeMethod.CUSTOM}

diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte
@@ -29,7 +29,7 @@
 </script>
 
 <div
-  class="flex items-center justify-between w-full px-4 md:px-8 py-6 text-sm md:text-lg"
+  class="flex items-center justify-between w-full px-4 md:px-8 py-6 text-sm md:text-lg text-white"
 >
   <div class="flex items-center w-2/5 justify-center">
     {#if $fromChain}