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/jest.config.js b/packages/bridge-ui/jest.config.js
@@ -49,6 +49,7 @@ export default {
     preset: "ts-jest",
     testEnvironment: "jsdom",
     testPathIgnorePatterns: ["<rootDir>/node_modules/"],
+    coveragePathIgnorePatterns: ["<rootDir>/src/components/"],
     testTimeout: 40 * 1000,
     watchPathIgnorePatterns: ["node_modules"],
 };
diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json
@@ -52,14 +52,18 @@
     "ts-loader": "^9.2.6",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
-    "vite": "^3.0.0"
+    "vite": "^3.0.0",
+    "vite-plugin-static-copy": "^0.12.0"
   },
   "dependencies": {
+    "@lottiefiles/svelte-lottie-player": "^0.2.0",
     "@sveltestack/svelte-query": "^1.6.0",
+    "@wagmi/core": "^0.7.5",
+    "axios": "^1.2.0",
     "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,18 +2,22 @@
   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 { SvelteToast, toast } from "@zerodevx/svelte-toast";
 
   import Home from "./pages/home/Home.svelte";
   import { setupI18n } from "./i18n";
   import { BridgeType } from "./domain/bridge";
   import ETHBridge from "./eth/bridge";
   import { bridges, chainIdToBridgeAddress } from "./store/bridge";
-  import { CHAIN_MAINNET, CHAIN_TKO } from "./domain/chain";
   import ERC20Bridge from "./erc20/bridge";
+  import { pendingTransactions } from "./store/transactions";
+  import Navbar from "./components/Navbar.svelte";
+  import { signer } from "./store/signer";
+  import type { Transactioner } from "./domain/transactions";
+  import { RelayerService } from "./relayer/service";
 
   setupI18n({ withLocale: "en" });
+  import { CHAIN_MAINNET, CHAIN_TKO } from "./domain/chain";
 
   const ethBridge = new ETHBridge();
   const erc20Bridge = new ERC20Bridge();
@@ -30,6 +34,20 @@
     return store;
   });
 
+  const relayerURL = import.meta.env.VITE_RELAYER_URL;
+
+  const transactioner: Transactioner = new RelayerService(relayerURL);
+
+  pendingTransactions.subscribe((store) => {
+    store.forEach(async (tx) => {
+      await $signer.provider.waitForTransaction(tx.hash, 3);
+      toast.push("Transaction completed!");
+      const s = store;
+      s.pop();
+      pendingTransactions.set(s);
+    });
+  });
+
   const routes = {
     "/": wrap({
       component: Home,
@@ -41,7 +59,7 @@
 
 <QueryProvider>
   <main>
-    <Navbar />
+    <Navbar {transactioner} />
     <Router {routes} />
   </main>
   <SvelteToast />
@@ -54,5 +72,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,46 @@
+.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-radius: 0.5rem;
+}
+
+.form-control .input-group :last-child {
+  border-radius: 0.5rem;
+}
+
+.taiko-banner {
+  background-image: url('assets/taiko-banner.svg');
+  background-repeat: no-repeat;
+}
diff --git a/packages/bridge-ui/src/assets/lottie/loader.json b/packages/bridge-ui/src/assets/lottie/loader.json
@@ -0,0 +1 @@
+{"nm":"Comp 1","mn":"","layers":[{"ty":4,"nm":"Shape Layer 2","mn":"","sr":1,"st":0,"op":300,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-22.637,19.301,0],"ix":1},"s":{"a":0,"k":[33.33333333333334,33.33333333333334,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[100.02066666666668,100.00000000000003,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":80,"ix":11},"r":{"a":1,"k":[{"o":{"x":0.472,"y":0.326},"i":{"x":0.526,"y":0.673},"s":[0],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[183],"t":60}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[368.602,368.602],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":49,"ix":5},"d":[],"c":{"a":0,"k":[0.9882,0.0588,0.7529],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-22.699,19.301],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.559,"y":0},"i":{"x":0.504,"y":1},"s":[1],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[50],"t":30}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.579,"y":0},"i":{"x":0.438,"y":1},"s":[0],"t":30},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[49],"t":60}],"ix":1},"m":1}],"ind":0},{"ty":4,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":300,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[33.33333333333334,33.33333333333334,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[107.56633333333339,93.56633333333338,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":10,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[368.602,368.602],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":49,"ix":5},"d":[],"c":{"a":0,"k":[0.698,0.0588,0.5373],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-22.699,19.301],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1}],"ddd":0,"h":200,"w":200,"meta":{"a":"","k":"","d":"","g":"@lottiefiles/toolkit-js 0.17.3","tc":"#ffffff"},"v":"5.5.0","fr":30,"op":60,"ip":0,"assets":[]}
diff --git a/packages/bridge-ui/src/assets/taiko-banner.svg b/packages/bridge-ui/src/assets/taiko-banner.svg
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -1,14 +1,23 @@
 <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 { pendingTransactions } from "../store/transactions";
   import ChevDown from "./icons/ChevDown.svelte";
-  import { toast } from "@zerodevx/svelte-toast";
+  import { getAddressAvatarFromIdenticon } from "../utils/addressAvatar";
+  import type { BridgeTransaction } from "src/domain/transactions";
+  import { LottiePlayer } from "@lottiefiles/svelte-lottie-player";
+
+  export let transactions: BridgeTransaction[] = [];
 
   let address: string;
+  let addressAvatarImgData: string;
   onMount(async () => {
     address = await $signer.getAddress();
+    addressAvatarImgData = getAddressAvatarFromIdenticon(address);
   });
 
   async function copyToClipboard(clip: string) {
@@ -25,15 +34,40 @@
   }
 </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">
+    <span class="font-normal flex-1 text-left">
+      {#if $pendingTransactions && $pendingTransactions.length}
+        {$pendingTransactions.length} Pending
+        <LottiePlayer
+          src="/lottie/loader.json"
+          autoplay={true}
+          loop={true}
+          controls={false}
+          renderer="svg"
+          background="transparent"
+          height={24}
+          width={24}
+          controlsLayout={[]}
+        />
+      {:else}
+        <img
+          width="26"
+          height="26"
+          src="data:image/png;base64,{addressAvatarImgData}"
+          class="rounded-full mr-2 inline-block"
+          alt="avatar"
+        />
+
+        {addressSubsection(address)}
+      {/if}
+    </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
@@ -46,5 +80,10 @@
         >Disconnect</span
       >
     </li>
+    {#if transactions && transactions.length}
+      <li>
+        <span class="cursor-pointer"> {transactions.length} Transactions</span>
+      </li>
+    {/if}
   </ul>
 </div>
diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte
@@ -1,19 +1,38 @@
-<script>
+<script lang="ts">
   import Connect from "./buttons/Connect.svelte";
   import Logo from "./icons/Logo.svelte";
   import { signer } from "../store/signer";
   import AddressDropdown from "./AddressDropdown.svelte";
+  import type {
+    BridgeTransaction,
+    Transactioner,
+  } from "../domain/transactions";
+  import type { Signer } from "ethers";
+  import { fromChain } from "../store/chain";
+
+  export let transactioner: Transactioner;
+  let transactions: BridgeTransaction[];
+
+  $: getTransactions($signer);
+
+  async function getTransactions(signer: Signer) {
+    if (!signer) return;
+    transactions = await transactioner.GetAllByAddress(
+      await signer.getAddress(),
+      $fromChain.id
+    );
+  }
 </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 />
+      <AddressDropdown {transactions} />
     {:else}
       <Connect />
     {/if}
   </div>
-</div>
+</nav>
diff --git a/packages/bridge-ui/src/components/TaikoBanner.svelte b/packages/bridge-ui/src/components/TaikoBanner.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import SelectChain from "./form/SelectChain.svelte";
+</script>
+
+<div class="taiko-banner bg-cover bg-center bg-no-repeat w-full h-36 rounded-lg py-4 flex flex-col items-center justify-center">
+  <h1 class="text-2xl font-bold">
+    {$_("home.title")}
+  </h1>
+  <SelectChain />
+</div>
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
@@ -2,10 +2,10 @@
   import { token } from "../../store/token";
   import { bridgeType } from "../../store/bridge";
   import { ETH, tokens } from "../../domain/token";
-
   import type { Token } from "../../domain/token";
   import { toast } from "@zerodevx/svelte-toast";
   import { BridgeType } from "../../domain/bridge";
+  import ChevDown from "../icons/ChevDown.svelte";
 
   async function select(t: Token) {
     if (t === $token) return;
@@ -19,21 +19,24 @@
   }
 </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-active">
     <svelte:component this={$token.logoComponent} />
-  </label>
-  <ul
-    tabindex="0"
-    class="dropdown-content menu p-2 shadow bg-base-100 rounded-box"
-  >
+    <span class="px-2 font-medium">{$token.symbol.toUpperCase()}</span>
+    <ChevDown />
+  </button>
+  <ul 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-7 py-3">
+        <button
+          on:click={async () => await select(t)}
+          class="flex items-center justify-center"
         >
+          <svelte:component this={t.logoComponent} height={22} width={22} />
+          <span class="text-sm font-medium bg-base-100 px-2"
+            >{t.symbol.toUpperCase()}</span
+          >
+        </button>
       </li>
     {/each}
   </ul>