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

taikoxyz · Dec 21, 2022 · 5843063 · 5843063
1 parent 6ee7d25
commit 5843063
Show file tree

Hide file tree

Showing 37 changed files with 1,190 additions and 453 deletions.
diff --git a/packages/bridge-ui/.gitignore b/packages/bridge-ui/.gitignore
@@ -22,4 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.env
+.env
+
+# vite
+vite.config.ts.timestamp-*.mjs
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/jest.config.js b/packages/bridge-ui/jest.config.js
@@ -39,8 +39,8 @@ export default {
     ],
     coverageThreshold: {
         global: {
-            statements: 98.45,
-            branches: 86,
+            statements: 98.36,
+            branches: 85,
             functions: 96,
             lines: 100,
         },

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",
@@ -56,11 +57,14 @@
     "vite-plugin-static-copy": "^0.12.0"
   },
   "dependencies": {
+    "@coinbase/wallet-sdk": "^3.6.3",
     "@ethersproject/experimental": "^5.7.0",
     "@lottiefiles/svelte-lottie-player": "^0.2.0",
     "@sveltestack/svelte-query": "^1.6.0",
-    "@wagmi/core": "^0.7.5",
+    "@wagmi/connectors": "^0.1.1",
+    "@wagmi/core": "^0.8.0",
     "axios": "^1.2.0",
+    "buffer": "^6.0.3",
     "ethers": "^5.7.1",
     "extend-expect": "link:@testing-library/jest-dom/extend-expect",
     "identicon.js": "^2.3.3",

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
@@ -4,6 +4,15 @@
   import Router from "svelte-spa-router";
   import { SvelteToast } from "@zerodevx/svelte-toast";
   import type { SvelteToastOptions } from "@zerodevx/svelte-toast";
+  import {
+    configureChains,
+    createClient,
+    InjectedConnector,
+  } from "@wagmi/core";
+  import { publicProvider } from "@wagmi/core/providers/public";
+  import { jsonRpcProvider } from "@wagmi/core/providers/jsonRpc";
+  import { CoinbaseWalletConnector } from "@wagmi/core/connectors/coinbaseWallet";
+  import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect";
 
   import Home from "./pages/home/Home.svelte";
   import { setupI18n } from "./i18n";
@@ -19,9 +28,16 @@
   import Navbar from "./components/Navbar.svelte";
   import { signer } from "./store/signer";
   import type { Transactioner } from "./domain/transactions";
+  import { wagmiClient } from "./store/wagmi";
 
   setupI18n({ withLocale: "en" });
-  import { chains, CHAIN_MAINNET, CHAIN_TKO } from "./domain/chain";
+  import {
+    chains,
+    CHAIN_MAINNET,
+    CHAIN_TKO,
+    mainnet,
+    taiko,
+  } from "./domain/chain";
   import SwitchEthereumChainModal from "./components/modals/SwitchEthereumChainModal.svelte";
   import { ProofService } from "./proof/service";
   import { ethers } from "ethers";
@@ -45,6 +61,44 @@
     CHAIN_TKO.id,
     new ethers.providers.JsonRpcProvider(import.meta.env.VITE_L2_RPC_URL)
   );
+  providers.set(providerMap);
+
+  const {
+    chains: wagmiChains,
+    provider,
+    webSocketProvider,
+  } = configureChains(
+    [mainnet, taiko],
+    [
+      publicProvider(),
+      jsonRpcProvider({
+        rpc: (chain) => ({
+          http: providerMap.get(chain.id).connection.url,
+        }),
+      }),
+    ]
+  );
+
+  $wagmiClient = createClient({
+    provider,
+    connectors: [
+      new InjectedConnector({
+        chains: wagmiChains,
+      }),
+      new CoinbaseWalletConnector({
+        chains: wagmiChains,
+        options: {
+          appName: "Taiko Bridge",
+        },
+      }),
+      new WalletConnectConnector({
+        chains: wagmiChains,
+        options: {
+          qrcode: true,
+        },
+      }),
+    ],
+  });
 
   providers.set(providerMap);
 
@@ -147,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">
@@ -165,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
@@ -5,13 +5,11 @@
   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";
@@ -89,7 +87,7 @@
   </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 +114,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,17 +1,16 @@
 <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 { switchEthereumChain } from "../utils/switchEthereumChain";
-  import { ethereum } from "../store/ethereum";
   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";
   const changeChain = async (chain: Chain) => {
-    await switchEthereumChain($ethereum, chain);
+    await switchNetwork({
+      chainId: chain.id,
+    });
     const provider = new ethers.providers.Web3Provider(window.ethereum);
     await provider.send("eth_requestAccounts", []);
 
@@ -49,7 +48,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>
@@ -61,7 +59,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,23 @@
 <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">
+    <a href="./" class="btn btn-ghost normal-case text-xl">
+      <TaikoLogo width={120} />
+    </a>
   </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,16 +2,14 @@
   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";
   import { signer } from "../store/signer";
-  import { pendingTransactions, transactions } from "../store/transactions";
+  import { pendingTransactions } from "../store/transactions";
   import { errorToast, successToast } from "../utils/toast";
   import { _ } from "svelte-i18n";
-  import { switchEthereumChain } from "../utils/switchEthereumChain";
-  import { ethereum } from "../store/ethereum";
   import {
     fromChain as fromChainStore,
     toChain as toChainStore,
@@ -22,6 +20,7 @@
   import { LottiePlayer } from "@lottiefiles/svelte-lottie-player";
   import HeaderSync from "../constants/abi/HeaderSync";
   import { providers } from "../store/providers";
+  import { fetchSigner, switchNetwork } from "@wagmi/core";
 
   export let transaction: BridgeTransaction;
 
@@ -36,7 +35,9 @@
   async function claim(bridgeTx: BridgeTransaction) {
     if (fromChain.id !== bridgeTx.message.destChainId.toNumber()) {
       const chain = chains[bridgeTx.message.destChainId.toNumber()];
-      await switchEthereumChain($ethereum, chain);
+      await switchNetwork({
+        chainId: chain.id,
+      });
       const provider = new ethers.providers.Web3Provider(window.ethereum);
       await provider.send("eth_requestAccounts", []);
 
@@ -46,7 +47,8 @@
       } else {
         toChainStore.set(CHAIN_MAINNET);
       }
-      signer.set(provider.getSigner());
+      const wagmiSigner = await fetchSigner();
+      signer.set(wagmiSigner);
     }
 
     try {
@@ -77,7 +79,7 @@
   async function isProcessable() {
     if (!transaction.receipt) return false;
     if (!transaction.message) return false;
-    if (transaction.status === MessageStatus.Done) return true;
+    if (transaction.status !== MessageStatus.New) return true;
 
     const contract = new Contract(
       chains[transaction.message.destChainId.toNumber()].headerSyncAddress,
@@ -89,8 +91,7 @@
     const srcBlock = await $providers
       .get(chains[transaction.message.srcChainId.toNumber()].id)
       .getBlock(latestSyncedHeader);
-
-    return transaction.receipt.blockNumber <= srcBlock.number;
+    return transaction.receipt.blockNumber >= srcBlock.number;
   }
 </script>
 
@@ -119,7 +120,7 @@
           "_blank"
         )}
     >
-      <TransactionsIcon />
+      <ArrowTopRightOnSquare />
     </span>
   </td>