fix(bridge): ui fixes (#489)

* feat(bridge): add invalid chain balance section in dropdown * feat(bridge): add invalid chain icon and fix mobile view * fix(bridge): open faucet in new tab * fix(bridge): metamask icon * fix(bridge): transaction list mobile view * fix(bridge): transaction detail mobile view * feat(bridge): move message status tooltip into component * Update HeaderAnnouncement.svelte * fix(bridge): invalid chain icon alignment * fix(bridge): status alignment Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
taikoxyz · Dec 30, 2022 · 6c080cb · 6c080cb
1 parent 4ac12a4
commit 6c080cb
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 213 deletions.
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -86,11 +86,11 @@
         </span>
       {/if}
     </span>
-    <ChevronDown />
+    <ChevronDown size='20' />
   </label>
   <ul
     tabindex="0"
-    class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-48 mt-2 pb-2"
+    class="dropdown-content address-dropdown-content menu shadow bg-dark-3 rounded-sm w-48 mt-2 pb-2 text-sm"
   >
     <div class="p-5 pb-0 flex flex-col items-center" transition:slide>
       {#if $fromChain && $signer}
@@ -100,6 +100,10 @@
             ? `${truncateString(tokenBalance)}...`
             : tokenBalance} ETH
         </div>
+      {:else}
+      <div class="text-lg mt-2">
+        -- ETH
+      </div>
       {/if}
     </div>
     <div class="divider" />

diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -6,7 +6,7 @@
   import { ethers } from "ethers";
   import { signer } from "../store/signer";
   import { switchNetwork } from "@wagmi/core";
-  import { ChevronDown } from "svelte-heros-v2";
+  import { ChevronDown, ExclamationTriangle } from "svelte-heros-v2";
   const changeChain = async (chain: Chain) => {
     await switchNetwork({
       chainId: chain.id,
@@ -31,10 +31,13 @@
         <svelte:component this={$fromChain.icon} />
         <span class="ml-2 hidden md:inline-block">{$fromChain.name}</span>
       {:else}
-        <span class="ml-2 hidden md:inline-block">Invalid Chain</span>
+      <span class="ml-2 flex items-center">
+          <ExclamationTriangle class='mr-2' size='20' />
+          <span class="hidden md:block">Invalid Chain</span>
+        </span>
       {/if}
     </span>
-    <ChevronDown />
+    <ChevronDown size='20' />
   </label>
   <ul
     tabindex="0"

diff --git a/packages/bridge-ui/src/components/HeaderAnnouncement.svelte b/packages/bridge-ui/src/components/HeaderAnnouncement.svelte
@@ -4,7 +4,8 @@
       <p class="font-medium text-white">
         <span class="md:inline"
           >Receive some tokens for bridging with our <a
-            href="https://taiko.xyz/docs/alpha-1-testnet/request-eth-from-faucet"
+            href="https://taiko.xyz/docs/alpha-1-testnet/request-from-faucet"
+            target="_blank"
             class="font-bold text-white underline">faucet</a
           >.</span
         >

diff --git a/packages/bridge-ui/src/components/MessageStatusTooltip.svelte b/packages/bridge-ui/src/components/MessageStatusTooltip.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import TooltipModal from "./modals/TooltipModal.svelte";
+  import { showMessageStatusTooltip } from '../store/transactions';
+</script>
+
+<TooltipModal title="Message Status" bind:isOpen={$showMessageStatusTooltip}>
+  <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>
diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte
@@ -10,6 +10,7 @@
   import {
     pendingTransactions,
     showTransactionDetails,
+    showMessageStatusTooltip,
   } from "../store/transactions";
   import { errorToast, successToast } from "../utils/toast";
   import { _ } from "svelte-i18n";
@@ -25,15 +26,13 @@
   import { providers } from "../store/providers";
   import { fetchSigner, switchNetwork } from "@wagmi/core";
   import Tooltip from "./Tooltip.svelte";
-  import TooltipModal from "./modals/TooltipModal.svelte";
   import Bridge from "../constants/abi/Bridge";
 
   export let transaction: BridgeTransaction;
 
   export let fromChain: Chain;
   export let toChain: Chain;
 
-  let tooltipOpen: boolean = false;
   let processable: boolean = false;
   onMount(async () => {
     processable = await isProcessable();
@@ -166,9 +165,9 @@
       <!-- todo: releaseTokens() on src bridge with proof from destBridge-->
       Failed
     {:else if transaction.status === MessageStatus.Done}
-      Claimed
+      <span class="border border-transparent p-0">Claimed</span>
     {/if}
-    <span class="inline-block" on:click={() => (tooltipOpen = true)}>
+    <span class="inline-block" on:click={() => ($showMessageStatusTooltip = true)}>
       <Tooltip />
     </span>
   </td>
@@ -183,38 +182,6 @@
   </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;

diff --git a/packages/bridge-ui/src/components/TransactionDetail.svelte b/packages/bridge-ui/src/components/TransactionDetail.svelte
@@ -8,7 +8,7 @@
   export let transaction;
 </script>
 <Modal onClose={() => $showTransactionDetails = null} isOpen={!!transaction} title="Transaction Detail">
-  <table class="table table-normal w-2/3 m-auto table-fixed border-spacing-0">
+  <table class="table table-normal w-full md:w-2/3 m-auto table-fixed border-spacing-0 text-sm md:text-base">
     <tr>
       <td>Tx Hash</td>
       <td class="text-right">
@@ -61,7 +61,7 @@
     </tr>
     <tr>
       <td>Data</td>
-      <td class="text-right overflow-auto">
+      <td class="text-center overflow-auto bg-dark-1 !px-1 border-x-4 border-dark-1">
         {transaction.message.data}
       </td>
     </tr>

diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import { chains } from "../domain/chain";
-  import { transactions, showTransactionDetails } from "../store/transactions";
+  import { transactions, showTransactionDetails, showMessageStatusTooltip } from "../store/transactions";
   import Transaction from "./Transaction.svelte";
   import TransactionDetail from './TransactionDetail.svelte';
+  import MessageStatusTooltip from './MessageStatusTooltip.svelte';
 </script>
 
-<div class="my-4 px-4">
+<div class="my-4 md:px-4">
   {#if $transactions.length}
     <table class="table-auto">
       <thead>
@@ -17,7 +18,7 @@
           <th>Details</th>
         </tr>
       </thead>
-      <tbody>
+      <tbody class="text-sm md:text-base">
         {#each $transactions as transaction}
           <Transaction
             toChain={chains[transaction.toChainId]}
@@ -34,4 +35,8 @@
   {#if $showTransactionDetails}
     <TransactionDetail transaction={$showTransactionDetails} />
   {/if}
+
+  {#if $showMessageStatusTooltip}
+    <MessageStatusTooltip />
+  {/if}
 </div>
diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -26,7 +26,7 @@
   >
     <svelte:component this={$token.logoComponent} class="inline-block" />
     <p class="px-2 text-sm">{$token.symbol.toUpperCase()}</p>
-    <ChevronDown />
+    <ChevronDown size='20' />
   </label>
   <ul
     tabindex="0"