feat(bridge-ui): general ui enhancements (#465)

taikoxyz · Dec 21, 2022 · b90d041 · b90d041
1 parent a579b20
commit b90d041
Show file tree

Hide file tree

Showing 31 changed files with 430 additions and 423 deletions.
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
@@ -201,16 +201,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 +216,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;
@@ -55,7 +53,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
@@ -81,15 +79,16 @@
           alt="avatar"
         />
 
-        <span class="hidden md:inline-block">
+        <span class="hidden md:inline-block mr-2">
           {addressSubsection(address)}
         </span>
       {/if}
     </span>
+    <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}
@@ -116,14 +115,14 @@
       class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
       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"
       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,
@@ -27,7 +25,7 @@
 </script>
 
 <div class="dropdown dropdown-bottom dropdown-end mr-4">
-  <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 mr-2">
       {#if $fromChain}
         <svelte:component this={$fromChain.icon} />
@@ -36,6 +34,7 @@
         <span class="ml-2 hidden md:inline-block">Invalid Chain</span>
       {/if}
     </span>
+    <ChevronDown />
   </label>
   <ul
     tabindex="0"
@@ -50,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>
@@ -62,7 +60,6 @@
       >
         <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>

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/Tooltip.svelte b/packages/bridge-ui/src/components/Tooltip.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-  import TooltipIcon from "./icons/TooltipIcon.svelte";
+  import { QuestionMarkCircle } from "svelte-heros-v2";
 
   export let isOpen: boolean = false;
 </script>
 
-<button type="button" on:click={() => (isOpen = true)} class="tooltip-button">
-  <TooltipIcon />
-</button>
+<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,7 +2,7 @@
   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";
@@ -120,7 +120,7 @@
           "_blank"
         )}
     >
-      <TransactionsIcon />
+      <ArrowTopRightOnSquare />
     </span>
   </td>
 

diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte
@@ -78,9 +78,7 @@
   });
 </script>
 
-<button
-  class="btn btn-md md:btn-wide"
-  on:click={() => ($isConnectWalletModalOpen = true)}
+<button class="btn btn-md" on:click={() => ($isConnectWalletModalOpen = true)}
   >{$_("nav.connect")}</button
 >
 

diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -4,7 +4,7 @@
   import { ETH, tokens } from "../../domain/token";
   import type { Token } from "../../domain/token";
   import { BridgeType } from "../../domain/bridge";
-  import ChevDown from "../icons/ChevDown.svelte";
+  import { ChevronDown } from "svelte-heros-v2";
   import { successToast } from "../../utils/toast";
 
   async function select(t: Token) {
@@ -26,18 +26,15 @@
   >
     <svelte:component this={$token.logoComponent} class="inline-block" />
     <p class="px-2 text-sm">{$token.symbol.toUpperCase()}</p>
-    <ChevDown />
+    <ChevronDown />
   </label>
   <ul
     tabindex="0"
-    class="dropdown-content menu py-2 shadow-xl bg-base-100 rounded-box"
+    class="dropdown-content menu my-2 shadow-xl bg-base-100 rounded-box"
   >
     {#each tokens as t}
-      <li class="cursor-pointer w-full hover:bg-dark-3 px-7 py-3">
-        <button
-          on:click={async () => await select(t)}
-          class="flex items-center justify-center"
-        >
+      <li class="cursor-pointer w-full hover:bg-dark-3 px-4 py-4">
+        <button on:click={async () => await select(t)} class="flex">
           <svelte:component this={t.logoComponent} height={22} width={22} />
           <span class="text-sm font-medium bg-base-100 px-2"
             >{t.symbol.toUpperCase()}</span

diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -309,7 +309,7 @@
   </button>
 {:else}
   <button
-    class="btn btn-accent w-full"
+    class="btn btn-accent w-full mt-6"
     on:click={approve}
     disabled={btnDisabled}
   >

diff --git a/packages/bridge-ui/src/components/form/Memo.svelte b/packages/bridge-ui/src/components/form/Memo.svelte
@@ -3,46 +3,45 @@
   import Tooltip from "../Tooltip.svelte";
 
   export let memo: string = "";
-  let showMemo: boolean = true;
+  let showMemo: boolean = false;
   let tooltipOpen: boolean = false;
-
-  function onChange(e: any) {
-    showMemo = e.target.checked;
-  }
 </script>
 
-<div class="form-control mb-2">
-  <label class="label cursor-pointer">
-    <span class="label-text"
-      >Memo
-      <span class="inline-block" on:click={() => (tooltipOpen = true)}>
-        <Tooltip />
-      </span></span
+<div class="flex flex-row justify-between mb-2">
+  <span class="label-text">
+    Memo
+    <span
+      class="inline-block cursor-pointer"
+      on:click={() => (tooltipOpen = true)}
     >
-    <input
-      type="checkbox"
-      class="toggle rounded-full"
-      on:change={onChange}
-      bind:checked={showMemo}
-    />
-  </label>
-
-  {#if showMemo}
-    <input
-      type="text"
-      placeholder="Memo..."
-      class="input input-primary bg-dark-4 input-md md:input-lg w-full"
-      name="memo"
-      bind:value={memo}
-    />
-  {/if}
+      <Tooltip />
+    </span>
+  </span>
+  <input
+    type="checkbox"
+    class="toggle rounded-full"
+    on:click={() => {
+      showMemo = !showMemo;
+    }}
+    bind:checked={showMemo}
+  />
 </div>
 
+{#if showMemo}
+  <input
+    type="text"
+    placeholder="Enter memo here..."
+    class="input input-primary bg-dark-4 input-md md:input-lg w-full mb-2"
+    name="memo"
+    bind:value={memo}
+  />
+{/if}
+
 <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 class="text-left">
+      You can attach an arbitrary message to your bridge transaction by using a
+      memo — it will slightly increase gas costs.
     </p>
   </span>
 </TooltipModal>