feat(bridge): single field bridge form

taikoxyz · Dec 2, 2022 · bbf404f · bbf404f
1 parent 06bed43
commit bbf404f
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 52 deletions.
diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css
@@ -33,15 +33,14 @@
 }
 
 .form-control .input-group :first-child {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0;
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0;
+  border-radius: 0.5rem;
 }
 
 .form-control .input-group :last-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0.5rem;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0.5rem;
+  border-radius: 0.5rem;
 }
+
+.taiko-banner {
+  background-image: url('assets/taiko-banner.png');
+  background-repeat: no-repeat;
+}
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/TaikoBanner.svelte b/packages/bridge-ui/src/components/TaikoBanner.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import SelectChain from "./form/SelectChain.svelte";
+</script>
+
+<div class="taiko-banner bg-cover bg-center bg-no-repeat w-full h-36 rounded-lg py-4 flex flex-col items-center justify-center">
+  <h1 class="text-2xl font-bold">
+    {$_("home.title")}
+  </h1>
+  <SelectChain />
+</div>
diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <div class="dropdown dropdown-bottom">
-  <button tabindex="0" class="btn btn-token-select m-1">
+  <button tabindex="0" class="btn btn-active">
     <svelte:component this={$token.logoComponent} />
     <span class="px-2 font-medium">{$token.symbol.toUpperCase()}</span>
     <ChevDown />
@@ -22,10 +22,10 @@
     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-9 py-3">
-        <button on:click={async () => await select(t)} class="flex items-center">
-          <svelte:component this={t.logoComponent} height={16} width={16} />
-          <span class="text-sm font-medium mx-2">{t.symbol.toUpperCase()}</span>
+      <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">
+          <svelte:component this={t.logoComponent} height={22} width={22} />
+          <span class="text-sm font-medium bg-base-100 px-2">{t.symbol.toUpperCase()}</span>
         </button>
       </li>
     {/each}

diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -9,9 +9,25 @@
   import ArrowDown from "../icons/ArrowDown.svelte";
   import { CHAIN_MAINNET, CHAIN_TKO } from "../../domain/chain";
   import ProcessingFee from "./ProcessingFee.svelte";
+  import { ETH } from "../../domain/token";
+  import SelectToken from "../buttons/SelectToken.svelte";
 
   let amount: string;
   let btnDisabled: boolean = true;
+  let tokenBalance: string;
+
+  $: getUserBalance($signer, $token);
+  
+  async function getUserBalance(signer, token) {
+    if(signer && token) {
+      if(token.symbol == ETH.symbol) {
+        const userBalance = await signer.getBalance('latest');
+        tokenBalance = ethers.utils.formatEther(userBalance);
+      } else {
+        // TODO: read ERC20 balance from contract
+      }
+    }
+  }
 
   $: isBtnDisabled($signer, amount)
     .then((d) => (btnDisabled = d))
@@ -52,53 +68,31 @@
     fromChain.update(val => val === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET);
     toChain.update(val => val === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET);
   }
+
+  function useFullAmount() {
+    amount = tokenBalance;
+  }
 </script>
 
-<div class="form-control w-full">
+<div class="form-control w-full my-8">
   <label class="label" for="amount">
-    <span class="label-text">{$_("home.from")}</span>
+    <span class="label-text">{$_("bridgeForm.fieldLabel")}</span>
+    {#if $signer && tokenBalance } <button class="label-text" on:click={useFullAmount}>{$_("bridgeForm.maxLabel")} {tokenBalance} ETH</button>{/if}
   </label>
-  <label class="input-group relative rounded-lg overflow-hidden">
-    <span class="bg-transparent border-transparent absolute top-0 left-0 h-full z-0">{$fromChain.name}</span>
+  <label class="input-group relative rounded-lg bg-dark-4 justify-between items-center pr-4">
     <input
     type="number"
     step="0.01"
     placeholder="0.01"
     min="0"
     bind:value={amount}
-    class="input input-primary focus:input-accent bg-dark-4 input-lg rounded-lg! w-full text-right pl-20 pr-12 z-1"
+    class="input input-primary bg-dark-4 input-lg"
     name="amount"
     />
-    <span class="pl-0 bg-transparent border-transparent absolute top-0 right-0 h-full">ETH</span>
+    <SelectToken />
   </label>
 </div>
 
-<fieldset class="border border-b-0 border-dark-4 mt-10 mb-7">
-  <legend class="h-0 flex items-center">
-    <button class="btn btn-square btn-sm" on:click={toggleChains}>
-      <ArrowDown />
-    </button>
-  </legend>
-</fieldset>
-
-<div class="form-control w-full">
-  <label class="label" for="amount-to">
-    <span class="label-text">{$_("home.to")}</span>
-  </label>
-  <label class="input-group relative rounded-lg overflow-hidden">
-    <span class="bg-transparent border-transparent absolute top-0 left-0 h-full z-0">{$toChain.name}</span>
-    <input
-    type="number"
-    step="0.01"
-    placeholder="0.01"
-    min="0"
-    bind:value={amount}
-    class="input input-primary focus:input-accent bg-dark-4 input-lg rounded-lg! w-full text-right pl-20 pr-12 z-1"
-    name="amount-to"
-    />
-    <span class="pl-0 bg-transparent border-transparent absolute top-0 right-0 h-full">ETH</span>
-  </label>
-</div>
 <ProcessingFee />
 
 <button

diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte
@@ -0,0 +1 @@
+<div></div>
diff --git a/packages/bridge-ui/src/i18n.js b/packages/bridge-ui/src/i18n.js
@@ -7,10 +7,14 @@ function setupI18n({ withLocale: _locale } = { withLocale: "en" }) {
             home: {
                 title: "Taiko Bridge",
                 selectToken: "Select Token",
-                from: "From",
                 to: "To",
                 bridge: "Bridge"
             },
+            "bridgeForm": {
+                fieldLabel: "Bridge Token",
+                maxLabel: "Max:",
+                processingFeeLabel: "Processing Fee",
+            },
             nav: {
                 connect: "Connect Wallet"
             },

diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
-  import SelectToken from "../../components/buttons/SelectToken.svelte";
   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]">
-      <h1 class="text-2xl font-bold">
-        {$_("home.title")}
-      </h1>
-      <div class="mt-8 flex items-center justify-center">
+      <TaikoBanner />
+      <!-- <div class="mt-8 flex items-center justify-center px-2">
         <span class="font-bold mr-2">{$_("home.selectToken")}</span>
         <SelectToken />
+      </div> -->
+      <div class="px-4">
+        <BridgeForm />
       </div>
-      <BridgeForm />
     </div>
   </div>
 </div>