web-wallet: fix localStorage gas limits update on ENV change

dusk-network · Feb 26, 2024 · d4d72f1 · d4d72f1
1 parent 92af8dd
commit d4d72f1
Show file tree

Hide file tree

Showing 16 changed files with 118 additions and 105 deletions.
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,7 @@
 	import { slide } from "svelte/transition";
 	import { Button } from "$lib/dusk/components";
 	import { GasControls, GasFee } from "$lib/components";
+	import { onMount } from "svelte";
 
 	/** @type {number} */
 	export let limit;
@@ -21,8 +22,17 @@
 	/** @type {string} */
 	export let fee;
 
+	/** @type {import("$lib/stores/stores").GasStore} */
+	export let gasStore;
+
 	/** @type {boolean} */
 	let isExpanded = false;
+
+	onMount(() => {
+		if (!gasStore.areValidSettings(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
@@ -41,6 +41,9 @@
 	/** @type {ContractStatus[]} */
 	export let statuses;
 
+	/** @type {import("$lib/stores/stores").GasStore} */
+	export let gasStore;
+
 	/** @type {number} */
 	let amount = 1;
 
@@ -56,13 +59,12 @@
 	/** @type {HTMLInputElement | null} */
 	let amountInput;
 
-	/** @type {boolean} */
-	let isValidGas = true;
-
 	/** @type {boolean} */
 	let isNextButtonDisabled = false;
+	let isValidGas = false;
 
 	let { gasLimit, gasPrice } = gasSettings;
+	const { limitLower, limitUpper, priceLower } = $gasStore;
 
 	const minAmount = 0.000000001;
 
@@ -71,6 +73,7 @@
 
 	onMount(() => {
 		amountInput = document.querySelector(".operation__input-field");
+		isValidGas = gasStore.areValidSettings(gasPrice, gasLimit);
 	});
 
 	$: luxFee = gasLimit * gasPrice;
@@ -132,15 +135,16 @@
 
 				<GasSettings
 					{fee}
+					{gasStore}
 					limit={gasSettings.gasLimit}
-					limitLower={gasSettings.gasLimitLower}
-					limitUpper={gasSettings.gasLimitUpper}
+					limitLower={limitLower}
+					limitUpper={limitUpper}
 					price={gasSettings.gasPrice}
-					priceLower={gasSettings.gasPriceLower}
+					priceLower={priceLower}
 					on:gasSettings={(event) => {
-						isValidGas = event.detail.isValidGas;
+						isValidGas = gasStore.areValidSettings(event.detail.price, event.detail.limit);
 
-						if (event.detail.isValidGas) {
+						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
@@ -58,6 +58,9 @@
 	/** @type {boolean} */
 	export let hideStakingNotice;
 
+	/** @type {import("$lib/stores/stores").GasStore} */
+	export let gasStore;
+
 	const defaultMinStake = 1000;
 
 	/** @type {number} */
@@ -70,13 +73,12 @@
 	/** @type {HTMLInputElement|null} */
 	let stakeInput;
 
-	/** @type {boolean} */
-	let isValidGas = true;
-
 	/** @type {boolean} */
 	let hideStakingNoticeNextTime = false;
+	let isValidGas = false;
 
 	let { gasLimit, gasPrice } = gasSettings;
+	const { limitLower, limitUpper, priceLower } = $gasStore;
 
 	/** @type {Record<StakeType, string>} */
 	const confirmLabels = {
@@ -100,9 +102,9 @@
 	 * @param {{detail:{price:number, limit:number, isValidGas:boolean}}} event
 	 */
 	const setGasValues = (event) => {
-		isValidGas = event.detail.isValidGas;
+		isValidGas = gasStore.areValidSettings(event.detail.price, event.detail.limit);
 
-		if (event.detail.isValidGas) {
+		if (isValidGas) {
 			gasPrice = event.detail.price;
 			gasLimit = event.detail.limit;
 		}
@@ -112,6 +114,8 @@
 		if (flow === "stake") {
 			stakeAmount = Math.min(minStake, stakeAmount);
 		}
+
+		isValidGas = gasStore.areValidSettings(gasPrice, gasLimit);
 	});
 
 	$: luxFee = gasLimit * gasPrice;
@@ -222,11 +226,12 @@
 
 				<GasSettings
 					{fee}
+					{gasStore}
 					limit={gasSettings.gasLimit}
-					limitLower={gasSettings.gasLimitLower}
-					limitUpper={gasSettings.gasLimitUpper}
+					limitLower={limitLower}
+					limitUpper={limitUpper}
 					price={gasSettings.gasPrice}
-					priceLower={gasSettings.gasPriceLower}
+					priceLower={priceLower}
 					on:gasSettings={setGasValues}
 				/>
 			</WizardStep>
@@ -266,11 +271,12 @@
 				{:else}
 					<GasSettings
 						{fee}
+						{gasStore}
 						limit={gasSettings.gasLimit}
-						limitLower={gasSettings.gasLimitLower}
-						limitUpper={gasSettings.gasLimitUpper}
+						limitLower={limitLower}
+						limitUpper={limitUpper}
 						price={gasSettings.gasPrice}
-						priceLower={gasSettings.gasPriceLower}
+						priceLower={priceLower}
 						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,7 @@ import {
 	vi
 } from "vitest";
 import { cleanup, fireEvent, render } from "@testing-library/svelte";
-
+import { gasStore } from "$lib/stores";
 import { deductLuxFeeFrom } from "$lib/contracts";
 import { createCurrencyFormatter } from "$lib/dusk/currency";
 import { getAsHTMLElement } from "$lib/dusk/test-helpers";
@@ -23,11 +23,9 @@ describe("Send", () => {
 		formatter,
 		gasSettings: {
 			gasLimit: 20000000,
-			gasLimitLower: 10000000,
-			gasLimitUpper: 1000000000,
-			gasPrice: 1,
-			gasPriceLower: 1
+			gasPrice: 1
 		},
+		gasStore: gasStore,
 		spendable: 1000,
 		statuses: [{
 			label: "Spendable",

diff --git a/web-wallet/src/lib/components/__tests__/Stake.spec.js b/web-wallet/src/lib/components/__tests__/Stake.spec.js
@@ -7,7 +7,7 @@ import {
 	vi
 } from "vitest";
 import { cleanup, fireEvent, render } from "@testing-library/svelte";
-
+import { gasStore } from "$lib/stores";
 import { deductLuxFeeFrom } from "$lib/contracts";
 import { createCurrencyFormatter } from "$lib/dusk/currency";
 
@@ -32,11 +32,9 @@ describe("Stake", () => {
 		formatter,
 		gasSettings: {
 			gasLimit: 20000000,
-			gasLimitLower: 10000000,
-			gasLimitUpper: 1000000000,
-			gasPrice: 1,
-			gasPriceLower: 1
+			gasPrice: 1
 		},
+		gasStore: gasStore,
 		hideStakingNotice: true,
 		rewards: 345,
 		spendable: 10000,

diff --git 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}