taikoxyz · dionysuzx · Dec 22, 2022 · Dec 20, 2022 · Dec 20, 2022 · Dec 20, 2022
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
@@ -166,6 +166,8 @@
 
           const interval = setInterval(async () => {
             tx.interval = interval;
+            if (!tx.signal) return;
+
             const contract = new ethers.Contract(
               chains[tx.toChainId].bridgeAddress,
               BridgeABI,
@@ -201,16 +203,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 +218,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 = "";
@@ -57,7 +55,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
@@ -83,17 +81,16 @@
           alt="avatar"
         />
 
-        <span class="hidden md:inline-block">
+        <span class="hidden md:inline-block mr-2">
           {addressSubsection(address)}
         </span>
       {/if}
     </span>
-
-    <ChevDown />
+    <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}
@@ -106,7 +103,7 @@
       {/if}
     </div>
     <div class="divider" />
-    <div class="flex hover:bg-dark-5 items-center py-2 px-2">
+    <div class="flex hover:bg-dark-5 items-center py-2 px-4">
       <img
         width="24"
         height="24"
@@ -117,17 +114,17 @@
       {addressSubsection(address)}
     </div>
     <div
-      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-2"
+      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4"
       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"
+      class="cursor-pointer flex hover:bg-dark-5 items-center py-2 px-4"
       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,
@@ -26,8 +24,8 @@
   };
 </script>
 
-<div class="dropdown dropdown-bottom dropdown-end mr-4">
-  <label tabindex="0" class="btn btn-md md:btn-wide justify-around">
+<div class="dropdown dropdown-end mr-4">
+  <label tabindex="0" class="btn btn-md justify-around md:w-[194px]">
     <span class="font-normal flex-1 text-left mr-2">
       {#if $fromChain}
         <svelte:component this={$fromChain.icon} />
@@ -36,12 +34,11 @@
         <span class="ml-2 hidden md:inline-block">Invalid Chain</span>
       {/if}
     </span>
-
-    <ChevDown />
+    <ChevronDown />
   </label>
   <ul
     tabindex="0"
-    class="dropdown-content flex menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
+    class="dropdown-content flex my-2 menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
   >
     <li>
       <button
@@ -52,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>
@@ -64,14 +60,7 @@
       >
         <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>
 </div>
-
-<style>
-  .menu li > span {
-    padding-left: 0px;
-  }
-</style>
diff --git a/packages/bridge-ui/src/components/ERC20Faucet.svelte b/packages/bridge-ui/src/components/ERC20Faucet.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { ethers } from "ethers";
+  import { HORSE } from "../domain/token";
+  import { pendingTransactions } from "../store/transactions";
+  import { signer } from "../store/signer";
+  import { errorToast, successToast } from "../utils/toast";
+  import { _ } from "svelte-i18n";
+  import { Funnel } from "svelte-heros-v2";
+  import MintableERC20 from "../constants/abi/MintableERC20";
+  import { fromChain } from "../store/chain";
+  import { switchNetwork } from "@wagmi/core";
+  import { CHAIN_MAINNET } from "../domain/chain";
+  import Tooltip from "./Tooltip.svelte";
+  import TooltipModal from "./modals/TooltipModal.svelte";
+  import { token } from "../store/token";
+
+  export let onMint: () => Promise<void>;
+
+  let tooltipOpen: boolean = false;
+
+  async function mint() {
+    try {
+      if ($fromChain.id !== HORSE.addresses[0].chainId) {
+        await switchNetwork({
+          chainId: CHAIN_MAINNET.id,
+        });
+      }
+      const contract = new ethers.Contract(
+        HORSE.addresses[0].address,
+        MintableERC20,
+        $signer
+      );
+
+      const tx = await contract.mint(ethers.utils.parseEther("1000"));
+      pendingTransactions.update((store) => {
+        store.push(tx);
+        return store;
+      });
+
+      successToast($_("toast.transactionSent"));
+      await $signer.provider.waitForTransaction(tx.hash, 1);
+
+      await onMint();
+    } catch (e) {
+      console.log(e);
+      errorToast($_("toast.errorSendingTransaction"));
+    }
+  }
+</script>
+
+<button class="btn" on:click={mint}>
+  <Funnel class="mr-2" /> Faucet
+</button>
+<Tooltip />
+
+<TooltipModal title="{$token.symbol} Faucet" bind:isOpen={tooltipOpen}>
+  <span slot="body">
+    <p class="text-left">
+      You can request 1000 {$token.symbol}. {$token.symbol} is only available to
+      be minted on Ethereum A1. If you are on Taiko A1, your network will be changed
+      first. You must have a small amount of ether in your Ethereum A1 wallet to
+      send the transaction.
+    </p>
+  </span>
+</TooltipModal>
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/TaikoBanner.svelte b/packages/bridge-ui/src/components/TaikoBanner.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div
-  class="taiko-banner bg-cover bg-center bg-no-repeat h-36 rounded-lg py-4 flex flex-col items-center justify-center md:w-[450px]"
+  class="taiko-banner bg-cover bg-center bg-no-repeat h-36 rounded-lg py-4 flex flex-col items-center justify-center"
 >
   <SelectChain />
 </div>
diff --git a/packages/bridge-ui/src/components/Tooltip.svelte b/packages/bridge-ui/src/components/Tooltip.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { QuestionMarkCircle } from "svelte-heros-v2";
+
+  export let isOpen: boolean = false;
+</script>
+
+<QuestionMarkCircle
+  on:click={() => (isOpen = true)}
+  size="18"
+  variation="outline"
+/>