feat(#323): stream gifting UI with gift message and shareable link

components/GiftStreamModal.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { useState, useRef, type FormEvent } from "react";
+import { useFocusTrap } from "@/src/lib/useFocusTrap";
+import { sorostream } from "@/src/lib/sorostream";
+import { useWallet } from "@/src/context/WalletContext";
+import { useToast } from "@/src/lib/toast";
+
+interface GiftStreamModalProps {
+  onClose: () => void;
+}
+
+const SUPPORTED_TOKENS = [
+  { symbol: "USDC", name: "USD Coin" },
+  { symbol: "XLM", name: "Stellar Lumens" },
+  { symbol: "AQUA", name: "Aquarius" },
+  { symbol: "yXLM", name: "Yield XLM" },
+] as const;
+
+const DURATION_PRESETS = [
+  { label: "7 days", seconds: 7 * 86400 },
+  { label: "30 days", seconds: 30 * 86400 },
+  { label: "90 days", seconds: 90 * 86400 },
+  { label: "1 year", seconds: 365 * 86400 },
+] as const;
+
+/** Stores the gift message alongside the stream ID, client-side only. */
+const GIFT_MESSAGES_KEY = "sorostream-gift-messages";
+
+export function getGiftMessage(streamId: string): string | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(GIFT_MESSAGES_KEY);
+    if (!raw) return null;
+    const map = JSON.parse(raw) as Record<string, string>;
+    return map[streamId] ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function saveGiftMessage(streamId: string, message: string): void {
+  try {
+    const raw = localStorage.getItem(GIFT_MESSAGES_KEY);
+    const map: Record<string, string> = raw ? (JSON.parse(raw) as Record<string, string>) : {};
+    map[streamId] = message;
+    localStorage.setItem(GIFT_MESSAGES_KEY, JSON.stringify(map));
+  } catch {}
+}
+
+function validateStellarAddress(value: string) {
+  if (!value) return "Recipient address is required.";
+  if (!/^G[A-Z2-7]{55}$/.test(value)) return "Must be a valid Stellar public key (G…, 56 chars).";
+  return "";
+}
+
+type GiftStep = "form" | "confirming" | "done";
+
+interface GiftResult {
+  streamId: string;
+  shareUrl: string;
+}
+
+export default function GiftStreamModal({ onClose }: GiftStreamModalProps) {
+  const { address } = useWallet();
+  const { addToast } = useToast();
+  const modalRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(modalRef, true);
+
+  const [step, setStep] = useState<GiftStep>("form");
+  const [result, setResult] = useState<GiftResult | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  // Form fields
+  const [recipient, setRecipient] = useState("");
+  const [token, setToken] = useState<string>("USDC");
+  const [amount, setAmount] = useState("");
+  const [durationSeconds, setDurationSeconds] = useState(30 * 86400);
+  const [customDuration, setCustomDuration] = useState("");
+  const [giftMessage, setGiftMessage] = useState("");
+  const [errors, setErrors] = useState({ recipient: "", amount: "" });
+
+  const effectiveDuration =
+    customDuration && parseInt(customDuration, 10) > 0
+      ? parseInt(customDuration, 10) * 86400
+      : durationSeconds;
+
+  function validate(): boolean {
+    const recipientErr = validateStellarAddress(recipient);
+    let amountErr = "";
+    if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
+      amountErr = "Amount must be greater than 0.";
+    }
+    setErrors({ recipient: recipientErr, amount: amountErr });
+    return !recipientErr && !amountErr;
+  }
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!validate()) return;
+
+    // Sender must not be the recipient
+    if (address && recipient === address) {
+      setErrors((prev) => ({ ...prev, recipient: "Recipient cannot be the same as the sender." }));
+      return;
+    }
+
+    setStep("confirming");
+    try {
+      const { streamId } = await sorostream.createStream({
+        recipient,
+        amount,
+        durationSeconds: effectiveDuration,
+        token,
+      });
+
+      // Persist gift message in localStorage (keyed by stream ID)
+      if (giftMessage.trim()) {
+        saveGiftMessage(streamId, giftMessage.trim());
+      }
+
+      const shareUrl = `${window.location.origin}/stream/${streamId}`;
+      setResult({ streamId, shareUrl });
+      setStep("done");
+    } catch {
+      addToast("Failed to create gift stream. Please try again.", "error");
+      setStep("form");
+    }
+  }
+
+  function handleCopyLink() {
+    if (!result) return;
+    navigator.clipboard.writeText(result.shareUrl).then(
+      () => { setCopied(true); setTimeout(() => setCopied(false), 2500); },
+      () => { addToast("Could not copy — please copy the URL manually.", "error"); },
+    );
+  }
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 px-4 overflow-y-auto py-8"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div
+        ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="gift-modal-title"
+        className="bg-gray-800 rounded-xl p-6 max-w-lg w-full shadow-2xl space-y-5 my-auto"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <h2 id="gift-modal-title" className="text-lg font-semibold text-white flex items-center gap-2">
+            <span aria-hidden="true" className="text-2xl">🎁</span>
+            Gift a Stream
+          </h2>
+          <button
+            onClick={onClose}
+            aria-label="Close gift stream dialog"
+            className="text-gray-400 hover:text-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 rounded"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+
+        {/* ── Step: Form ─────────────────────────────────────────────── */}
+        {step === "form" && (
+          <form onSubmit={handleSubmit} noValidate className="space-y-4">
+            {/* Recipient */}
+            <div>
+              <label htmlFor="gift-recipient" className="block text-sm text-gray-300 mb-1">
+                Recipient address <span className="text-red-400">*</span>
+              </label>
+              <input
+                id="gift-recipient"
+                type="text"
+                value={recipient}
+                onChange={(e) => { setRecipient(e.target.value); setErrors((p) => ({ ...p, recipient: "" })); }}
+                onBlur={() => setErrors((p) => ({ ...p, recipient: validateStellarAddress(recipient) }))}
+                placeholder="G… (56-character Stellar address)"
+                className={`w-full bg-gray-700 border rounded-lg px-4 py-2.5 text-white text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 placeholder-gray-500 ${
+                  errors.recipient ? "border-red-500" : "border-gray-600"
+                }`}
+                aria-describedby={errors.recipient ? "gift-recipient-err" : undefined}
+              />
+              {errors.recipient && (
+                <p id="gift-recipient-err" role="alert" className="text-red-400 text-xs mt-1">{errors.recipient}</p>
+              )}
+            </div>
+
+            {/* Token */}
+            <div>
+              <label htmlFor="gift-token" className="block text-sm text-gray-300 mb-1">Token</label>
+              <select
+                id="gift-token"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2.5 text-white text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500"
+              >
+                {SUPPORTED_TOKENS.map((t) => (
+                  <option key={t.symbol} value={t.symbol}>{t.symbol} — {t.name}</option>
+                ))}
+              </select>
+            </div>
+
+            {/* Amount */}
+            <div>
+              <label htmlFor="gift-amount" className="block text-sm text-gray-300 mb-1">
+                Total amount ({token}) <span className="text-red-400">*</span>
+              </label>
+              <input
+                id="gift-amount"
+                type="number"
+                min="0"
+                step="0.01"
+                value={amount}
+                onChange={(e) => { setAmount(e.target.value); setErrors((p) => ({ ...p, amount: "" })); }}
+                placeholder="e.g. 100"
+                className={`w-full bg-gray-700 border rounded-lg px-4 py-2.5 text-white text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 placeholder-gray-500 ${
+                  errors.amount ? "border-red-500" : "border-gray-600"
+                }`}
+                aria-describedby={errors.amount ? "gift-amount-err" : undefined}
+              />
+              {errors.amount && (
+                <p id="gift-amount-err" role="alert" className="text-red-400 text-xs mt-1">{errors.amount}</p>
+              )}
+            </div>
+
+            {/* Unlock duration */}
+            <div>
+              <p className="text-sm text-gray-300 mb-2">Unlock duration</p>
+              <div className="flex flex-wrap gap-2">
+                {DURATION_PRESETS.map((p) => (
+                  <button
+                    key={p.seconds}
+                    type="button"
+                    onClick={() => { setDurationSeconds(p.seconds); setCustomDuration(""); }}
+                    aria-pressed={durationSeconds === p.seconds && !customDuration}
+                    className={`px-3 py-1.5 rounded-lg text-xs border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 ${
+                      durationSeconds === p.seconds && !customDuration
+                        ? "bg-green-700 border-green-600 text-white"
+                        : "border-gray-600 text-gray-300 hover:bg-gray-700"
+                    }`}
+                  >
+                    {p.label}
+                  </button>
+                ))}
+              </div>
+              <div className="mt-2 flex items-center gap-2">
+                <input
+                  type="number"
+                  min="1"
+                  value={customDuration}
+                  onChange={(e) => setCustomDuration(e.target.value)}
+                  placeholder="Custom (days)"
+                  className="w-36 bg-gray-700 border border-gray-600 rounded-lg px-3 py-1.5 text-white text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 placeholder-gray-500"
+                  aria-label="Custom duration in days"
+                />
+                <span className="text-gray-400 text-sm">days</span>
+              </div>
+            </div>
+
+            {/* Gift message */}
+            <div>
+              <label htmlFor="gift-message" className="block text-sm text-gray-300 mb-1">
+                Gift message <span className="text-gray-500">(optional)</span>
+              </label>
+              <textarea
+                id="gift-message"
+                value={giftMessage}
+                onChange={(e) => setGiftMessage(e.target.value)}
+                rows={3}
+                maxLength={280}
+                placeholder="Write a personal note to the recipient…"
+                className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2.5 text-white text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 placeholder-gray-500 resize-none"
+              />
+              <p className="text-gray-500 text-xs mt-1 text-right">{giftMessage.length}/280</p>
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-3 pt-1">
+              <button
+                type="button"
+                onClick={onClose}
+                className="flex-1 border border-gray-600 text-gray-300 py-2.5 rounded-lg text-sm hover:bg-gray-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="flex-1 bg-green-700 hover:bg-green-600 text-white py-2.5 rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800 flex items-center justify-center gap-2"
+              >
+                <span aria-hidden="true">🎁</span>
+                Send Gift
+              </button>
+            </div>
+          </form>
+        )}
+
+        {/* ── Step: Confirming ─────────────────────────────────────── */}
+        {step === "confirming" && (
+          <div className="flex flex-col items-center gap-4 py-8">
+            <svg
+              className="animate-spin h-10 w-10 text-green-400"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+            </svg>
+            <p className="text-white text-sm">Creating gift stream…</p>
+          </div>
+        )}
+
+        {/* ── Step: Done ───────────────────────────────────────────── */}
+        {step === "done" && result && (
+          <div className="space-y-5">
+            <div className="flex flex-col items-center gap-3 py-4">
+              <div className="text-5xl" aria-hidden="true">🎉</div>
+              <h3 className="text-white font-semibold text-lg text-center">Gift stream created!</h3>
+              <p className="text-gray-400 text-sm text-center">
+                Stream <span className="text-white font-mono">#{result.streamId}</span> is ready for your recipient.
+                Share the link below so they can claim their gift.
+              </p>
+            </div>
+
+            {/* Shareable link */}
+            <div>
+              <p className="text-gray-300 text-sm font-medium mb-2">Shareable gift link</p>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  readOnly
+                  value={result.shareUrl}
+                  className="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500"
+                  aria-label="Shareable gift link"
+                  onFocus={(e) => e.target.select()}
+                />
+                <button
+                  onClick={handleCopyLink}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 ${
+                    copied
+                      ? "bg-green-800 text-green-300"
+                      : "bg-gray-700 hover:bg-gray-600 text-white"
+                  }`}
+                >
+                  {copied ? "Copied!" : "Copy"}
+                </button>
+              </div>
+            </div>
+
+            <div className="flex gap-3">
+              <a
+                href={result.shareUrl}
+                className="flex-1 text-center bg-green-700 hover:bg-green-600 text-white py-2.5 rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500"
+              >
+                View Gift Stream
+              </a>
+              <button
+                onClick={onClose}
+                className="flex-1 border border-gray-600 text-gray-300 py-2.5 rounded-lg text-sm hover:bg-gray-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/dashboard/page.tsx

@@ -90,6 +90,7 @@ function DashboardContent() {
 
   // UI state
   const [showShortcutsHelp, setShowShortcutsHelp] = useState(false);
+  const [showGiftModal, setShowGiftModal] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
 

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

@@ -148,6 +148,13 @@ export default function StreamDetail({ params }: { params: { id: string } }) {
   const [claimFinalLoading, setClaimFinalLoading] = useState(false);
   const [claimFinalDone, setClaimFinalDone] = useState(false);
 
+  // ── Gift message (stored in localStorage by GiftStreamModal) ──────────────
+  const [giftMessage, setGiftMessage] = useState<string | null>(null);
+  useEffect(() => {
+    const msg = getGiftMessage(params.id);
+    if (msg) setGiftMessage(msg);
+  }, [params.id]);
+
   // ── Top-up form state ──────────────────────────────────────────────────────
   const [showTopUp, setShowTopUp] = useState(false);
   const [topUpAmount, setTopUpAmount] = useState("");