feat(bridge-ui): Transactions (#372)

* feat(bridge-ui): ERC20 Bridge + approval (#353) * erc20 bridge + approve + requires allowance * bridge form checks allowance, disables button * if allowance is required, show approve button instead * set allowance required to false after successful approval * requiresallowance should take approveopts, not bridgeopts * show Approve text appropriatley * Update packages/bridge-ui/src/components/form/BridgeForm.svelte Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * Update packages/bridge-ui/src/eth/bridge.ts Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * Update packages/bridge-ui/src/components/form/BridgeForm.svelte Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * Update packages/bridge-ui/src/components/form/BridgeForm.svelte Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * inverse approve logic Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * . * lottie player * update lockfile Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com>
taikoxyz · Dec 2, 2022 · 53e3dd8 · 53e3dd8
1 parent fe29c86
commit 53e3dd8
Show file tree

Hide file tree

Showing 25 changed files with 1,105 additions and 1,041 deletions.
diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json
@@ -52,11 +52,14 @@
     "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",

diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
@@ -2,30 +2,37 @@
   import { wrap } from "svelte-spa-router/wrap";
   import QueryProvider from "./components/providers/QueryProvider.svelte";
   import Router from "svelte-spa-router";
-  import { SvelteToast } from "@zerodevx/svelte-toast";
-  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 { SvelteToast, toast } from "@zerodevx/svelte-toast";
+  import { configureChains } from "@wagmi/core";
+  import { publicProvider } from "@wagmi/core/providers/public";
+
   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 { CHAIN_MAINNET, CHAIN_TKO, mainnet, taiko } from "./domain/chain";
+  import ERC20Bridge from "./erc20/bridge";
+  import { pendingTransactions } from "./store/transactions";
+  import { ethers } from "ethers";
+  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" });
 
   const { chains, provider } = configureChains(
     [mainnet, taiko],
     [publicProvider()]
   );
 
-  setupI18n({ withLocale: "en" });
-
   const ethBridge = new ETHBridge();
+  const erc20Bridge = new ERC20Bridge();
 
   bridges.update((store) => {
     store.set(BridgeType.ETH, ethBridge);
+    store.set(BridgeType.ERC20, erc20Bridge);
     return store;
   });
 
@@ -35,6 +42,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,
@@ -46,7 +67,7 @@
 
 <QueryProvider>
   <main>
-    <Navbar />
+    <Navbar {transactioner} />
     <Router {routes} />
   </main>
   <SvelteToast />
@@ -59,6 +80,6 @@
 
   main {
     margin: 0;
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
   }
 </style>
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.png b/packages/bridge-ui/src/assets/taiko-banner.png
diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -5,11 +5,16 @@
 
   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 type { BridgeTransaction } from "src/domain/transactions";
+  import { LottiePlayer } from "@lottiefiles/svelte-lottie-player";
+
+  export let transactions: BridgeTransaction[] = [];
 
   let address: string;
-  let addressAvatarImgData;
+  let addressAvatarImgData: string;
   onMount(async () => {
     address = await $signer.getAddress();
     addressAvatarImgData = getAddressAvatarFromIdenticon(address);
@@ -31,8 +36,32 @@
 
 <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>
+    <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"
+          alt="avatar"
+        />
+
+        {addressSubsection(address)}
+      {/if}
+    </span>
 
     <ChevDown />
   </button>
@@ -51,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,8 +1,27 @@
-<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>
 
 <nav class="navbar h-[125px] py-8 px-32">
@@ -11,7 +30,7 @@
   </div>
   <div class="navbar-end">
     {#if $signer}
-      <AddressDropdown />
+      <AddressDropdown {transactions} />
     {:else}
       <Connect />
     {/if}

diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
-  import { toast } from "@zerodevx/svelte-toast";
   import { token } from "../../store/token";
-  import { tokens } from "../../domain/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;
     token.set(t);
+    if (t.symbol.toLowerCase() == ETH.symbol.toLowerCase()) {
+      bridgeType.set(BridgeType.ETH);
+    } else {
+      bridgeType.set(BridgeType.ERC20);
+    }
     toast.push(`Token changed to ${t.symbol.toUpperCase()}`);
   }
 </script>
@@ -18,14 +25,17 @@
     <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"
-  >
+  <ul class="dropdown-content menu py-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">
+        <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>
+          <span class="text-sm font-medium bg-base-100 px-2"
+            >{t.symbol.toUpperCase()}</span
+          >
         </button>
       </li>
     {/each}