Repository: dusk-network/rusk (language: rust)

Issue:
web-wallet: `incrementStep` Dispatched Before Approval Confirmation in `handleApprove` (Migration)
### Description
Currently, there is a bug in the `handleApprove` function where the `incrementStep` action is dispatched before the approval has been confirmed. This can lead to issues where the UI progresses to the next step prematurely, even if the approval transaction is still pending or fails.

### Steps to Reproduce
1. Call `handleApprove` when approval is required.
2. Observe that `incrementStep` is dispatched immediately after approval initiation, without waiting for transaction confirmation.

### Expected Behavior 
The `incrementStep` action should only be dispatched:
1. After the transaction hash has been validated.
2. After the transaction has been confirmed with sufficient confirmations.
3. After the allowance check confirms that approval was successful.

### Proposed Fix
- Refactor the `handleApprove` function to ensure that:
  1. `incrementStep` is only dispatched after `waitForTransactionReceipt` confirms the transaction.
  2. An additional allowance check (`checkAllowance`) verifies that the approval was successful.
- Make sure user is informed for an ongoing approval process.

### Acceptance Criteria
- `incrementStep` is dispatched only after the transaction has been confirmed and approval is validated.
- UI no longer progresses prematurely in cases where approval is still pending or fails.
- Appropriate error handling ensures graceful recovery in case of failures.

**Severity**  
- Moderate: Impacts user flow but does not cause permanent inconsistencies.


Discussion / hints:

Fix patch:
diff --git a/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte b/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
index fcc15ffd32..6938e8533c 100644
--- a/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
+++ b/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
@@ -21,8 +21,6 @@
 
   $: ({ address } = $account);
 
-  let hasApprovedCoin = false;
-
   const dispatch = createEventDispatcher();
 
   const approvalTxStore = createDataStore(handleApprove);
@@ -48,27 +46,39 @@
   }
 
   async function handleApprove() {
-    dispatch("initApproval");
+    try {
+      dispatch("initApproval");
+
+      // Check initial allowance
+      let isCoinApproved = await checkAllowance();
 
-    hasApprovedCoin = await checkAllowance();
+      if (isCoinApproved) {
+        dispatch("incrementStep");
+        return;
+      }
 
-    if (!hasApprovedCoin) {
+      // Approve the transaction
       const txHash = await approve(migrationContract, chainContract, amount);
 
-      if (isHex(txHash)) {
-        dispatch("incrementStep");
-        await waitForTransactionReceipt(wagmiConfig, {
-          confirmations: 3,
-          hash: txHash,
-        });
+      if (!isHex(txHash)) {
+        throw new Error("Transaction hash is not a valid hex string.");
+      }
+
+      // Wait for transaction confirmation
+      await waitForTransactionReceipt(wagmiConfig, {
+        confirmations: 3,
+        hash: txHash,
+      });
 
-        hasApprovedCoin = await checkAllowance();
+      // Recheck allowance after approval
+      isCoinApproved = await checkAllowance();
+      if (isCoinApproved) {
+        dispatch("incrementStep");
       } else {
-        dispatch("errorApproval");
-        throw new Error("txHash is not a hex string");
+        throw new Error("Approval failed: Allowance was not updated.");
       }
-    } else {
-      dispatch("incrementStep");
+    } catch {
+      dispatch("errorApproval");
     }
   }
 </script>
@@ -91,12 +101,12 @@
   {:else if isLoading}
     <div class="migrate__approve-approval">
       <Icon path={mdiTimerSand} />
-      <span>Approval in progress</span>
+      <span>Approval in progress...</span>
     </div>
   {:else if error}
     <div class="migrate__approve-approval">
       <Icon path={mdiAlertOutline} />
-      <span>An error occured during approval</span>
+      <span>An error occurred during approval</span>
     </div>
   {/if}
 
diff --git a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
index 116fc61554..442bf43a36 100644
--- a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
+++ b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
@@ -61,7 +61,7 @@
   {:else if isLoading && !migrationHash}
     <div class="migrate__execute-approval">
       <Icon path={mdiTimerSand} />
-      <span>Migration in progress</span>
+      <span>Migration in progress...</span>
     </div>
   {/if}
   {#if migrationHash && chain?.blockExplorers}


Test patch: