feat(bridge-ui): responsive design, memo, style updates, navbar chang…

…es (#396) * eth button * navbar * nav + width * nav * navbar top margin * scacle * viewport * reactivity for input and btns * memo * svelte toast * memo changes * toast tests
taikoxyz · Dec 9, 2022 · 742ddcb · 742ddcb
1 parent 2d45b9c
commit 742ddcb
Show file tree

Hide file tree

Showing 18 changed files with 212 additions and 66 deletions.
diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
@@ -3,6 +3,7 @@
   import QueryProvider from "./components/providers/QueryProvider.svelte";
   import Router from "svelte-spa-router";
   import { SvelteToast, toast } from "@zerodevx/svelte-toast";
+  import type { SvelteToastOptions } from "@zerodevx/svelte-toast";
 
   import Home from "./pages/home/Home.svelte";
   import { setupI18n } from "./i18n";
@@ -21,8 +22,8 @@
   import SwitchEthereumChainModal from "./components/modals/SwitchEthereumChainModal.svelte";
   import { ProofService } from "./proof/service";
   import { ethers } from "ethers";
-  import { number } from "svelte-i18n";
   import type { Prover } from "./domain/proof";
+  import { successToast } from "./utils/toast";
 
   const providerMap: Map<number, ethers.providers.JsonRpcProvider> = new Map<
     number,
@@ -61,13 +62,19 @@
   pendingTransactions.subscribe((store) => {
     store.forEach(async (tx) => {
       await $signer.provider.waitForTransaction(tx.hash, 3);
-      toast.push("Transaction completed!");
+      successToast("Transaction completed!");
       const s = store;
       s.pop();
       pendingTransactions.set(s);
     });
   });
 
+  const toastOptions: SvelteToastOptions = {
+    dismissable: false,
+    duration: 4000,
+    pausable: false,
+  };
+
   const routes = {
     "/": wrap({
       component: Home,
@@ -82,7 +89,7 @@
     <Navbar {transactioner} />
     <Router {routes} />
   </main>
-  <SvelteToast />
+  <SvelteToast options={toastOptions} />
 
   <SwitchEthereumChainModal />
 </QueryProvider>

diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { _ } from "svelte-i18n";
-  import { toast } from "@zerodevx/svelte-toast";
 
   import { addressSubsection } from "../utils/addressSubsection";
   import { signer } from "../store/signer";
@@ -11,6 +10,7 @@
   import type { BridgeTransaction } from "../domain/transactions";
   import { LottiePlayer } from "@lottiefiles/svelte-lottie-player";
   import type { Signer } from "ethers";
+  import { errorToast } from "../utils/toast";
 
   export let transactions: BridgeTransaction[] = [];
 
@@ -36,13 +36,13 @@
       signer.set(null);
     } catch (e) {
       console.error(e);
-      toast.push($_("toast.errorDisconnecting"));
+      errorToast($_("toast.errorDisconnecting"));
     }
   }
 </script>
 
-<div class="dropdown dropdown-bottom">
-  <button tabindex="0" class="btn btn-wide justify-around">
+<div class="dropdown dropdown-bottom dropdown-end">
+  <button tabindex="0" class="btn btn-md md:btn-wide justify-around">
     <span class="font-normal flex-1 text-left">
       {#if $pendingTransactions && $pendingTransactions.length}
         {$pendingTransactions.length} Pending
@@ -68,7 +68,9 @@
           alt="avatar"
         />
 
-        {addressSubsection(address)}
+        <span class="hidden md:inline-block">
+          {addressSubsection(address)}
+        </span>
       {/if}
     </span>
 
@@ -78,6 +80,9 @@
     tabindex="0"
     class="dropdown-content menu p-2 shadow bg-dark-3 rounded-box w-[194px]"
   >
+    <li class="inline-block md:hidden">
+      <span>{addressSubsection(address)}</span>
+    </li>
     <li>
       <span
         class="cursor-pointer"

diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -25,14 +25,14 @@
   };
 </script>
 
-<div class="dropdown dropdown-bottom mr-4">
-  <button tabindex="0" class="btn btn-wide justify-around">
+<div class="dropdown dropdown-bottom dropdown-end mr-4">
+  <button tabindex="0" class="btn btn-md md:btn-wide justify-around">
     <span class="font-normal flex-1 text-left">
       {#if $fromChain}
         <svelte:component this={$fromChain.icon} />
-        <span class="ml-2">{$fromChain.name}</span>
+        <span class="ml-2 hidden md:inline-block">{$fromChain.name}</span>
       {:else}
-        <span class="ml-2">Invalid Chain</span>
+        <span class="ml-2 hidden md:inline-block">Invalid Chain</span>
       {/if}
     </span>
 

diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte
@@ -26,7 +26,7 @@
   }
 </script>
 
-<nav class="navbar h-[125px] py-8 px-32">
+<nav class="navbar mb-4 md:h-[125px] pt-4 md:pt-0 md:px-4">
   <div class="navbar-end justify-start">
     <Logo />
   </div>

diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte
@@ -2,11 +2,11 @@
   import { BigNumber, ethers } from "ethers";
   import { signer } from "../../store/signer";
   import { _ } from "svelte-i18n";
-  import { toast } from "@zerodevx/svelte-toast";
   import { CHAIN_MAINNET, CHAIN_TKO } from "../..//domain/chain";
   import { fromChain, toChain } from "../../store/chain";
   import { ethereum } from "../../store/ethereum";
   import { isSwitchEthereumChainModalOpen } from "../../store/modal";
+  import { errorToast, successToast } from "../../utils/toast";
 
   async function connect() {
     try {
@@ -44,14 +44,14 @@
         await getAccounts();
       });
 
-      toast.push("Connected");
+      successToast("Connected");
     } catch (e) {
       console.log(e);
-      toast.push("Error connecting to wallet");
+      errorToast("Error connecting to wallet");
     }
   }
 </script>
 
-<button class="btn btn-wide" on:click={async () => await connect()}
+<button class="btn btn-md md: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
@@ -3,9 +3,9 @@
   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";
+  import { successToast } from "../../utils/toast";
 
   async function select(t: Token) {
     if (t === $token) return;
@@ -15,14 +15,14 @@
     } else {
       bridgeType.set(BridgeType.ERC20);
     }
-    toast.push(`Token changed to ${t.symbol.toUpperCase()}`);
+    successToast(`Token changed to ${t.symbol.toUpperCase()}`);
   }
 </script>
 
 <div class="dropdown dropdown-bottom">
-  <button tabindex="0" class="btn btn-active left-btn">
-    <svelte:component this={$token.logoComponent} />
-    <span class="px-2 font-medium">{$token.symbol.toUpperCase()}</span>
+  <button tabindex="0" class="flex items-center justify-center">
+    <svelte:component this={$token.logoComponent} class="inline-block" />
+    <p class="px-2 text-sm">{$token.symbol.toUpperCase()}</p>
     <ChevDown />
   </button>
   <ul class="dropdown-content menu py-2 shadow-xl bg-base-100 rounded-box">

diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -10,7 +10,6 @@
   } from "../../store/bridge";
   import { signer } from "../../store/signer";
   import { BigNumber, ethers, Signer } from "ethers";
-  import { toast } from "@zerodevx/svelte-toast";
   import ProcessingFee from "./ProcessingFee.svelte";
   import { ETH } from "../../domain/token";
   import SelectToken from "../buttons/SelectToken.svelte";
@@ -21,12 +20,15 @@
   import { truncateString } from "../../utils/truncateString";
   import { pendingTransactions } from "../../store/transactions";
   import { ProcessingFeeMethod } from "../../domain/fee";
+  import Memo from "./Memo.svelte";
+  import { errorToast, successToast } from "../../utils/toast";
 
   let amount: string;
   let requiresAllowance: boolean = true;
   let btnDisabled: boolean = true;
   let tokenBalance: string;
   let customFee: string = "0.01";
+  let memo: string = "";
 
   $: getUserBalance($signer, $token);
 
@@ -56,6 +58,8 @@
     fromChain: Chain,
     signer: Signer
   ) {
+    if (!fromChain || !amt || !token || !bridgeType || !signer) return true;
+
     const allowance = await $activeBridge.RequiresAllowance({
       amountInWei: amt
         ? ethers.utils.parseUnits(amt, token.decimals)
@@ -101,10 +105,10 @@
         return store;
       });
       requiresAllowance = false;
-      toast.push($_("toast.transactionSent"));
+      successToast($_("toast.transactionSent"));
     } catch (e) {
       console.log(e);
-      toast.push($_("toast.errorSendingTransaction"));
+      errorToast($_("toast.errorSendingTransaction"));
     }
   }
 
@@ -120,18 +124,18 @@
         toChainId: $toChain.id,
         bridgeAddress: $chainIdToBridgeAddress.get($fromChain.id),
         processingFeeInWei: getProcessingFee(),
-        memo: "memo",
+        memo: memo,
       });
 
       pendingTransactions.update((store) => {
         store.push(tx);
         return store;
       });
 
-      toast.push($_("toast.transactionSent"));
+      successToast($_("toast.transactionSent"));
     } catch (e) {
       console.log(e);
-      toast.push($_("toast.errorSendingTransaction"));
+      errorToast($_("toast.errorSendingTransaction"));
     }
   }
 
@@ -158,7 +162,7 @@
   }
 </script>
 
-<div class="form-control w-full my-8">
+<div class="form-control my-4 md:my-8">
   <label class="label" for="amount">
     <span class="label-text">{$_("bridgeForm.fieldLabel")}</span>
     {#if $signer && tokenBalance}
@@ -178,7 +182,7 @@
       placeholder="0.01"
       min="0"
       on:input={updateAmount}
-      class="input input-primary bg-dark-4 input-lg flex-1"
+      class="input input-primary bg-dark-4 input-md md:input-lg w-full"
       name="amount"
     />
     <SelectToken />
@@ -187,12 +191,22 @@
 
 <ProcessingFee bind:customFee />
 
+<Memo bind:memo />
+
 {#if !requiresAllowance}
-  <button class="btn btn-accent" on:click={bridge} disabled={btnDisabled}>
+  <button
+    class="btn btn-accent w-full"
+    on:click={bridge}
+    disabled={btnDisabled}
+  >
     {$_("home.bridge")}
   </button>
 {:else}
-  <button class="btn btn-accent" on:click={approve} disabled={btnDisabled}>
+  <button
+    class="btn btn-accent w-full"
+    on:click={approve}
+    disabled={btnDisabled}
+  >
     {$_("home.approve")}
   </button>
 {/if}
diff --git a/packages/bridge-ui/src/components/form/Memo.svelte b/packages/bridge-ui/src/components/form/Memo.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let memo: string = "";
+  let showMemo: boolean = true;
+
+  function onChange(e: any) {
+    showMemo = e.target.checked;
+  }
+</script>
+
+<div class="form-control mb-2">
+  <label class="label cursor-pointer">
+    <span class="label-text">Memo</span>
+    <input
+      type="checkbox"
+      class="toggle rounded-full"
+      on:change={onChange}
+      bind:checked={showMemo}
+    />
+  </label>
+
+  {#if showMemo}
+    <input
+      type="text"
+      placeholder="Memo..."
+      class="input input-primary bg-dark-4 input-md md:input-lg w-full"
+      name="memo"
+      bind:value={memo}
+    />
+  {/if}
+</div>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee.svelte
@@ -18,12 +18,12 @@
   <h4 class="text-sm font-medium text-left mb-4">
     {$_("bridgeForm.processingFeeLabel")}
   </h4>
-  <div class="flex items-center justify-between">
+  <div class="flex items-center justify-around px-8 py-4">
     {#each Array.from(PROCESSING_FEE_META) as fee}
       <button
         class="{$processingFee === fee[0]
           ? 'border-accent hover:border-accent'
-          : ''} btn btn-md"
+          : ''} btn btn-sm md:btn-md"
         on:click={() => selectProcessingFee(fee[0])}
         >{fee[1].displayText}</button
       >

diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte
@@ -6,20 +6,24 @@
   import { signer } from "../../store/signer";
   import { switchEthereumChain } from "../../utils/switchEthereumChain";
   import { ethers } from "ethers";
+  import { errorToast, successToast } from "../../utils/toast";
 
   const toggleChains = async () => {
-    const chain = $fromChain === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET;
-    await switchEthereumChain($ethereum, chain);
-    const provider = new ethers.providers.Web3Provider(window.ethereum);
-    await provider.send("eth_requestAccounts", []);
+    try {
+      const chain = $fromChain === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET;
+      await switchEthereumChain($ethereum, chain);
+      const provider = new ethers.providers.Web3Provider(window.ethereum);
+      await provider.send("eth_requestAccounts", []);
 
-    fromChain.set(chain);
-    if (chain === CHAIN_MAINNET) {
-      toChain.set(CHAIN_TKO);
-    } else {
-      toChain.set(CHAIN_MAINNET);
+      fromChain.set(chain);
+      toChain.set(chain === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET);
+
+      signer.set(provider.getSigner());
+      successToast("Successfully changed chain");
+    } catch (e) {
+      console.error(e);
+      errorToast("Error switching chain");
     }
-    signer.set(provider.getSigner());
   };
 </script>