From f99194aac831c488b24b35b0ecdd0162029e82f7 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 08:54:11 +0000
Subject: [PATCH] [#287] Show Farcaster identity on plot pages instead of
 truncated address

- Plot detail page: replace truncateAddress with WriterIdentity in
  Suspense (same pattern as storyline page)
- OG image route: resolve Farcaster fname server-side via
  lookupByAddress, fall back to truncated address

Fixes #287

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/story/[storylineId]/[plotIndex]/page.tsx |  9 ++++++++-
 src/app/story/[storylineId]/og/route.tsx         | 10 ++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/app/story/[storylineId]/[plotIndex]/page.tsx b/src/app/story/[storylineId]/[plotIndex]/page.tsx
index 908c413e..ba25a171 100644
--- a/src/app/story/[storylineId]/[plotIndex]/page.tsx
+++ b/src/app/story/[storylineId]/[plotIndex]/page.tsx
@@ -1,8 +1,10 @@
 import { type Metadata } from "next";
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { createServerClient, type Storyline, type Plot } from "../../../../../lib/supabase";
 import { STORY_FACTORY } from "../../../../../lib/contracts/constants";
 import { truncateAddress } from "../../../../../lib/utils";
+import { WriterIdentity } from "../../../../components/WriterIdentity";
 import { ViewTracker } from "../../../../components/ViewCount";
 import { CommentSection } from "../../../../components/CommentSection";
 import Link from "next/link";
@@ -104,7 +106,12 @@ export default async function PlotDetailPage({ params }: { params: Params }) {
           {chapterTitle}
         </h1>
         <div className="text-muted mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs">
-          <span>by {truncateAddress(sl.writer_address)}</span>
+          <span>
+            by{" "}
+            <Suspense fallback={<span className="text-foreground">{truncateAddress(sl.writer_address)}</span>}>
+              <WriterIdentity address={sl.writer_address} />
+            </Suspense>
+          </span>
           {p.block_timestamp && (
             <time dateTime={p.block_timestamp}>
               {new Date(p.block_timestamp).toLocaleDateString("en-US", {
diff --git a/src/app/story/[storylineId]/og/route.tsx b/src/app/story/[storylineId]/og/route.tsx
index da5c5e61..718b79cd 100644
--- a/src/app/story/[storylineId]/og/route.tsx
+++ b/src/app/story/[storylineId]/og/route.tsx
@@ -2,6 +2,7 @@ import { ImageResponse } from "next/og";
 import { type Address } from "viem";
 import { createServerClient, type Storyline } from "../../../../../lib/supabase";
 import { getTokenPrice } from "../../../../../lib/price";
+import { lookupByAddress } from "../../../../../lib/farcaster";
 import { RESERVE_LABEL, STORY_FACTORY } from "../../../../../lib/contracts/constants";
 import { truncateAddress } from "../../../../../lib/utils";
 
@@ -37,9 +38,10 @@ export async function GET(
 
   const sl = storyline as Storyline;
 
-  const priceInfo = sl.token_address
-    ? await getTokenPrice(sl.token_address as Address)
-    : null;
+  const [priceInfo, farcasterProfile] = await Promise.all([
+    sl.token_address ? getTokenPrice(sl.token_address as Address) : null,
+    lookupByAddress(sl.writer_address).catch(() => null),
+  ]);
 
   const reserveLabel = RESERVE_LABEL;
   const priceDisplay = priceInfo
@@ -103,7 +105,7 @@ export async function GET(
             color: "#737373",
           }}
         >
-          <span>by {truncateAddress(sl.writer_address)}</span>
+          <span>by {farcasterProfile ? `@${farcasterProfile.username}` : truncateAddress(sl.writer_address)}</span>
           <span>
             {sl.plot_count} {sl.plot_count === 1 ? "plot" : "plots"}
           </span>