wip

web-wallet/src/lib/components/GasControls/GasControls.svelte

@@ -2,7 +2,6 @@
 
 <script>
 	import { createEventDispatcher, onMount } from "svelte";
-	import { isType } from "lamb";
 	import { Textbox } from "$lib/dusk/components";
 
 	/** @type {Number} */
@@ -20,36 +19,17 @@
 	/** @type {Number} */
 	export let priceLower;
 
-	/** @type {import("svelte/store").Writable<Boolean>} */
-	export let validGasStore;
-
 	const dispatch = createEventDispatcher();
 
-	function checkGasLimits () {
-		let isValidPrice = false;
-		let	isValidLimit = false;
-		let isValidGas = false;
-
-		if ([price, limit].every(isType("Number"))) {
-			isValidPrice = price >= priceLower && price <= limit;
-			isValidLimit = limit >= limitLower && limit <= limitUpper;
-			isValidGas = isValidPrice && isValidLimit;
-		}
-
-		validGasStore.update((store) => {
-			store =	isValidGas;
-
-			return store;
-		});
-
+	function dispatchGasLimits () {
 		dispatch("gasSettings", {
 			limit: limit,
 			price: price
 		});
 	}
 
 	onMount(() => {
-		checkGasLimits();
+		dispatchGasLimits();
 	});
 </script>
 
@@ -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"
 	/>

web-wallet/src/lib/components/GasSettings/GasSettings.svelte

@@ -22,14 +22,14 @@
 	/** @type {string} */
 	export let fee;
 
-	/** @type {import("svelte/store").Writable<Boolean>} */
-	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}
 			/>
 		</div>
 	{/if}

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<string>} */
 	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);
 </script>
 
 <div class="operation">
@@ -127,14 +131,15 @@
 
 				<GasSettings
 					{fee}
+					{gasStore}
 					limit={gasSettings.gasLimit}
-					limitLower={gasSettings.gasLimitLower}
-					limitUpper={gasSettings.gasLimitUpper}
+					limitLower={$gasStore.limitLower}
+					limitUpper={$gasStore.limitUpper}
 					price={gasSettings.gasPrice}
-					priceLower={gasSettings.gasPriceLower}
-					{validGasStore}
+					priceLower={$gasStore.priceLower}
 					on:gasSettings={(event) => {
-						if ($validGasStore) {
+						isValidGas = gasStore.areValidSettings(event.detail.price, event.detail.limit)
+						if (isValidGas) {
 							gasPrice = event.detail.price;
 							gasLimit = event.detail.limit;
 						}

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 @@
 
 				<GasSettings
 					{fee}
+					{gasStore}
 					limit={gasSettings.gasLimit}
 					limitLower={gasSettings.gasLimitLower}
 					limitUpper={gasSettings.gasLimitUpper}
 					price={gasSettings.gasPrice}
 					priceLower={gasSettings.gasPriceLower}
-					{validGasStore}
 					on:gasSettings={setGasValues}
 				/>
 			</WizardStep>
@@ -263,12 +268,12 @@
 				{:else}
 					<GasSettings
 						{fee}
+						{gasStore}
 						limit={gasSettings.gasLimit}
 						limitLower={gasSettings.gasLimitLower}
 						limitUpper={gasSettings.gasLimitUpper}
 						price={gasSettings.gasPrice}
 						priceLower={gasSettings.gasPriceLower}
-						{validGasStore}
 						on:gasSettings={setGasValues}
 					/>
 				{/if}

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}

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}

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};

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";

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",