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

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,7 +22,6 @@
   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";
 
   const providerMap: Map<number, ethers.providers.JsonRpcProvider> = new Map<
@@ -68,6 +68,12 @@
     });
   });
 
+  const toastOptions: SvelteToastOptions = {
+    dismissable: false,
+    duration: 4000,
+    pausable: false,
+  };
+
   const routes = {
     "/": wrap({
       component: Home,
@@ -82,7 +88,7 @@
     <Navbar {transactioner} />
     <Router {routes} />
   </main>
-  <SvelteToast />
+  <SvelteToast options={toastOptions} />
 
   <SwitchEthereumChainModal />
 </QueryProvider>
@@ -96,4 +102,15 @@
     margin: 0;
     font-family: "Inter", sans-serif;
   }
+
+  :root {
+    --toastBackground: #008000;
+    --toastColor: #e3e3e3;
+    --toastHeight: 50px;
+    --toastContainerTop: auto;
+    --toastContainerRight: auto;
+    --toastContainerBottom: 2rem;
+    --toastContainerLeft: auto;
+    --toastBorderRadius: 0.9rem;
+  }
 </style>

packages/bridge-ui/src/components/AddressDropdown.svelte

@@ -41,8 +41,8 @@
   }
 </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"

packages/bridge-ui/src/components/ChainDropdown.svelte

@@ -19,14 +19,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>
 
@@ -44,8 +44,8 @@
         }}
       >
         <svelte:component this={CHAIN_MAINNET.icon} height={24} />
-        <span class="pl-1.5 text-left flex-1">{CHAIN_MAINNET.name}</span>
-          <MetaMask />
+        <span class="pl-1.5 text-left flex-1 ">{CHAIN_MAINNET.name}</span>
+        <MetaMask />
       </button>
     </li>
     <li>
@@ -57,7 +57,7 @@
       >
         <svelte:component this={CHAIN_TKO.icon} height={24} />
         <span class="pl-1.5 text-left flex-1">{CHAIN_TKO.name}</span>
-          <MetaMask />
+        <MetaMask />
       </button>
     </li>
   </ul>

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>

packages/bridge-ui/src/components/buttons/Connect.svelte

@@ -52,6 +52,6 @@
   }
 </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
 >

packages/bridge-ui/src/components/buttons/SelectToken.svelte

@@ -20,9 +20,9 @@
 </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">

packages/bridge-ui/src/components/form/BridgeForm.svelte

@@ -21,12 +21,14 @@
   import { truncateString } from "../../utils/truncateString";
   import { pendingTransactions } from "../../store/transactions";
   import { ProcessingFeeMethod } from "../../domain/fee";
+  import Memo from "./Memo.svelte";
 
   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)
@@ -120,7 +124,7 @@
         toChainId: $toChain.id,
         bridgeAddress: $chainIdToBridgeAddress.get($fromChain.id),
         processingFeeInWei: getProcessingFee(),
-        memo: "memo",
+        memo: memo,
       });
 
       pendingTransactions.update((store) => {
@@ -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}

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>

packages/bridge-ui/src/components/form/ProcessingFee.svelte

@@ -23,7 +23,7 @@
       <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
       >

packages/bridge-ui/src/components/icons/Logo.svelte

@@ -1,28 +1,27 @@
 <a href="/">
   <svg
     width="166"
-    height="60"
+    height="45"
     viewBox="0 0 161 43"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    >
+  >
     <path d="M86.2853 1.61096H80.9694V41.2532H86.2853V1.61096Z" fill="white" />
     <path
-    d="M118.526 41.2531L105.281 21.4477L98.8707 28.2772V41.2531H93.5548V1.61096H98.8707V21.552L116.851 1.61096H122.648L122.79 1.90291L108.623 17.6524L124.293 40.8674L124.11 41.2531H118.526Z"
-    fill="white"
+      d="M118.526 41.2531L105.281 21.4477L98.8707 28.2772V41.2531H93.5548V1.61096H98.8707V21.552L116.851 1.61096H122.648L122.79 1.90291L108.623 17.6524L124.293 40.8674L124.11 41.2531H118.526Z"
+      fill="white"
     />
     <path
-    d="M137.26 41.2531C131.222 41.2531 128.404 38.4536 128.404 32.4374V10.4267C128.404 4.41052 131.222 1.61096 137.26 1.61096H151.176C157.215 1.61096 160.027 4.41052 160.027 10.4267V32.4374C160.027 38.4536 157.215 41.2531 151.176 41.2531H137.26ZM137.444 6.25604C135.082 6.25604 133.725 7.58544 133.725 9.90538V32.9796C133.725 35.2995 135.082 36.6289 137.444 36.6289H150.993C153.355 36.6289 154.711 35.3047 154.711 32.9796V9.90538C154.711 7.59066 153.355 6.25604 150.993 6.25604H137.444Z"
-    fill="white"
+      d="M137.26 41.2531C131.222 41.2531 128.404 38.4536 128.404 32.4374V10.4267C128.404 4.41052 131.222 1.61096 137.26 1.61096H151.176C157.215 1.61096 160.027 4.41052 160.027 10.4267V32.4374C160.027 38.4536 157.215 41.2531 151.176 41.2531H137.26ZM137.444 6.25604C135.082 6.25604 133.725 7.58544 133.725 9.90538V32.9796C133.725 35.2995 135.082 36.6289 137.444 36.6289H150.993C153.355 36.6289 154.711 35.3047 154.711 32.9796V9.90538C154.711 7.59066 153.355 6.25604 150.993 6.25604H137.444Z"
+      fill="white"
     />
     <path
-    d="M15.0364 41.2531V6.23519H1.31457L0 2.02803L0.277579 1.61096H35.085L35.4254 2.11144L34.1318 6.23519H20.4152V41.2531H15.0364Z"
-    fill="white"
+      d="M15.0364 41.2531V6.23519H1.31457L0 2.02803L0.277579 1.61096H35.085L35.4254 2.11144L34.1318 6.23519H20.4152V41.2531H15.0364Z"
+      fill="white"
     />
     <path
-    d="M75.5907 39.8038L62.5444 21.6041L53.1329 1.04267C52.9903 0.731759 52.761 0.468185 52.4723 0.283329C52.1835 0.0984738 51.8474 0.000127105 51.5041 1.99589e-07V1.99589e-07C51.1614 -0.000161663 50.8259 0.0981305 50.5379 0.28308C50.2499 0.468029 50.0216 0.731776 49.8805 1.04267L40.5161 21.4998L27.4228 39.7986C27.2327 40.065 27.1198 40.3784 27.0966 40.7043C27.0733 41.0303 27.1404 41.3564 27.2907 41.6469C27.441 41.9375 27.6686 42.1813 27.9486 42.3518C28.2287 42.5224 28.5504 42.613 28.8787 42.6138H29.0516L51.4831 40.4607L74.0037 42.619H74.1713C74.5001 42.6191 74.8225 42.5292 75.1033 42.3591C75.3842 42.189 75.6125 41.9452 75.7634 41.6545C75.9143 41.3637 75.9819 41.0373 75.9588 40.7109C75.9358 40.3844 75.8229 40.0706 75.6326 39.8038H75.5907ZM51.5041 5.77637L58.1346 20.2851H44.8631L51.5041 5.77637ZM58.6059 23.7207L51.4936 35.972L44.3865 23.7207H58.6059ZM32.3302 38.8393L41.6369 25.8529L48.2779 37.3223L32.3302 38.8393ZM54.7093 37.317L61.3555 25.8477L70.6571 38.8289L54.7093 37.317Z"
-    fill="#FC0FC0"
+      d="M75.5907 39.8038L62.5444 21.6041L53.1329 1.04267C52.9903 0.731759 52.761 0.468185 52.4723 0.283329C52.1835 0.0984738 51.8474 0.000127105 51.5041 1.99589e-07V1.99589e-07C51.1614 -0.000161663 50.8259 0.0981305 50.5379 0.28308C50.2499 0.468029 50.0216 0.731776 49.8805 1.04267L40.5161 21.4998L27.4228 39.7986C27.2327 40.065 27.1198 40.3784 27.0966 40.7043C27.0733 41.0303 27.1404 41.3564 27.2907 41.6469C27.441 41.9375 27.6686 42.1813 27.9486 42.3518C28.2287 42.5224 28.5504 42.613 28.8787 42.6138H29.0516L51.4831 40.4607L74.0037 42.619H74.1713C74.5001 42.6191 74.8225 42.5292 75.1033 42.3591C75.3842 42.189 75.6125 41.9452 75.7634 41.6545C75.9143 41.3637 75.9819 41.0373 75.9588 40.7109C75.9358 40.3844 75.8229 40.0706 75.6326 39.8038H75.5907ZM51.5041 5.77637L58.1346 20.2851H44.8631L51.5041 5.77637ZM58.6059 23.7207L51.4936 35.972L44.3865 23.7207H58.6059ZM32.3302 38.8393L41.6369 25.8529L48.2779 37.3223L32.3302 38.8393ZM54.7093 37.317L61.3555 25.8477L70.6571 38.8289L54.7093 37.317Z"
+      fill="#FC0FC0"
     />
   </svg>
 </a>
-

packages/bridge-ui/src/domain/fee.ts

@@ -21,14 +21,14 @@ const PROCESSING_FEE_META: Map<ProcessingFeeMethod, ProcessingFeeDetails> =
     [
       ProcessingFeeMethod.CUSTOM,
       {
-        displayText: "Custom Amount",
+        displayText: "Custom",
         timeToConfirm: 15 * 60 * 1000,
       },
     ],
     [
       ProcessingFeeMethod.NONE,
       {
-        displayText: "No Fees",
+        displayText: "None",
         timeToConfirm: 15 * 60 * 1000,
       },
     ],

packages/bridge-ui/src/pages/home/Home.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
 
-  import SelectToken from "../../components/buttons/SelectToken.svelte";
   import BridgeForm from "../../components/form/BridgeForm.svelte";
   import TaikoBanner from "../../components/TaikoBanner.svelte";
 </script>
 
-<div class="hero bg-base-100 mt-12">
-  <div class="hero-content text-center">
-    <div class="max-w-lg w-[460px]">
+<div class="hero bg-base-100 w-full">
+  <div class="hero-content text-center w-full">
+    <div class="">
       <TaikoBanner />
       <!-- <div class="mt-8 flex items-center justify-center px-2">
         <span class="font-bold mr-2">{$_("home.selectToken")}</span>