From bbf404f79c006f8e58e15e3401d44adfe960fda4 Mon Sep 17 00:00:00 2001 From: Shadab Khan Date: Fri, 2 Dec 2022 20:44:47 +0530 Subject: [PATCH] feat(bridge): single field bridge form --- packages/bridge-ui/src/app.css | 15 +++-- .../bridge-ui/src/assets/taiko-banner.png | Bin 0 -> 12885 bytes .../src/components/TaikoBanner.svelte | 11 ++++ .../src/components/buttons/SelectToken.svelte | 10 +-- .../src/components/form/BridgeForm.svelte | 58 ++++++++---------- .../src/components/form/SelectChain.svelte | 1 + packages/bridge-ui/src/i18n.js | 6 +- packages/bridge-ui/src/pages/home/Home.svelte | 14 +++-- 8 files changed, 63 insertions(+), 52 deletions(-) create mode 100644 packages/bridge-ui/src/assets/taiko-banner.png create mode 100644 packages/bridge-ui/src/components/TaikoBanner.svelte create mode 100644 packages/bridge-ui/src/components/form/SelectChain.svelte diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css index f21980b2757..6c4b7d96a5a 100644 --- 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; +} \ No newline at end of file diff --git a/packages/bridge-ui/src/assets/taiko-banner.png b/packages/bridge-ui/src/assets/taiko-banner.png new file mode 100644 index 0000000000000000000000000000000000000000..e481528cbcc97732caf0451a2ed3408b6db56fa2 GIT binary patch literal 12885 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 literal 0 HcmV?d00001 diff --git a/packages/bridge-ui/src/components/TaikoBanner.svelte b/packages/bridge-ui/src/components/TaikoBanner.svelte new file mode 100644 index 00000000000..02d44c4f6f6 --- /dev/null +++ b/packages/bridge-ui/src/components/TaikoBanner.svelte @@ -0,0 +1,11 @@ + + +
+

+ {$_("home.title")} +

+ +
\ No newline at end of file diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte index a80a4ddce4b..d3ebf25132e 100644 --- a/packages/bridge-ui/src/components/buttons/SelectToken.svelte +++ b/packages/bridge-ui/src/components/buttons/SelectToken.svelte @@ -13,7 +13,7 @@
- {/each} diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte index 98b359f2d44..a629cceefde 100644 --- 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; + } -
+
-
-
- -
- -
- - -
\ No newline at end of file diff --git a/packages/bridge-ui/src/i18n.js b/packages/bridge-ui/src/i18n.js index 8adccadf3c7..4dde7e09e70 100644 --- 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 index a612d608bc2..c95106eb4d4 100644 --- a/packages/bridge-ui/src/pages/home/Home.svelte +++ b/packages/bridge-ui/src/pages/home/Home.svelte @@ -1,20 +1,22 @@
-

- {$_("home.title")} -

-
+ + +
+
-