taikoxyz · cyberhorsey · Dec 6, 2022 · Nov 28, 2022 · Nov 30, 2022 · Nov 30, 2022
diff --git a/packages/bridge-ui/index.html b/packages/bridge-ui/index.html
@@ -4,6 +4,11 @@
     <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">
+
     <title>Bridge</title>
   </head>
   <body>

diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json
@@ -56,10 +56,11 @@
   },
   "dependencies": {
     "@sveltestack/svelte-query": "^1.6.0",
+    "@wagmi/core": "^0.7.5",
     "ethers": "^5.7.1",
     "extend-expect": "link:@testing-library/jest-dom/extend-expect",
+    "identicon.js": "^2.3.3",
     "svelte-i18n": "^3.5.1",
-    "svelte-spa-router": "^3.2.0",
-    "wagmi": "^0.8.6"
+    "svelte-spa-router": "^3.2.0"
   }
 }
diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
@@ -2,10 +2,12 @@
   import { wrap } from "svelte-spa-router/wrap";
   import QueryProvider from "./components/providers/QueryProvider.svelte";
   import Router from "svelte-spa-router";
-  import Navbar from "./components/Navbar.svelte";
   import { SvelteToast } from "@zerodevx/svelte-toast";
-
-  import { onMount } from "svelte";
+  import { configureChains } from '@wagmi/core';
+  import { publicProvider } from '@wagmi/core/providers/public'
+
+  import { mainnet, taiko } from "./domain/chain";
+  import Navbar from "./components/Navbar.svelte";
   import Home from "./pages/home/Home.svelte";
   import { setupI18n } from "./i18n";
   import { BridgeType } from "./domain/bridge";
@@ -46,7 +48,6 @@
   <main>
     <Navbar />
     <Router {routes} />
-    <Footer />
   </main>
   <SvelteToast />
 </QueryProvider>
@@ -58,5 +59,6 @@
 
   main {
     margin: 0;
+    font-family: 'Inter', sans-serif;
   }
 </style>
diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css
@@ -0,0 +1,47 @@
+.btn.btn-wide {
+  width: 194px;
+  height: 56px;
+}
+
+.btn.btn-token-select {
+  width: 140px;
+  height: 60px;
+}
+
+.btn.btn-square {
+  border-radius: 4px;
+}
+
+/* Invert accent button colors */
+.btn.btn-accent {
+  background-color: hsla(var(--af) / var(--tw-bg-opacity, 1));
+  border-color: hsla(var(--af) / var(--tw-bg-opacity, 1));
+  height: 60px;
+}
+
+.btn.btn-accent:hover {
+  background-color: hsla(var(--a) / var(--tw-bg-opacity, 1));
+  border-color: hsla(var(--a) / var(--tw-bg-opacity, 1));
+}
+
+.dropdown .dropdown-content {
+  border-radius: 0 0 var(--rounded-box) var(--rounded-box);
+}
+
+.input-group .input.input-primary {
+  border-radius: 0.5rem;
+}
+
+.form-control .input-group :first-child {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0;
+}
+
+.form-control .input-group :last-child {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0.5rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0.5rem;
+}
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { _ } from "svelte-i18n";
+  import { toast } from "@zerodevx/svelte-toast";
+
   import { addressSubsection } from "../utils/addressSubsection";
-  import { onMount } from "svelte";
   import { signer } from "../store/signer";
   import ChevDown from "./icons/ChevDown.svelte";
-  import { toast } from "@zerodevx/svelte-toast";
+  import { getAddressAvatarFromIdenticon } from "../utils/addressAvatar";
 
   let address: string;
+  let addressAvatarImgData;
   onMount(async () => {
     address = await $signer.getAddress();
+    addressAvatarImgData = getAddressAvatarFromIdenticon(address);
   });
 
   async function copyToClipboard(clip: string) {
@@ -25,15 +29,16 @@
   }
 </script>
 
-<div class="dropdown dropdown-end">
-  <label tabindex="0" class="btn m-1">
-    <span class="pr-2">{addressSubsection(address)}</span>
+<div class="dropdown dropdown-bottom">
+  <button tabindex="0" class="btn btn-wide justify-around">
+    <img width=26 height=26 src="data:image/png;base64,{addressAvatarImgData}" class="rounded-full mr-2" alt="avatar" />
+    <span class="font-normal flex-1 text-left">{addressSubsection(address)}</span>
 
     <ChevDown />
-  </label>
+  </button>
   <ul
     tabindex="0"
-    class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
+    class="dropdown-content menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
   >
     <li>
       <span

diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte
@@ -5,15 +5,15 @@
   import AddressDropdown from "./AddressDropdown.svelte";
 </script>
 
-<div class="navbar bg-base-100">
-  <div class="flex-1">
+<nav class="navbar h-[125px] py-8 px-32">
+  <div class="navbar-end justify-start">
     <Logo />
   </div>
-  <div class="flex-none">
+  <div class="navbar-end">
     {#if $signer}
       <AddressDropdown />
     {:else}
       <Connect />
     {/if}
   </div>
-</div>
+</nav>
diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte
@@ -19,6 +19,6 @@
   }
 </script>
 
-<button class="btn" on:click={async () => await connect()}
+<button class="btn btn-wide" on:click={async () => await connect()}
   >{$_("nav.connect")}</button
 >
diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+  import { toast } from "@zerodevx/svelte-toast";
   import { token } from "../../store/token";
   import { tokens } from "../../domain/token";
-
   import type { Token } from "../../domain/token";
-  import { toast } from "@zerodevx/svelte-toast";
+  import ChevDown from "../icons/ChevDown.svelte";
 
   async function select(t: Token) {
     if (t === $token) return;
@@ -12,21 +12,21 @@
   }
 </script>
 
-<div class="dropdown">
-  <label tabindex="0" class="btn m-1">
-    {$token.symbol.toUpperCase()}
+<div class="dropdown dropdown-bottom">
+  <button tabindex="0" class="btn btn-token-select m-1">
     <svelte:component this={$token.logoComponent} />
-  </label>
+    <span class="px-2 font-medium">{$token.symbol.toUpperCase()}</span>
+    <ChevDown />
+  </button>
   <ul
-    tabindex="0"
-    class="dropdown-content menu p-2 shadow bg-base-100 rounded-box"
+    class="dropdown-content menu py-2 shadow-xl bg-base-100 rounded-box"
   >
     {#each tokens as t}
-      <li class="cursor-pointer">
-        <a on:click={async () => await select(t)}
-          >{t.symbol.toUpperCase()}
-          <svelte:component this={t.logoComponent} /></a
-        >
+      <li class="cursor-pointer w-full hover:bg-dark-3 px-9 py-3">
+        <button on:click={async () => await select(t)} class="flex items-center">
+          <svelte:component this={t.logoComponent} height={16} width={16} />
+          <span class="text-sm font-medium mx-2">{t.symbol.toUpperCase()}</span>
+        </button>
       </li>
     {/each}
   </ul>

diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -6,6 +6,9 @@
   import { signer } from "../../store/signer";
   import { BigNumber, ethers, Signer } from "ethers";
   import { toast } from "@zerodevx/svelte-toast";
+  import ArrowDown from "../icons/ArrowDown.svelte";
+  import { CHAIN_MAINNET, CHAIN_TKO } from "../../domain/chain";
+  import ProcessingFee from "./ProcessingFee.svelte";
 
   let amount: string;
   let btnDisabled: boolean = true;
@@ -44,42 +47,63 @@
       toast.push($_("toast.errorSendingTransaction"));
     }
   }
+
+  function toggleChains() {
+    fromChain.update(val => val === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET);
+    toChain.update(val => val === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET);
+  }
 </script>
 
-<div class="form-control">
-  <label class="label">
+<div class="form-control w-full">
+  <label class="label" for="amount">
     <span class="label-text">{$_("home.from")}</span>
   </label>
-  <label class="input-group">
+  <label class="input-group relative rounded-lg overflow-hidden">
+    <span class="bg-transparent border-transparent absolute top-0 left-0 h-full z-0">{$fromChain.name}</span>
     <input
-      type="text"
-      placeholder="0.01"
-      bind:value={amount}
-      class="input input-bordered"
+    type="number"
+    step="0.01"
+    placeholder="0.01"
+    min="0"
+    bind:value={amount}
+    class="input input-primary focus:input-accent bg-dark-4 input-lg rounded-lg! w-full text-right pl-20 pr-12 z-1"
+    name="amount"
     />
-    <span>{$token.symbol}</span>
+    <span class="pl-0 bg-transparent border-transparent absolute top-0 right-0 h-full">ETH</span>
   </label>
 </div>
 
-<div class="form-control">
-  <label class="label">
+<fieldset class="border border-b-0 border-dark-4 mt-10 mb-7">
+  <legend class="h-0 flex items-center">
+    <button class="btn btn-square btn-sm" on:click={toggleChains}>
+      <ArrowDown />
+    </button>
+  </legend>
+</fieldset>
+
+<div class="form-control w-full">
+  <label class="label" for="amount-to">
     <span class="label-text">{$_("home.to")}</span>
   </label>
-  <label class="input-group">
+  <label class="input-group relative rounded-lg overflow-hidden">
+    <span class="bg-transparent border-transparent absolute top-0 left-0 h-full z-0">{$toChain.name}</span>
     <input
-      type="text"
-      placeholder="0.01"
-      bind:value={amount}
-      class="input input-bordered"
+    type="number"
+    step="0.01"
+    placeholder="0.01"
+    min="0"
+    bind:value={amount}
+    class="input input-primary focus:input-accent bg-dark-4 input-lg rounded-lg! w-full text-right pl-20 pr-12 z-1"
+    name="amount-to"
     />
-    <span>{$token.symbol}</span>
+    <span class="pl-0 bg-transparent border-transparent absolute top-0 right-0 h-full">ETH</span>
   </label>
 </div>
+<ProcessingFee />
 
 <button
-  class="btn btn-accent"
+  class="btn btn-accent text-sm mt-16 w-full"
   on:click={async () => await bridge()}
-  disabled={btnDisabled}
 >
   {$_("home.bridge")}
 </button>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee.svelte
@@ -0,0 +1,17 @@
+<script>
+  import { processingFee } from '../../store/fee';
+  import { PROCESSING_FEE_META } from '../../domain/fee';
+
+  function selectProcessingFee (fee) {
+    $processingFee = fee;
+  }
+</script>
+<div class="mt-10">
+  <h4 class="text-sm font-medium text-left mb-4">Processing Fees</h4>
+  <div class="flex items-center justify-between">
+
+    {#each Array.from(PROCESSING_FEE_META) as fee}
+      <button class="{$processingFee === fee[0] ? 'border-accent' : ''} btn btn-md" on:click={() => selectProcessingFee(fee[0])}>{fee[1].DisplayText}</button>
+    {/each}
+  </div>
+</div>
diff --git a/packages/bridge-ui/src/components/icons/ETH.svelte b/packages/bridge-ui/src/components/icons/ETH.svelte
@@ -1,6 +1,10 @@
+<script>
+  export let height = 30;
+  export let width = 30;
+</script>
 <svg
-  width="30"
-  height="30"
+  width="{width}"
+  height="{height}"
   viewBox="0 0 30 30"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/bridge-ui/src/components/icons/Logo.svelte b/packages/bridge-ui/src/components/icons/Logo.svelte
@@ -1,25 +1,28 @@
-<svg
-  width="161"
-  height="43"
-  viewBox="0 0 161 43"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path d="M86.2853 1.61096H80.9694V41.2532H86.2853V1.61096Z" fill="white" />
-  <path
+<a href="/">
+  <svg
+    width="166"
+    height="60"
+    viewBox="0 0 161 43"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    >
+    <path d="M86.2853 1.61096H80.9694V41.2532H86.2853V1.61096Z" fill="white" />
+    <path
     d="M118.526 41.2531L105.281 21.4477L98.8707 28.2772V41.2531H93.5548V1.61096H98.8707V21.552L116.851 1.61096H122.648L122.79 1.90291L108.623 17.6524L124.293 40.8674L124.11 41.2531H118.526Z"
     fill="white"
-  />
-  <path
+    />
+    <path
     d="M137.26 41.2531C131.222 41.2531 128.404 38.4536 128.404 32.4374V10.4267C128.404 4.41052 131.222 1.61096 137.26 1.61096H151.176C157.215 1.61096 160.027 4.41052 160.027 10.4267V32.4374C160.027 38.4536 157.215 41.2531 151.176 41.2531H137.26ZM137.444 6.25604C135.082 6.25604 133.725 7.58544 133.725 9.90538V32.9796C133.725 35.2995 135.082 36.6289 137.444 36.6289H150.993C153.355 36.6289 154.711 35.3047 154.711 32.9796V9.90538C154.711 7.59066 153.355 6.25604 150.993 6.25604H137.444Z"
     fill="white"
-  />
-  <path
+    />
+    <path
     d="M15.0364 41.2531V6.23519H1.31457L0 2.02803L0.277579 1.61096H35.085L35.4254 2.11144L34.1318 6.23519H20.4152V41.2531H15.0364Z"
     fill="white"
-  />
-  <path
+    />
+    <path
     d="M75.5907 39.8038L62.5444 21.6041L53.1329 1.04267C52.9903 0.731759 52.761 0.468185 52.4723 0.283329C52.1835 0.0984738 51.8474 0.000127105 51.5041 1.99589e-07V1.99589e-07C51.1614 -0.000161663 50.8259 0.0981305 50.5379 0.28308C50.2499 0.468029 50.0216 0.731776 49.8805 1.04267L40.5161 21.4998L27.4228 39.7986C27.2327 40.065 27.1198 40.3784 27.0966 40.7043C27.0733 41.0303 27.1404 41.3564 27.2907 41.6469C27.441 41.9375 27.6686 42.1813 27.9486 42.3518C28.2287 42.5224 28.5504 42.613 28.8787 42.6138H29.0516L51.4831 40.4607L74.0037 42.619H74.1713C74.5001 42.6191 74.8225 42.5292 75.1033 42.3591C75.3842 42.189 75.6125 41.9452 75.7634 41.6545C75.9143 41.3637 75.9819 41.0373 75.9588 40.7109C75.9358 40.3844 75.8229 40.0706 75.6326 39.8038H75.5907ZM51.5041 5.77637L58.1346 20.2851H44.8631L51.5041 5.77637ZM58.6059 23.7207L51.4936 35.972L44.3865 23.7207H58.6059ZM32.3302 38.8393L41.6369 25.8529L48.2779 37.3223L32.3302 38.8393ZM54.7093 37.317L61.3555 25.8477L70.6571 38.8289L54.7093 37.317Z"
     fill="#FC0FC0"
-  />
-</svg>
+    />
+  </svg>
+</a>
+