Merge pull request #1451 from dusk-network/feature-1308

web-wallet: fix gas limits update on ENV change
dusk-network · Feb 29, 2024 · b19bb89 · b19bb89
2 parents 8e3f87c + 64434c2
commit b19bb89
Show file tree

Hide file tree

Showing 20 changed files with 179 additions and 107 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -10,14 +10,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Refactor beta notice as constant [#1469]
+- Refactor `settingsStore` and create readable `gasStore` to store `limitLower`, `limitUpper`, `priceLower` [#1308]
 
 ### Removed
 
 - Remove extraneous code block in MnemonicAuthenticate [#1470]
+- Remove `limitLower`, `limitUpper`, `priceLower` from `settingsStore` [#1308]
 
 ### Fixed
 
 - Mismatch between param and JSDoc param's type definition (OperationResult.spec.js) [#1471]
+- Fix gas limits update on ENV change [#1308]
 
 
 ## [0.3.0] - 2024-02-28
@@ -101,6 +104,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add initial commit
 
 <!-- ISSUES -->
+[#1308]: https://github.com/dusk-network/rusk/issues/1308
 [#1359]: https://github.com/dusk-network/rusk/issues/1359
 [#1311]: https://github.com/dusk-network/rusk/issues/1311
 [#1323]: https://github.com/dusk-network/rusk/issues/1323

diff --git a/web-wallet/src/lib/components/GasControls/GasControls.svelte b/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} */
@@ -22,26 +21,15 @@
 
 	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;
-		}
-
+	function dispatchGasLimits () {
 		dispatch("gasSettings", {
-			isValidGas: isValidGas,
 			limit: limit,
 			price: price
 		});
 	}
 
 	onMount(() => {
-		checkGasLimits();
+		dispatchGasLimits();
 	});
 </script>
 
@@ -54,7 +42,7 @@
 		className="gas-control__input"
 		max={limit}
 		min={priceLower}
-		on:input={checkGasLimits}
+		on:input={dispatchGasLimits}
 		required
 		type="number"
 	/>
@@ -69,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
@@ -2,6 +2,8 @@
 	import { slide } from "svelte/transition";
 	import { Button } from "$lib/dusk/components";
 	import { GasControls, GasFee } from "$lib/components";
+	import { areValidGasSettings } from "$lib/contracts";
+	import { onMount } from "svelte";
 
 	/** @type {number} */
 	export let limit;
@@ -23,6 +25,12 @@
 
 	/** @type {boolean} */
 	let isExpanded = false;
+
+	onMount(() => {
+		if (!areValidGasSettings(price, limit)) {
+			isExpanded = true;
+		}
+	});
 </script>
 
 <div class="gas-settings">

diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
@@ -5,7 +5,7 @@
 	import { createEventDispatcher, onMount } from "svelte";
 	import { mdiArrowUpBoldBoxOutline, mdiWalletOutline } from "@mdi/js";
 
-	import { deductLuxFeeFrom } from "$lib/contracts";
+	import { areValidGasSettings, deductLuxFeeFrom } from "$lib/contracts";
 	import { duskToLux, luxToDusk } from "$lib/dusk/currency";
 	import { validateAddress } from "$lib/dusk/string";
 	import { logo } from "$lib/dusk/icons";
@@ -41,6 +41,9 @@
 	/** @type {ContractStatus[]} */
 	export let statuses;
 
+	/** @type {import("$lib/stores/stores").GasStoreContent} */
+	export let gasLimits;
+
 	/** @type {number} */
 	let amount = 1;
 
@@ -56,11 +59,9 @@
 	/** @type {HTMLInputElement | null} */
 	let amountInput;
 
-	/** @type {boolean} */
-	let isValidGas = true;
-
 	/** @type {boolean} */
 	let isNextButtonDisabled = false;
+	let isGasValid = false;
 
 	let { gasLimit, gasPrice } = gasSettings;
 
@@ -71,6 +72,7 @@
 
 	onMount(() => {
 		amountInput = document.querySelector(".operation__input-field");
+		isGasValid = areValidGasSettings(gasPrice, gasLimit);
 	});
 
 	$: luxFee = gasLimit * gasPrice;
@@ -79,7 +81,7 @@
 	$: isAmountValid = amount >= minAmount && amount <= maxSpendable;
 	$: totalLuxFee = luxFee + duskToLux(amount);
 	$: isFeeWithinLimit = totalLuxFee <= duskToLux(spendable);
-	$: isNextButtonDisabled = !(isAmountValid && isValidGas && isFeeWithinLimit);
+	$: isNextButtonDisabled = !(isAmountValid && isGasValid && isFeeWithinLimit);
 
 	$: addressValidationResult = validateAddress(address);
 </script>
@@ -133,14 +135,14 @@
 				<GasSettings
 					{fee}
 					limit={gasSettings.gasLimit}
-					limitLower={gasSettings.gasLimitLower}
-					limitUpper={gasSettings.gasLimitUpper}
+					limitLower={gasLimits.gasLimitLower}
+					limitUpper={gasLimits.gasLimitUpper}
 					price={gasSettings.gasPrice}
-					priceLower={gasSettings.gasPriceLower}
+					priceLower={gasLimits.gasPriceLower}
 					on:gasSettings={(event) => {
-						isValidGas = event.detail.isValidGas;
+						isGasValid = areValidGasSettings(event.detail.price, event.detail.limit);
 
-						if (event.detail.isValidGas) {
+						if (isGasValid) {
 							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
@@ -5,7 +5,7 @@
 	import { fade } from "svelte/transition";
 	import { mdiAlertOutline, mdiDatabaseArrowDownOutline, mdiDatabaseOutline } from "@mdi/js";
 
-	import { deductLuxFeeFrom } from "$lib/contracts";
+	import { areValidGasSettings, deductLuxFeeFrom } from "$lib/contracts";
 	import { duskToLux, luxToDusk } from "$lib/dusk/currency";
 	import { logo } from "$lib/dusk/icons";
 
@@ -58,6 +58,9 @@
 	/** @type {boolean} */
 	export let hideStakingNotice;
 
+	/** @type {import("$lib/stores/stores").GasStoreContent} */
+	export let gasLimits;
+
 	const defaultMinStake = 1000;
 
 	/** @type {number} */
@@ -70,11 +73,9 @@
 	/** @type {HTMLInputElement|null} */
 	let stakeInput;
 
-	/** @type {boolean} */
-	let isValidGas = true;
-
 	/** @type {boolean} */
 	let hideStakingNoticeNextTime = false;
+	let isGasValid = false;
 
 	let { gasLimit, gasPrice } = gasSettings;
 
@@ -97,12 +98,12 @@
 	const suppressStakingNotice = () => dispatch("suppressStakingNotice");
 
 	/**
-	 * @param {{detail:{price:number, limit:number, isValidGas:boolean}}} event
+	 * @param {{detail:{price:number, limit:number}}} event
 	 */
 	const setGasValues = (event) => {
-		isValidGas = event.detail.isValidGas;
+		isGasValid = areValidGasSettings(event.detail.price, event.detail.limit);
 
-		if (event.detail.isValidGas) {
+		if (isGasValid) {
 			gasPrice = event.detail.price;
 			gasLimit = event.detail.limit;
 		}
@@ -112,6 +113,8 @@
 		if (flow === "stake") {
 			stakeAmount = Math.min(minStake, stakeAmount);
 		}
+
+		isGasValid = areValidGasSettings(gasPrice, gasLimit);
 	});
 
 	$: luxFee = gasLimit * gasPrice;
@@ -122,7 +125,7 @@
 	$: totalLuxFee = luxFee + duskToLux(stakeAmount);
 	$: isFeeWithinLimit = totalLuxFee <= duskToLux(spendable);
 	$: isNextButtonDisabled = flow === "stake"
-		? !(isStakeAmountValid && isValidGas && isFeeWithinLimit) : false;
+		? !(isStakeAmountValid && isGasValid && isFeeWithinLimit) : false;
 
 	function getWizardSteps () {
 		if (flow === "stake") {
@@ -223,10 +226,10 @@
 				<GasSettings
 					{fee}
 					limit={gasSettings.gasLimit}
-					limitLower={gasSettings.gasLimitLower}
-					limitUpper={gasSettings.gasLimitUpper}
+					limitLower={gasLimits.gasLimitLower}
+					limitUpper={gasLimits.gasLimitUpper}
 					price={gasSettings.gasPrice}
-					priceLower={gasSettings.gasPriceLower}
+					priceLower={gasLimits.gasPriceLower}
 					on:gasSettings={setGasValues}
 				/>
 			</WizardStep>
@@ -267,10 +270,10 @@
 					<GasSettings
 						{fee}
 						limit={gasSettings.gasLimit}
-						limitLower={gasSettings.gasLimitLower}
-						limitUpper={gasSettings.gasLimitUpper}
+						limitLower={gasLimits.gasLimitLower}
+						limitUpper={gasLimits.gasLimitUpper}
 						price={gasSettings.gasPrice}
-						priceLower={gasSettings.gasPriceLower}
+						priceLower={gasLimits.gasPriceLower}
 						on:gasSettings={setGasValues}
 					/>
 				{/if}

diff --git a/web-wallet/src/lib/components/__tests__/GasControls.spec.js b/web-wallet/src/lib/components/__tests__/GasControls.spec.js
@@ -57,7 +57,7 @@ describe("GasControls", () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it("should dispatch a \"gasSettings\" event when the price or the limit are changed with valid gas settings", async () => {
+	it("should dispatch a \"gasSettings\" event when the price or the limit are changed", async () => {
 		const { component, getByLabelText } = render(GasControls, baseOptions);
 		const priceInput = asInput(getByLabelText(/price/i));
 		const limitInput = asInput(getByLabelText(/limit/i));
@@ -68,7 +68,6 @@ describe("GasControls", () => {
 
 		expect(eventHandler).toHaveBeenCalledTimes(1);
 		expect(eventHandler.mock.lastCall[0].detail).toStrictEqual({
-			isValidGas: true,
 			limit: baseProps.limit,
 			price: 15
 		});
@@ -78,40 +77,10 @@ describe("GasControls", () => {
 
 		expect(eventHandler).toHaveBeenCalledTimes(2);
 		expect(eventHandler.mock.lastCall[0].detail).toStrictEqual({
-			isValidGas: true,
 			limit: 25,
 			price: 15
 		});
 		expect(limitInput.valueAsNumber).toBe(25);
 		expect(priceInput.max).toBe("25");
 	});
-
-	it("should dispatch a \"gasSettings\" event when the price or the limit are changed with invalid gas settings", async () => {
-		const { component, getByLabelText } = render(GasControls, baseOptions);
-		const priceInput = asInput(getByLabelText(/price/i));
-		const limitInput = asInput(getByLabelText(/limit/i));
-
-		component.$on("gasSettings", eventHandler);
-
-		await fireInput(priceInput, 25);
-
-		expect(eventHandler).toHaveBeenCalledTimes(1);
-		expect(eventHandler.mock.lastCall[0].detail).toStrictEqual({
-			isValidGas: false,
-			limit: baseProps.limit,
-			price: 25
-		});
-		expect(priceInput.valueAsNumber).toBe(25);
-
-		await fireInput(limitInput, 105);
-
-		expect(eventHandler).toHaveBeenCalledTimes(2);
-		expect(eventHandler.mock.lastCall[0].detail).toStrictEqual({
-			isValidGas: false,
-			limit: 105,
-			price: 25
-		});
-		expect(limitInput.valueAsNumber).toBe(105);
-		expect(priceInput.max).toBe("105");
-	});
 });
diff --git a/web-wallet/src/lib/components/__tests__/GasSettings.spec.js b/web-wallet/src/lib/components/__tests__/GasSettings.spec.js
@@ -9,7 +9,7 @@ import { cleanup, fireEvent, render } from "@testing-library/svelte";
 
 import { GasSettings } from "..";
 import { get } from "svelte/store";
-import { settingsStore } from "$lib/stores";
+import { gasStore, settingsStore } from "$lib/stores";
 import { createCurrencyFormatter } from "$lib/dusk/currency";
 
 describe("GasSettings", () => {
@@ -23,7 +23,8 @@ describe("GasSettings", () => {
 		limitLower: 10000000,
 		limitUpper: 1000000000,
 		price: 1,
-		priceLower: 1
+		priceLower: 1,
+		gasStore: gasStore
 	};
 
 	const baseOptions = {
@@ -66,7 +67,6 @@ describe("GasSettings", () => {
 
 		expect(eventHandler).toHaveBeenCalledTimes(1);
 		expect(eventHandler.mock.lastCall[0].detail).toStrictEqual({
-			isValidGas: true,
 			limit: baseProps.limitLower,
 			price: baseProps.price
 		});
@@ -75,7 +75,6 @@ describe("GasSettings", () => {
 
 		expect(eventHandler).toHaveBeenCalledTimes(2);
 		expect(eventHandler.mock.lastCall[0].detail).toStrictEqual({
-			isValidGas: true,
 			limit: baseProps.limitLower,
 			price: baseProps.price * 2
 		});

diff --git a/web-wallet/src/lib/components/__tests__/Send.spec.js b/web-wallet/src/lib/components/__tests__/Send.spec.js
@@ -7,7 +7,6 @@ import {
 	vi
 } from "vitest";
 import { cleanup, fireEvent, render } from "@testing-library/svelte";
-
 import { deductLuxFeeFrom } from "$lib/contracts";
 import { createCurrencyFormatter } from "$lib/dusk/currency";
 import { getAsHTMLElement } from "$lib/dusk/test-helpers";
@@ -23,9 +22,11 @@ describe("Send", () => {
 		formatter,
 		gasSettings: {
 			gasLimit: 20000000,
+			gasPrice: 1
+		},
+		gasLimits: {
 			gasLimitLower: 10000000,
-			gasLimitUpper: 1000000000,
-			gasPrice: 1,
+			gasLimitUpper: 2900000000,
 			gasPriceLower: 1
 		},
 		spendable: 1000,