From 2ca0de62452706f6fad2c24ab5298bba70d3fc89 Mon Sep 17 00:00:00 2001 From: Alex Panturu Date: Fri, 23 Feb 2024 19:32:19 +0200 Subject: [PATCH] wip --- .../components/GasControls/GasControls.svelte | 28 +++------------ .../components/GasSettings/GasSettings.svelte | 7 ++-- .../src/lib/components/Send/Send.svelte | 19 ++++++---- .../src/lib/components/Stake/Stake.svelte | 15 +++++--- .../StakeContract/StakeContract.svelte | 2 ++ .../TransferContract/TransferContract.svelte | 11 +++--- web-wallet/src/lib/stores/gasStore.js | 35 +++++++++++++++++++ web-wallet/src/lib/stores/index.js | 2 +- web-wallet/src/lib/stores/settingsStore.js | 3 -- web-wallet/src/lib/stores/validGasStore.js | 6 ---- .../src/routes/(app)/settings/+page.svelte | 23 ++++++------ 11 files changed, 85 insertions(+), 66 deletions(-) create mode 100644 web-wallet/src/lib/stores/gasStore.js delete mode 100644 web-wallet/src/lib/stores/validGasStore.js diff --git a/web-wallet/src/lib/components/GasControls/GasControls.svelte b/web-wallet/src/lib/components/GasControls/GasControls.svelte index f0b05b915..de315a37e 100644 --- a/web-wallet/src/lib/components/GasControls/GasControls.svelte +++ b/web-wallet/src/lib/components/GasControls/GasControls.svelte @@ -2,7 +2,6 @@ @@ -62,7 +42,7 @@ className="gas-control__input" max={limit} min={priceLower} - on:input={checkGasLimits} + on:input={dispatchGasLimits} required type="number" /> @@ -77,7 +57,7 @@ className="gas-control__input" max={limitUpper} min={limitLower} - on:input={checkGasLimits} + on:input={dispatchGasLimits} required type="number" /> diff --git a/web-wallet/src/lib/components/GasSettings/GasSettings.svelte b/web-wallet/src/lib/components/GasSettings/GasSettings.svelte index d572a048d..f71586d08 100644 --- a/web-wallet/src/lib/components/GasSettings/GasSettings.svelte +++ b/web-wallet/src/lib/components/GasSettings/GasSettings.svelte @@ -22,14 +22,14 @@ /** @type {string} */ export let fee; - /** @type {import("svelte/store").Writable} */ - export let validGasStore; + /** @type {import("svelte/store").Readable<*>}*/ + export let gasStore; /** @type {boolean} */ let isExpanded = false; onMount(() => { - if (!$validGasStore) { + if (!gasStore.areValidSettings(price, limit)) { isExpanded = true; } }); @@ -58,7 +58,6 @@ {limitUpper} {price} {priceLower} - {validGasStore} /> {/if} diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte index 798969232..41fe8d6a7 100644 --- a/web-wallet/src/lib/components/Send/Send.svelte +++ b/web-wallet/src/lib/components/Send/Send.svelte @@ -24,7 +24,6 @@ OperationResult, ScanQR } from "$lib/components"; - import { validGasStore } from "$lib/stores"; /** @type {(to: string, amount: number, gasPrice: number, gasLimit: number) => Promise} */ export let execute; @@ -41,6 +40,9 @@ /** @type {ContractStatus[]} */ export let statuses; + /** @type {import("svelte/store").Readable<*>}*/ + export let gasStore; + /** @type {number} */ let amount = 1; @@ -58,6 +60,7 @@ /** @type {boolean} */ let isNextButtonDisabled = false; + let isValidGas = false; let { gasLimit, gasPrice } = gasSettings; @@ -68,6 +71,7 @@ onMount(() => { amountInput = document.querySelector(".operation__input-field"); + isValidGas = gasStore.areValidSettings(gasPrice, gasLimit); }); $: luxFee = gasLimit * gasPrice; @@ -76,7 +80,7 @@ $: isAmountValid = amount >= minAmount && amount <= maxSpendable; $: totalLuxFee = luxFee + duskToLux(amount); $: isFeeWithinLimit = totalLuxFee <= duskToLux(spendable); - $: isNextButtonDisabled = !(isAmountValid && $validGasStore && isFeeWithinLimit); + $: isNextButtonDisabled = !(isAmountValid && isValidGas && isFeeWithinLimit);
@@ -127,14 +131,15 @@ { - if ($validGasStore) { + isValidGas = gasStore.areValidSettings(event.detail.price, event.detail.limit) + if (isValidGas) { gasPrice = event.detail.price; gasLimit = event.detail.limit; } diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte index c78f2ea80..200a4668b 100644 --- a/web-wallet/src/lib/components/Stake/Stake.svelte +++ b/web-wallet/src/lib/components/Stake/Stake.svelte @@ -28,7 +28,6 @@ GasSettings, OperationResult } from "$lib/components"; - import { validGasStore } from "$lib/stores"; import StakeOverview from "./StakeOverview.svelte"; @@ -59,6 +58,9 @@ /** @type {boolean} */ export let hideStakingNotice; + /** @type {import("svelte/store").Readable<*>}*/ + export let gasStore; + const defaultMinStake = 1000; /** @type {number} */ @@ -73,6 +75,7 @@ /** @type {boolean} */ let hideStakingNoticeNextTime = false; + let isValidGas = false; let { gasLimit, gasPrice } = gasSettings; @@ -98,7 +101,8 @@ * @param {{detail:{price:number, limit:number, isValidGas:boolean}}} event */ const setGasValues = (event) => { - if ($validGasStore) { + isValidGas = gasStore.areValidSettings(event.detail.price, event.detail.limit) + if (isValidGas) { gasPrice = event.detail.price; gasLimit = event.detail.limit; } @@ -108,6 +112,7 @@ if (flow === "stake") { stakeAmount = Math.min(minStake, stakeAmount); } + isValidGas = gasStore.areValidSettings(gasPrice, gasLimit); }); $: luxFee = gasLimit * gasPrice; @@ -118,7 +123,7 @@ $: totalLuxFee = luxFee + duskToLux(stakeAmount); $: isFeeWithinLimit = totalLuxFee <= duskToLux(spendable); $: isNextButtonDisabled = flow === "stake" - ? !(isStakeAmountValid && $validGasStore && isFeeWithinLimit) : false; + ? !(isStakeAmountValid && isValidGas && isFeeWithinLimit) : false; function getWizardSteps () { if (flow === "stake") { @@ -218,12 +223,12 @@ @@ -263,12 +268,12 @@ {:else} {/if} diff --git a/web-wallet/src/lib/containers/StakeContract/StakeContract.svelte b/web-wallet/src/lib/containers/StakeContract/StakeContract.svelte index 8c4d0a0a2..cd4caafce 100644 --- a/web-wallet/src/lib/containers/StakeContract/StakeContract.svelte +++ b/web-wallet/src/lib/containers/StakeContract/StakeContract.svelte @@ -16,6 +16,7 @@ import { createCurrencyFormatter } from "$lib/dusk/currency"; import { getLastTransactionHash } from "$lib/transactions"; import { + gasStore, operationsStore, settingsStore, walletStore @@ -131,6 +132,7 @@ flow={currentOperation} formatter={duskFormatter} {gasSettings} + {gasStore} on:operationChange on:suppressStakingNotice rewards={stakeInfo.reward} diff --git a/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte b/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte index 689d79eb0..7a6f64734 100644 --- a/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte +++ b/web-wallet/src/lib/containers/TransferContract/TransferContract.svelte @@ -15,9 +15,10 @@ import { createCurrencyFormatter } from "$lib/dusk/currency"; import { getLastTransactionHash } from "$lib/transactions"; import { + gasStore, operationsStore, settingsStore, - walletStore + walletStore, } from "$lib/stores"; import { ContractOperations, @@ -34,7 +35,7 @@ walletStore.transfer(to, amount, gasPrice, gasLimit).then(getLastTransactionHash); const collectSettings = collect([ - pick(["gasLimit", "gasLimitLower", "gasLimitUpper", "gasPrice", "gasPriceLower"]), + pick(["gasLimit", "gasPrice"]), getKey("language") ]); const isEnabledSend = allOf([ @@ -43,10 +44,7 @@ ]); $: ({ currentOperation } = $operationsStore); - $: [ - gasSettings, - language - ] = collectSettings($settingsStore); + $: [gasSettings, language] = collectSettings($settingsStore); $: ({ balance, currentAddress, @@ -75,6 +73,7 @@ execute={executeSend} formatter={duskFormatter} {gasSettings} + {gasStore} on:operationChange spendable={balance.maximum} {statuses} diff --git a/web-wallet/src/lib/stores/gasStore.js b/web-wallet/src/lib/stores/gasStore.js new file mode 100644 index 000000000..c1d1e71a2 --- /dev/null +++ b/web-wallet/src/lib/stores/gasStore.js @@ -0,0 +1,35 @@ +import { readable } from "svelte/store"; +import { isType } from "lamb"; + +const gasSettings = { + limitLower: Number(parseInt(import.meta.env.VITE_GAS_LIMIT_LOWER, 10)), + limitUpper: Number(parseInt(import.meta.env.VITE_GAS_LIMIT_UPPER, 10)), + priceLower: Number(parseInt(import.meta.env.VITE_GAS_PRICE_LOWER, 10)), +}; + +const gasStore = readable(gasSettings); +const { subscribe } = gasStore; + +/** + * + * @param {Number} price + * @param {Number} limit + * @returns {Boolean} + */ +const areValidSettings = (price, limit) => { + let isValidPrice = false; + let isValidLimit = false; + let isValidGas = false; + + if ([price, limit].every(isType("Number"))) { + isValidPrice = price >= gasSettings.priceLower && price <= limit; + isValidLimit = limit >= gasSettings.limitLower && limit <= gasSettings.limitUpper; + + console.log(price, limit, isValidPrice, isValidPrice) + isValidGas = isValidPrice && isValidLimit; + } + + return isValidGas; +} + +export default {areValidSettings, subscribe}; diff --git a/web-wallet/src/lib/stores/index.js b/web-wallet/src/lib/stores/index.js index 6975b0eb0..d2d1c8b98 100644 --- a/web-wallet/src/lib/stores/index.js +++ b/web-wallet/src/lib/stores/index.js @@ -1,4 +1,4 @@ -export { default as validGasStore } from "./validGasStore"; +export { default as gasStore } from "./gasStore"; export { default as operationsStore } from "./operationsStore"; export { default as settingsStore } from "./settingsStore"; export { default as walletStore } from "./walletStore"; diff --git a/web-wallet/src/lib/stores/settingsStore.js b/web-wallet/src/lib/stores/settingsStore.js index 0eb680d03..893b2cb3b 100644 --- a/web-wallet/src/lib/stores/settingsStore.js +++ b/web-wallet/src/lib/stores/settingsStore.js @@ -6,10 +6,7 @@ const initialState = { darkMode: false, dashboardTransactionLimit: 5, gasLimit: parseInt(import.meta.env.VITE_GAS_LIMIT_DEFAULT, 10), - gasLimitLower: parseInt(import.meta.env.VITE_GAS_LIMIT_LOWER, 10), - gasLimitUpper: parseInt(import.meta.env.VITE_GAS_LIMIT_UPPER, 10), gasPrice: parseInt(import.meta.env.VITE_GAS_PRICE_DEFAULT, 10), - gasPriceLower: parseInt(import.meta.env.VITE_GAS_PRICE_LOWER, 10), hideStakingNotice: false, language: browser ? navigator.language : "en", network: "testnet", diff --git a/web-wallet/src/lib/stores/validGasStore.js b/web-wallet/src/lib/stores/validGasStore.js deleted file mode 100644 index 13555cec1..000000000 --- a/web-wallet/src/lib/stores/validGasStore.js +++ /dev/null @@ -1,6 +0,0 @@ -import { writable } from "svelte/store"; - -/** @type {import("svelte/store").Writable< Boolean >} */ -const validGas = writable(false); - -export default validGas; diff --git a/web-wallet/src/routes/(app)/settings/+page.svelte b/web-wallet/src/routes/(app)/settings/+page.svelte index f87be040d..a1650293f 100644 --- a/web-wallet/src/routes/(app)/settings/+page.svelte +++ b/web-wallet/src/routes/(app)/settings/+page.svelte @@ -23,7 +23,7 @@ } from "$lib/dusk/components"; import { GasControls } from "$lib/components"; import { currencies } from "$lib/dusk/currency"; - import { settingsStore, validGasStore, walletStore } from "$lib/stores"; + import { settingsStore, gasStore, walletStore } from "$lib/stores"; const resetWallet = () => walletStore.clearLocalData().then(() => { settingsStore.reset(); @@ -45,18 +45,21 @@ currency, darkMode, gasLimit, - gasLimitLower, - gasLimitUpper, gasPrice, - gasPriceLower, network } = $settingsStore; + const { + limitLower, + limitUpper, + priceLower + } = $gasStore; const networks = [ { label: "testnet", value: "testnet" }, { disabled: true, label: "mainnet", value: "mainnet" } ]; let isDarkMode = darkMode; + let isValidGas = false; /** @type {Error | null} */ let resetError = null; @@ -134,7 +137,8 @@
{ - if ($validGasStore) { + isValidGas = gasStore.areValidSettings(event.detail.price, event.detail.limit) + if (isValidGas) { settingsStore.update(store => { store.gasLimit = event.detail.limit; store.gasPrice = event.detail.price; @@ -144,11 +148,10 @@ } }} limit={gasLimit} - limitLower={gasLimitLower} - limitUpper={gasLimitUpper} + limitLower={limitLower} + limitUpper={limitUpper} price={gasPrice} - priceLower={gasPriceLower} - {validGasStore} + priceLower={priceLower} />
@@ -226,7 +229,7 @@