feat(bridge-ui): tooltips, bug fix, general UI enhancements

packages/bridge-ui/src/components/AddressDropdown.svelte

@@ -86,8 +86,6 @@
         </span>
       {/if}
     </span>
-
-    <ChevDown />
   </label>
   <ul
     tabindex="0"

packages/bridge-ui/src/components/ChainDropdown.svelte

@@ -36,8 +36,6 @@
         <span class="ml-2 hidden md:inline-block">Invalid Chain</span>
       {/if}
     </span>
-
-    <ChevDown />
   </label>
   <ul
     tabindex="0"

packages/bridge-ui/src/components/Tooltip.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import TooltipIcon from "./icons/TooltipIcon.svelte";
+
+  export let isOpen: boolean = false;
+</script>
+
+<button type="button" on:click={() => (isOpen = true)} class="tooltip-button">
+  <TooltipIcon />
+</button>

packages/bridge-ui/src/components/form/Memo.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+  import TooltipModal from "../modals/TooltipModal.svelte";
+  import Tooltip from "../Tooltip.svelte";
+
   export let memo: string = "";
   let showMemo: boolean = true;
+  let tooltipOpen: boolean = false;
 
   function onChange(e: any) {
     showMemo = e.target.checked;
@@ -9,7 +13,12 @@
 
 <div class="form-control mb-2">
   <label class="label cursor-pointer">
-    <span class="label-text">Memo</span>
+    <span class="label-text"
+      >Memo
+      <span class="inline-block" on:click={() => (tooltipOpen = true)}>
+        <Tooltip />
+      </span></span
+    >
     <input
       type="checkbox"
       class="toggle rounded-full"
@@ -28,3 +37,12 @@
     />
   {/if}
 </div>
+
+<TooltipModal title="Memo" bind:isOpen={tooltipOpen}>
+  <span slot="body">
+    <p>
+      You can attach an arbitrary message to your bridge transaction <br />
+      by using a memo. It will slightly increase gas costs.
+    </p>
+  </span>
+</TooltipModal>

packages/bridge-ui/src/components/form/ProcessingFee.svelte

@@ -2,8 +2,11 @@
   import { _ } from "svelte-i18n";
   import { processingFee } from "../../store/fee";
   import { ProcessingFeeMethod, PROCESSING_FEE_META } from "../../domain/fee";
+  import TooltipModal from "../modals/TooltipModal.svelte";
+  import Tooltip from "../Tooltip.svelte";
 
   export let customFee: string;
+  let tooltipOpen: boolean = false;
 
   function selectProcessingFee(fee) {
     $processingFee = fee;
@@ -17,6 +20,9 @@
 <div class="my-10 w-full">
   <h4 class="text-sm font-medium text-left mb-4">
     {$_("bridgeForm.processingFeeLabel")}
+    <span class="inline-block" on:click={() => (tooltipOpen = true)}>
+      <Tooltip />
+    </span>
   </h4>
   <div class="flex items-center justify-around">
     {#each Array.from(PROCESSING_FEE_META) as fee}
@@ -49,3 +55,15 @@
     </div>
   {/if}
 </div>
+
+<TooltipModal title="Processing Fees" bind:isOpen={tooltipOpen}>
+  <span slot="body">
+    <p>
+      Processing Fees are the amount you pay to have your bridge message
+      processed on the destination chain.
+      <br /> Use the recommended fee to have a relayer pick it up as soon as they
+      can, use a custom fee if you okay with waiting, or no fee if you want to come
+      back here and claim it yourself.
+    </p>
+  </span>
+</TooltipModal>

packages/bridge-ui/src/components/icons/TooltipIcon.svelte

@@ -0,0 +1,33 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="cursor-pointer"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 6.27273C8.83691 6.27273 6.27273 8.83691 6.27273 12C6.27273 15.1631 8.83691 17.7273 12 17.7273C15.1631 17.7273 17.7273 15.1631 17.7273 12C17.7273 8.83691 15.1631 6.27273 12 6.27273ZM5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C8.13401 19 5 15.866 5 12Z"
+    fill="#E3E3E3"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 11.3636C12.3515 11.3636 12.6364 11.6485 12.6364 11.9999V14.5454C12.6364 14.8968 12.3515 15.1818 12 15.1818C11.6485 15.1818 11.3636 14.8968 11.3636 14.5454V11.9999C11.3636 11.6485 11.6485 11.3636 12 11.3636Z"
+    fill="#E3E3E3"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.3636 9.45424C11.3636 9.10278 11.6485 8.81788 12 8.81788H12.007C12.3585 8.81788 12.6434 9.10278 12.6434 9.45424C12.6434 9.80569 12.3585 10.0906 12.007 10.0906H12C11.6485 10.0906 11.3636 9.80569 11.3636 9.45424Z"
+    fill="#E3E3E3"
+  />
+</svg>
+
+<style>
+  svg {
+    display: inline-block;
+  }
+</style>

packages/bridge-ui/src/components/modals/Modal.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { onDestroy } from "svelte";
+
   export let title: string = null;
   export let isOpen: boolean = false;
   export let onClose: () => void = null;
@@ -12,7 +14,15 @@
   };
 </script>
 
-<div class="modal bg-black/60" class:modal-open={isOpen} on:click|self={onCloseClicked}>
+<svelte:window
+  on:keydown={function (e) {
+    if (e.key === "Escape") {
+      onCloseClicked();
+    }
+  }}
+/>
+
+<div class="modal bg-black/60" class:modal-open={isOpen}>
   <div class="modal-box bg-dark-3">
     <h3 class="font-bold text-lg text-center mt-4">{title}</h3>
     {#if showXButton}
@@ -31,3 +41,9 @@
     </div>
   </div>
 </div>
+
+<style>
+  .modal {
+    align-items: center;
+  }
+</style>

packages/bridge-ui/src/components/modals/TooltipModal.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Modal from "./Modal.svelte";
+
+  export let title: string;
+  export let isOpen: boolean = false;
+</script>
+
+<Modal {title} bind:isOpen>
+  <div class="flex h-full min-h-tooltip-modal w-full flex-col justify-between">
+    <div class="tip-body mb-4 flex-auto">
+      <slot name="body" />
+    </div>
+    <div class="tip-footer self-start">
+      <slot name="footer" />
+    </div>
+  </div>
+</Modal>

packages/bridge-ui/src/eth/bridge.spec.ts

@@ -3,7 +3,6 @@ import { mainnet, taiko } from "../domain/chain";
 import type { Bridge, BridgeOpts } from "../domain/bridge";
 import ETHBridge from "./bridge";
 import { Message, MessageStatus } from "../domain/message";
-import { src_url_equal } from "svelte/internal";
 
 const mockSigner = {
   getAddress: jest.fn(),