diff --git a/src/app/address-book/page.tsx b/src/app/address-book/page.tsx new file mode 100644 index 0000000..f594dd6 --- /dev/null +++ b/src/app/address-book/page.tsx @@ -0,0 +1,144 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { + getAddressBook, + addEntry, + updateEntry, + removeEntry, + type AddressEntry, +} from "@/lib/addressBook"; + +/** + * Address Book page — manage saved Stellar addresses with nicknames. + */ +export default function AddressBookPage() { + const [entries, setEntries] = useState([]); + const [nickname, setNickname] = useState(""); + const [address, setAddress] = useState(""); + const [editAddress, setEditAddress] = useState(null); + const [editNickname, setEditNickname] = useState(""); + + useEffect(() => { + setEntries(getAddressBook()); + }, []); + + const handleAdd = (e: React.FormEvent) => { + e.preventDefault(); + if (!nickname.trim() || !address.trim()) return; + const updated = addEntry({ nickname: nickname.trim(), address: address.trim() }); + setEntries(updated); + setNickname(""); + setAddress(""); + }; + + const handleEdit = (addr: string) => { + const entry = entries.find((e) => e.address === addr); + if (!entry) return; + setEditAddress(addr); + setEditNickname(entry.nickname); + }; + + const handleSaveEdit = (addr: string) => { + const updated = updateEntry(addr, { nickname: editNickname.trim() }); + setEntries(updated); + setEditAddress(null); + }; + + const handleRemove = (addr: string) => { + setEntries(removeEntry(addr)); + }; + + return ( +
+

Address Book

+ + {/* Add new entry */} +
+

Add Address

+ setNickname(e.target.value)} + required + className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" + /> + setAddress(e.target.value)} + required + className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500" + /> + +
+ + {/* Saved entries */} + {entries.length === 0 ? ( +

No saved addresses yet.

+ ) : ( +
    + {entries.map((entry) => ( +
  • + {editAddress === entry.address ? ( +
    + setEditNickname(e.target.value)} + className="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" + autoFocus + /> + + +
    + ) : ( + <> +
    +

    {entry.nickname}

    +

    {entry.address}

    +
    + + + + )} +
    • + ))} +
+ )} +
+ ); +} diff --git a/src/app/invoice/[id]/page.tsx b/src/app/invoice/[id]/page.tsx index 325594e..1cdbef6 100644 --- a/src/app/invoice/[id]/page.tsx +++ b/src/app/invoice/[id]/page.tsx @@ -5,6 +5,8 @@ import { splitClient } from "@/lib/stellar"; import { getFreighterPublicKey } from "@/lib/freighter"; import { formatAmount, parseAmount } from "@stellar-split/sdk"; import PaymentProgress from "@/components/PaymentProgress"; +import InstallmentPanel from "@/components/InstallmentPanel"; +import CommentSection from "@/components/CommentSection"; import type { Invoice } from "@stellar-split/sdk"; interface Props { @@ -116,6 +118,11 @@ export default function InvoiceDetailPage({ params }: Props) { + {/* Installment schedule — only shown to payers with a registered plan */} + {publicKey && ( + + )} + {/* Pay form */} {invoice.status === "Pending" && publicKey && (
@@ -151,6 +158,11 @@ export default function InvoiceDetailPage({ params }: Props) { This invoice is {invoice.status.toLowerCase()} and no longer accepts payments.

)} + + {/* Private notes — only visible to the connected wallet */} + {publicKey && ( + + )} ); } diff --git a/src/app/invoice/new/page.tsx b/src/app/invoice/new/page.tsx index 6c4ae0c..2966b4f 100644 --- a/src/app/invoice/new/page.tsx +++ b/src/app/invoice/new/page.tsx @@ -26,6 +26,13 @@ export default function NewInvoicePage() { ); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); + const [equalSplit, setEqualSplit] = useState(false); + const [totalAmount, setTotalAmount] = useState(""); + + const perRecipientAmount = + equalSplit && totalAmount && recipients.length > 0 + ? (parseFloat(totalAmount) / recipients.length).toFixed(7) + : undefined; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -39,7 +46,7 @@ export default function NewInvoicePage() { creator, recipients: recipients.map((r) => ({ address: r.address, - amount: parseAmount(r.amount), + amount: parseAmount(equalSplit ? (perRecipientAmount ?? "0") : r.amount), })), token, deadline: deadlineFromDays(deadlineDays), @@ -58,12 +65,61 @@ export default function NewInvoicePage() {

Create Invoice

+ {/* Equal Split toggle */} +
+ Equal Split + +
+ + {/* Total amount input (equal split mode) */} + {equalSplit && ( +
+ + setTotalAmount(e.target.value)} + required + className="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" + /> + {perRecipientAmount && ( +

+ {perRecipientAmount} USDC per recipient +

+ )} +
+ )} + {/* Recipients */}
- +
{/* Token address */} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 91c9b70..479206d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import "./globals.css"; +import NotificationCenter from "@/components/NotificationCenter"; export const metadata: Metadata = { title: "StellarSplit — On-chain Invoice Splitting", @@ -11,6 +12,20 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( +
+ + StellarSplit + + +
{children} diff --git a/src/components/CommentSection.tsx b/src/components/CommentSection.tsx new file mode 100644 index 0000000..5a0d1be --- /dev/null +++ b/src/components/CommentSection.tsx @@ -0,0 +1,140 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; + +interface Comment { + id: string; + invoiceId: string; + walletAddress: string; + text: string; + timestamp: number; +} + +interface Props { + invoiceId: string; + walletAddress: string; +} + +const STORAGE_KEY = "stellarsplit_comments"; + +function loadComments(invoiceId: string, walletAddress: string): Comment[] { + if (typeof window === "undefined") return []; + try { + const all: Comment[] = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]"); + return all.filter( + (c) => c.invoiceId === invoiceId && c.walletAddress === walletAddress + ); + } catch { + return []; + } +} + +function saveComment(comment: Comment) { + const all: Comment[] = JSON.parse( + localStorage.getItem(STORAGE_KEY) ?? "[]" + ); + localStorage.setItem(STORAGE_KEY, JSON.stringify([...all, comment])); +} + +function deleteComment(id: string) { + const all: Comment[] = JSON.parse( + localStorage.getItem(STORAGE_KEY) ?? "[]" + ); + localStorage.setItem( + STORAGE_KEY, + JSON.stringify(all.filter((c) => c.id !== id)) + ); +} + +function relativeTime(timestamp: number): string { + const diff = (Date.now() - timestamp) / 1000; + if (diff < 60) return "just now"; + if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`; + if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`; + return `${Math.floor(diff / 86400)} days ago`; +} + +/** + * CommentSection — off-chain per-invoice notes stored in localStorage. + * Only shows comments belonging to the connected wallet address. + */ +export default function CommentSection({ invoiceId, walletAddress }: Props) { + const [comments, setComments] = useState([]); + const [text, setText] = useState(""); + const inputRef = useRef(null); + + useEffect(() => { + setComments(loadComments(invoiceId, walletAddress)); + }, [invoiceId, walletAddress]); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + const trimmed = text.trim(); + if (!trimmed) return; + const comment: Comment = { + id: `${Date.now()}-${Math.random().toString(36).slice(2)}`, + invoiceId, + walletAddress, + text: trimmed, + timestamp: Date.now(), + }; + saveComment(comment); + setComments((prev) => [...prev, comment]); + setText(""); + inputRef.current?.focus(); + }; + + const handleDelete = (id: string) => { + deleteComment(id); + setComments((prev) => prev.filter((c) => c.id !== id)); + }; + + return ( +
+

Notes

+ + {comments.length === 0 ? ( +

No notes yet.

+ ) : ( +
    + {comments.map((c) => ( +
  • +
    +

    {c.text}

    +

    {relativeTime(c.timestamp)}

    +
    + +
    • + ))} +
+ )} + + +