From 2ee566aa7d9ed2697a670d5a9761df641ebf157a Mon Sep 17 00:00:00 2001
From: Emmanex01 <nwanosiketochukwu99@gmail.com>
Date: Sun, 31 May 2026 01:40:23 +0100
Subject: [PATCH] fix: fixed browser back navigation (#356)

---
 app/mint/page.tsx | 45 ++++++++++++++++++++++++++---
 app/send/page.tsx | 73 +++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 108 insertions(+), 10 deletions(-)

diff --git a/app/mint/page.tsx b/app/mint/page.tsx
index 780cecc..6c1c73f 100644
--- a/app/mint/page.tsx
+++ b/app/mint/page.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useMemo } from 'react';
 import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { PageContainer } from '@/components/layout/page-container';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -99,6 +100,8 @@ export default function MintPage() {
   const { userId, stellarAddress } = useAuth();
   const { balance, balanceSource, loading: balanceLoading, refresh: refreshBalance } = useBalance();
   const kit = useStellarWalletsKit();
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const [activeTab, setActiveTab] = useState<'mint' | 'burn' | 'rates'>('mint');
   const [step, setStep] = useState<'input' | 'confirm' | 'success'>('input');
   const [burnAmount, setBurnAmount] = useState('');
@@ -203,11 +206,24 @@ export default function MintPage() {
             .finally(() => setRatesLoading(false));
     }, [activeTab, opts.token]);
 
+    useEffect(() => {
+        const stepParam = searchParams.get("step");
+        if (stepParam === "confirm" || stepParam === "success") {
+            setStep(stepParam);
+        } else {
+            setStep("input");
+        }
+    }, [searchParams]);
+
     const handleMintConfirm = () => {
         setMintError("");
+        router.push("/mint?step=confirm", { scroll: false });
+        setStep("confirm");
+    };
+    const handleBurnConfirm = () => {
+        router.push("/mint?step=confirm", { scroll: false });
         setStep("confirm");
     };
-    const handleBurnConfirm = () => setStep("confirm");
     const handleExecuteMint = async () => {
         if (!fiatAmount || parseFloat(fiatAmount) <= 0 || !selectedFiatCurrency)
             return;
@@ -308,6 +324,7 @@ export default function MintPage() {
                 typeof acbu === "number" && Number.isFinite(acbu) ? acbu : null,
             );
             refreshBalance();
+            router.replace("/mint?step=success", { scroll: false });
             setStep("success");
         } catch (e) {
             setMintError(e instanceof Error ? e.message : "Mint failed");
@@ -384,6 +401,7 @@ export default function MintPage() {
                 opts,
             );
             setTxId(res.transaction_id || res.transactionId || null);
+            router.replace("/mint?step=success", { scroll: false });
             setStep("success");
         } catch (e) {
             setBurnError(e instanceof Error ? e.message : "Burn failed");
@@ -400,6 +418,7 @@ export default function MintPage() {
     };
     const resetForm = () => {
         setStep("input");
+        router.replace("/mint", { scroll: false });
         setFiatAmount("");
         setBurnAmount("");
         setBurnError("");
@@ -692,7 +711,15 @@ export default function MintPage() {
         </Tabs>
       </PageContainer>
 
-            <AlertDialog open={step === "confirm"}>
+            <AlertDialog
+                open={step === "confirm"}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        router.replace("/mint", { scroll: false });
+                    }
+                    setStep(open ? "confirm" : "input");
+                }}
+            >
                 <AlertDialogContent className="max-w-md border-border">
                     <AlertDialogHeader>
                         <AlertDialogTitle>
@@ -725,7 +752,10 @@ export default function MintPage() {
                     </div>
                     <div className="flex gap-2">
                         <AlertDialogCancel
-                            onClick={() => setStep("input")}
+                            onClick={() => {
+                                setStep("input");
+                                router.replace("/mint", { scroll: false });
+                            }}
                             disabled={executing}
                         >
                             Cancel
@@ -741,7 +771,14 @@ export default function MintPage() {
                 </AlertDialogContent>
             </AlertDialog>
 
-            <AlertDialog open={step === "success"}>
+            <AlertDialog
+                open={step === "success"}
+                onOpenChange={(open) => {
+                    if (!open) {
+                        router.replace("/mint", { scroll: false });
+                    }
+                }}
+            >
                 <AlertDialogContent className="max-w-md border-border">
                     <AlertDialogHeader>
                         <AlertDialogTitle>Operation Complete</AlertDialogTitle>
diff --git a/app/send/page.tsx b/app/send/page.tsx
index f3f6794..2ad8c5e 100644
--- a/app/send/page.tsx
+++ b/app/send/page.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useCallback } from "react";
 import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -87,6 +88,41 @@ export default function SendPage() {
   const [contactsError, setContactsError] = useState("");
   const [submitError, setSubmitError] = useState("");
   const [sending, setSending] = useState(false);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const step = searchParams.get("step");
+    setShowConfirmDialog(step === "confirm");
+    setShowSuccessDialog(step === "success");
+
+    if (step === "confirm") {
+      setShowSendDialog(true);
+    }
+    if (step === "success") {
+      setShowSendDialog(false);
+    }
+  }, [searchParams]);
+
+  const openConfirmDialog = () => {
+    setShowConfirmDialog(true);
+    router.push("/send?step=confirm", { scroll: false });
+  };
+
+  const closeConfirmDialog = () => {
+    setShowConfirmDialog(false);
+    router.replace("/send", { scroll: false });
+  };
+
+  const openSuccessDialog = () => {
+    setShowSuccessDialog(true);
+    router.replace("/send?step=success", { scroll: false });
+  };
+
+  const closeSuccessDialog = () => {
+    setShowSuccessDialog(false);
+    router.replace("/send", { scroll: false });
+  };
 
   const loadTransfers = useCallback(() => {
     setLoadingTransfers(true);
@@ -201,7 +237,7 @@ export default function SendPage() {
       setShowConfirmDialog(false);
       setShowSendDialog(false);
       setLastSentAmount(amount);
-      setShowSuccessDialog(true);
+      openSuccessDialog();
       setTimeout(() => {
         setShowSuccessDialog(false);
         setAmount("");
@@ -472,7 +508,7 @@ const getStatusColor = (status: string) => {
                 Cancel
               </Button>
               <Button
-                onClick={() => setShowConfirmDialog(true)}
+                onClick={openConfirmDialog}
                 disabled={!isFormValid()}
                 className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90"
               >
@@ -484,7 +520,15 @@ const getStatusColor = (status: string) => {
       </Dialog>
 
       {/* Confirm Dialog */}
-      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+      <AlertDialog
+        open={showConfirmDialog}
+        onOpenChange={(open) => {
+          setShowConfirmDialog(open);
+          if (!open) {
+            router.replace("/send", { scroll: false });
+          }
+        }}
+      >
         <AlertDialogContent className="max-w-md border-border">
           <AlertDialogHeader>
             <AlertDialogTitle>Confirm Transfer</AlertDialogTitle>
@@ -527,8 +571,20 @@ const getStatusColor = (status: string) => {
             )}
           </div>
           <div className="flex gap-3">
-            <AlertDialogCancel className="flex-1 border-border" disabled={sending}>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleConfirmTransfer} className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90" disabled={sending}>{sending ? 'Sending...' : `Send ACBU ${amount}`}</AlertDialogAction>
+            <AlertDialogCancel
+              className="flex-1 border-border"
+              disabled={sending}
+              onClick={closeConfirmDialog}
+            >
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmTransfer}
+              className="flex-1 bg-primary text-primary-foreground hover:bg-primary/90"
+              disabled={sending}
+            >
+              {sending ? 'Sending...' : `Send ACBU ${amount}`}
+            </AlertDialogAction>
           </div>
         </AlertDialogContent>
       </AlertDialog>
@@ -536,7 +592,12 @@ const getStatusColor = (status: string) => {
 
             <Dialog
                 open={showSuccessDialog}
-                onOpenChange={setShowSuccessDialog}
+                onOpenChange={(open) => {
+                  setShowSuccessDialog(open);
+                  if (!open) {
+                    router.replace("/send", { scroll: false });
+                  }
+                }}
             >
                 <DialogContent className="max-w-md border-border">
                     <div className="flex flex-col items-center text-center py-6">