From 9f0c0d2215d74415eb5335d08114cc49bc296427 Mon Sep 17 00:00:00 2001
From: vrajasekhar1 <vrreddy@gmail.com>
Date: Fri, 28 Nov 2025 13:00:42 +0530
Subject: [PATCH 1/6] Refactor transaction details page by creating components
 and utility functions

---
 src/app/history/[id]/page.tsx         | 160 +++++---------------------
 src/components/AuditLogPreview.tsx    |  54 +++++++++
 src/components/CommentEditor.tsx      |  52 +++++++++
 src/components/TxDetailsBreakdown.tsx |  62 ++++++++++
 src/components/TxHeaderCard.tsx       |  73 ++++++++++++
 src/lib.ts                            |  34 ++++++
 6 files changed, 306 insertions(+), 129 deletions(-)
 create mode 100644 src/components/AuditLogPreview.tsx
 create mode 100644 src/components/CommentEditor.tsx
 create mode 100644 src/components/TxDetailsBreakdown.tsx
 create mode 100644 src/components/TxHeaderCard.tsx

diff --git a/src/app/history/[id]/page.tsx b/src/app/history/[id]/page.tsx
index fe48f30..77c2d76 100644
--- a/src/app/history/[id]/page.tsx
+++ b/src/app/history/[id]/page.tsx
@@ -2,9 +2,13 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import Modal from '@/components/Modal';
+import TxHeaderCard from '@/components/TxHeaderCard';
+import TxDetailsBreakdown from '@/components/TxDetailsBreakdown';
+import AuditLogPreview from '@/components/AuditLogPreview';
+import CommentEditor from '@/components/CommentEditor';
 import { AppContext } from '@/context/AppContextProvider';
 import { fetchSingleUserOrder, updateOrderStatus, proposeDispute, acceptDispute } from '@/services/orderApi';
-import { mapOrdersToTxItems, TxItem, TxStatus, statusClasses, statusLabel, mapCommentsToFrontend, mapCommentToFrontend } from '@/lib';
+import { mapOrdersToTxItems, TxItem, TxStatus, statusClasses, statusLabel, mapCommentsToFrontend, mapCommentToFrontend, fmt, deriveBreakdown } from '@/lib';
 import { addComment } from '@/services/commentApi';
 import { payWithPi } from '@/config/payment';
 import { toast } from 'react-toastify';
@@ -77,38 +81,6 @@ export default function TxDetailsPage() {
     }
   }, [tx?.status]);
 
-  // Helpers to display the popup breakdown like on the mock
-  const fmt = (n: number) => {
-    if (!Number.isFinite(n)) return '';
-    let s = n.toFixed(5);
-    if (s.includes('.')) {
-      s = s.replace(/0+$/g, '').replace(/\.$/, '');
-    }
-    return s;
-  };
-
-  // Given total (top figure), derive base and fees using the same policy as the homepage
-  const deriveBreakdown = (total: number) => {
-    // Known constants
-    const network = 0.02;
-    // Find base such that total ≈ base + stake + network + escrow
-    // stake = max(0.1*base, 1)
-    // escrow = max(0.01*base, 0.1)
-    let lo = 0, hi = Math.max(total, 1);
-    for (let i = 0; i < 50; i++) {
-      const mid = (lo + hi) / 2;
-      const stake = Math.max(0.1 * mid, 1);
-      const escrow = Math.max(0.01 * mid, 0.1);
-      const t = mid + stake + network + escrow;
-      if (t > total) hi = mid; else lo = mid;
-    }
-    const base = lo;
-    const completionStake = Math.max(0.1 * base, 1);
-    const escrowFee = Math.max(0.01 * base, 0.1);
-    const recomputedTotal = base + completionStake + network + escrowFee;
-    return { base, completionStake, networkFees: network, escrowFee, total: recomputedTotal };
-  };
-
   useEffect(() => {
     const loadOrder = async () => {
       // await a2uTrigger()
@@ -280,34 +252,18 @@ export default function TxDetailsPage() {
 
   return (
     <div className="space-y-4 md:space-y-3 lg:space-y-2 pb-[180px]">
-      <div className="relative flex items-center gap-2">
-        <button
-          aria-label="Go back"
-          className="inline-flex items-center justify-center h-9 w-9 rounded-full border hover:bg-gray-50"
-          onClick={() => router.push('/history')}
-        >
-          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="15 18 9 12 15 6"></polyline>
-          </svg>
-        </button>
-        <h1 className="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-center" style={{ color: 'var(--default-primary-color)' }}>
-          EscrowPi Transaction
-        </h1>
-        <button
-          aria-label="Refresh"
-          className={`absolute right-0 inline-flex items-center justify-center h-9 w-9 rounded-full border ${isRefreshing ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'}`}
-          onClick={() => { if (!isRefreshing) { setIsRefreshing(true); setRefreshTick((t)=>t+1); } }}
-          disabled={isRefreshing}
-          title="Refresh"
-        >
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={isRefreshing ? 'animate-spin' : ''}>
-            <polyline points="23 4 23 10 17 10"></polyline>
-            <polyline points="1 20 1 14 7 14"></polyline>
-            <path d="M3.51 9a9 9 0 0 1 14.13-3.36L23 10"></path>
-            <path d="M20.49 15a9 9 0 0 1-14.13 3.36L1 14"></path>
-          </svg>
-        </button>
-      </div>
+      <TxHeaderCard
+        tx={tx}
+        arrowLabel={arrow}
+        isRefreshing={isRefreshing}
+        onBack={() => router.push('/history')}
+        onRefresh={() => {
+          if (!isRefreshing) {
+            setIsRefreshing(true);
+            setRefreshTick((t) => t + 1);
+          }
+        }}
+      />
 
       <div className="rounded-xl border bg-white p-4 shadow-sm">
         <div className="flex items-center justify-between">
@@ -634,83 +590,29 @@ export default function TxDetailsPage() {
       )}
       </div>
 
-      <details className="group">
-        <summary className="cursor-pointer select-none font-semibold inline-flex items-center gap-2 mt-2">
-          <span>EscrowPi Transaction Details</span>
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="transition-transform duration-200 group-open:rotate-90">
-            <polyline points="9 18 15 12 9 6"></polyline>
-          </svg>
-        </summary>
-        <div className="mt-3 md:mt-2 text-sm">
-          {(() => { const b = deriveBreakdown(tx.amount); const refundNote = tx.myRole === 'payer' ? '(refunded to you at end)' : '(refunded to the payer at end)'; const getLabel = tx.myRole === 'payee' ? 'You get:' : 'Payee gets:'; return (
-            <div className="space-y-2 rounded-lg border border-black p-3">
-              <div className="flex justify-between"><span>{getLabel}</span><span>{fmt(b.base)} pi</span></div>
-              <div className="flex justify-between"><span>Transaction completion stake:</span><span>{fmt(b.completionStake)} pi</span></div>
-              <div className="text-[11px] text-gray-600">{refundNote}</div>
-              <div className="flex justify-between"><span>Pi Network gas fees:</span><span>{fmt(b.networkFees)} pi</span></div>
-              <div className="flex justify-between"><span>EscrowPi fee:</span><span>{fmt(b.escrowFee)} pi</span></div>
-              <div className="flex justify-between font-semibold"><span>Total:</span><span>{fmt(b.total)} pi</span></div>
-            </div>
-          ); })()}
-        </div>
-      </details>
+      <TxDetailsBreakdown tx={tx} />
 
       {/* Audit Log (outside details) */}
       <div className="mt-3 md:mt-2 space-y-3 md:space-y-2 lg:space-y-1 text-sm">
-        <div className="min-h-28" aria-label="Open all comments">
-          <div className="font-semibold mb-2 md:mb-1 text-center">Audit Log</div>
-          <div
-            ref={previewContainerRef}
-            className={`rounded-lg border p-3 md:p-2 bg-white h-40 overflow-hidden cursor-pointer hover:bg-gray-50 flex flex-col justify-start`}
-            onClick={() => setShowComments(true)}
-          >
-            {comments.length === 0 ? (
-              <div className="text-xs text-gray-600">No comments yet.</div>
-            ) : (
-              <div
-                ref={previewContentRef}
-                className="space-y-1 text-xs will-change-transform pb-3"
-                style={{ transform: `translateY(-${offsetPx}px)` }}
-              >
-                {comments.map((c, idx) => (
-                  <div key={idx} className="py-1">
-                    <div className="flex items-center gap-2">
-                      <span className="font-medium text-[13px]">{c.author}</span>
-                      <span className="text-[11px] text-gray-500">{new Date(c.ts).toLocaleString()}</span>
-                    </div>
-                    <div className="whitespace-pre-wrap break-words text-[13px]">{c.text}</div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
+        <AuditLogPreview
+          comments={comments}
+          offsetPx={offsetPx}
+          previewContainerRef={previewContainerRef}
+          previewContentRef={previewContentRef}
+          onOpen={() => setShowComments(true)}
+        />
 
         {/* Add New Comment (outside details) - remains visible, but disabled for terminal states */}
         {(() => {
           // Disputed is not terminal for UC9
           const isTerminal = tx.status === 'cancelled' || tx.status === 'declined' || tx.status === 'released';
           return (
-            <div className="min-h-28">
-              <div className="font-semibold mb-2 md:mb-1 text-center">Add New Comment</div>
-              <textarea
-                value={newComment}
-                onChange={(e) => setNewComment(e.target.value)}
-                rows={4}
-                disabled={isTerminal}
-                placeholder={isTerminal ? 'Adding new comments is closed for this transaction.' : 'Type your comment. You can include contact info or links.'}
-                className={`w-full rounded border p-2 text-xs ${isTerminal ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : ''}`}
-              />
-              <div className="mt-2 flex justify-end">
-                <button
-                  disabled={isTerminal || newComment.trim().length === 0}
-                  className={`px-3 py-2 rounded text-xs font-semibold ${!isTerminal && newComment.trim().length ? 'bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]' : 'bg-gray-200 text-gray-500 cursor-not-allowed'}`}
-                  onClick={() => handleAddComment()}
-                >
-                  Add Comment
-                </button>
-              </div>
-            </div>
+            <CommentEditor
+              value={newComment}
+              onChange={setNewComment}
+              onSubmit={handleAddComment}
+              disabled={isTerminal}
+            />
           );
         })()}
       </div>
diff --git a/src/components/AuditLogPreview.tsx b/src/components/AuditLogPreview.tsx
new file mode 100644
index 0000000..9098dc9
--- /dev/null
+++ b/src/components/AuditLogPreview.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import React from "react";
+
+type Comment = { author: string; text: string; ts: string };
+
+interface AuditLogPreviewProps {
+  comments: Comment[];
+  offsetPx: number;
+  previewContainerRef: React.RefObject<HTMLDivElement>;
+  previewContentRef: React.RefObject<HTMLDivElement>;
+  onOpen: () => void;
+}
+
+export default function AuditLogPreview({
+  comments,
+  offsetPx,
+  previewContainerRef,
+  previewContentRef,
+  onOpen,
+}: AuditLogPreviewProps) {
+  return (
+    <div className="min-h-28" aria-label="Open all comments">
+      <div className="font-semibold mb-2 md:mb-1 text-center">Audit Log</div>
+      <div
+        ref={previewContainerRef}
+        className={`rounded-lg border p-3 md:p-2 bg-white h-40 overflow-hidden cursor-pointer hover:bg-gray-50 flex flex-col justify-start`}
+        onClick={onOpen}
+      >
+        {comments.length === 0 ? (
+          <div className="text-xs text-gray-600">No comments yet.</div>
+        ) : (
+          <div
+            ref={previewContentRef}
+            className="space-y-1 text-xs will-change-transform pb-3"
+            style={{ transform: `translateY(-${offsetPx}px)` }}
+          >
+            {comments.map((c, idx) => (
+              <div key={idx} className="py-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-[13px]">{c.author}</span>
+                  <span className="text-[11px] text-gray-500">
+                    {new Date(c.ts).toLocaleString()}
+                  </span>
+                </div>
+                <div className="whitespace-pre-wrap break-words text-[13px]">{c.text}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/CommentEditor.tsx b/src/components/CommentEditor.tsx
new file mode 100644
index 0000000..fb9efd9
--- /dev/null
+++ b/src/components/CommentEditor.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+
+interface CommentEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  disabled: boolean;
+}
+
+export default function CommentEditor({
+  value,
+  onChange,
+  onSubmit,
+  disabled,
+}: CommentEditorProps) {
+  const trimmed = value.trim();
+
+  return (
+    <div className="min-h-28">
+      <div className="font-semibold mb-2 md:mb-1 text-center">Add New Comment</div>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        rows={4}
+        disabled={disabled}
+        placeholder={
+          disabled
+            ? "Adding new comments is closed for this transaction."
+            : "Type your comment. You can include contact info or links."
+        }
+        className={`w-full rounded border p-2 text-xs ${
+          disabled ? "bg-gray-100 text-gray-400 cursor-not-allowed" : ""
+        }`}
+      />
+      <div className="mt-2 flex justify-end">
+        <button
+          disabled={disabled || trimmed.length === 0}
+          className={`px-3 py-2 rounded text-xs font-semibold ${
+            !disabled && trimmed.length
+              ? "bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+              : "bg-gray-200 text-gray-500 cursor-not-allowed"
+          }`}
+          onClick={onSubmit}
+        >
+          Add Comment
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/TxDetailsBreakdown.tsx b/src/components/TxDetailsBreakdown.tsx
new file mode 100644
index 0000000..b4406bd
--- /dev/null
+++ b/src/components/TxDetailsBreakdown.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import React from "react";
+import { TxItem, fmt, deriveBreakdown } from "@/lib";
+
+interface TxDetailsBreakdownProps {
+  tx: TxItem;
+}
+
+export default function TxDetailsBreakdown({ tx }: TxDetailsBreakdownProps) {
+  const b = deriveBreakdown(tx.amount);
+  const refundNote =
+    tx.myRole === "payer" ? "(refunded to you at end)" : "(refunded to the payer at end)";
+  const getLabel = tx.myRole === "payee" ? "You get:" : "Payee gets:";
+
+  return (
+    <details className="group">
+      <summary className="cursor-pointer select-none font-semibold inline-flex items-center gap-2 mt-2">
+        <span>EscrowPi Transaction Details</span>
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+          className="transition-transform duration-200 group-open:rotate-90"
+        >
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      </summary>
+      <div className="mt-3 md:mt-2 text-sm">
+        <div className="space-y-2 rounded-lg border border-black p-3">
+          <div className="flex justify-between">
+            <span>{getLabel}</span>
+            <span>{fmt(b.base)} pi</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Transaction completion stake:</span>
+            <span>{fmt(b.completionStake)} pi</span>
+          </div>
+          <div className="text-[11px] text-gray-600">{refundNote}</div>
+          <div className="flex justify-between">
+            <span>Pi Network gas fees:</span>
+            <span>{fmt(b.networkFees)} pi</span>
+          </div>
+          <div className="flex justify-between">
+            <span>EscrowPi fee:</span>
+            <span>{fmt(b.escrowFee)} pi</span>
+          </div>
+          <div className="flex justify-between font-semibold">
+            <span>Total:</span>
+            <span>{fmt(b.total)} pi</span>
+          </div>
+        </div>
+      </div>
+    </details>
+  );
+}
diff --git a/src/components/TxHeaderCard.tsx b/src/components/TxHeaderCard.tsx
new file mode 100644
index 0000000..8a6ac2e
--- /dev/null
+++ b/src/components/TxHeaderCard.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+import { TxItem, statusClasses, statusLabel } from "@/lib";
+
+interface TxHeaderCardProps {
+  tx: TxItem;
+  arrowLabel: string;
+  isRefreshing: boolean;
+  onBack: () => void;
+  onRefresh: () => void;
+}
+
+export default function TxHeaderCard({
+  tx,
+  arrowLabel,
+  isRefreshing,
+  onBack,
+  onRefresh,
+}: TxHeaderCardProps) {
+  return (
+    <div className="relative flex items-center gap-2">
+      <button
+        aria-label="Go back"
+        className="inline-flex items-center justify-center h-9 w-9 rounded-full border hover:bg-gray-50"
+        onClick={onBack}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="20"
+          height="20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+      </button>
+      <h1
+        className="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-center"
+        style={{ color: "var(--default-primary-color)" }}
+      >
+        EscrowPi Transaction
+      </h1>
+      <button
+        aria-label="Refresh"
+        className={`absolute right-0 inline-flex items-center justify-center h-9 w-9 rounded-full border ${isRefreshing ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50"}`}
+        onClick={onRefresh}
+        disabled={isRefreshing}
+        title="Refresh"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="18"
+          height="18"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={isRefreshing ? "animate-spin" : ""}
+        >
+          <polyline points="23 4 23 10 17 10"></polyline>
+          <polyline points="1 20 1 14 7 14"></polyline>
+          <path d="M3.51 9a9 9 0 0 1 14.13-3.36L23 10"></path>
+          <path d="M20.49 15a9 9 0 0 1-14.13 3.36L1 14"></path>
+        </svg>
+      </button>
+    </div>
+  );
+}
diff --git a/src/lib.ts b/src/lib.ts
index 77a112b..6bd0762 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -96,3 +96,37 @@ export function mapCommentsToFrontend(comments: IComment[], authUsername: string
   return comments.map((comment) => mapCommentToFrontend(comment, authUsername));
 }
 
+// Helpers to display breakdown figures consistently across the app
+export const fmt = (n: number): string => {
+  if (!Number.isFinite(n)) return "";
+  let s = n.toFixed(5);
+  if (s.includes(".")) {
+    s = s.replace(/0+$/g, "").replace(/\.$/, "");
+  }
+  return s;
+};
+
+// Given total (top figure), derive base and fees using the same policy as the homepage
+export const deriveBreakdown = (total: number) => {
+  // Known constants
+  const network = 0.02;
+  // Find base such that total ≈ base + stake + network + escrow
+  // stake = max(0.1*base, 1)
+  // escrow = max(0.01*base, 0.1)
+  let lo = 0,
+    hi = Math.max(total, 1);
+  for (let i = 0; i < 50; i++) {
+    const mid = (lo + hi) / 2;
+    const stake = Math.max(0.1 * mid, 1);
+    const escrow = Math.max(0.01 * mid, 0.1);
+    const t = mid + stake + network + escrow;
+    if (t > total) hi = mid;
+    else lo = mid;
+  }
+  const base = lo;
+  const completionStake = Math.max(0.1 * base, 1);
+  const escrowFee = Math.max(0.01 * base, 0.1);
+  const recomputedTotal = base + completionStake + network + escrowFee;
+  return { base, completionStake, networkFees: network, escrowFee, total: recomputedTotal };
+};
+

From c60f7eab9359a5ce86391e3d34212c3d19452b9e Mon Sep 17 00:00:00 2001
From: vrajasekhar1 <vrreddy@gmail.com>
Date: Fri, 5 Dec 2025 11:17:03 +0530
Subject: [PATCH 2/6] Refactor transaction modals by extracting them into
 separate components

---
 src/app/history/[id]/page.tsx                 | 599 ++++++------------
 .../tx-modals/TxAcceptProposalModal.tsx       |  83 +++
 .../tx-modals/TxAcceptRequestModal.tsx        |  72 +++
 .../tx-modals/TxCancelInitiatedModal.tsx      |  51 ++
 .../tx-modals/TxCancelPaidModal.tsx           |  83 +++
 .../tx-modals/TxCancelRequestModal.tsx        |  51 ++
 src/components/tx-modals/TxCommentsModal.tsx  |  49 ++
 .../tx-modals/TxDisputeConfirmModal.tsx       |  51 ++
 src/components/tx-modals/TxFulfilledModal.tsx |  46 ++
 src/components/tx-modals/TxReceivedModal.tsx  |  70 ++
 .../tx-modals/TxRejectRequestModal.tsx        |  46 ++
 .../tx-modals/TxSendProposalModal.tsx         |  82 +++
 12 files changed, 889 insertions(+), 394 deletions(-)
 create mode 100644 src/components/tx-modals/TxAcceptProposalModal.tsx
 create mode 100644 src/components/tx-modals/TxAcceptRequestModal.tsx
 create mode 100644 src/components/tx-modals/TxCancelInitiatedModal.tsx
 create mode 100644 src/components/tx-modals/TxCancelPaidModal.tsx
 create mode 100644 src/components/tx-modals/TxCancelRequestModal.tsx
 create mode 100644 src/components/tx-modals/TxCommentsModal.tsx
 create mode 100644 src/components/tx-modals/TxDisputeConfirmModal.tsx
 create mode 100644 src/components/tx-modals/TxFulfilledModal.tsx
 create mode 100644 src/components/tx-modals/TxReceivedModal.tsx
 create mode 100644 src/components/tx-modals/TxRejectRequestModal.tsx
 create mode 100644 src/components/tx-modals/TxSendProposalModal.tsx

diff --git a/src/app/history/[id]/page.tsx b/src/app/history/[id]/page.tsx
index 77c2d76..c843c24 100644
--- a/src/app/history/[id]/page.tsx
+++ b/src/app/history/[id]/page.tsx
@@ -6,6 +6,17 @@ import TxHeaderCard from '@/components/TxHeaderCard';
 import TxDetailsBreakdown from '@/components/TxDetailsBreakdown';
 import AuditLogPreview from '@/components/AuditLogPreview';
 import CommentEditor from '@/components/CommentEditor';
+import TxDisputeConfirmModal from '@/components/tx-modals/TxDisputeConfirmModal';
+import TxCancelInitiatedModal from '@/components/tx-modals/TxCancelInitiatedModal';
+import TxCancelPaidModal from '@/components/tx-modals/TxCancelPaidModal';
+import TxReceivedModal from '@/components/tx-modals/TxReceivedModal';
+import TxFulfilledModal from '@/components/tx-modals/TxFulfilledModal';
+import TxCancelRequestModal from '@/components/tx-modals/TxCancelRequestModal';
+import TxRejectRequestModal from '@/components/tx-modals/TxRejectRequestModal';
+import TxAcceptRequestModal from '@/components/tx-modals/TxAcceptRequestModal';
+import TxCommentsModal from '@/components/tx-modals/TxCommentsModal';
+import TxSendProposalModal from '@/components/tx-modals/TxSendProposalModal';
+import TxAcceptProposalModal from '@/components/tx-modals/TxAcceptProposalModal';
 import { AppContext } from '@/context/AppContextProvider';
 import { fetchSingleUserOrder, updateOrderStatus, proposeDispute, acceptDispute } from '@/services/orderApi';
 import { mapOrdersToTxItems, TxItem, TxStatus, statusClasses, statusLabel, mapCommentsToFrontend, mapCommentToFrontend, fmt, deriveBreakdown } from '@/lib';
@@ -285,309 +296,168 @@ export default function TxDetailsPage() {
         {/* Disputed banner removed from top card; message is shown in Action area for consistency */}
 
         {/* UC8/UC6/UC7: Dispute popup (payee at fulfilled OR payer at paid/fulfilled) */}
-      {((tx.myRole === 'payee' && tx.status === 'fulfilled') || (tx.myRole === 'payer' && (tx.status === 'paid' || tx.status === 'fulfilled'))) && (
-        <Modal
-          open={showDispute}
-          onClose={() => setShowDispute(false)}
-          title={<div className="font-semibold text-center">Confirm you dispute the transaction</div>}
-        >
-          <div className="space-y-2 text-sm">
-            <div className="text-center text-gray-700">This will mark transaction status as disputed.</div>
-            <div className="pt-2">
-              <button
-                className="w-full py-2 rounded-lg text-sm font-semibold"
-                style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}
-                onClick={()=> handleAction('disputed')}
-              >
-                Confirm
-              </button>
-            </div>
-          </div>
-        </Modal>
-      )}
+      <TxDisputeConfirmModal
+        tx={tx}
+        open={showDispute}
+        onClose={() => setShowDispute(false)}
+        onConfirm={() => handleAction('disputed')}
+      />
 
       {/* UC0: Cancel popup (any transactions at initiated) */}
-      {tx.status === 'initiated' && (
-        <Modal
-          open={showCancel}
-          onClose={() => setShowCancel(false)}
-          title={<div className="font-semibold text-center">Confirm you wish to cancel the initiated transaction</div>}
-        >
-          <div className="space-y-2 text-sm">
-            <div className="text-center text-gray-700">This will cancel the initiated transaction.</div>
-            <div className="pt-2">
-              <button
-                className="w-full py-2 rounded-lg text-sm font-semibold"
-                style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}
-                onClick={() => {
-                  setShowCancel(false);
-                  handleAction('cancelled');
-                }}
-              >
-                Confirm Cancel
-              </button>
-            </div>
-          </div>
-        </Modal>
-      )}
+      <TxCancelInitiatedModal
+        tx={tx}
+        open={showCancel}
+        onClose={() => setShowCancel(false)}
+        onConfirm={() => {
+          setShowCancel(false);
+          handleAction('cancelled');
+        }}
+      />
 
       {/* UC6a: Cancel popup (payer at paid) */}
-      {tx.myRole === 'payer' && tx.status === 'paid' && (
-        <Modal
-          open={showCancel}
-          onClose={() => setShowCancel(false)}
-          title={(() => { const b = deriveBreakdown(tx.amount); const networkRefund = 0.01; const refundTotal = b.base + b.completionStake + networkRefund; return (
-            <div className="text-center space-y-1">
-              <div className="font-semibold">Confirm cancel transaction and get refund</div>
-              <div className="text-2xl font-bold">{fmt(refundTotal)} pi</div>
-            </div>
-          ); })()}
-        >
-          <div className="space-y-3 text-sm">
-            {(() => { const b = deriveBreakdown(tx.amount); const networkRefund = 0.01; const networkNotRefunded = 0.01; const refundTotal = b.base + b.completionStake + networkRefund; return (
-              <div className="space-y-2 rounded-lg p-3">
-                <div className="flex justify-between"><span>Payer amount (refunded):</span><span>{fmt(b.base)} pi</span></div>
-                <div className="flex justify-between"><span>Transaction Stake (refunded):</span><span>{fmt(b.completionStake)} pi</span></div>
-                <div className="flex justify-between"><span>Pi Network gas fees (refunded):</span><span>{fmt(networkRefund)} pi</span></div>
-                <div className="flex justify-between font-semibold border-t pt-2"><span>Total refunded:</span><span>{fmt(refundTotal)} pi</span></div>
-              </div>
-            ); })()}
-            <div className="pt-2">
-              <button
-                className="w-full py-2 rounded-lg text-sm font-semibold"
-                style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}
-                onClick={() => {
-                  setShowCancel(false);
-                  handleAction('cancelled');
-                }}
-              >
-                Confirm
-              </button>
-            </div>
-          </div>
-        </Modal>
-      )}
+      <TxCancelPaidModal
+        tx={tx}
+        open={showCancel}
+        onClose={() => setShowCancel(false)}
+        onConfirm={() => {
+          setShowCancel(false);
+          handleAction('cancelled');
+        }}
+      />
 
       {/* UC9: Send Proposal popup (payer/payee at disputed) */}
-      {tx.status === 'disputed' && (
-        <>
-          <Modal
-            open={showSendProposal}
-            onClose={() => setShowSendProposal(false)}
-            title={<div className="font-semibold text-center">You propose dispute resolution refund {refundPercent}%</div>}
-          >
-            {(() => { const b = deriveBreakdown(tx.amount); const refund = (b.base * refundPercent) / 100; const payeeGets = b.base - refund; return (
-              <div className="space-y-2 text-sm">
-                <div className="flex justify-between"><span>Payer gets refund:</span><span>{fmt(refund)} pi</span></div>
-                <div className="flex justify-between"><span>Payee gets:</span><span>{fmt(payeeGets)} pi</span></div>
-                <div className="flex justify-between"><span>Stake refunded to Payer:</span><span>{fmt(b.completionStake)} pi</span></div>
-                { Math.abs(refundPercent - 100) < 1e-9 && <div className="flex justify-between"><span>Pi Network gas fees (refunded to payer):</span><span>{fmt(0.01)} pi</span></div> }
-                <div className="flex justify-between font-semibold border-t pt-2"><span>Total refunded:</span><span>{fmt(refund + b.completionStake + (Math.abs(refundPercent - 100) < 1e-9 ? 0.01 : 0))} pi</span></div>
-                <div className="pt-2">
-                  <button
-                    className="w-full py-2 rounded-lg text-sm font-semibold"
-                    style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}
-                    onClick={async () => {
-                      try {
-                        const percentVal = parseFloat(refundPercentStr);
-                        const chosen = Number.isFinite(percentVal) ? percentVal : refundPercent;
-                        const res = await proposeDispute(id, { percent: chosen });
-                        if (!res) {
-                          toast.error('Failed to propose dispute');
-                          return;
-                        }
-                        const refreshed = await fetchSingleUserOrder(id);
-                        if (refreshed) {
-                          const txItem = mapOrdersToTxItems([refreshed.order], currentUser?.pi_username as string);
-                          setTx(txItem[0] ?? null);
-                          setComments(mapCommentsToFrontend(refreshed.comments, currentUser?.pi_username as string));
-                          const d = refreshed.order.dispute;
-                          if (d && d.status === 'proposed') {
-                            if (typeof d.proposal_percent === 'number') {
-                              const pct = d.proposal_percent;
-                              setRefundPercent(pct);
-                              setRefundPercentStr(String(pct));
-                              setLastProposedPercent(pct);
-                            }
-                            const proposer = d.proposed_by;
-                            if (proposer) {
-                              const role = proposer === refreshed.order.sender_username ? 'payer' : 'payee';
-                              setLastProposedBy(role);
-                              setLastProposedByUsername(proposer);
-                            }
-                            setDisputeStatus('proposed');
-                            setAcceptedByUsername(null);
-                          }
-                        }
-                        setShowSendProposal(false);
-                        setActionBanner('Action completed successfully');
-                        setTimeout(() => setActionBanner(''), 2000);
-                        toast.success('Dispute proposal sent');
-                      } catch (e) {
-                        toast.error('Error sending dispute proposal');
-                      }
-                    }}
-                  >
-                    Confirm
-                  </button>
-                </div>
-              </div>
-            ); })()}
-          </Modal>
+      <TxSendProposalModal
+        tx={tx}
+        open={showSendProposal}
+        onClose={() => setShowSendProposal(false)}
+        refundPercent={refundPercent}
+        refundPercentStr={refundPercentStr}
+        onConfirm={async () => {
+          try {
+            const percentVal = parseFloat(refundPercentStr);
+            const chosen = Number.isFinite(percentVal) ? percentVal : refundPercent;
+            const res = await proposeDispute(id, { percent: chosen });
+            if (!res) {
+              toast.error('Failed to propose dispute');
+              return;
+            }
+            const refreshed = await fetchSingleUserOrder(id);
+            if (refreshed) {
+              const txItem = mapOrdersToTxItems([refreshed.order], currentUser?.pi_username as string);
+              setTx(txItem[0] ?? null);
+              setComments(mapCommentsToFrontend(refreshed.comments, currentUser?.pi_username as string));
+              const d = refreshed.order.dispute;
+              if (d && d.status === 'proposed') {
+                if (typeof d.proposal_percent === 'number') {
+                  const pct = d.proposal_percent;
+                  setRefundPercent(pct);
+                  setRefundPercentStr(String(pct));
+                  setLastProposedPercent(pct);
+                }
+                const proposer = d.proposed_by;
+                if (proposer) {
+                  const role = proposer === refreshed.order.sender_username ? 'payer' : 'payee';
+                  setLastProposedBy(role);
+                  setLastProposedByUsername(proposer);
+                }
+                setDisputeStatus('proposed');
+                setAcceptedByUsername(null);
+              }
+            }
+            setShowSendProposal(false);
+            setActionBanner('Action completed successfully');
+            setTimeout(() => setActionBanner(''), 2000);
+            toast.success('Dispute proposal sent');
+          } catch (e) {
+            toast.error('Error sending dispute proposal');
+          }
+        }}
+      />
 
-          {/* Accept Proposal popup (payer/payee at disputed) */}
-          <Modal
-            open={showAcceptProposal}
-            onClose={() => setShowAcceptProposal(false)}
-            title={<div className="font-semibold text-center">You accept dispute resolution refund {lastProposedPercent ?? refundPercent}%</div>}
-          >
-            {(() => { const b = deriveBreakdown(tx.amount); const percent = (lastProposedPercent ?? refundPercent); const refund = (b.base * percent) / 100; const payeeGets = b.base - refund; return (
-              <div className="space-y-2 text-sm">
-                <div className="flex justify-between"><span>Payer gets refund:</span><span>{fmt(refund)} pi</span></div>
-                <div className="flex justify-between"><span>Payee gets:</span><span>{fmt(payeeGets)} pi</span></div>
-                <div className="flex justify-between"><span>Stake refunded to Payer:</span><span>{fmt(b.completionStake)} pi</span></div>
-                { Math.abs(percent - 100) < 1e-9 && <div className="flex justify-between"><span>Pi Network gas fees (refunded to payer):</span><span>{fmt(0.01)} pi</span></div> }
-                <div className="flex justify-between font-semibold border-t pt-2"><span>Total refunded:</span><span>{fmt(refund + b.completionStake + (Math.abs(percent - 100) < 1e-9 ? 0.01 : 0))} pi</span></div>
-                <div className="pt-2">
-                  <button
-                    className="w-full py-2 rounded-lg text-sm font-semibold"
-                    style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}
-                    onClick={async () => {
-                      try {
-                        const res = await acceptDispute(id, {});
-                        if (!res) {
-                          toast.error('Failed to accept dispute');
-                          return;
-                        }
-                        const refreshed = await fetchSingleUserOrder(id);
-                        if (refreshed) {
-                          const txItem = mapOrdersToTxItems([refreshed.order], currentUser?.pi_username as string);
-                          setTx(txItem[0] ?? null);
-                          setComments(mapCommentsToFrontend(refreshed.comments, currentUser?.pi_username as string));
-                          const d = refreshed.order.dispute;
-                          if (d) {
-                            if (d.status === 'accepted') {
-                              if (typeof d.proposal_percent === 'number') {
-                                const pct = d.proposal_percent;
-                                setRefundPercent(pct);
-                                setRefundPercentStr(String(pct));
-                                setLastProposedPercent(pct);
-                              }
-                              setLastProposedByUsername(d.proposed_by || null);
-                              setAcceptedByUsername(d.accepted_by || null);
-                              setDisputeStatus('accepted');
-                            } else if (d.status === 'proposed') {
-                              setDisputeStatus('proposed');
-                            } else {
-                              setLastProposedPercent(null);
-                              setLastProposedBy(null);
-                              setLastProposedByUsername(null);
-                              setAcceptedByUsername(null);
-                              setDisputeStatus((d.status as any) || 'none');
-                            }
-                          }
-                        }
-                        setShowAcceptProposal(false);
-                        setActionBanner('Action completed successfully');
-                        setTimeout(() => setActionBanner(''), 2000);
-                        toast.success('Dispute proposal accepted');
-                      } catch (e) {
-                        toast.error('Error accepting dispute');
-                      }
-                    }}
-                  >
-                    Confirm
-                  </button>
-                </div>
-              </div>
-            ); })()}
-          </Modal>
-        </>
-      )}
+      {/* Accept Proposal popup (payer/payee at disputed) */}
+      <TxAcceptProposalModal
+        tx={tx}
+        open={showAcceptProposal}
+        onClose={() => setShowAcceptProposal(false)}
+        lastProposedPercent={lastProposedPercent}
+        refundPercent={refundPercent}
+        onConfirm={async () => {
+          try {
+            const res = await acceptDispute(id, {});
+            if (!res) {
+              toast.error('Failed to accept dispute');
+              return;
+            }
+            const refreshed = await fetchSingleUserOrder(id);
+            if (refreshed) {
+              const txItem = mapOrdersToTxItems([refreshed.order], currentUser?.pi_username as string);
+              setTx(txItem[0] ?? null);
+              setComments(mapCommentsToFrontend(refreshed.comments, currentUser?.pi_username as string));
+              const d = refreshed.order.dispute;
+              if (d) {
+                if (d.status === 'accepted') {
+                  if (typeof d.proposal_percent === 'number') {
+                    const pct = d.proposal_percent;
+                    setRefundPercent(pct);
+                    setRefundPercentStr(String(pct));
+                    setLastProposedPercent(pct);
+                  }
+                  setLastProposedByUsername(d.proposed_by || null);
+                  setAcceptedByUsername(d.accepted_by || null);
+                  setDisputeStatus('accepted');
+                } else if (d.status === 'proposed') {
+                  setDisputeStatus('proposed');
+                } else {
+                  setLastProposedPercent(null);
+                  setLastProposedBy(null);
+                  setLastProposedByUsername(null);
+                  setAcceptedByUsername(null);
+                  setDisputeStatus((d.status as any) || 'none');
+                }
+              }
+            }
+            setShowAcceptProposal(false);
+            setActionBanner('Action completed successfully');
+            setTimeout(() => setActionBanner(''), 2000);
+            toast.success('Dispute proposal accepted');
+          } catch (e) {
+            toast.error('Error accepting dispute');
+          }
+        }}
+      />
 
       {/* UC7: Received popup (payer at fulfilled) */}
-      {tx.myRole === 'payer' && tx.status === 'fulfilled' && (
-        <Modal
-          open={showReceived}
-          onClose={() => setShowReceived(false)}
-          title={<div className="font-semibold text-center">Confirm purchased item(s) received and release payment</div>}
-        >
-          <div className="space-y-3 text-sm">
-            <div className="text-center text-gray-700">This will mark transaction status as {statusLabel['released']}.</div>
-            {(() => { const b = deriveBreakdown(tx.amount); return (
-              <div className="space-y-2 rounded-lg border border-black p-3">
-                <div className="flex justify-between"><span>Payee gets:</span><span>{fmt(b.base)} pi</span></div>
-                <div className="flex justify-between"><span>Stake refunded to Payer:</span><span>{fmt(b.completionStake)} pi</span></div>
-                <div className="flex justify-between"><span>Pi Network gas fees:</span><span>{fmt(b.networkFees)} pi</span></div>
-                <div className="flex justify-between"><span>EscrowPi fee:</span><span>{fmt(b.escrowFee)} pi</span></div>
-                <div className="flex justify-between font-semibold"><span>Total:</span><span>{fmt(b.total)} pi</span></div>
-              </div>
-            ); })()}
-            <div className="pt-2">
-              <button
-                className="w-full py-2 rounded-lg text-sm font-semibold"
-                style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}
-                onClick={() => {
-                  setShowReceived(false);
-                  handleAction('released');
-                }}
-              >
-                Confirm
-              </button>
-            </div>
-          </div>
-        </Modal>
-      )}
+      <TxReceivedModal
+        tx={tx}
+        open={showReceived}
+        onClose={() => setShowReceived(false)}
+        onConfirm={() => {
+          setShowReceived(false);
+          handleAction('released');
+        }}
+      />
 
       {/* UC5: Fulfilled popup (payee at paid) */}
-      {tx.myRole === 'payee' && tx.status === 'paid' && (
-        <Modal
-          open={showFulfilled}
-          onClose={() => setShowFulfilled(false)}
-          title={<div className="font-semibold text-center">Confirm you have fulfilled the purchase</div>}
-        >
-          <div className="space-y-2 text-sm">
-            <div className="text-center text-gray-700">This will mark transaction status as fulfilled.</div>
-            <div className="pt-2">
-              <button
-                className="w-full py-2 rounded-lg text-sm font-semibold"
-                style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}
-                onClick={() => {
-                  setShowFulfilled(false);
-                  handleAction('fulfilled');
-                }}
-              >
-                Confirm
-              </button>
-            </div>
-          </div>
-        </Modal>
-      )}
+      <TxFulfilledModal
+        tx={tx}
+        open={showFulfilled}
+        onClose={() => setShowFulfilled(false)}
+        onConfirm={() => {
+          setShowFulfilled(false);
+          handleAction('fulfilled');
+        }}
+      />
 
       {/* UC3: Cancel popup (payee at requested) */}
-      {tx.myRole === 'payee' && tx.status === 'requested' && (
-        <Modal
-          open={showCancel}
-          onClose={() => setShowCancel(false)}
-          title={<div className="font-semibold text-center">Confirm you cancel the request to pay pi</div>}
-        >
-          <div className="space-y-2 text-sm">
-            <div className="text-center text-gray-700">This will cancel the current Pi transfer request.</div>
-            <div className="pt-2">
-              <button
-                className="w-full py-2 rounded-lg text-sm font-semibold"
-                style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}
-                onClick={() => {
-                  setShowCancel(false);
-                  handleAction('cancelled');
-                }}
-              >
-                Confirm Cancel
-              </button>
-            </div>
-          </div>
-        </Modal>
-      )}
+      <TxCancelRequestModal
+        tx={tx}
+        open={showCancel}
+        onClose={() => setShowCancel(false)}
+        onConfirm={() => {
+          setShowCancel(false);
+          handleAction('cancelled');
+        }}
+      />
       </div>
 
       <TxDetailsBreakdown tx={tx} />
@@ -948,115 +818,56 @@ export default function TxDetailsPage() {
       )}
 
       {/* UC2: Reject popup (payer at requested) */}
-      {tx.myRole === 'payer' && tx.status === 'requested' && (
-        <Modal
-          open={showReject}
-          onClose={() => setShowReject(false)}
-          title={
-            <div className="text-center space-y-1">
-              <div className="font-semibold">Confirm you reject the request to pay pi</div>
-            </div>
-          }
-        >
-          <div className="space-y-2 text-sm">
-            <div className="pt-2">
-              <button
-                className="w-full py-2 rounded-lg text-sm font-semibold bg-red-100 text-red-700 border border-red-200"
-                onClick={() => {
-                  setShowReject(false);
-                  handleAction('declined');
-                }}
-              >
-                Confirm Reject
-              </button>
-            </div>
-          </div>
-        </Modal>
-      )}
+      <TxRejectRequestModal
+        tx={tx}
+        open={showReject}
+        onClose={() => setShowReject(false)}
+        onConfirm={() => {
+          setShowReject(false);
+          handleAction('declined');
+        }}
+      />
 
       {/* UC2: Accept popup (payer at requested) */}
-      {tx.myRole === 'payer' && tx.status === 'requested' && (
-        <Modal
-          open={showAccept}
-          onClose={() => setShowAccept(false)}
-          title={
-            <div className="text-center space-y-1">
-              <div className="font-semibold">Confirm you accept the request to pay pi</div>
-              <div className="text-2xl font-bold">{fmt(deriveBreakdown(tx.amount).total)} pi</div>
-            </div>
+      <TxAcceptRequestModal
+        tx={tx}
+        open={showAccept}
+        onClose={() => setShowAccept(false)}
+        onConfirm={async () => {
+          try {
+            setShowAccept(false);
+            if (!currentUser?.pi_username) {
+              toast.error('Please sign in');
+              return;
+            }
+            const paymentData = {
+              amount: tx.amount,
+              memo: `Escrow payment between ${currentUser.pi_username} and ${tx.counterparty}`,
+              metadata: { orderType: 'send', order_no: id },
+            };
+            await payWithPi(
+              paymentData,
+              () => {
+                setActionBanner('Payment completed successfully');
+                setTimeout(() => setActionBanner(''), 2000);
+                router.push('/history');
+              },
+              () => {
+                toast.error('Payment error');
+              }
+            );
+          } catch (e) {
+            toast.error('Payment error');
           }
-        >
-          {(() => { const b = deriveBreakdown(tx.amount); return (
-          <div className="space-y-2 text-sm">
-            <div className="flex justify-between"><span>They get:</span><span>{fmt(b.base)} pi</span></div>
-            <div className="flex justify-between"><span>Transaction completion stake:</span><span>{fmt(b.completionStake)} pi</span></div>
-            <div className="text-[11px] text-gray-600">(refunded to you at end)</div>
-            <div className="flex justify-between"><span>Pi Network gas fees:</span><span>{fmt(b.networkFees)} pi</span></div>
-            <div className="flex justify-between"><span>EscrowPi fee:</span><span>{fmt(b.escrowFee)} pi</span></div>
-            <div className="pt-2">
-              <button
-                className="w-full py-2 rounded-lg text-sm font-semibold"
-                style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}
-                onClick={async () => {
-                  try {
-                    setShowAccept(false);
-                    if (!currentUser?.pi_username) {
-                      toast.error('Please sign in');
-                      return;
-                    }
-                    const paymentData = {
-                      amount: tx.amount,
-                      memo: `Escrow payment between ${currentUser.pi_username} and ${tx.counterparty}`,
-                      metadata: { orderType: 'send', order_no: id },
-                    };
-                    await payWithPi(
-                      paymentData,
-                      () => {
-                        setActionBanner('Payment completed successfully');
-                        setTimeout(() => setActionBanner(''), 2000);
-                        router.push('/history');
-                      },
-                      () => {
-                        toast.error('Payment error');
-                      }
-                    );
-                  } catch (e) {
-                    toast.error('Payment error');
-                  }
-                }}
-              >
-                Confirm Accept
-              </button>
-            </div>
-          </div> ); })()}
-        </Modal>
-      )}
+        }}
+      />
 
       {/* Full-screen reader for all comments */}
-      {showComments && (
-        <Modal
-          open={showComments}
-          onClose={() => setShowComments(false)}
-          title={<div className="font-semibold">Audit Log</div>}
-          fullScreen
-        >
-          <div className="space-y-2 text-sm overflow-auto pr-1">
-            {comments.length === 0 ? (
-              <div className="text-xs text-gray-600">No comments yet.</div>
-            ) : (
-              comments.map((c, i) => (
-                <div key={i} className="py-1">
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium text-[13px]">{c.author}</span>
-                    <span className="text-[11px] text-gray-500">{new Date(c.ts).toLocaleString()}</span>
-                  </div>
-                  <div className="whitespace-pre-wrap break-words text-[13px]">{c.text}</div>
-                </div>
-              ))
-            )}
-          </div>
-        </Modal>
-      )}
+      <TxCommentsModal
+        open={showComments}
+        onClose={() => setShowComments(false)}
+        comments={comments}
+      />
     </div>
   );
 }
diff --git a/src/components/tx-modals/TxAcceptProposalModal.tsx b/src/components/tx-modals/TxAcceptProposalModal.tsx
new file mode 100644
index 0000000..3cc7677
--- /dev/null
+++ b/src/components/tx-modals/TxAcceptProposalModal.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem, fmt, deriveBreakdown } from "@/lib";
+
+interface TxAcceptProposalModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  lastProposedPercent: number | null;
+  refundPercent: number;
+  onConfirm: () => Promise<void>;
+}
+
+export default function TxAcceptProposalModal({
+  tx,
+  open,
+  onClose,
+  lastProposedPercent,
+  refundPercent,
+  onConfirm,
+}: TxAcceptProposalModalProps) {
+  if (tx.status !== "disputed") return null;
+
+  const b = deriveBreakdown(tx.amount);
+  const percent = lastProposedPercent ?? refundPercent;
+  const refund = (b.base * percent) / 100;
+  const payeeGets = b.base - refund;
+  const showNetworkRefund = Math.abs(percent - 100) < 1e-9;
+  const totalRefunded = refund + b.completionStake + (showNetworkRefund ? 0.01 : 0);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={
+        <div className="font-semibold text-center">
+          You accept dispute resolution refund {percent}%
+        </div>
+      }
+    >
+      <div className="space-y-2 text-sm">
+        <div className="flex justify-between">
+          <span>Payer gets refund:</span>
+          <span>{fmt(refund)} pi</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Payee gets:</span>
+          <span>{fmt(payeeGets)} pi</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Stake refunded to Payer:</span>
+          <span>{fmt(b.completionStake)} pi</span>
+        </div>
+        {showNetworkRefund && (
+          <div className="flex justify-between">
+            <span>Pi Network gas fees (refunded to payer):</span>
+            <span>{fmt(0.01)} pi</span>
+          </div>
+        )}
+        <div className="flex justify-between font-semibold border-t pt-2">
+          <span>Total refunded:</span>
+          <span>{fmt(totalRefunded)} pi</span>
+        </div>
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold"
+            style={{
+              background: "var(--default-primary-color)",
+              color: "var(--default-secondary-color)",
+            }}
+            onClick={async () => {
+              await onConfirm();
+            }}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxAcceptRequestModal.tsx b/src/components/tx-modals/TxAcceptRequestModal.tsx
new file mode 100644
index 0000000..80360ad
--- /dev/null
+++ b/src/components/tx-modals/TxAcceptRequestModal.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem, fmt, deriveBreakdown } from "@/lib";
+
+interface TxAcceptRequestModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+}
+
+export default function TxAcceptRequestModal({
+  tx,
+  open,
+  onClose,
+  onConfirm,
+}: TxAcceptRequestModalProps) {
+  if (!(tx.myRole === "payer" && tx.status === "requested")) return null;
+
+  const b = deriveBreakdown(tx.amount);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={
+        <div className="text-center space-y-1">
+          <div className="font-semibold">
+            Confirm you accept the request to pay pi
+          </div>
+          <div className="text-2xl font-bold">{fmt(b.total)} pi</div>
+        </div>
+      }
+    >
+      <div className="space-y-2 text-sm">
+        <div className="flex justify-between">
+          <span>They get:</span>
+          <span>{fmt(b.base)} pi</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Transaction completion stake:</span>
+          <span>{fmt(b.completionStake)} pi</span>
+        </div>
+        <div className="text-[11px] text-gray-600">(refunded to you at end)</div>
+        <div className="flex justify-between">
+          <span>Pi Network gas fees:</span>
+          <span>{fmt(b.networkFees)} pi</span>
+        </div>
+        <div className="flex justify-between">
+          <span>EscrowPi fee:</span>
+          <span>{fmt(b.escrowFee)} pi</span>
+        </div>
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold"
+            style={{
+              background: "var(--default-primary-color)",
+              color: "var(--default-secondary-color)",
+            }}
+            onClick={async () => {
+              await onConfirm();
+            }}
+          >
+            Confirm Accept
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxCancelInitiatedModal.tsx b/src/components/tx-modals/TxCancelInitiatedModal.tsx
new file mode 100644
index 0000000..aa7e401
--- /dev/null
+++ b/src/components/tx-modals/TxCancelInitiatedModal.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem } from "@/lib";
+
+interface TxCancelInitiatedModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function TxCancelInitiatedModal({
+  tx,
+  open,
+  onClose,
+  onConfirm,
+}: TxCancelInitiatedModalProps) {
+  if (tx.status !== "initiated") return null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={
+        <div className="font-semibold text-center">
+          Confirm you wish to cancel the initiated transaction
+        </div>
+      }
+    >
+      <div className="space-y-2 text-sm">
+        <div className="text-center text-gray-700">
+          This will cancel the initiated transaction.
+        </div>
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold"
+            style={{
+              background: "var(--default-primary-color)",
+              color: "var(--default-secondary-color)",
+            }}
+            onClick={onConfirm}
+          >
+            Confirm Cancel
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxCancelPaidModal.tsx b/src/components/tx-modals/TxCancelPaidModal.tsx
new file mode 100644
index 0000000..d2ea4ca
--- /dev/null
+++ b/src/components/tx-modals/TxCancelPaidModal.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem, fmt, deriveBreakdown } from "@/lib";
+
+interface TxCancelPaidModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function TxCancelPaidModal({
+  tx,
+  open,
+  onClose,
+  onConfirm,
+}: TxCancelPaidModalProps) {
+  if (!(tx.myRole === "payer" && tx.status === "paid")) return null;
+
+  const b = deriveBreakdown(tx.amount);
+  const networkRefund = 0.01;
+  const refundTotal = b.base + b.completionStake + networkRefund;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={
+        (() => {
+          return (
+            <div className="text-center space-y-1">
+              <div className="font-semibold">
+                Confirm cancel transaction and get refund
+              </div>
+              <div className="text-2xl font-bold">{fmt(refundTotal)} pi</div>
+            </div>
+          );
+        })()
+      }
+    >
+      <div className="space-y-3 text-sm">
+        {(() => {
+          const networkNotRefunded = 0.01;
+          const innerRefundTotal = b.base + b.completionStake + networkRefund;
+          return (
+            <div className="space-y-2 rounded-lg p-3">
+              <div className="flex justify-between">
+                <span>Payer amount (refunded):</span>
+                <span>{fmt(b.base)} pi</span>
+              </div>
+              <div className="flex justify-between">
+                <span>Transaction Stake (refunded):</span>
+                <span>{fmt(b.completionStake)} pi</span>
+              </div>
+              <div className="flex justify-between">
+                <span>Pi Network gas fees (refunded):</span>
+                <span>{fmt(networkRefund)} pi</span>
+              </div>
+              <div className="flex justify-between font-semibold border-t pt-2">
+                <span>Total refunded:</span>
+                <span>{fmt(innerRefundTotal)} pi</span>
+              </div>
+            </div>
+          );
+        })()}
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold"
+            style={{
+              background: "var(--default-primary-color)",
+              color: "var(--default-secondary-color)",
+            }}
+            onClick={onConfirm}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxCancelRequestModal.tsx b/src/components/tx-modals/TxCancelRequestModal.tsx
new file mode 100644
index 0000000..985eb69
--- /dev/null
+++ b/src/components/tx-modals/TxCancelRequestModal.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem } from "@/lib";
+
+interface TxCancelRequestModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function TxCancelRequestModal({
+  tx,
+  open,
+  onClose,
+  onConfirm,
+}: TxCancelRequestModalProps) {
+  if (!(tx.myRole === "payee" && tx.status === "requested")) return null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={
+        <div className="font-semibold text-center">
+          Confirm you cancel the request to pay pi
+        </div>
+      }
+    >
+      <div className="space-y-2 text-sm">
+        <div className="text-center text-gray-700">
+          This will cancel the current Pi transfer request.
+        </div>
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold"
+            style={{
+              background: "var(--default-primary-color)",
+              color: "var(--default-secondary-color)",
+            }}
+            onClick={onConfirm}
+          >
+            Confirm Cancel
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxCommentsModal.tsx b/src/components/tx-modals/TxCommentsModal.tsx
new file mode 100644
index 0000000..9330d64
--- /dev/null
+++ b/src/components/tx-modals/TxCommentsModal.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+
+type Comment = { author: string; text: string; ts: string };
+
+interface TxCommentsModalProps {
+  open: boolean;
+  onClose: () => void;
+  comments: Comment[];
+}
+
+export default function TxCommentsModal({
+  open,
+  onClose,
+  comments,
+}: TxCommentsModalProps) {
+  if (!open) return null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={<div className="font-semibold">Audit Log</div>}
+      fullScreen
+    >
+      <div className="space-y-2 text-sm overflow-auto pr-1">
+        {comments.length === 0 ? (
+          <div className="text-xs text-gray-600">No comments yet.</div>
+        ) : (
+          comments.map((c, i) => (
+            <div key={i} className="py-1">
+              <div className="flex items-center gap-2">
+                <span className="font-medium text-[13px]">{c.author}</span>
+                <span className="text-[11px] text-gray-500">
+                  {new Date(c.ts).toLocaleString()}
+                </span>
+              </div>
+              <div className="whitespace-pre-wrap break-words text-[13px]">
+                {c.text}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxDisputeConfirmModal.tsx b/src/components/tx-modals/TxDisputeConfirmModal.tsx
new file mode 100644
index 0000000..73e2eff
--- /dev/null
+++ b/src/components/tx-modals/TxDisputeConfirmModal.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem, TxStatus } from "@/lib";
+
+interface TxDisputeConfirmModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function TxDisputeConfirmModal({
+  tx,
+  open,
+  onClose,
+  onConfirm,
+}: TxDisputeConfirmModalProps) {
+  const eligible =
+    (tx.myRole === "payee" && tx.status === "fulfilled") ||
+    (tx.myRole === "payer" && (tx.status === "paid" || tx.status === "fulfilled"));
+
+  if (!eligible) return null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={<div className="font-semibold text-center">Confirm you dispute the transaction</div>}
+    >
+      <div className="space-y-2 text-sm">
+        <div className="text-center text-gray-700">
+          This will mark transaction status as disputed.
+        </div>
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold"
+            style={{
+              background: "var(--default-primary-color)",
+              color: "var(--default-secondary-color)",
+            }}
+            onClick={onConfirm}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxFulfilledModal.tsx b/src/components/tx-modals/TxFulfilledModal.tsx
new file mode 100644
index 0000000..94e0e42
--- /dev/null
+++ b/src/components/tx-modals/TxFulfilledModal.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem } from "@/lib";
+
+interface TxFulfilledModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function TxFulfilledModal({ tx, open, onClose, onConfirm }: TxFulfilledModalProps) {
+  if (!(tx.myRole === "payee" && tx.status === "paid")) return null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={
+        <div className="font-semibold text-center">
+          Confirm you have fulfilled the purchase
+        </div>
+      }
+    >
+      <div className="space-y-2 text-sm">
+        <div className="text-center text-gray-700">
+          This will mark transaction status as fulfilled.
+        </div>
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold"
+            style={{
+              background: "var(--default-primary-color)",
+              color: "var(--default-secondary-color)",
+            }}
+            onClick={onConfirm}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxReceivedModal.tsx b/src/components/tx-modals/TxReceivedModal.tsx
new file mode 100644
index 0000000..91c7c27
--- /dev/null
+++ b/src/components/tx-modals/TxReceivedModal.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem, statusLabel, fmt, deriveBreakdown } from "@/lib";
+
+interface TxReceivedModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function TxReceivedModal({ tx, open, onClose, onConfirm }: TxReceivedModalProps) {
+  if (!(tx.myRole === "payer" && tx.status === "fulfilled")) return null;
+
+  const b = deriveBreakdown(tx.amount);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={
+        <div className="font-semibold text-center">
+          Confirm purchased item(s) received and release payment
+        </div>
+      }
+    >
+      <div className="space-y-3 text-sm">
+        <div className="text-center text-gray-700">
+          This will mark transaction status as {statusLabel["released"]}.
+        </div>
+        <div className="space-y-2 rounded-lg border border-black p-3">
+          <div className="flex justify-between">
+            <span>Payee gets:</span>
+            <span>{fmt(b.base)} pi</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Stake refunded to Payer:</span>
+            <span>{fmt(b.completionStake)} pi</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Pi Network gas fees:</span>
+            <span>{fmt(b.networkFees)} pi</span>
+          </div>
+          <div className="flex justify-between">
+            <span>EscrowPi fee:</span>
+            <span>{fmt(b.escrowFee)} pi</span>
+          </div>
+          <div className="flex justify-between font-semibold">
+            <span>Total:</span>
+            <span>{fmt(b.total)} pi</span>
+          </div>
+        </div>
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold"
+            style={{
+              background: "var(--default-primary-color)",
+              color: "var(--default-secondary-color)",
+            }}
+            onClick={onConfirm}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxRejectRequestModal.tsx b/src/components/tx-modals/TxRejectRequestModal.tsx
new file mode 100644
index 0000000..1a14742
--- /dev/null
+++ b/src/components/tx-modals/TxRejectRequestModal.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem } from "@/lib";
+
+interface TxRejectRequestModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function TxRejectRequestModal({
+  tx,
+  open,
+  onClose,
+  onConfirm,
+}: TxRejectRequestModalProps) {
+  if (!(tx.myRole === "payer" && tx.status === "requested")) return null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={
+        <div className="text-center space-y-1">
+          <div className="font-semibold">
+            Confirm you reject the request to pay pi
+          </div>
+        </div>
+      }
+    >
+      <div className="space-y-2 text-sm">
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold bg-red-100 text-red-700 border border-red-200"
+            onClick={onConfirm}
+          >
+            Confirm Reject
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/components/tx-modals/TxSendProposalModal.tsx b/src/components/tx-modals/TxSendProposalModal.tsx
new file mode 100644
index 0000000..ecf15b4
--- /dev/null
+++ b/src/components/tx-modals/TxSendProposalModal.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import Modal from "@/components/Modal";
+import { TxItem, fmt, deriveBreakdown } from "@/lib";
+
+interface TxSendProposalModalProps {
+  tx: TxItem;
+  open: boolean;
+  onClose: () => void;
+  refundPercent: number;
+  refundPercentStr: string;
+  onConfirm: () => Promise<void>;
+}
+
+export default function TxSendProposalModal({
+  tx,
+  open,
+  onClose,
+  refundPercent,
+  refundPercentStr,
+  onConfirm,
+}: TxSendProposalModalProps) {
+  if (tx.status !== "disputed") return null;
+
+  const b = deriveBreakdown(tx.amount);
+  const refund = (b.base * refundPercent) / 100;
+  const payeeGets = b.base - refund;
+  const showNetworkRefund = Math.abs(refundPercent - 100) < 1e-9;
+  const totalRefunded = refund + b.completionStake + (showNetworkRefund ? 0.01 : 0);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={
+        <div className="font-semibold text-center">
+          You propose dispute resolution refund {refundPercent}%
+        </div>
+      }
+    >
+      <div className="space-y-2 text-sm">
+        <div className="flex justify-between">
+          <span>Payer gets refund:</span>
+          <span>{fmt(refund)} pi</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Payee gets:</span>
+          <span>{fmt(payeeGets)} pi</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Stake refunded to Payer:</span>
+          <span>{fmt(b.completionStake)} pi</span>
+        </div>
+        {showNetworkRefund && (
+          <div className="flex justify-between">
+            <span>Pi Network gas fees (refunded to payer):</span>
+            <span>{fmt(0.01)} pi</span>
+          </div>
+        )}
+        <div className="flex justify-between font-semibold border-t pt-2">
+          <span>Total refunded:</span>
+          <span>{fmt(totalRefunded)} pi</span>
+        </div>
+        <div className="pt-2">
+          <button
+            className="w-full py-2 rounded-lg text-sm font-semibold"
+            style={{
+              background: "var(--default-primary-color)",
+              color: "var(--default-secondary-color)",
+            }}
+            onClick={async () => {
+              await onConfirm();
+            }}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

From bd37588f5cfb743046ab79e5afd79d7cfada70ea Mon Sep 17 00:00:00 2001
From: vrajasekhar1 <vrreddy@gmail.com>
Date: Fri, 5 Dec 2025 12:08:30 +0530
Subject: [PATCH 3/6] Refactor transaction action bar into separate component

---
 src/app/history/[id]/page.tsx  | 347 +++-------------------------
 src/components/TxActionBar.tsx | 411 +++++++++++++++++++++++++++++++++
 2 files changed, 441 insertions(+), 317 deletions(-)
 create mode 100644 src/components/TxActionBar.tsx

diff --git a/src/app/history/[id]/page.tsx b/src/app/history/[id]/page.tsx
index c843c24..599bd82 100644
--- a/src/app/history/[id]/page.tsx
+++ b/src/app/history/[id]/page.tsx
@@ -6,6 +6,7 @@ import TxHeaderCard from '@/components/TxHeaderCard';
 import TxDetailsBreakdown from '@/components/TxDetailsBreakdown';
 import AuditLogPreview from '@/components/AuditLogPreview';
 import CommentEditor from '@/components/CommentEditor';
+import TxActionBar from '@/components/TxActionBar';
 import TxDisputeConfirmModal from '@/components/tx-modals/TxDisputeConfirmModal';
 import TxCancelInitiatedModal from '@/components/tx-modals/TxCancelInitiatedModal';
 import TxCancelPaidModal from '@/components/tx-modals/TxCancelPaidModal';
@@ -490,323 +491,35 @@ export default function TxDetailsPage() {
       {/* Spacer to avoid overlap with fixed Action bar */}
       <div className="h-[120px]" aria-hidden></div>
 
-          {/* UC1/UC2: Action section (varies by status/role) - fixed to bottom */}
-          <div
-            className="fixed inset-x-0 z-10 px-4 bg-[var(--default-bg-color)]"
-            style={{ bottom: 'calc(env(safe-area-inset-bottom) + 16px)' }}
-          >
-            <div className="w-full max-w-md mx-auto">
-              <div className="font-semibold mb-2 text-center">Action</div>
-              {/* Single Action shell; height depends on status (larger for disputed only) */}
-              <div className={`w-full rounded-2xl p-2 bg-[#f5efe2] border border-[#2e6f4f] ${tx.status === 'disputed' ? 'min-h-[120px]' : 'h-[72px]'}`}>
-                {(() => {
-                  const isTerminal = tx.status === 'cancelled' || tx.status === 'declined' || tx.status === 'released';
-                  if (isTerminal) {
-                    return (
-                      <div className="flex items-center justify-center text-center px-3 text-[13px] md:text-[14px] font-medium text-gray-800 h-full leading-tight overflow-hidden">
-                        {tx.status === 'declined' ? (
-                          <div>
-                            <div className="text-red-700">This transaction was declined</div>
-                            <div>No further actions required.</div>
-                          </div>
-                        ) : tx.status === 'cancelled' ? (
-                          <div>
-                            <div>This transaction was cancelled.</div>
-                            <div>No further actions required.</div>
-                          </div>
-                        ) : tx.status === 'disputed' ? (
-                          <div>
-                            <div className="text-red-700">This transaction is marked as disputed.</div>
-                            <div>No further actions required.</div>
-                          </div>
-                        ) : tx.status === 'released' ? (
-                          <div>
-                            <div className="text-green-700">This transaction is marked as Completed.</div>
-                            <div>No further actions required.</div>
-                          </div>
-                        ) : (
-                          <div>No further actions required.</div>
-                        )}
-                      </div>
-                    );
-                  }
-                  // UC9: Both roles at Disputed
-                  if (tx.status === 'disputed') {
-                    // Enable/disable rules per spec:
-                    // - Initially: no active proposal -> Send enabled, Accept disabled
-                    // - When one party proposes: proposer has both disabled; counterparty has both enabled
-                    const isAccepted = disputeStatus === 'accepted';
-                    const hasProposal = disputeStatus === 'proposed' && lastProposedPercent !== null;
-                    const isProposer = hasProposal && lastProposedBy === tx.myRole;
-                    const inputValid = refundPercent >= 0 && refundPercent <= 100;
-                    const equalsCurrent = hasProposal && lastProposedPercent !== null && Math.abs(refundPercent - lastProposedPercent) < 1e-9;
-                    const sendDisabled = isAccepted || !inputValid || (hasProposal && (isProposer || equalsCurrent));
-                    const acceptDisabled = isAccepted || !hasProposal || isProposer || !equalsCurrent;
-                    const inputDisabled = isAccepted || (hasProposal && isProposer);
-                    return (
-                      <div className="h-full flex flex-col">
-                        {/* Top strip: Dispute Centre */}
-                        <div className="text-center text-[12px] font-semibold rounded-md px-2 py-1 mb-1"
-                             style={{ background: 'var(--default-primary-color)', color: 'var(--default-secondary-color)' }}>
-                          Dispute Centre
-                        </div>
-                        {/* Show proposal status summary (always) */}
-                        <div className="text-center text-[11px] text-gray-700 mb-1">
-                          {isAccepted ? (
-                            <>
-                              Accepted proposal: <span className="font-semibold">{lastProposedPercent ?? 0}%</span>
-                              {lastProposedByUsername ? (
-                                <> — Proposed by: <span className="font-semibold">{lastProposedByUsername}</span></>
-                              ) : null}
-                              {acceptedByUsername ? (
-                                <> & Accepted by: <span className="font-semibold">{acceptedByUsername}</span></>
-                              ) : null}
-                            </>
-                          ) : hasProposal && lastProposedPercent !== null ? (
-                            <>
-                              Current proposal: <span className="font-semibold">{lastProposedPercent}%</span>
-                              {lastProposedByUsername ? (
-                                <> by <span className="font-semibold">{lastProposedByUsername}</span></>
-                              ) : null}
-                            </>
-                          ) : (
-                            <>Current proposal: <span className="font-semibold">None</span></>
-                          )}
-                        </div>
-                        {/* Content row */}
-                        <div className="flex-1 grid grid-cols-3 items-center gap-2">
-                          <div className="flex justify-start">
-                            <button
-                              disabled={sendDisabled}
-                              className={`px-3 h-12 rounded-full text-xs font-semibold ${!sendDisabled ? 'bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]' : 'bg-gray-200 text-gray-500 cursor-not-allowed'}`}
-                              onClick={() => setShowSendProposal(true)}
-                            >
-                              <span className="flex flex-col leading-tight items-center">
-                                <span>Send</span>
-                                <span>Proposal</span>
-                              </span>
-                            </button>
-                          </div>
-                          <div className="flex flex-col items-center justify-center leading-tight">
-                            <div className={`text-[11px] ${inputDisabled ? 'text-gray-400' : 'text-gray-800'}`}>Propose refund</div>
-                            <div className={`text-[10px] ${inputDisabled ? 'text-gray-400' : 'text-gray-600'}`}>(0-100%)</div>
-                            <div className="flex items-baseline justify-center mt-0.5">
-                              <input
-                                type="text"
-                                inputMode="decimal"
-                                disabled={inputDisabled}
-                                className={`w-16 text-center bg-transparent border-0 outline-none text-[20px] font-bold ${inputDisabled ? 'text-gray-400 cursor-not-allowed' : ''}`}
-                                value={refundPercentStr}
-                                onChange={(e) => {
-                                  let s = e.target.value || '';
-                                  // allow digits and a single dot
-                                  s = s.replace(/[^0-9.]/g, '');
-                                  const parts = s.split('.');
-                                  if (parts.length > 2) {
-                                    s = parts[0] + '.' + parts.slice(1).join('');
-                                  }
-                                  // enforce max 2 decimal places while typing
-                                  const p2 = s.split('.');
-                                  if (p2.length === 2 && p2[1].length > 2) {
-                                    p2[1] = p2[1].slice(0, 2);
-                                    s = p2.join('.');
-                                  }
-                                  // remove leading zeros before a digit (keep single 0 or 0.xxx)
-                                  s = s.replace(/^0+(?=\d)/, '');
-                                  // clamp to 0..100
-                                  if (s !== '' && s !== '.') {
-                                    let n = Number(s);
-                                    if (!Number.isFinite(n)) n = 0;
-                                    if (n > 100) { n = 100; s = '100'; }
-                                    if (n < 0) { n = 0; s = '0'; }
-                                    setRefundPercent(n);
-                                  } else {
-                                    // empty or just dot -> treat as 0 while typing
-                                    setRefundPercent(0);
-                                  }
-                                  setRefundPercentStr(s);
-                                }}
-                                onBlur={() => {
-                                  // normalize to at most 2 decimals and strip trailing dot/zeros
-                                  let s = refundPercentStr;
-                                  if (s === '' || s === '.') { s = '0'; }
-                                  const n = Math.min(100, Math.max(0, Number(s)));
-                                  const fixed = Number.isFinite(n) ? n.toFixed(2) : '0.00';
-                                  // remove trailing zeros/decimal
-                                  let norm = fixed.replace(/0+$/,'').replace(/\.$/,'');
-                                  if (norm === '') norm = '0';
-                                  setRefundPercent(Number(norm));
-                                  setRefundPercentStr(norm);
-                                }}
-                              />
-                              <span className={`ml-1 text-[16px] font-bold ${inputDisabled ? 'text-gray-400' : ''}`}>%</span>
-                            </div>
-                          </div>
-                          <div className="flex justify-end">
-                            <button
-                              disabled={acceptDisabled}
-                              className={`px-3 h-12 rounded-full text-xs font-semibold ${!acceptDisabled ? 'bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]' : 'bg-gray-200 text-gray-500 cursor-not-allowed'}`}
-                              onClick={() => setShowAcceptProposal(true)}
-                            >
-                              <span className="flex flex-col leading-tight items-center">
-                                <span>Accept</span>
-                                <span>Proposal</span>
-                              </span>
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  }
-                  if (tx.myRole === 'payer' && tx.status === 'requested') {
-                    return (
-                      <div className="flex items-center gap-2 h-full">
-                        <button
-                          className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[#f0b37e] border border-[#d9b07a] hover:brightness-110 active:brightness-105 transition"
-                          onClick={() => setShowReject(true)}
-                        >
-                          Reject
-                        </button>
-                        <div className="flex-1 text-center px-3 text-[13px] md:text-[14px] font-medium text-gray-800">Waiting for Payer to accept Payee request for pi transfer</div>
-                        <button
-                          className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[#f0b37e] border border-[#d9b07a] hover:brightness-110 active:brightness-105 transition"
-                          onClick={() => setShowAccept(true)} 
-                        >
-                          Accept
-                        </button>
-                      </div>
-                    );
-                  }
-                  if (tx.myRole === 'payee' && tx.status === 'requested') {
-                    // UC3: Single action; keep the only button to the right
-                    return (
-                      <div className="flex items-center gap-2 h-full">
-                        <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
-                          Waiting for Payer to accept Payee request for pi transfer
-                        </div>
-                        <button
-                          className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[#f0b37e] border border-[#d9b07a] hover:brightness-110 active:brightness-105 transition"
-                          onClick={() => setShowCancel(true)}
-                        >
-                          Cancel
-                        </button>
-                      </div>
-                    );
-                  }
-                  // UC5: Payee at Paid (paid): Comment + Fulfilled
-                  if (tx.myRole === 'payee' && tx.status === 'paid') {
-                    return (
-                      <div className="flex items-center gap-2 h-full">
-                        <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
-                          Waiting for Payee fulfillment of the purchased item(s)
-                        </div>
-                        <button
-                          className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
-                          onClick={() => setShowFulfilled(true)}
-                        >
-                          Fulfilled
-                        </button>
-                      </div>
-                    );
-                  }
-                  // UC8: Payee at Fulfilled: message + Dispute (single-button layout)
-                  if (tx.myRole === 'payee' && tx.status === 'fulfilled') {
-                    return (
-                      <div className="flex items-center gap-2 h-full">
-                        <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
-                          Waiting for Payer to confirm purchased items received OK
-                        </div>
-                        <button
-                          className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
-                          onClick={() => setShowDispute(true)}
-                        >
-                          Dispute
-                        </button>
-                      </div>
-                    );
-                  }
-                  // UC0: Any at Initiated: message + Cancel (single-button layout)
-                  if (tx.status === 'initiated') {
-                    return (
-                      <div className="flex items-center gap-2 h-full">
-                        <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
-                          This transaction was initiated, but could not be completed
-                        </div>
-                        <button
-                          className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
-                          onClick={() => setShowCancel(true)}
-                        >
-                          Cancel
-                        </button>
-                      </div>
-                    );
-                  }
-                  // UC6a: Payer at Paid (paid): message + Cancel (single-button layout)
-                  if (tx.myRole === 'payer' && tx.status === 'paid') {
-                    return (
-                      <div className="flex items-center gap-2 h-full">
-                        <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
-                          Waiting for payee to fulfill the purchased item(s)
-                        </div>
-                        <button
-                          className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
-                          onClick={() => setShowCancel(true)}
-                        >
-                          Cancel
-                        </button>
-                      </div>
-                    );
-                  }
-                  // UC7: Payer at Fulfilled: Dispute + Received
-                  if (tx.myRole === 'payer' && tx.status === 'fulfilled') {
-                    return (
-                      <div className="flex items-center gap-2 h-full">
-                        <button
-                          className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
-                          onClick={() => setShowDispute(true)}
-                        >
-                          Dispute
-                        </button>
-                        <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
-                          Waiting for Payer to confirm purchased items received OK
-                        </div>
-                        <button
-                          className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
-                          onClick={() => setShowReceived(true)}
-                        >
-                          Received
-                        </button>
-                      </div>
-                    );
-                  }
-                  // Other action scenarios: keep left/right buttons inside the same shell
-                  return (
-                    <div className="flex items-center gap-2 h-full">
-                      {tx.myRole === 'payee' ? (
-                        <>
-                          <div className="flex-1"/>
-                        </>
-                      ) : (
-                        <>
-                          <div className="flex-1" />
-                          <button
-                            disabled={tx.status !== 'fulfilled'}
-                            className={`px-4 h-12 rounded-full text-sm font-semibold ${tx.status === 'fulfilled' ? 'bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]' : 'bg-gray-200 text-gray-500 cursor-not-allowed'}`}
-                            onClick={() => {
-                              if (tx.status !== 'fulfilled') return;
-                              handleAction('released');
-                            }}
-                          >
-                            Mark Complete
-                          </button>
-                        </>
-                      )}
-                    </div>
-                  );
-                })()}
-              </div>
-            </div>
-          </div>
+      <TxActionBar
+        tx={tx}
+        disputeStatus={disputeStatus}
+        refundPercent={refundPercent}
+        refundPercentStr={refundPercentStr}
+        lastProposedPercent={lastProposedPercent}
+        lastProposedBy={lastProposedBy}
+        lastProposedByUsername={lastProposedByUsername}
+        acceptedByUsername={acceptedByUsername}
+        actionBanner={actionBanner}
+        setActionBanner={setActionBanner}
+        showDispute={showDispute}
+        setShowDispute={setShowDispute}
+        showCancel={showCancel}
+        setShowCancel={setShowCancel}
+        showFulfilled={showFulfilled}
+        setShowFulfilled={setShowFulfilled}
+        showReceived={showReceived}
+        setShowReceived={setShowReceived}
+        showSendProposal={showSendProposal}
+        setShowSendProposal={setShowSendProposal}
+        showAcceptProposal={showAcceptProposal}
+        setShowAcceptProposal={setShowAcceptProposal}
+        showReject={showReject}
+        setShowReject={setShowReject}
+        showAccept={showAccept}
+        setShowAccept={setShowAccept}
+        handleAction={handleAction}
+      />
 
       {/* UC2: Success banner */}
       {actionBanner && (
diff --git a/src/components/TxActionBar.tsx b/src/components/TxActionBar.tsx
new file mode 100644
index 0000000..d541539
--- /dev/null
+++ b/src/components/TxActionBar.tsx
@@ -0,0 +1,411 @@
+"use client";
+
+import React from "react";
+import { TxItem, TxStatus, fmt, deriveBreakdown, statusLabel } from "@/lib";
+
+interface TxActionBarProps {
+  tx: TxItem;
+  disputeStatus: 'none' | 'proposed' | 'accepted' | 'declined' | 'cancelled';
+  refundPercent: number;
+  refundPercentStr: string;
+  lastProposedPercent: number | null;
+  lastProposedBy: 'payer' | 'payee' | null;
+  lastProposedByUsername: string | null;
+  acceptedByUsername: string | null;
+  actionBanner: string;
+  setActionBanner: (msg: string) => void;
+  showDispute: boolean;
+  setShowDispute: (v: boolean) => void;
+  showCancel: boolean;
+  setShowCancel: (v: boolean) => void;
+  showFulfilled: boolean;
+  setShowFulfilled: (v: boolean) => void;
+  showReceived: boolean;
+  setShowReceived: (v: boolean) => void;
+  showSendProposal: boolean;
+  setShowSendProposal: (v: boolean) => void;
+  showAcceptProposal: boolean;
+  setShowAcceptProposal: (v: boolean) => void;
+  showReject: boolean;
+  setShowReject: (v: boolean) => void;
+  showAccept: boolean;
+  setShowAccept: (v: boolean) => void;
+  handleAction: (newStatus: TxStatus) => Promise<void> | void;
+}
+
+export default function TxActionBar({
+  tx,
+  disputeStatus,
+  refundPercent,
+  refundPercentStr,
+  lastProposedPercent,
+  lastProposedBy,
+  lastProposedByUsername,
+  acceptedByUsername,
+  actionBanner,
+  setActionBanner,
+  setShowDispute,
+  setShowCancel,
+  setShowFulfilled,
+  setShowReceived,
+  setShowSendProposal,
+  setShowAcceptProposal,
+  setShowReject,
+  setShowAccept,
+  handleAction,
+}: TxActionBarProps) {
+  const isTerminal =
+    tx.status === "cancelled" || tx.status === "declined" || tx.status === "released";
+
+  return (
+    <>
+      {/* UC2: Success banner */}
+      {actionBanner && (
+        <div className="fixed top-[90px] left-0 right-0 z-40 px-4">
+          <div className="max-w-md mx-auto rounded-md bg-emerald-50 border border-emerald-200 text-emerald-800 px-3 py-2 text-sm text-center">
+            {actionBanner}
+          </div>
+        </div>
+      )}
+
+      {/* UC1/UC2: Action section (varies by status/role) - fixed to bottom */}
+      <div
+        className="fixed inset-x-0 z-10 px-4 bg-[var(--default-bg-color)]"
+        style={{ bottom: "calc(env(safe-area-inset-bottom) + 16px)" }}
+      >
+        <div className="w-full max-w-md mx-auto">
+          <div className="font-semibold mb-2 text-center">Action</div>
+          {/* Single Action shell; height depends on status (larger for disputed only) */}
+          <div
+            className={`w-full rounded-2xl p-2 bg-[#f5efe2] border border-[#2e6f4f] ${
+              tx.status === "disputed" ? "min-h-[120px]" : "h-[72px]"
+            }`}
+          >
+            {(() => {
+              if (isTerminal) {
+                return (
+                  <div className="flex items-center justify-center text-center px-3 text-[13px] md:text-[14px] font-medium text-gray-800 h-full leading-tight overflow-hidden">
+                    {tx.status === "declined" ? (
+                      <div>
+                        <div className="text-red-700">This transaction was declined</div>
+                        <div>No further actions required.</div>
+                      </div>
+                    ) : tx.status === "cancelled" ? (
+                      <div>
+                        <div>This transaction was cancelled.</div>
+                        <div>No further actions required.</div>
+                      </div>
+                    ) : tx.status === "disputed" ? (
+                      <div>
+                        <div className="text-red-700">
+                          This transaction is marked as disputed.
+                        </div>
+                        <div>No further actions required.</div>
+                      </div>
+                    ) : tx.status === "released" ? (
+                      <div>
+                        <div className="text-green-700">
+                          This transaction is marked as Completed.
+                        </div>
+                        <div>No further actions required.</div>
+                      </div>
+                    ) : (
+                      <div>No further actions required.</div>
+                    )}
+                  </div>
+                );
+              }
+
+              // UC9: Both roles at Disputed
+              if (tx.status === "disputed") {
+                const isAccepted = disputeStatus === "accepted";
+                const hasProposal =
+                  disputeStatus === "proposed" && lastProposedPercent !== null;
+                const isProposer = hasProposal && lastProposedBy === tx.myRole;
+                const inputValid = refundPercent >= 0 && refundPercent <= 100;
+                const equalsCurrent =
+                  hasProposal &&
+                  lastProposedPercent !== null &&
+                  Math.abs(refundPercent - lastProposedPercent) < 1e-9;
+                const sendDisabled =
+                  isAccepted || !inputValid || (hasProposal && (isProposer || equalsCurrent));
+                const acceptDisabled =
+                  isAccepted || !hasProposal || isProposer || !equalsCurrent;
+                const inputDisabled = isAccepted || (hasProposal && isProposer);
+
+                return (
+                  <div className="h-full flex flex-col">
+                    <div
+                      className="text-center text-[12px] font-semibold rounded-md px-2 py-1 mb-1"
+                      style={{
+                        background: "var(--default-primary-color)",
+                        color: "var(--default-secondary-color)",
+                      }}
+                    >
+                      Dispute Centre
+                    </div>
+                    <div className="text-center text-[11px] text-gray-700 mb-1">
+                      {isAccepted ? (
+                        <>
+                          Accepted proposal:{" "}
+                          <span className="font-semibold">
+                            {lastProposedPercent ?? 0}%
+                          </span>
+                          {lastProposedByUsername ? (
+                            <>
+                              {" "}— Proposed by:{" "}
+                              <span className="font-semibold">
+                                {lastProposedByUsername}
+                              </span>
+                            </>
+                          ) : null}
+                          {acceptedByUsername ? (
+                            <>
+                              {" "}& Accepted by:{" "}
+                              <span className="font-semibold">
+                                {acceptedByUsername}
+                              </span>
+                            </>
+                          ) : null}
+                        </>
+                      ) : hasProposal && lastProposedPercent !== null ? (
+                        <>
+                          Current proposal:{" "}
+                          <span className="font-semibold">
+                            {lastProposedPercent}%
+                          </span>
+                          {lastProposedByUsername ? (
+                            <>
+                              {" "}by{" "}
+                              <span className="font-semibold">
+                                {lastProposedByUsername}
+                              </span>
+                            </>
+                          ) : null}
+                        </>
+                      ) : (
+                        <>
+                          Current proposal:{" "}
+                          <span className="font-semibold">None</span>
+                        </>
+                      )}
+                    </div>
+                    <div className="flex-1 grid grid-cols-3 items-center gap-2">
+                      <div className="flex justify-start">
+                        <button
+                          disabled={sendDisabled}
+                          className={`px-3 h-12 rounded-full text-xs font-semibold ${
+                            !sendDisabled
+                              ? "bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+                              : "bg-gray-200 text-gray-500 cursor-not-allowed"
+                          }`}
+                          onClick={() => setShowSendProposal(true)}
+                        >
+                          <span className="flex flex-col leading-tight items-center">
+                            <span>Send</span>
+                            <span>Proposal</span>
+                          </span>
+                        </button>
+                      </div>
+                      <div className="flex flex-col items-center justify-center text-[11px] text-gray-700">
+                        <div className="flex items-center gap-1">
+                          <span>Refund</span>
+                          <input
+                            type="text"
+                            className={`w-14 h-7 text-center text-[13px] rounded border px-1 ${
+                              inputDisabled
+                                ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                                : ""
+                            }`}
+                            value={refundPercentStr}
+                            disabled={inputDisabled}
+                            onChange={() => {}}
+                          />
+                          <span
+                            className={`ml-1 text-[16px] font-bold ${
+                              inputDisabled ? "text-gray-400" : ""
+                            }`}
+                          >
+                            %
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex justify-end">
+                        <button
+                          disabled={acceptDisabled}
+                          className={`px-3 h-12 rounded-full text-xs font-semibold ${
+                            !acceptDisabled
+                              ? "bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+                              : "bg-gray-200 text-gray-500 cursor-not-allowed"
+                          }`}
+                          onClick={() => setShowAcceptProposal(true)}
+                        >
+                          <span className="flex flex-col leading-tight items-center">
+                            <span>Accept</span>
+                            <span>Proposal</span>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              }
+
+              if (tx.myRole === "payer" && tx.status === "requested") {
+                return (
+                  <div className="flex items-center gap-2 h-full">
+                    <button
+                      className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[#f0b37e] border border-[#d9b07a] hover:brightness-110 active:brightness-105 transition"
+                      onClick={() => setShowReject(true)}
+                    >
+                      Reject
+                    </button>
+                    <div className="flex-1 text-center px-3 text-[13px] md:text-[14px] font-medium text-gray-800">
+                      Waiting for Payer to accept Payee request for pi transfer
+                    </div>
+                    <button
+                      className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[#f0b37e] border border-[#d9b07a] hover:brightness-110 active:brightness-105 transition"
+                      onClick={() => setShowAccept(true)}
+                    >
+                      Accept
+                    </button>
+                  </div>
+                );
+              }
+
+              if (tx.myRole === "payee" && tx.status === "requested") {
+                return (
+                  <div className="flex items-center gap-2 h-full">
+                    <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
+                      Waiting for Payer to accept Payee request for pi transfer
+                    </div>
+                    <button
+                      className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[#f0b37e] border border-[#d9b07a] hover:brightness-110 active:brightness-105 transition"
+                      onClick={() => setShowCancel(true)}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                );
+              }
+
+              if (tx.myRole === "payee" && tx.status === "paid") {
+                return (
+                  <div className="flex items-center gap-2 h-full">
+                    <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
+                      Waiting for Payee fulfillment of the purchased item(s)
+                    </div>
+                    <button
+                      className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+                      onClick={() => setShowFulfilled(true)}
+                    >
+                      Fulfilled
+                    </button>
+                  </div>
+                );
+              }
+
+              if (tx.myRole === "payee" && tx.status === "fulfilled") {
+                return (
+                  <div className="flex items-center gap-2 h-full">
+                    <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
+                      Waiting for Payer to confirm purchased items received OK
+                    </div>
+                    <button
+                      className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+                      onClick={() => setShowDispute(true)}
+                    >
+                      Dispute
+                    </button>
+                  </div>
+                );
+              }
+
+              if (tx.status === "initiated") {
+                return (
+                  <div className="flex items-center gap-2 h-full">
+                    <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
+                      This transaction was initiated, but could not be completed
+                    </div>
+                    <button
+                      className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+                      onClick={() => setShowCancel(true)}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                );
+              }
+
+              if (tx.myRole === "payer" && tx.status === "paid") {
+                return (
+                  <div className="flex items-center gap-2 h-full">
+                    <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
+                      Waiting for payee to fulfill the purchased item(s)
+                    </div>
+                    <button
+                      className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+                      onClick={() => setShowCancel(true)}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                );
+              }
+
+              if (tx.myRole === "payer" && tx.status === "fulfilled") {
+                return (
+                  <div className="flex items-center gap-2 h-full">
+                    <button
+                      className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+                      onClick={() => setShowDispute(true)}
+                    >
+                      Dispute
+                    </button>
+                    <div className="flex-1 px-3 text-[13px] md:text-[14px] font-medium text-gray-800 text-left">
+                      Waiting for Payer to confirm purchased items received OK
+                    </div>
+                    <button
+                      className="px-4 h-12 rounded-full text-sm font-semibold bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+                      onClick={() => setShowReceived(true)}
+                    >
+                      Received
+                    </button>
+                  </div>
+                );
+              }
+
+              return (
+                <div className="flex items-center gap-2 h-full">
+                  {tx.myRole === "payee" ? (
+                    <>
+                      <div className="flex-1" />
+                    </>
+                  ) : (
+                    <>
+                      <div className="flex-1" />
+                      <button
+                        disabled={tx.status !== "fulfilled"}
+                        className={`px-4 h-12 rounded-full text-sm font-semibold ${
+                          tx.status === "fulfilled"
+                            ? "bg-[var(--default-primary-color)] text-[var(--default-secondary-color)]"
+                            : "bg-gray-200 text-gray-500 cursor-not-allowed"
+                        }`}
+                        onClick={() => {
+                          if (tx.status !== "fulfilled") return;
+                          handleAction("released");
+                        }}
+                      >
+                        Mark Complete
+                      </button>
+                    </>
+                  )}
+                </div>
+              );
+            })()}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

From d84691f40023906ae12e6a9755c4653f14fc86c7 Mon Sep 17 00:00:00 2001
From: vrajasekhar1 <vrreddy@gmail.com>
Date: Fri, 5 Dec 2025 15:59:09 +0530
Subject: [PATCH 4/6] ConfirmButton component to handle single click for all
 TxModal popups

---
 src/components/ConfirmButton.tsx              | 41 +++++++++++++++++++
 .../tx-modals/TxAcceptProposalModal.tsx       |  9 ++--
 .../tx-modals/TxAcceptRequestModal.tsx        |  9 ++--
 .../tx-modals/TxCancelInitiatedModal.tsx      |  5 ++-
 .../tx-modals/TxCancelPaidModal.tsx           |  5 ++-
 .../tx-modals/TxCancelRequestModal.tsx        |  7 ++--
 .../tx-modals/TxDisputeConfirmModal.tsx       |  5 ++-
 src/components/tx-modals/TxFulfilledModal.tsx |  5 ++-
 src/components/tx-modals/TxReceivedModal.tsx  |  5 ++-
 .../tx-modals/TxRejectRequestModal.tsx        |  5 ++-
 .../tx-modals/TxSendProposalModal.tsx         |  9 ++--
 11 files changed, 75 insertions(+), 30 deletions(-)
 create mode 100644 src/components/ConfirmButton.tsx

diff --git a/src/components/ConfirmButton.tsx b/src/components/ConfirmButton.tsx
new file mode 100644
index 0000000..d9a8f82
--- /dev/null
+++ b/src/components/ConfirmButton.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import React, { useState } from "react";
+
+interface ConfirmButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  onClick: () => void | Promise<void>;
+}
+
+export default function ConfirmButton({
+  onClick,
+  className = "",
+  disabled,
+  children,
+  ...rest
+}: ConfirmButtonProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleClick = async () => {
+    if (isSubmitting || disabled) return;
+    setIsSubmitting(true);
+    try {
+      await onClick();
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const mergedClassName = `${className} disabled:opacity-60 disabled:cursor-not-allowed`;
+
+  return (
+    <button
+      type="button"
+      {...rest}
+      className={mergedClassName}
+      disabled={disabled || isSubmitting}
+      onClick={handleClick}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/tx-modals/TxAcceptProposalModal.tsx b/src/components/tx-modals/TxAcceptProposalModal.tsx
index 3cc7677..21e697f 100644
--- a/src/components/tx-modals/TxAcceptProposalModal.tsx
+++ b/src/components/tx-modals/TxAcceptProposalModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem, fmt, deriveBreakdown } from "@/lib";
 
 interface TxAcceptProposalModalProps {
@@ -64,18 +65,16 @@ export default function TxAcceptProposalModal({
           <span>{fmt(totalRefunded)} pi</span>
         </div>
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold"
             style={{
               background: "var(--default-primary-color)",
               color: "var(--default-secondary-color)",
             }}
-            onClick={async () => {
-              await onConfirm();
-            }}
+            onClick={onConfirm}
           >
             Confirm
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>
diff --git a/src/components/tx-modals/TxAcceptRequestModal.tsx b/src/components/tx-modals/TxAcceptRequestModal.tsx
index 80360ad..e547bc2 100644
--- a/src/components/tx-modals/TxAcceptRequestModal.tsx
+++ b/src/components/tx-modals/TxAcceptRequestModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem, fmt, deriveBreakdown } from "@/lib";
 
 interface TxAcceptRequestModalProps {
@@ -53,18 +54,16 @@ export default function TxAcceptRequestModal({
           <span>{fmt(b.escrowFee)} pi</span>
         </div>
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold"
             style={{
               background: "var(--default-primary-color)",
               color: "var(--default-secondary-color)",
             }}
-            onClick={async () => {
-              await onConfirm();
-            }}
+            onClick={onConfirm}
           >
             Confirm Accept
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>
diff --git a/src/components/tx-modals/TxCancelInitiatedModal.tsx b/src/components/tx-modals/TxCancelInitiatedModal.tsx
index aa7e401..63e3036 100644
--- a/src/components/tx-modals/TxCancelInitiatedModal.tsx
+++ b/src/components/tx-modals/TxCancelInitiatedModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem } from "@/lib";
 
 interface TxCancelInitiatedModalProps {
@@ -34,7 +35,7 @@ export default function TxCancelInitiatedModal({
           This will cancel the initiated transaction.
         </div>
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold"
             style={{
               background: "var(--default-primary-color)",
@@ -43,7 +44,7 @@ export default function TxCancelInitiatedModal({
             onClick={onConfirm}
           >
             Confirm Cancel
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>
diff --git a/src/components/tx-modals/TxCancelPaidModal.tsx b/src/components/tx-modals/TxCancelPaidModal.tsx
index d2ea4ca..6a33006 100644
--- a/src/components/tx-modals/TxCancelPaidModal.tsx
+++ b/src/components/tx-modals/TxCancelPaidModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem, fmt, deriveBreakdown } from "@/lib";
 
 interface TxCancelPaidModalProps {
@@ -66,7 +67,7 @@ export default function TxCancelPaidModal({
           );
         })()}
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold"
             style={{
               background: "var(--default-primary-color)",
@@ -75,7 +76,7 @@ export default function TxCancelPaidModal({
             onClick={onConfirm}
           >
             Confirm
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>
diff --git a/src/components/tx-modals/TxCancelRequestModal.tsx b/src/components/tx-modals/TxCancelRequestModal.tsx
index 985eb69..288d07d 100644
--- a/src/components/tx-modals/TxCancelRequestModal.tsx
+++ b/src/components/tx-modals/TxCancelRequestModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem } from "@/lib";
 
 interface TxCancelRequestModalProps {
@@ -17,7 +18,7 @@ export default function TxCancelRequestModal({
   onClose,
   onConfirm,
 }: TxCancelRequestModalProps) {
-  if (!(tx.myRole === "payee" && tx.status === "requested")) return null;
+  if (tx.myRole !== "payee" || tx.status !== "requested") return null;
 
   return (
     <Modal
@@ -34,7 +35,7 @@ export default function TxCancelRequestModal({
           This will cancel the current Pi transfer request.
         </div>
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold"
             style={{
               background: "var(--default-primary-color)",
@@ -43,7 +44,7 @@ export default function TxCancelRequestModal({
             onClick={onConfirm}
           >
             Confirm Cancel
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>
diff --git a/src/components/tx-modals/TxDisputeConfirmModal.tsx b/src/components/tx-modals/TxDisputeConfirmModal.tsx
index 73e2eff..f326241 100644
--- a/src/components/tx-modals/TxDisputeConfirmModal.tsx
+++ b/src/components/tx-modals/TxDisputeConfirmModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem, TxStatus } from "@/lib";
 
 interface TxDisputeConfirmModalProps {
@@ -34,7 +35,7 @@ export default function TxDisputeConfirmModal({
           This will mark transaction status as disputed.
         </div>
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold"
             style={{
               background: "var(--default-primary-color)",
@@ -43,7 +44,7 @@ export default function TxDisputeConfirmModal({
             onClick={onConfirm}
           >
             Confirm
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>
diff --git a/src/components/tx-modals/TxFulfilledModal.tsx b/src/components/tx-modals/TxFulfilledModal.tsx
index 94e0e42..109172f 100644
--- a/src/components/tx-modals/TxFulfilledModal.tsx
+++ b/src/components/tx-modals/TxFulfilledModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem } from "@/lib";
 
 interface TxFulfilledModalProps {
@@ -29,7 +30,7 @@ export default function TxFulfilledModal({ tx, open, onClose, onConfirm }: TxFul
           This will mark transaction status as fulfilled.
         </div>
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold"
             style={{
               background: "var(--default-primary-color)",
@@ -38,7 +39,7 @@ export default function TxFulfilledModal({ tx, open, onClose, onConfirm }: TxFul
             onClick={onConfirm}
           >
             Confirm
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>
diff --git a/src/components/tx-modals/TxReceivedModal.tsx b/src/components/tx-modals/TxReceivedModal.tsx
index 91c7c27..cb985f2 100644
--- a/src/components/tx-modals/TxReceivedModal.tsx
+++ b/src/components/tx-modals/TxReceivedModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem, statusLabel, fmt, deriveBreakdown } from "@/lib";
 
 interface TxReceivedModalProps {
@@ -53,7 +54,7 @@ export default function TxReceivedModal({ tx, open, onClose, onConfirm }: TxRece
           </div>
         </div>
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold"
             style={{
               background: "var(--default-primary-color)",
@@ -62,7 +63,7 @@ export default function TxReceivedModal({ tx, open, onClose, onConfirm }: TxRece
             onClick={onConfirm}
           >
             Confirm
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>
diff --git a/src/components/tx-modals/TxRejectRequestModal.tsx b/src/components/tx-modals/TxRejectRequestModal.tsx
index 1a14742..b05d59e 100644
--- a/src/components/tx-modals/TxRejectRequestModal.tsx
+++ b/src/components/tx-modals/TxRejectRequestModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem } from "@/lib";
 
 interface TxRejectRequestModalProps {
@@ -33,12 +34,12 @@ export default function TxRejectRequestModal({
     >
       <div className="space-y-2 text-sm">
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold bg-red-100 text-red-700 border border-red-200"
             onClick={onConfirm}
           >
             Confirm Reject
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>
diff --git a/src/components/tx-modals/TxSendProposalModal.tsx b/src/components/tx-modals/TxSendProposalModal.tsx
index ecf15b4..3432bd8 100644
--- a/src/components/tx-modals/TxSendProposalModal.tsx
+++ b/src/components/tx-modals/TxSendProposalModal.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import Modal from "@/components/Modal";
+import ConfirmButton from "@/components/ConfirmButton";
 import { TxItem, fmt, deriveBreakdown } from "@/lib";
 
 interface TxSendProposalModalProps {
@@ -63,18 +64,16 @@ export default function TxSendProposalModal({
           <span>{fmt(totalRefunded)} pi</span>
         </div>
         <div className="pt-2">
-          <button
+          <ConfirmButton
             className="w-full py-2 rounded-lg text-sm font-semibold"
             style={{
               background: "var(--default-primary-color)",
               color: "var(--default-secondary-color)",
             }}
-            onClick={async () => {
-              await onConfirm();
-            }}
+            onClick={onConfirm}
           >
             Confirm
-          </button>
+          </ConfirmButton>
         </div>
       </div>
     </Modal>

From 4eb5c8cf367cf3f9665dfc880ea9e3f03fe15ef8 Mon Sep 17 00:00:00 2001
From: vrajasekhar1 <vrreddy@gmail.com>
Date: Tue, 9 Dec 2025 07:54:04 +0530
Subject: [PATCH 5/6] Refactor dispute handling

---
 src/app/history/[id]/page.tsx  | 70 +++++++++++++++++++++++++---------
 src/components/TxActionBar.tsx | 50 +++++++++++++++---------
 2 files changed, 83 insertions(+), 37 deletions(-)

diff --git a/src/app/history/[id]/page.tsx b/src/app/history/[id]/page.tsx
index 599bd82..ab5692c 100644
--- a/src/app/history/[id]/page.tsx
+++ b/src/app/history/[id]/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 import React, { useState, useEffect, useRef, useContext } from 'react';
 import { useParams, useRouter } from 'next/navigation';
-import Modal from '@/components/Modal';
 import TxHeaderCard from '@/components/TxHeaderCard';
 import TxDetailsBreakdown from '@/components/TxDetailsBreakdown';
 import AuditLogPreview from '@/components/AuditLogPreview';
@@ -93,6 +92,55 @@ export default function TxDetailsPage() {
     }
   }, [tx?.status]);
 
+  const handleRefundInputChange = (raw: string) => {
+    let s = raw ?? '';
+    s = s.replace(/[^0-9.]/g, '');
+    if ((s.match(/\./g) || []).length > 1) {
+      const [first, ...rest] = s.split('.');
+      s = `${first}.${rest.join('')}`;
+    }
+    if (s.startsWith('.')) {
+      s = `0${s}`;
+    }
+    const parts = s.split('.');
+    if (parts.length === 2 && parts[1].length > 2) {
+      parts[1] = parts[1].slice(0, 2);
+      s = `${parts[0]}.${parts[1]}`;
+    }
+    if (parts[0]) {
+      parts[0] = parts[0].replace(/^0+(?=\d)/, '') || '0';
+      s = parts.length === 2 ? `${parts[0]}.${parts[1] ?? ''}` : parts[0];
+    }
+    if (s !== '' && s !== '.') {
+      let n = Number(s);
+      if (!Number.isFinite(n)) n = 0;
+      if (n > 100) {
+        n = 100;
+        s = '100';
+      } else if (n < 0) {
+        n = 0;
+        s = '0';
+      }
+      setRefundPercent(n);
+    } else {
+      setRefundPercent(0);
+    }
+    setRefundPercentStr(s);
+  };
+
+  const handleRefundInputBlur = () => {
+    let s = refundPercentStr;
+    if (s === '' || s === '.') s = '0';
+    let n = Number(s);
+    if (!Number.isFinite(n)) n = 0;
+    n = Math.min(100, Math.max(0, n));
+    const fixed = n.toFixed(2);
+    let norm = fixed.replace(/0+$/g, '').replace(/\.$/, '');
+    if (norm === '') norm = '0';
+    setRefundPercent(Number(norm));
+    setRefundPercentStr(norm);
+  };
+
   useEffect(() => {
     const loadOrder = async () => {
       // await a2uTrigger()
@@ -242,24 +290,6 @@ export default function TxDetailsPage() {
     );
   }
 
-  const handleSend = async () => {
-    if (!currentUser?.pi_uid || !tx || tx?.amount<=0) {
-      toast.error('SCREEN.MEMBERSHIP.VALIDATION.USER_NOT_LOGGED_IN_PAYMENT_MESSAGE')
-      return 
-    }
-    // setIsSaveLoading(true)
-  
-    const paymentData: PaymentDataType = {
-      amount: parseFloat(tx?.amount.toString()),
-      memo: `Escrow payment between ${currentUser.pi_username} and ${tx?.counterparty}`,
-      metadata: { 
-        orderType: OrderTypeEnum.Send,
-        order_no: id
-      },        
-    };
-    await payWithPi(paymentData, onPaymentComplete, onPaymentError);
-  }
-
   const arrow = tx.myRole === 'payer' ? 'You →' : 'You ←';
 
   return (
@@ -496,6 +526,8 @@ export default function TxDetailsPage() {
         disputeStatus={disputeStatus}
         refundPercent={refundPercent}
         refundPercentStr={refundPercentStr}
+        onRefundInputChange={handleRefundInputChange}
+        onRefundInputBlur={handleRefundInputBlur}
         lastProposedPercent={lastProposedPercent}
         lastProposedBy={lastProposedBy}
         lastProposedByUsername={lastProposedByUsername}
diff --git a/src/components/TxActionBar.tsx b/src/components/TxActionBar.tsx
index d541539..d2c432a 100644
--- a/src/components/TxActionBar.tsx
+++ b/src/components/TxActionBar.tsx
@@ -8,6 +8,8 @@ interface TxActionBarProps {
   disputeStatus: 'none' | 'proposed' | 'accepted' | 'declined' | 'cancelled';
   refundPercent: number;
   refundPercentStr: string;
+  onRefundInputChange: (value: string) => void;
+  onRefundInputBlur: () => void;
   lastProposedPercent: number | null;
   lastProposedBy: 'payer' | 'payee' | null;
   lastProposedByUsername: string | null;
@@ -38,6 +40,8 @@ export default function TxActionBar({
   disputeStatus,
   refundPercent,
   refundPercentStr,
+  onRefundInputChange,
+  onRefundInputBlur,
   lastProposedPercent,
   lastProposedBy,
   lastProposedByUsername,
@@ -120,18 +124,19 @@ export default function TxActionBar({
               if (tx.status === "disputed") {
                 const isAccepted = disputeStatus === "accepted";
                 const hasProposal =
-                  disputeStatus === "proposed" && lastProposedPercent !== null;
-                const isProposer = hasProposal && lastProposedBy === tx.myRole;
-                const inputValid = refundPercent >= 0 && refundPercent <= 100;
-                const equalsCurrent =
-                  hasProposal &&
-                  lastProposedPercent !== null &&
-                  Math.abs(refundPercent - lastProposedPercent) < 1e-9;
+                  lastProposedPercent !== null && disputeStatus !== "none";
+                const hasCounterpartyProposal =
+                  hasProposal && lastProposedBy !== tx.myRole;
+                const matchesProposal =
+                  hasCounterpartyProposal &&
+                  Math.abs(refundPercent - (lastProposedPercent ?? 0)) < 1e-9;
+                const inputDisabled =
+                  isAccepted || (hasProposal && lastProposedBy === tx.myRole);
                 const sendDisabled =
-                  isAccepted || !inputValid || (hasProposal && (isProposer || equalsCurrent));
-                const acceptDisabled =
-                  isAccepted || !hasProposal || isProposer || !equalsCurrent;
-                const inputDisabled = isAccepted || (hasProposal && isProposer);
+                  isAccepted ||
+                  matchesProposal ||
+                  (hasProposal && lastProposedBy === tx.myRole);
+                const acceptDisabled = isAccepted || !matchesProposal;
 
                 return (
                   <div className="h-full flex flex-col">
@@ -208,18 +213,27 @@ export default function TxActionBar({
                         </button>
                       </div>
                       <div className="flex flex-col items-center justify-center text-[11px] text-gray-700">
-                        <div className="flex items-center gap-1">
-                          <span>Refund</span>
+                        <div className="text-[11px] text-gray-800 leading-tight">
+                          Propose refund
+                        </div>
+                        <div className="text-[10px] text-gray-600">(0-100%)</div>
+                        <div className="flex items-baseline justify-center mt-0.5">
                           <input
                             type="text"
-                            className={`w-14 h-7 text-center text-[13px] rounded border px-1 ${
-                              inputDisabled
-                                ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                                : ""
+                            inputMode="decimal"
+                            className={`w-16 text-center bg-transparent border-0 outline-none text-[20px] font-bold ${
+                              inputDisabled ? "text-gray-400 cursor-not-allowed" : ""
                             }`}
                             value={refundPercentStr}
                             disabled={inputDisabled}
-                            onChange={() => {}}
+                            onChange={(e) => {
+                              if (inputDisabled) return;
+                              onRefundInputChange(e.target.value);
+                            }}
+                            onBlur={() => {
+                              if (inputDisabled) return;
+                              onRefundInputBlur();
+                            }}
                           />
                           <span
                             className={`ml-1 text-[16px] font-bold ${

From b90dfe43a712b3482142574ef16a576b2f9a6a88 Mon Sep 17 00:00:00 2001
From: vrajasekhar1 <vrreddy@gmail.com>
Date: Tue, 9 Dec 2025 12:42:26 +0530
Subject: [PATCH 6/6] Improve back navigation handling and prevent
 self-transactions

---
 src/app/page.tsx          | 20 ++++++++++++++++++++
 src/components/Navbar.tsx | 29 ++++++++++++++++++++++++++---
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index adc781d..198010a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -152,6 +152,14 @@ export default function HomePage() {
     setOrderNo('')
   }
 
+  const normalizePiName = (value: string) =>
+    value.trim().replace(/^@/, '');
+
+  const isSelfCounterparty = (value: string) => {
+    if (!currentUser?.pi_username) return false;
+    return normalizePiName(value) === normalizePiName(currentUser.pi_username);
+  };
+
   // Validate inputs and open the appropriate modal
   const handleOpen = async (orderType: OrderTypeEnum) => {
     const name = counterparty.trim();
@@ -162,6 +170,10 @@ export default function HomePage() {
       toast.error(orderType === OrderTypeEnum.Send ? 'Please enter Payee Pioneer Name' : 'Please enter Payer Pioneer Name');
       return;
     }
+    if (isSelfCounterparty(name)) {
+      toast.error('You cannot create an EscrowPi transaction with yourself');
+      return;
+    }
     if (!desc) {
       toast.error('Please enter EscrowPi Details');
       return;
@@ -193,6 +205,10 @@ export default function HomePage() {
       toast.error('SCREEN.MEMBERSHIP.VALIDATION.USER_NOT_LOGGED_IN_PAYMENT_MESSAGE')
       return 
     }
+    if (isSelfCounterparty(counterparty)) {
+      toast.error('You cannot create an EscrowPi transaction with yourself');
+      return;
+    }
     setIsSaveLoading(true)
 
     // Create order with status initiated; store total amount
@@ -223,6 +239,10 @@ export default function HomePage() {
 
   const handleRequest = async () => {
     if (!currentUser) return
+    if (isSelfCounterparty(counterparty)) {
+      toast.error('You cannot create an EscrowPi transaction with yourself');
+      return;
+    }
     setIsSaveLoading(true)
     // Create order with status initiated; store total amount
     const total = fees.total;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fc93113..ceb8064 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -134,15 +134,38 @@ export default function Navbar() {
                 aria-label="Back"
                 className="w-full h-full flex items-center justify-center"
                 onClick={(e) => {
+                  const goHome = () => {
+                    try {
+                      router.push('/?skipSplash=1');
+                    } catch {
+                      window.location.href = '/?skipSplash=1';
+                    }
+                  };
                   try {
                     e.preventDefault();
                     if (typeof window !== 'undefined') {
                       window.sessionStorage.setItem('escrowpi:cameFromInternalNav', '1');
                     }
-                    router.push(backHref);
+                    if (isTxDetails || isHistoryList) {
+                      router.push(backHref);
+                      return;
+                    }
+                    if (typeof window === 'undefined') {
+                      goHome();
+                      return;
+                    }
+                    const canGoBack = window.history.length > 1;
+                    if (canGoBack) {
+                      window.history.back();
+                    } else {
+                      goHome();
+                    }
                   } catch {
-                    // As a last resort, hard navigate
-                    window.location.href = backHref;
+                    if (isTxDetails || isHistoryList) {
+                      window.location.href = backHref;
+                    } else {
+                      goHome();
+                    }
                   }
                 }}
               >