From 742ddcbc9e40f266079d8a415ce19d077ac4d980 Mon Sep 17 00:00:00 2001 From: jeff <113397187+cyberhorsey@users.noreply.github.com> Date: Thu, 8 Dec 2022 23:25:29 -0800 Subject: [PATCH] feat(bridge-ui): responsive design, memo, style updates, navbar changes (#396) * eth button * navbar * nav + width * nav * navbar top margin * scacle * viewport * reactivity for input and btns * memo * svelte toast * memo changes * toast tests --- packages/bridge-ui/src/App.svelte | 13 +++++-- .../src/components/AddressDropdown.svelte | 15 +++++--- .../src/components/ChainDropdown.svelte | 8 ++--- .../bridge-ui/src/components/Navbar.svelte | 2 +- .../src/components/buttons/Connect.svelte | 8 ++--- .../src/components/buttons/SelectToken.svelte | 10 +++--- .../src/components/form/BridgeForm.svelte | 34 ++++++++++++------ .../bridge-ui/src/components/form/Memo.svelte | 30 ++++++++++++++++ .../src/components/form/ProcessingFee.svelte | 4 +-- .../src/components/form/SelectChain.svelte | 24 +++++++------ .../src/components/icons/Logo.svelte | 21 ++++++----- .../modals/SwitchEthereumChainModal.svelte | 17 ++++++--- packages/bridge-ui/src/domain/fee.ts | 4 +-- packages/bridge-ui/src/pages/home/Home.svelte | 7 ++-- .../src/utils/switchEthereumChain.spec.ts | 19 ++++++++++ .../src/utils/switchEthereumChain.ts | 2 ++ packages/bridge-ui/src/utils/toast.spec.ts | 24 +++++++++++++ packages/bridge-ui/src/utils/toast.ts | 36 +++++++++++++++++++ 18 files changed, 212 insertions(+), 66 deletions(-) create mode 100644 packages/bridge-ui/src/components/form/Memo.svelte create mode 100644 packages/bridge-ui/src/utils/toast.spec.ts create mode 100644 packages/bridge-ui/src/utils/toast.ts diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte index 03f59f81a2..69f3435151 100644 --- 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 = 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 @@ - + diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte index 208a590575..e472abe3c6 100644 --- a/packages/bridge-ui/src/components/AddressDropdown.svelte +++ b/packages/bridge-ui/src/components/AddressDropdown.svelte @@ -1,7 +1,6 @@ -
- diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte index 8f5e7d8fad..747ae517a1 100644 --- 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()}`); }
-
    diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte index 4ee7636710..934909c209 100644 --- 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,7 +124,7 @@ toChainId: $toChain.id, bridgeAddress: $chainIdToBridgeAddress.get($fromChain.id), processingFeeInWei: getProcessingFee(), - memo: "memo", + memo: memo, }); pendingTransactions.update((store) => { @@ -128,10 +132,10 @@ 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 @@ } -
    +