Skip to content

fix: skip confirm step on back navigation (#356)#447

Open
Emmanex01 wants to merge 1 commit into
Pi-Defi-world:devfrom
Emmanex01:fix/356-back-navigation
Open

fix: skip confirm step on back navigation (#356)#447
Emmanex01 wants to merge 1 commit into
Pi-Defi-world:devfrom
Emmanex01:fix/356-back-navigation

Conversation

@Emmanex01

@Emmanex01 Emmanex01 commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

Summary by CodeRabbit

  • Bug Fixes

    • Fixed navigation to properly redirect users to the mint page after successfully completing a burn transaction.
  • Refactor

    • Optimized routing flow between mint and burn operations for improved user experience.

@coderabbitai

coderabbitai Bot commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

This PR updates navigation in mint and burn pages to use Next.js router.replace() instead of router.push(). The burn page now imports and initializes the router, then replaces the route to /mint after successful burn submission. The mint page changes burn confirmation navigation from push() to replace() to avoid preserving intermediate steps in browser history.

Changes

Multi-step Flow Navigation

Layer / File(s) Summary
Burn page router setup and exit navigation
app/burn/page.tsx
BurnPageContent imports and initializes useRouter, then calls router.replace('/mint') after successfully submitting and resetting the burn form.
Mint page burn confirmation navigation
app/mint/page.tsx
handleBurnConfirm changes from router.push() to router.replace() when navigating to the burn page with amount and currency query parameters.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A hop from mint to burn so bright,
But back-button woes gave quite a fright!
Replace the push, the path is clean,
History stacks no longer seen.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly identifies the main fix: skipping the confirm step on back navigation, which is the primary objective of this PR.
Linked Issues check ✅ Passed The PR implements the core requirement from #356 by using router.replace() to clean the history stack, ensuring back navigation skips the confirm step.
Out of Scope Changes check ✅ Passed Changes are limited to app/burn/page.tsx and app/mint/page.tsx with router.replace() modifications as required by #356.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
app/burn/page.tsx (1)

136-204: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Critical: Malformed code structure with duplicates and unreachable code.

The else branch handling external wallet connections has severe structural issues:

  1. Lines 153-159: Code after resolve(address) inside the callback is unreachable
  2. Lines 160-187: Duplicate wallet modal logic (repeats lines 137-151)
  3. Lines 189-196: Misplaced try-catch-finally block that conflicts with the outer try at line 108
  4. Lines 197-204: Duplicate submitBurnRedeemSingleClient call outside any try block

This appears to be a merge conflict or copy-paste error that will cause compilation errors and incorrect execution.

🔧 Suggested fix for the external wallet path

The external wallet path should be:

     } else {
       if (!kit) {
-        throw new Error(
-          "Your wallet secret isn't available on this device and the wallet connector isn't ready yet. Please wait a moment and retry.",
-        );
+        throw new Error("Wallet connector not ready");
       }
       const address = await new Promise<string>((resolve, reject) => {
         kit
           .openModal({
             onWalletSelected: async (selectedOption: { id: string }) => {
               try {
                 kit.setWallet(selectedOption.id);
                 const { address } = await kit.getAddress();
                 resolve(address);
               } catch (err) {
                 reject(err);
               }
             },
           })
           .catch(reject);
       });
-      const submit = await submitBurnRedeemSingleClient({
-          userAddress: stellarAddress,
-          amountAcbu: values.acbuAmount,
-          currency: values.currency,
-          userSecret: secret,
-      });
-      burnTxHash = submit.transactionHash;
-  } else {
-      if (!kit) throw new Error("Wallet connector not ready");
-      const address = await new Promise<string>((resolve, reject) => {
-          kit
-              .openModal({
-                  onWalletSelected: async (selectedOption: { id: string }) => {
-                      try {
-                          kit.setWallet(selectedOption.id);
-                          const { address } = await kit.getAddress();
-                          resolve(address);
-                      } catch (err) {
-                          reject(err);
-                      }
-                  },
-              })
-              .catch(reject);
-      });
-      if (stellarAddress && address !== stellarAddress) {
-          throw new Error("Connected wallet doesn't match linked account");
+      if (stellarAddress && address !== stellarAddress) {
+        throw new Error("Connected wallet doesn't match linked account");
       }
       const submit = await submitBurnRedeemSingleClient({
-          userAddress: stellarAddress,
-          amountAcbu: values.acbuAmount,
-          currency: values.currency,
-          external: { kit, address },
+        userAddress: stellarAddress,
+        amountAcbu: values.acbuAmount,
+        currency: values.currency,
+        external: { kit, address },
       });
       burnTxHash = submit.transactionHash;
-  }
-
-      const res = await burnApi.burnAcbu(values.acbuAmount, values.currency, recipientAccount, opts, burnTxHash);
-      setTxId(res.transaction_id);
-      reset({ ...values, acbuAmount: "" });
-  } catch (e) {
-      setApiError(e);
-  } finally {
-      setLoading(false);
-  }
-  const submit = await submitBurnRedeemSingleClient({
-    userAddress: stellarAddress,
-    amountAcbu: values.acbuAmount,
-    currency: values.currency,
-    external: { kit, address },
-  });
-  burnTxHash = submit.transactionHash;
     }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/burn/page.tsx` around lines 136 - 204, The external-wallet branch
contains duplicated and misplaced code (unreachable statements after resolve in
the kit.openModal onWalletSelected handler, a repeated kit.openModal block, an
extraneous try/catch/finally, and a stray submitBurnRedeemSingleClient call) —
clean this up by removing the duplicated kit.openModal block and the duplicate
submitBurnRedeemSingleClient outside the try, move the
submitBurnRedeemSingleClient call into the correct branch after resolving
address, ensure no code exists after resolve(address) inside onWalletSelected,
keep one consistent flow that calls submitBurnRedeemSingleClient({ userAddress,
amountAcbu: values.acbuAmount, currency: values.currency, external: { kit,
address } }) for external wallets, then call burnApi.burnAcbu(...),
setTxId(res.transaction_id), reset(...), and maintain the existing outer
try/catch/finally that uses setApiError and setLoading.
🧹 Nitpick comments (1)
app/burn/page.tsx (1)

223-223: 💤 Low value

Remove duplicate declaration.

This line duplicates the currency declaration from line 101. The variable is already available in the component scope.

-  const currency = form.watch("currency");
-
   return (
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/burn/page.tsx` at line 223, The variable currency is declared twice;
remove the redundant declaration at the later occurrence (the line calling
form.watch("currency") around where currency is re-declared) so the component
uses the single currency variable already defined in the component scope; keep
the original declaration (the one at the top ~line 101) and delete the duplicate
form.watch("currency") declaration to avoid shadowing.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/burn/page.tsx`:
- Around line 213-215: The success message never appears because after calling
setTxId(...) the code immediately calls router.replace('/mint'), so the success
dialog (which reads txId) cannot render; update the flow to show the success UI
before navigating: introduce a local dialog state (e.g., isBurnSuccessOpen) or
reuse the existing mint success dialog pattern, open the success dialog when
setTxId(...) runs, call form.reset(...) as needed, and only call
router.replace('/mint') after the user closes the dialog (or after a short
timeout if you prefer a delay), ensuring the success component can read txId and
render properly instead of being immediately redirected.

---

Outside diff comments:
In `@app/burn/page.tsx`:
- Around line 136-204: The external-wallet branch contains duplicated and
misplaced code (unreachable statements after resolve in the kit.openModal
onWalletSelected handler, a repeated kit.openModal block, an extraneous
try/catch/finally, and a stray submitBurnRedeemSingleClient call) — clean this
up by removing the duplicated kit.openModal block and the duplicate
submitBurnRedeemSingleClient outside the try, move the
submitBurnRedeemSingleClient call into the correct branch after resolving
address, ensure no code exists after resolve(address) inside onWalletSelected,
keep one consistent flow that calls submitBurnRedeemSingleClient({ userAddress,
amountAcbu: values.acbuAmount, currency: values.currency, external: { kit,
address } }) for external wallets, then call burnApi.burnAcbu(...),
setTxId(res.transaction_id), reset(...), and maintain the existing outer
try/catch/finally that uses setApiError and setLoading.

---

Nitpick comments:
In `@app/burn/page.tsx`:
- Line 223: The variable currency is declared twice; remove the redundant
declaration at the later occurrence (the line calling form.watch("currency")
around where currency is re-declared) so the component uses the single currency
variable already defined in the component scope; keep the original declaration
(the one at the top ~line 101) and delete the duplicate form.watch("currency")
declaration to avoid shadowing.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: db34bc6e-c8c5-4550-89f8-f5a4253447ba

📥 Commits

Reviewing files that changed from the base of the PR and between 777a67b and e32b1d2.

📒 Files selected for processing (2)
  • app/burn/page.tsx
  • app/mint/page.tsx

Comment thread app/burn/page.tsx
Comment on lines 213 to +215
setTxId(res.transaction_id);
form.reset({ ...values, acbuAmount: "" });
router.replace('/mint');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift

Major: Success message not visible to user.

After setting the transaction ID (line 213), the code immediately navigates away to /mint (line 215). This prevents the success message component (lines 247-254) from rendering, leaving users without confirmation of their burn transaction.

This creates an inconsistent experience compared to the mint flow, which displays a success dialog before returning to the input state.

Consider one of these approaches:

  1. Add a delay before navigation to let the success message display briefly
  2. Show a success dialog similar to the mint flow (requires adding dialog state)
  3. Pass txId as a query parameter to /mint and show the success message there
  4. Remove the automatic redirect and add a manual "Back to Mint" button
⏱️ Example: Add delay before navigation
       setTxId(res.transaction_id);
       form.reset({ ...values, acbuAmount: "" });
-      router.replace('/mint');
+      // Show success message briefly before navigating back
+      setTimeout(() => {
+        router.replace('/mint');
+      }, 3000);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
setTxId(res.transaction_id);
form.reset({ ...values, acbuAmount: "" });
router.replace('/mint');
setTxId(res.transaction_id);
form.reset({ ...values, acbuAmount: "" });
// Show success message briefly before navigating back
setTimeout(() => {
router.replace('/mint');
}, 3000);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/burn/page.tsx` around lines 213 - 215, The success message never appears
because after calling setTxId(...) the code immediately calls
router.replace('/mint'), so the success dialog (which reads txId) cannot render;
update the flow to show the success UI before navigating: introduce a local
dialog state (e.g., isBurnSuccessOpen) or reuse the existing mint success dialog
pattern, open the success dialog when setTxId(...) runs, call form.reset(...) as
needed, and only call router.replace('/mint') after the user closes the dialog
(or after a short timeout if you prefer a delay), ensuring the success component
can read txId and render properly instead of being immediately redirected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

back() navigation breaks after multi-step flow – T

1 participant