From 4987dd05cadf839d6c957c75c35f77f1dfcfcbf4 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sat, 14 Mar 2026 13:32:09 +0000
Subject: [PATCH 1/2] [#206] Implement Create Storyline flow with 5-state
 publishing machine

- Create /create route with title, content textarea (Unicode char counter),
  and 72h deadline toggle
- Implement usePublishStoryline hook with 5 states:
  uploading -> confirming -> pending -> indexing -> published
- Wire Filebase upload via /api/upload server route (keeps S3 keys server-side)
- Call createStoryline() on StoryFactory via wagmi writeContractAsync
- Trigger storyline indexer after tx confirmation
- Cache CID in ref for retry (skip re-upload on wallet rejection)
- Update STORY_FACTORY constant to read from NEXT_PUBLIC_CONTRACT_ADDRESS env
- Wallet-gated with ConnectWallet prompt
- Terminal aesthetic form styling

Fixes #206

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 lib/contracts/constants.ts  |   3 +-
 src/app/api/upload/route.ts |  20 +++++
 src/app/create/page.tsx     | 164 ++++++++++++++++++++++++++++++++++++
 src/hooks/usePublish.ts     | 119 ++++++++++++++++++++++++++
 4 files changed, 305 insertions(+), 1 deletion(-)
 create mode 100644 src/app/api/upload/route.ts
 create mode 100644 src/app/create/page.tsx
 create mode 100644 src/hooks/usePublish.ts

diff --git a/lib/contracts/constants.ts b/lib/contracts/constants.ts
index 3b147818..3aa322dc 100644
--- a/lib/contracts/constants.ts
+++ b/lib/contracts/constants.ts
@@ -20,7 +20,8 @@ export const BASE_CHAIN_ID = 8453;
 /** StoryFactory — storyline + plot management
  *  Base Sepolia: 0x05C4d59529807316D6fA09cdaA509adDfe85b474
  *  Base Mainnet: TBD (replace after mainnet deployment) */
-export const STORY_FACTORY = "0x0000000000000000000000000000000000000000" as const;
+export const STORY_FACTORY = (process.env.NEXT_PUBLIC_CONTRACT_ADDRESS ??
+  "0x0000000000000000000000000000000000000000") as `0x${string}`;
 
 /** ZapPlotLinkMCV2 — one-click buy (ETH/USDC/HUNT -> storyline token) */
 export const ZAP_PLOTLINK = "0x0000000000000000000000000000000000000000" as const;
diff --git a/src/app/api/upload/route.ts b/src/app/api/upload/route.ts
new file mode 100644
index 00000000..edcaaad7
--- /dev/null
+++ b/src/app/api/upload/route.ts
@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+import { uploadWithRetry } from "../../../../lib/filebase";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { content, key } = await req.json();
+    if (!content || !key) {
+      return NextResponse.json(
+        { error: "Missing content or key" },
+        { status: 400 },
+      );
+    }
+
+    const cid = await uploadWithRetry(content, key);
+    return NextResponse.json({ cid });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Upload failed";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
new file mode 100644
index 00000000..67ae38a2
--- /dev/null
+++ b/src/app/create/page.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { useState } from "react";
+import { useAccount } from "wagmi";
+import { ConnectWallet } from "../../components/ConnectWallet";
+import {
+  validateContentLength,
+  MIN_CONTENT_LENGTH,
+  MAX_CONTENT_LENGTH,
+} from "../../../lib/content";
+import { usePublishStoryline, type PublishState } from "../../hooks/usePublish";
+import Link from "next/link";
+
+const STATE_LABELS: Record<PublishState, string> = {
+  idle: "",
+  uploading: "Uploading to IPFS...",
+  confirming: "Confirm in wallet...",
+  pending: "Publishing to Base...",
+  indexing: "Indexing...",
+  published: "Published!",
+  error: "Error",
+};
+
+export default function CreateStorylinePage() {
+  const { isConnected } = useAccount();
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [hasDeadline, setHasDeadline] = useState(false);
+
+  const { state, error, publish, reset } = usePublishStoryline();
+  const { valid, charCount } = validateContentLength(content);
+  const titleValid = title.trim().length > 0;
+  const canSubmit =
+    state === "idle" || state === "error"
+      ? titleValid && valid
+      : false;
+
+  if (!isConnected) {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center gap-4 px-6">
+        <p className="text-muted text-sm">
+          Connect your wallet to create a storyline.
+        </p>
+        <ConnectWallet />
+      </div>
+    );
+  }
+
+  if (state === "published") {
+    return (
+      <div className="flex min-h-screen flex-col items-center justify-center gap-6 px-6">
+        <h1 className="text-accent text-2xl font-bold">Storyline created!</h1>
+        <div className="flex gap-3">
+          <Link
+            href="/discover"
+            className="border-border text-muted hover:text-foreground rounded border px-4 py-2 text-sm transition-colors"
+          >
+            Discover
+          </Link>
+          <button
+            onClick={reset}
+            className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
+          >
+            Create another
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const busy = state !== "idle" && state !== "error";
+
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-12">
+      <h1 className="text-accent text-2xl font-bold tracking-tight">
+        Create Storyline
+      </h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (canSubmit) publish(title.trim(), content, hasDeadline);
+        }}
+        className="mt-8 space-y-6"
+      >
+        {/* Title */}
+        <div>
+          <label className="text-foreground mb-2 block text-sm">Title</label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            disabled={busy}
+            placeholder="Enter storyline title"
+            className="border-border bg-surface text-foreground placeholder:text-muted w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
+          />
+        </div>
+
+        {/* Content */}
+        <div>
+          <label className="text-foreground mb-2 block text-sm">
+            Opening Chapter
+          </label>
+          <textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            disabled={busy}
+            rows={12}
+            placeholder="Write the genesis plot (500–10,000 characters)"
+            className="border-border bg-surface text-foreground placeholder:text-muted w-full resize-y rounded border px-3 py-2 text-sm leading-relaxed focus:border-accent focus:outline-none disabled:opacity-50"
+          />
+          <div className="mt-1 flex justify-between text-xs">
+            <span
+              className={
+                content.length > 0 && !valid ? "text-error" : "text-muted"
+              }
+            >
+              {charCount.toLocaleString()} / {MIN_CONTENT_LENGTH.toLocaleString()}–
+              {MAX_CONTENT_LENGTH.toLocaleString()} chars
+            </span>
+          </div>
+        </div>
+
+        {/* Deadline toggle */}
+        <label className="flex cursor-pointer items-center gap-3">
+          <input
+            type="checkbox"
+            checked={hasDeadline}
+            onChange={(e) => setHasDeadline(e.target.checked)}
+            disabled={busy}
+            className="accent-accent h-4 w-4"
+          />
+          <span className="text-foreground text-sm">
+            Enable 72h deadline
+          </span>
+          <span className="text-muted text-xs">
+            Story sunsets if no new plot within 72 hours
+          </span>
+        </label>
+
+        {/* Status */}
+        {state === "error" && (
+          <div className="border-error/30 text-error rounded border px-3 py-2 text-xs">
+            {error}
+          </div>
+        )}
+        {busy && (
+          <div className="border-border text-muted rounded border px-3 py-2 text-xs">
+            {STATE_LABELS[state]}
+          </div>
+        )}
+
+        {/* Submit */}
+        <button
+          type="submit"
+          disabled={!canSubmit || busy}
+          className="border-accent text-accent hover:bg-accent hover:text-background w-full rounded border py-2.5 text-sm font-medium transition-colors disabled:opacity-50"
+        >
+          {busy ? STATE_LABELS[state] : "Publish Storyline"}
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/src/hooks/usePublish.ts b/src/hooks/usePublish.ts
new file mode 100644
index 00000000..ad049b99
--- /dev/null
+++ b/src/hooks/usePublish.ts
@@ -0,0 +1,119 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+import { useWriteContract, useWaitForTransactionReceipt } from "wagmi";
+import { storyFactoryAbi } from "../../lib/contracts/abi";
+import { STORY_FACTORY } from "../../lib/contracts/constants";
+import { hashContent } from "../../lib/content";
+import type { Hex } from "viem";
+
+export type PublishState =
+  | "idle"
+  | "uploading"
+  | "confirming"
+  | "pending"
+  | "indexing"
+  | "published"
+  | "error";
+
+interface PublishResult {
+  state: PublishState;
+  error: string | null;
+  txHash: Hex | undefined;
+  publish: (
+    title: string,
+    content: string,
+    hasDeadline: boolean,
+  ) => Promise<void>;
+  reset: () => void;
+}
+
+export function usePublishStoryline(): PublishResult {
+  const [state, setState] = useState<PublishState>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const cachedCid = useRef<string | null>(null);
+
+  const { writeContractAsync, data: txHash } = useWriteContract();
+  const { isSuccess: txConfirmed } = useWaitForTransactionReceipt({
+    hash: txHash,
+  });
+
+  const publish = useCallback(
+    async (title: string, content: string, hasDeadline: boolean) => {
+      try {
+        setError(null);
+
+        // 1. Upload to IPFS (reuse cached CID on retry)
+        let cid = cachedCid.current;
+        if (!cid) {
+          setState("uploading");
+          const res = await fetch("/api/upload", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ content, key: `plotlink/genesis/${Date.now()}.txt` }),
+          });
+          if (!res.ok) throw new Error("IPFS upload failed");
+          const data = await res.json();
+          cid = data.cid as string;
+          cachedCid.current = cid;
+        }
+
+        // 2. Submit tx to wallet
+        setState("confirming");
+        const contentHash = hashContent(content);
+
+        const hash = await writeContractAsync({
+          address: STORY_FACTORY,
+          abi: storyFactoryAbi,
+          functionName: "createStoryline",
+          args: [title, cid, contentHash, hasDeadline],
+        });
+
+        // 3. Wait for tx confirmation
+        setState("pending");
+        // wagmi's useWaitForTransactionReceipt handles this reactively,
+        // but we poll here for the imperative flow
+        const maxWait = 60_000;
+        const start = Date.now();
+        while (Date.now() - start < maxWait) {
+          await new Promise((r) => setTimeout(r, 2000));
+          if (txConfirmed) break;
+          // Also check via fetch as backup
+          const receiptRes = await fetch(
+            `/api/tx-status?hash=${hash}`,
+          ).catch(() => null);
+          if (receiptRes?.ok) {
+            const receiptData = await receiptRes.json();
+            if (receiptData.confirmed) break;
+          }
+        }
+
+        // 4. Trigger indexer
+        setState("indexing");
+        await fetch("/api/index/storyline", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ txHash: hash, content }),
+        });
+
+        // 5. Done
+        setState("published");
+        cachedCid.current = null;
+      } catch (err) {
+        const message =
+          err instanceof Error ? err.message : "Unknown error";
+        setError(message);
+        setState("error");
+      }
+    },
+    [writeContractAsync, txConfirmed],
+  );
+
+  const reset = useCallback(() => {
+    setState("idle");
+    setError(null);
+    cachedCid.current = null;
+  }, []);
+
+  return { state, error, txHash, publish, reset };
+}

From 84c6d637c6388e36d3040cef2a8558605adb8036 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Sat, 14 Mar 2026 13:34:18 +0000
Subject: [PATCH 2/2] [#206] Fix CID cache content mismatch and replace polling
 with viem waitForTransactionReceipt

- Cache CID with content hash; invalidate when content changes (fixes
  mismatched content on retry after edit)
- Replace /api/tx-status polling with publicClient.waitForTransactionReceipt()
  (removes dependency on non-existent route)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/hooks/usePublish.ts | 49 +++++++++++++++++------------------------
 1 file changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/hooks/usePublish.ts b/src/hooks/usePublish.ts
index ad049b99..68402e0f 100644
--- a/src/hooks/usePublish.ts
+++ b/src/hooks/usePublish.ts
@@ -1,10 +1,11 @@
 "use client";
 
 import { useState, useCallback, useRef } from "react";
-import { useWriteContract, useWaitForTransactionReceipt } from "wagmi";
+import { useWriteContract } from "wagmi";
 import { storyFactoryAbi } from "../../lib/contracts/abi";
 import { STORY_FACTORY } from "../../lib/contracts/constants";
 import { hashContent } from "../../lib/content";
+import { publicClient } from "../../lib/rpc";
 import type { Hex } from "viem";
 
 export type PublishState =
@@ -31,36 +32,41 @@ interface PublishResult {
 export function usePublishStoryline(): PublishResult {
   const [state, setState] = useState<PublishState>("idle");
   const [error, setError] = useState<string | null>(null);
-  const cachedCid = useRef<string | null>(null);
+  const cachedCid = useRef<{ cid: string; contentHash: string } | null>(null);
 
   const { writeContractAsync, data: txHash } = useWriteContract();
-  const { isSuccess: txConfirmed } = useWaitForTransactionReceipt({
-    hash: txHash,
-  });
 
   const publish = useCallback(
     async (title: string, content: string, hasDeadline: boolean) => {
       try {
         setError(null);
+        const contentHash = hashContent(content);
 
-        // 1. Upload to IPFS (reuse cached CID on retry)
-        let cid = cachedCid.current;
-        if (!cid) {
+        // 1. Upload to IPFS (reuse cached CID only if content unchanged)
+        let cid: string;
+        if (
+          cachedCid.current &&
+          cachedCid.current.contentHash === contentHash
+        ) {
+          cid = cachedCid.current.cid;
+        } else {
           setState("uploading");
           const res = await fetch("/api/upload", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ content, key: `plotlink/genesis/${Date.now()}.txt` }),
+            body: JSON.stringify({
+              content,
+              key: `plotlink/genesis/${Date.now()}.txt`,
+            }),
           });
           if (!res.ok) throw new Error("IPFS upload failed");
           const data = await res.json();
           cid = data.cid as string;
-          cachedCid.current = cid;
+          cachedCid.current = { cid, contentHash };
         }
 
         // 2. Submit tx to wallet
         setState("confirming");
-        const contentHash = hashContent(content);
 
         const hash = await writeContractAsync({
           address: STORY_FACTORY,
@@ -69,24 +75,9 @@ export function usePublishStoryline(): PublishResult {
           args: [title, cid, contentHash, hasDeadline],
         });
 
-        // 3. Wait for tx confirmation
+        // 3. Wait for tx confirmation via viem publicClient
         setState("pending");
-        // wagmi's useWaitForTransactionReceipt handles this reactively,
-        // but we poll here for the imperative flow
-        const maxWait = 60_000;
-        const start = Date.now();
-        while (Date.now() - start < maxWait) {
-          await new Promise((r) => setTimeout(r, 2000));
-          if (txConfirmed) break;
-          // Also check via fetch as backup
-          const receiptRes = await fetch(
-            `/api/tx-status?hash=${hash}`,
-          ).catch(() => null);
-          if (receiptRes?.ok) {
-            const receiptData = await receiptRes.json();
-            if (receiptData.confirmed) break;
-          }
-        }
+        await publicClient.waitForTransactionReceipt({ hash });
 
         // 4. Trigger indexer
         setState("indexing");
@@ -106,7 +97,7 @@ export function usePublishStoryline(): PublishResult {
         setState("error");
       }
     },
-    [writeContractAsync, txConfirmed],
+    [writeContractAsync],
   );
 
   const reset = useCallback(() => {