Add payment channel setup panel, local channel state, and channel-aware payments (#191)

Co-authored-by: Emmanuel Chukwunyere <emmanuelanalaba@gmail.com>

Author: lemarjohnny781

src/app/invoice/[id]/page.tsx

@@ -16,15 +16,19 @@ import { useInvoiceCustomization } from "@/lib/customization";
 import PaymentProgress from "@/components/PaymentProgress";
 import PayModal from "@/components/PayModal";
 import PaymentMethodSelector from "@/components/PaymentMethodSelector";
+import PaymentChannelPanel from "@/components/PaymentChannelPanel";
 import CoCreatorPanel from "@/components/CoCreatorPanel";
 import AuditLogTable from "@/components/AuditLogTable";
 import DisputeTimeline from "@/components/DisputeTimeline";
 import CountdownTimer from "@/components/CountdownTimer";
 import RecipientPieChart from "@/components/RecipientPieChart";
 import InvoicePDF from "@/components/InvoicePDF";
 import PaymentCertificate from "@/components/PaymentCertificate";
+import PaymentExport from "@/components/PaymentExport";
 import AchievementCard from "@/components/AchievementCard";
 import PaymentSourceBar from "@/components/PaymentSourceBar";
+import ReputationBadge from "@/components/ReputationBadge";
+import VerifiedCreatorBadge from "@/components/VerifiedCreatorBadge";
 import VersionHistory from "@/components/VersionHistory";
 import InstallmentPanel from "@/components/InstallmentPanel";
 import InstallmentTracker from "@/components/InstallmentTracker";
@@ -66,6 +70,13 @@ interface Props {
 type InvoicePayment = Payment & { pending?: boolean; clientKey?: string };
 type InvoiceView = Omit<InvoiceWithVesting, "payments"> & { payments: InvoicePayment[] };
 
+type PaymentChannelState = {
+  invoiceId: string;
+  payer: string;
+  balance: bigint;
+  opened: boolean;
+};
+
 function mergeWithServer(server: Invoice, local: InvoiceView | null): InvoiceView {
   const pending = (local?.payments ?? []).filter((p) => p.pending);
   const unmatchedPending = pending.filter(
@@ -101,6 +112,9 @@ export default function InvoiceDetailPage({ params }: Props) {
   const [showCancelModal, setShowCancelModal] = useState(false);
   const [showPayModal, setShowPayModal] = useState(false);
   const [locale, setLocale] = useState<Locale>("en");
+  const [channelState, setChannelState] = useState<PaymentChannelState | null>(null);
+  const [channelLoading, setChannelLoading] = useState(false);
+  const [channelError, setChannelError] = useState<string | null>(null);
 
   // Payment retry state
   const [lastFailedPayment, setLastFailedPayment] = useState<{ amount: bigint; fee?: bigint } | null>(null);
@@ -169,6 +183,64 @@ export default function InvoiceDetailPage({ params }: Props) {
     });
   };
 
+  const channelStorageKey = (invoiceId: string, payer: string) =>
+    `payment-channel-${invoiceId}-${payer}`;
+
+  const persistChannelState = (state: PaymentChannelState | null) => {
+    if (typeof window === "undefined") return;
+    const key = channelStorageKey(id, publicKey ?? "");
+    if (!state) {
+      localStorage.removeItem(key);
+      return;
+    }
+    localStorage.setItem(
+      key,
+      JSON.stringify({
+        invoiceId: state.invoiceId,
+        payer: state.payer,
+        balance: state.balance.toString(),
+        opened: state.opened,
+      })
+    );
+  };
+
+  const loadChannelState = () => {
+    if (typeof window === "undefined" || !publicKey) return null;
+    const raw = localStorage.getItem(channelStorageKey(id, publicKey));
+    if (!raw) return null;
+    try {
+      const parsed = JSON.parse(raw) as {
+        invoiceId: string;
+        payer: string;
+        balance: string | number;
+        opened: boolean;
+      };
+
+      if (parsed.invoiceId !== id || parsed.payer !== publicKey) return null;
+      return {
+        invoiceId: parsed.invoiceId,
+        payer: parsed.payer,
+        balance: BigInt(parsed.balance),
+        opened: parsed.opened,
+      } as PaymentChannelState;
+    } catch {
+      return null;
+    }
+  };
+
+  const syncChannelState = (state: PaymentChannelState | null) => {
+    setChannelState(state);
+    persistChannelState(state);
+  };
+
+  useEffect(() => {
+    if (!publicKey) return;
+    const stored = loadChannelState();
+    if (stored) {
+      setChannelState(stored);
+    }
+  }, [id, publicKey]);
+
   useEffect(() => {
     load().catch((e) => setError(String(e)));
     getFreighterPublicKey().then(setPublicKey).catch(() => null);
@@ -208,11 +280,26 @@ export default function InvoiceDetailPage({ params }: Props) {
     }
   }, [amountLocked, invoice]);
 
+  const applyChannelBalance = (amount: bigint) => {
+    if (!channelState?.opened || channelState.balance <= 0n) return null;
+    const used = amount <= channelState.balance ? amount : channelState.balance;
+    const remaining = channelState.balance - used;
+    const nextState: PaymentChannelState = {
+      ...channelState,
+      balance: remaining > 0n ? remaining : 0n,
+      opened: remaining > 0n,
+    };
+    syncChannelState(nextState.opened ? nextState : null);
+    return channelState;
+  };
+
   const handlePay = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!publicKey || !invoice) return;
     const amount = parseAmount(payAmount);
     const clientKey = `opt-${Date.now()}`;
+    const originalChannel = channelState;
+    const channelUsed = applyChannelBalance(amount);
     setError(null);
     setInvoice((prev) => {
       if (!prev) return prev;
@@ -244,6 +331,9 @@ export default function InvoiceDetailPage({ params }: Props) {
       window.dispatchEvent(new CustomEvent("usdc-balance-refresh"));
       await load();
     } catch (err) {
+      if (channelUsed && originalChannel) {
+        syncChannelState(originalChannel);
+      }
       setInvoice((prev) => {
         if (!prev) return prev;
         const pending = prev.payments.find((p) => p.clientKey === clientKey);
@@ -262,6 +352,39 @@ export default function InvoiceDetailPage({ params }: Props) {
     }
   };
 
+  const payWithChannel = async (amount: bigint, email?: string) => {
+    if (!publicKey) return;
+    const originalChannel = channelState;
+    const channelUsed = applyChannelBalance(amount);
+    try {
+      const result = await splitClient.pay({ payer: publicKey, invoiceId: id, amount });
+      setTxHash(result.txHash);
+      if (email) {
+        try {
+          await fetch("/api/send-confirmation", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              email,
+              invoiceId: id,
+              txHash: result.txHash,
+              amount: formatAmount(amount),
+            }),
+          });
+        } catch (err) {
+          console.error("Failed to send confirmation email:", err);
+        }
+      }
+      await load();
+      return result;
+    } catch (err) {
+      if (channelUsed && originalChannel) {
+        syncChannelState(originalChannel);
+      }
+      throw err;
+    }
+  };
+
   const handleSetReminder = (e: React.FormEvent) => {
     e.preventDefault();
     if (!reminderDate) return;
@@ -449,6 +572,11 @@ export default function InvoiceDetailPage({ params }: Props) {
         <PaymentProgress funded={invoice.funded} total={total} />
         <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
           {formatAmount(invoice.funded)} / {formatAmount(total)} USDC funded
+          {channelState?.opened && (
+            <span className="text-indigo-300 ml-2">
+              · Channel balance: {formatAmount(channelState.balance)} USDC
+            </span>
+          )}
         </p>
         {invoice.deadline > 0 && (
           <div className="flex items-center gap-2 mt-3">
@@ -598,6 +726,46 @@ export default function InvoiceDetailPage({ params }: Props) {
         <CoCreatorPanel invoice={invoice} publicKey={publicKey} onUpdate={load} />
       )}
 
+      {/* Payment channel panel for frequent payers */}
+      {invoice.status === "Pending" && publicKey && publicKey !== invoice.creator && (
+        <PaymentChannelPanel
+          invoiceId={id}
+          publicKey={publicKey}
+          channelState={channelState}
+          onOpen={async () => {
+            if (!publicKey) return;
+            setChannelLoading(true);
+            setChannelError(null);
+            try {
+              const result = await (splitClient as any).openChannel({ payer: publicKey, invoiceId: id });
+              const balance = result?.balance != null ? BigInt(result.balance) : 0n;
+              syncChannelState({ invoiceId: id, payer: publicKey, balance, opened: true });
+              await load();
+            } catch (err) {
+              setChannelError(String(err));
+            } finally {
+              setChannelLoading(false);
+            }
+          }}
+          onClose={async () => {
+            if (!publicKey) return;
+            setChannelLoading(true);
+            setChannelError(null);
+            try {
+              await (splitClient as any).closeChannel({ payer: publicKey, invoiceId: id });
+              syncChannelState(null);
+              await load();
+            } catch (err) {
+              setChannelError(String(err));
+            } finally {
+              setChannelLoading(false);
+            }
+          }}
+          loading={channelLoading}
+          error={channelError}
+        />
+      )}
+
       {/* Pay button → opens modal */}
       {invoice.status === "Pending" && publicKey && (
         <section aria-labelledby="pay-heading" className="mb-8">
@@ -653,6 +821,11 @@ export default function InvoiceDetailPage({ params }: Props) {
                 publicKey={publicKey}
                 onSuggest={setPayAmount}
               />
+              {channelState?.opened && channelState.balance > 0n && (
+                <p className="text-sm text-gray-400 mt-2">
+                  This payment will use up to <span className="text-indigo-300">{formatAmount(channelState.balance)} USDC</span> from your open payment channel.
+                </p>
+              )}
             </div>
             {error && (
               <div id="pay-error" role="alert" className="flex flex-col gap-2">
@@ -696,28 +869,7 @@ export default function InvoiceDetailPage({ params }: Props) {
           total={total}
           publicKey={publicKey}
           onPay={async (amount, email) => {
-            const result = await splitClient.pay({ payer: publicKey, invoiceId: id, amount });
-            setTxHash(result.txHash);
-            
-            // Send confirmation email if provided
-            if (email) {
-              try {
-                await fetch("/api/send-confirmation", {
-                  method: "POST",
-                  headers: { "Content-Type": "application/json" },
-                  body: JSON.stringify({
-                    email,
-                    invoiceId: id,
-                    txHash: result.txHash,
-                    amount: formatAmount(amount),
-                  }),
-                });
-              } catch (err) {
-                console.error("Failed to send confirmation email:", err);
-              }
-            }
-            
-            await load();
+            await payWithChannel(amount, email);
           }}
           onClose={() => setShowPayModal(false)}
         />

src/components/PaymentChannelPanel.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { formatAmount } from "@stellar-split/sdk";
+
+interface PaymentChannelState {
+  invoiceId: string;
+  payer: string;
+  balance: bigint;
+  opened: boolean;
+}
+
+interface Props {
+  invoiceId: string;
+  publicKey: string;
+  channelState: PaymentChannelState | null;
+  onOpen: () => Promise<void>;
+  onClose: () => Promise<void>;
+  loading: boolean;
+  error: string | null;
+}
+
+export default function PaymentChannelPanel({
+  channelState,
+  onOpen,
+  onClose,
+  loading,
+  error,
+}: Props) {
+  return (
+    <section aria-labelledby="payment-channel-heading" className="mb-8">
+      <div className="rounded-3xl border border-gray-700 bg-gray-900 p-5 sm:p-6">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <h2 id="payment-channel-heading" className="text-lg font-semibold">
+              Payment Channel
+            </h2>
+            <p className="mt-1 text-sm text-gray-400">
+              Open a reusable payment channel for this invoice to keep payments fast and reduce fees.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {channelState?.opened ? (
+              <button
+                type="button"
+                onClick={onClose}
+                disabled={loading}
+                className="inline-flex items-center justify-center min-h-11 px-5 py-3 rounded-lg bg-red-600 hover:bg-red-500 text-sm font-semibold transition-colors disabled:opacity-50"
+              >
+                {loading ? "Closing…" : "Close Channel"}
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={onOpen}
+                disabled={loading}
+                className="inline-flex items-center justify-center min-h-11 px-5 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-sm font-semibold transition-colors disabled:opacity-50"
+              >
+                {loading ? "Opening…" : "Open Payment Channel"}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {channelState?.opened ? (
+          <div className="mt-6 grid gap-4 sm:grid-cols-2">
+            <div className="rounded-2xl bg-gray-800 p-4">
+              <p className="text-xs uppercase tracking-[0.16em] text-gray-500">
+                Channel balance
+              </p>
+              <p className="mt-2 text-2xl font-semibold text-white">
+                {formatAmount(channelState.balance)} USDC
+              </p>
+            </div>
+            <div className="rounded-2xl bg-gray-800 p-4">
+              <p className="text-xs uppercase tracking-[0.16em] text-gray-500">
+                Status
+              </p>
+              <p className="mt-2 text-sm text-gray-300">
+                {channelState.balance > 0n ? "Open and ready for payments" : "Open with zero balance"}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="mt-6 rounded-2xl bg-gray-800 p-4 text-sm text-gray-400">
+            Your payment channel is currently closed. Open it to store prepaid balance for faster payments.
+          </div>
+        )}
+
+        {error ? (
+          <p role="alert" className="mt-4 text-sm text-red-400">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    </section>
+  );
+}