taikoxyz · dionysuzx · Dec 22, 2022 · Dec 20, 2022 · Dec 20, 2022 · Dec 20, 2022
diff --git a/packages/bridge-ui/index.html b/packages/bridge-ui/index.html
@@ -2,12 +2,14 @@
 <html data-theme="dark" lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/png" href="./taiko-favicon.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
 
     <title>Bridge</title>
   </head>

diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json
@@ -42,6 +42,7 @@
     "rollup-plugin-polyfill-node": "^0.10.2",
     "svelte": "^3.53.1",
     "svelte-check": "^2.8.0",
+    "svelte-heros-v2": "^0.3.10",
     "svelte-jester": "^2.1.5",
     "svelte-loader": "^3.1.2",
     "svelte-preprocess": "^4.10.7",

diff --git a/packages/bridge-ui/public/taiko-favicon.png b/packages/bridge-ui/public/taiko-favicon.png
diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
@@ -166,6 +166,8 @@
 
           const interval = setInterval(async () => {
             tx.interval = interval;
+            if (!tx.signal) return;
+
             const contract = new ethers.Contract(
               chains[tx.toChainId].bridgeAddress,
               BridgeABI,
@@ -201,16 +203,13 @@
 </script>
 
 <QueryProvider>
-  <div class="lg:container lg:mx-auto lg:px-64">
-    <main>
-      <HeaderAnnouncement />
-      <Navbar />
-      <Router {routes} />
-    </main>
-    <SvelteToast options={toastOptions} />
-
-    <SwitchEthereumChainModal />
-  </div>
+  <main>
+    <HeaderAnnouncement />
+    <Navbar />
+    <Router {routes} />
+  </main>
+  <SvelteToast options={toastOptions} />
+  <SwitchEthereumChainModal />
 </QueryProvider>
 
 <style global lang="postcss">
@@ -219,7 +218,6 @@
   @tailwind utilities;
 
   main {
-    margin: 0;
     font-family: "Inter", sans-serif;
   }
 </style>
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -1,20 +1,18 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { _ } from "svelte-i18n";
-
   import { addressSubsection } from "../utils/addressSubsection";
   import { signer } from "../store/signer";
   import { pendingTransactions } from "../store/transactions";
-  import ChevDown from "./icons/ChevDown.svelte";
   import { getAddressAvatarFromIdenticon } from "../utils/addressAvatar";
   import { LottiePlayer } from "@lottiefiles/svelte-lottie-player";
   import { ethers, Signer } from "ethers";
   import { errorToast } from "../utils/toast";
-  import CopyIcon from "./icons/Copy.svelte";
-  import DisconnectIcon from "./icons/Disconnect.svelte";
+  import { ClipboardDocument, Power } from "svelte-heros-v2";
   import { slide } from "svelte/transition";
   import { fromChain } from "../store/chain";
   import { truncateString } from "../utils/truncateString";
+  import { ChevronDown } from "svelte-heros-v2";
 
   let address: string = "";
   let addressAvatarImgData: string = "";
@@ -57,7 +55,7 @@
 </script>
 
 <div class="dropdown dropdown-bottom dropdown-end">
-  <label tabindex="0" class="btn btn-md md:btn-wide justify-around">
+  <label tabindex="0" class="btn btn-md justify-around">
     <span class="font-normal flex-1 text-left">
       {#if $pendingTransactions && $pendingTransactions.length}
         {$pendingTransactions.length} Pending
@@ -83,17 +81,16 @@
           alt="avatar"
         />
 
-        <span class="hidden md:inline-block">
+        <span class="hidden md:inline-block mr-2">
           {addressSubsection(address)}
         </span>
       {/if}
     </span>
-
-    <ChevDown />
+    <ChevronDown />
   </label>
   <ul
     tabindex="0"
-    class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-64 mt-2 pb-2"
+    class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-48 mt-2 pb-2"
   >
     <div class="p-5 pb-0 flex flex-col items-center" transition:slide>
       {#if $fromChain && $signer}
@@ -106,7 +103,7 @@
       {/if}
     </div>
     <div class="divider" />
-    <div class="flex hover:bg-dark-5 items-center py-2 px-2">
+    <div class="flex hover:bg-dark-5 items-center py-2 px-4">
       <img
         width="24"
         height="24"
@@ -117,17 +114,17 @@
       {addressSubsection(address)}
     </div>
     <div
-      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
+      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4"
       on:click={async () => await copyToClipboard(address)}
     >
-      <CopyIcon />
+      <ClipboardDocument class="mr-2" />
       Copy Address
     </div>
     <div
-      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
+      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4"
       on:click={async () => await disconnect()}
     >
-      <DisconnectIcon /> Disconnect
+      <Power class="mr-2" /> Disconnect
     </div>
   </ul>
 </div>
diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-
-  import ChevDown from "./icons/ChevDown.svelte";
   import { fromChain, toChain } from "../store/chain";
-  import MetaMask from "./icons/MetaMask.svelte";
   import { CHAIN_MAINNET, CHAIN_TKO } from "../domain/chain";
   import type { Chain } from "../domain/chain";
   import { ethers } from "ethers";
   import { signer } from "../store/signer";
   import { switchNetwork } from "@wagmi/core";
+  import { ChevronDown } from "svelte-heros-v2";
   const changeChain = async (chain: Chain) => {
     await switchNetwork({
       chainId: chain.id,
@@ -26,8 +24,8 @@
   };
 </script>
 
-<div class="dropdown dropdown-bottom dropdown-end mr-4">
-  <label tabindex="0" class="btn btn-md md:btn-wide justify-around">
+<div class="dropdown dropdown-end mr-4">
+  <label tabindex="0" class="btn btn-md justify-around md:w-[194px]">
     <span class="font-normal flex-1 text-left mr-2">
       {#if $fromChain}
         <svelte:component this={$fromChain.icon} />
@@ -36,12 +34,11 @@
         <span class="ml-2 hidden md:inline-block">Invalid Chain</span>
       {/if}
     </span>
-
-    <ChevDown />
+    <ChevronDown />
   </label>
   <ul
     tabindex="0"
-    class="dropdown-content flex menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
+    class="dropdown-content flex my-2 menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
   >
     <li>
       <button
@@ -52,7 +49,6 @@
       >
         <svelte:component this={CHAIN_MAINNET.icon} height={24} />
         <span class="pl-1.5 text-left flex-1">{CHAIN_MAINNET.name}</span>
-        <MetaMask />
       </button>
     </li>
     <li>
@@ -64,14 +60,7 @@
       >
         <svelte:component this={CHAIN_TKO.icon} height={24} />
         <span class="pl-1.5 text-left flex-1">{CHAIN_TKO.name}</span>
-        <MetaMask />
       </button>
     </li>
   </ul>
 </div>
-
-<style>
-  .menu li > span {
-    padding-left: 0px;
-  }
-</style>
diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
   import Connect from "./buttons/Connect.svelte";
-  import Logo from "./icons/Logo.svelte";
+  import TaikoLogo from "./icons/TaikoLogo.svelte";
   import { signer } from "../store/signer";
   import AddressDropdown from "./AddressDropdown.svelte";
   import ChainDropdown from "./ChainDropdown.svelte";
 </script>
 
-<nav class="navbar mb-4 md:h-[125px] pt-4 md:pt-0 md:px-4 w-full">
-  <div class="navbar-end justify-start">
-    <Logo />
+<div class="navbar bg-base-100">
+  <div class="flex-1">
+    <TaikoLogo width={120} />
   </div>
-  <div class="navbar-end">
+  <div class="flex-none">
     {#if $signer}
       <ChainDropdown />
       <AddressDropdown />
     {:else}
       <Connect />
     {/if}
   </div>
-</nav>
+</div>
diff --git a/packages/bridge-ui/src/components/TaikoBanner.svelte b/packages/bridge-ui/src/components/TaikoBanner.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div
-  class="taiko-banner bg-cover bg-center bg-no-repeat h-36 rounded-lg py-4 flex flex-col items-center justify-center md:w-[450px]"
+  class="taiko-banner bg-cover bg-center bg-no-repeat h-36 rounded-lg py-4 flex flex-col items-center justify-center"
 >
   <SelectChain />
 </div>
diff --git a/packages/bridge-ui/src/components/Tooltip.svelte b/packages/bridge-ui/src/components/Tooltip.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { QuestionMarkCircle } from "svelte-heros-v2";
+
+  export let isOpen: boolean = false;
+</script>
+
+<QuestionMarkCircle
+  on:click={() => (isOpen = true)}
+  size="18"
+  variation="outline"
+/>
diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte
@@ -2,12 +2,12 @@
   import type { BridgeTransaction } from "../domain/transactions";
   import { chains, CHAIN_MAINNET, CHAIN_TKO } from "../domain/chain";
   import type { Chain } from "../domain/chain";
-  import TransactionsIcon from "./icons/Transactions.svelte";
+  import { ArrowTopRightOnSquare } from "svelte-heros-v2";
   import { MessageStatus } from "../domain/message";
   import { Contract, ethers } from "ethers";
   import { bridges } from "../store/bridge";
   import { signer } from "../store/signer";
-  import { pendingTransactions } from "../store/transactions";
+  import { pendingTransactions, showTransactionDetails } from "../store/transactions";
   import { errorToast, successToast } from "../utils/toast";
   import { _ } from "svelte-i18n";
   import {
@@ -21,12 +21,15 @@
   import HeaderSync from "../constants/abi/HeaderSync";
   import { providers } from "../store/providers";
   import { fetchSigner, switchNetwork } from "@wagmi/core";
+  import Tooltip from "./Tooltip.svelte";
+  import TooltipModal from "./modals/TooltipModal.svelte";
 
   export let transaction: BridgeTransaction;
 
   export let fromChain: Chain;
   export let toChain: Chain;
 
+  let tooltipOpen: boolean = false;
   let processable: boolean = false;
 
   onMount(async () => {
@@ -91,7 +94,7 @@
     const srcBlock = await $providers
       .get(chains[transaction.message.srcChainId.toNumber()].id)
       .getBlock(latestSyncedHeader);
-    return transaction.receipt.blockNumber >= srcBlock.number;
+    return transaction.receipt.blockNumber <= srcBlock.number;
   }
 </script>
 
@@ -110,20 +113,7 @@
       : ethers.utils.formatUnits(transaction.amountInWei)}
     {transaction.message?.data !== "0x" ? transaction.symbol : "ETH"}
   </td>
-
-  <td>
-    <span
-      class="cursor-pointer inline-block"
-      on:click={() =>
-        window.open(
-          `${fromChain.explorerUrl}/tx/${transaction.ethersTx.hash}`,
-          "_blank"
-        )}
-    >
-      <TransactionsIcon />
-    </span>
-  </td>
-
+
   <td>
     {#if !processable}
       Pending...
@@ -161,9 +151,52 @@
     {:else if transaction.status === MessageStatus.Done}
       Claimed
     {/if}
+    <span class="inline-block" on:click={() => (tooltipOpen = true)}>
+      <Tooltip />
+    </span>
+  </td>
+
+  <td>
+    <span
+      class="cursor-pointer inline-block"
+      on:click={() => $showTransactionDetails = transaction}>
+      <ArrowTopRightOnSquare />
+    </span>
   </td>
 </tr>
 
+<TooltipModal title="Message Status" bind:isOpen={tooltipOpen}>
+  <span slot="body">
+    <div class="text-left">
+      A bridge message will pass through various states:
+      <br /><br />
+      <ul class="list-disc ml-4">
+        <li class="mb-2">
+          <strong>Pending</strong>: Your asset is not ready to be bridged. Taiko
+          A1 => Ethereum A1 bridging can take several hours before being ready.
+          Ethereum A1 => Taiko A1 should be available to claim within minutes.
+        </li>
+        <li class="mb-2">
+          <strong>Claimable</strong>: Your asset is ready to be claimed on the
+          destination chain, and requires a transaction.
+        </li>
+        <li class="mb-2">
+          <strong>Claimed</strong>: Your asset has finished bridging, and is
+          available to you on the destination chain.
+        </li>
+        <li class="mb-2">
+          <strong>Retry</strong>: The relayer has failed to process this
+          message, and you must retry the processing yourself.
+        </li>
+        <li class="mb-2">
+          <strong>Failed</strong>: Your bridged asset is unable to be processed,
+          and is available to you on the source chain.
+        </li>
+      </ul>
+    </div>
+  </span>
+</TooltipModal>
+
 <style>
   td {
     padding: 1rem;