Merge pull request #1429 from dusk-network/feature-1391

web-wallet: Remove the use of `checkValidity()` from the Send flow
dusk-network · Feb 19, 2024 · 0a73f3a · 0a73f3a
2 parents 8d67775 + 83d0d08
commit 0a73f3a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 19 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Remove `fiat` property from Balance component [#1323](https://github.com/dusk-network/rusk/issues/1323)
 - Remove `gasSettings` store update from `dashboard/+page.svelte.js` [#1353](https://github.com/dusk-network/rusk/issues/1353)
+- Remove the use of `checkValidity()` in Send and Stake flow amounts validity checks [#1391](https://github.com/dusk-network/rusk/issues/1391)
 
 ### Fixed
 

diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
@@ -2,7 +2,7 @@
 
 <script>
 	import { fade } from "svelte/transition";
-	import { createEventDispatcher, onMount, tick } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 	import { mdiArrowUpBoldBoxOutline, mdiWalletOutline } from "@mdi/js";
 
 	import { deductLuxFeeFrom } from "$lib/contracts";
@@ -63,23 +63,22 @@
 
 	let { gasLimit, gasPrice } = gasSettings;
 
-	const checkAmountValid = async () => {
-		await tick();
-		isNextButtonDisabled = !(amountInput?.checkValidity() && isValidGas
-			&& (luxFee + duskToLux(amount) <= duskToLux(spendable)));
-	};
+	const minAmount = 0.000000001;
 
 	const dispatch = createEventDispatcher();
 	const resetOperation = () => dispatch("operationChange", "");
 
 	onMount(() => {
 		amountInput = document.querySelector(".operation__input-field");
-		checkAmountValid();
 	});
 
 	$: luxFee = gasLimit * gasPrice;
 	$: fee = formatter(luxToDusk(luxFee));
 	$: maxSpendable = deductLuxFeeFrom(spendable, luxFee);
+	$: isAmountValid = amount >= minAmount && amount <= maxSpendable;
+	$: totalLuxFee = luxFee + duskToLux(amount);
+	$: isFeeWithinLimit = totalLuxFee <= duskToLux(spendable);
+	$: isNextButtonDisabled = !(isAmountValid && isValidGas && isFeeWithinLimit);
 </script>
 
 <div class="operation">
@@ -106,7 +105,6 @@
 							}
 
 							amount = maxSpendable;
-							checkAmountValid();
 						}}
 						text="USE MAX"
 					/>
@@ -118,10 +116,9 @@
 						bind:value={amount}
 						required
 						type="number"
-						min={0.000000001}
+						min={minAmount}
 						max={maxSpendable}
 						step="0.000000001"
-						on:input={checkAmountValid}
 					/>
 					<Icon
 						data-tooltip-id="main-tooltip"
@@ -144,8 +141,6 @@
 							gasPrice = event.detail.price;
 							gasLimit = event.detail.limit;
 						}
-
-						checkAmountValid();
 					}}
 				/>
 			</div>

diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -73,11 +73,8 @@
 	/** @type {boolean} */
 	let isValidGas = true;
 
-	$: isStakeAmountValid = stakeAmount >= minStake && stakeAmount <= maxSpendable;
-	$: totalLuxFee = luxFee + duskToLux(stakeAmount);
-	$: isFeeWithinLimit = totalLuxFee <= duskToLux(spendable);
-	$: isNextButtonDisabled = flow === "stake"
-		? !(isStakeAmountValid && isValidGas && isFeeWithinLimit) : false;
+	/** @type {boolean} */
+	let hideStakingNoticeNextTime = false;
 
 	let { gasLimit, gasPrice } = gasSettings;
 
@@ -121,8 +118,11 @@
 	$: fee = formatter(luxToDusk(luxFee));
 	$: maxSpendable = deductLuxFeeFrom(spendable, luxFee);
 	$: minStake = maxSpendable > 0 ? Math.min(defaultMinStake, maxSpendable) : defaultMinStake;
-
-	let hideStakingNoticeNextTime = false;
+	$: isStakeAmountValid = stakeAmount >= minStake && stakeAmount <= maxSpendable;
+	$: totalLuxFee = luxFee + duskToLux(stakeAmount);
+	$: isFeeWithinLimit = totalLuxFee <= duskToLux(spendable);
+	$: isNextButtonDisabled = flow === "stake"
+		? !(isStakeAmountValid && isValidGas && isFeeWithinLimit) : false;
 
 	function getWizardSteps () {
 		if (flow === "stake") {