From 769b4b6d09caf8cfc2196df60eb4c4518452d96e Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 17 Mar 2026 14:32:33 +0000
Subject: [PATCH 1/3] [#255] Display Farcaster identity everywhere: nav,
 comments, story cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add FarcasterAvatar component: reusable address → avatar + @username
- Add useConnectedIdentity hook: resolves connected wallet's FC identity
- ConnectWallet: show FC avatar + @username in nav bar
- CommentSection: show FC identity for commenters
- StoryCard: show FC identity for story writers
- Falls back to truncated address when no FC account is linked

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/CommentSection.tsx  |  4 +-
 src/components/ConnectWallet.tsx   | 16 +++++++-
 src/components/FarcasterAvatar.tsx | 63 ++++++++++++++++++++++++++++++
 src/components/StoryCard.tsx       |  4 +-
 src/hooks/useConnectedIdentity.ts  | 37 ++++++++++++++++++
 5 files changed, 118 insertions(+), 6 deletions(-)
 create mode 100644 src/components/FarcasterAvatar.tsx
 create mode 100644 src/hooks/useConnectedIdentity.ts

diff --git a/src/components/CommentSection.tsx b/src/components/CommentSection.tsx
index d5fd1ebe..67ce62b9 100644
--- a/src/components/CommentSection.tsx
+++ b/src/components/CommentSection.tsx
@@ -3,8 +3,8 @@
 import { useState, useCallback } from "react";
 import { useAccount, useSignMessage } from "wagmi";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { truncateAddress } from "../../lib/utils";
 import { ConnectWallet } from "./ConnectWallet";
+import { FarcasterAvatar } from "./FarcasterAvatar";
 
 interface Comment {
   id: number;
@@ -182,7 +182,7 @@ export function CommentSection({
           <div key={c.id} className="text-sm">
             <div className="flex items-baseline gap-2">
               <span className="text-foreground text-xs font-medium">
-                {truncateAddress(c.commenter_address)}
+                <FarcasterAvatar address={c.commenter_address} size={12} />
               </span>
               <span className="text-muted text-[10px]">
                 {relativeTime(c.created_at)}
diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index d234777e..2cf3e891 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { useAccount, useConnect, useDisconnect } from "wagmi";
 import { isFarcasterMiniApp } from "../../lib/farcaster-connector";
 import { truncateAddress } from "../../lib/utils";
+import { useConnectedIdentity } from "../hooks/useConnectedIdentity";
 
 export function ConnectWallet() {
   const { address, isConnected } = useAccount();
@@ -11,6 +12,7 @@ export function ConnectWallet() {
   const { disconnect } = useDisconnect();
   const autoConnectAttempted = useRef(false);
   const [inMiniApp, setInMiniApp] = useState(false);
+  const { profile } = useConnectedIdentity();
 
   // Detect Farcaster mini app context once on mount
   useEffect(() => {
@@ -36,8 +38,18 @@ export function ConnectWallet() {
   if (isConnected && address) {
     return (
       <div className="border-border flex items-center gap-3 rounded border px-3 py-2 text-sm">
-        <span className="text-accent font-medium">
-          {truncateAddress(address)}
+        <span className="text-accent inline-flex items-center gap-1.5 font-medium">
+          {profile?.pfpUrl && (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={profile.pfpUrl}
+              alt=""
+              width={16}
+              height={16}
+              className="rounded-full"
+            />
+          )}
+          {profile ? `@${profile.username}` : truncateAddress(address)}
         </span>
         <button
           onClick={() => disconnect()}
diff --git a/src/components/FarcasterAvatar.tsx b/src/components/FarcasterAvatar.tsx
new file mode 100644
index 00000000..6a1713eb
--- /dev/null
+++ b/src/components/FarcasterAvatar.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getFarcasterProfile } from "../../lib/actions";
+import { truncateAddress } from "../../lib/utils";
+import type { FarcasterProfile } from "../../lib/farcaster";
+
+/**
+ * Resolves an Ethereum address to a Farcaster identity via server action.
+ * Shows avatar + @username with link, or falls back to truncated address.
+ */
+export function FarcasterAvatar({
+  address,
+  size = 14,
+  className,
+}: {
+  address: string;
+  size?: number;
+  className?: string;
+}) {
+  const [profile, setProfile] = useState<FarcasterProfile | null>(null);
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    getFarcasterProfile(address).then((p) => {
+      if (!cancelled) {
+        setProfile(p);
+        setLoaded(true);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [address]);
+
+  if (!loaded || !profile) {
+    return <span className={className}>{truncateAddress(address)}</span>;
+  }
+
+  return (
+    <span className={`inline-flex items-center gap-1 ${className ?? ""}`}>
+      {profile.pfpUrl && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={profile.pfpUrl}
+          alt=""
+          width={size}
+          height={size}
+          className="rounded-full"
+        />
+      )}
+      <a
+        href={`https://farcaster.com/${profile.username}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-foreground hover:text-accent transition-colors"
+      >
+        @{profile.username}
+      </a>
+    </span>
+  );
+}
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index 2a9f1521..4e96ae6d 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import type { Storyline } from "../../lib/supabase";
-import { truncateAddress } from "../../lib/utils";
 import { AgentBadge } from "./AgentBadge";
+import { WriterIdentityClient } from "./WriterIdentityClient";
 import { RatingSummary } from "./RatingSummary";
 import { StoryCardStats } from "./StoryCardStats";
 import { ViewCount } from "./ViewCount";
@@ -41,7 +41,7 @@ export function StoryCard({
 
       {/* Author + meta */}
       <div className="text-muted mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
-        <span>By: {truncateAddress(storyline.writer_address)}</span>
+        <span className="inline-flex items-center gap-0.5">By: <WriterIdentityClient address={storyline.writer_address} /></span>
         <span>
           {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
         </span>
diff --git a/src/hooks/useConnectedIdentity.ts b/src/hooks/useConnectedIdentity.ts
new file mode 100644
index 00000000..fdb32ac9
--- /dev/null
+++ b/src/hooks/useConnectedIdentity.ts
@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useAccount } from "wagmi";
+import { getFarcasterProfile } from "../../lib/actions";
+import type { FarcasterProfile } from "../../lib/farcaster";
+
+/**
+ * Resolves the connected wallet's Farcaster identity.
+ * Caches result for the session (re-fetches only on address change).
+ */
+export function useConnectedIdentity() {
+  const { address } = useAccount();
+  const [profile, setProfile] = useState<FarcasterProfile | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!address) {
+      setProfile(null);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    getFarcasterProfile(address).then((p) => {
+      if (!cancelled) {
+        setProfile(p);
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [address]);
+
+  return { profile, loading };
+}

From ad7c7ccabf9f36bef8f28df2d47990579268ac4f Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 17 Mar 2026 14:35:15 +0000
Subject: [PATCH 2/3] [#255] Fix nested anchor: add linkProfile prop for
 identity components

WriterIdentityClient and FarcasterAvatar now accept linkProfile={false}
to render plain text instead of an anchor. StoryCard passes false since
it's already wrapped in a Next Link. Addresses T2a review on PR #256.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/FarcasterAvatar.tsx      | 22 ++++++++++++++--------
 src/components/StoryCard.tsx            |  2 +-
 src/components/WriterIdentityClient.tsx | 22 +++++++++++++---------
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/components/FarcasterAvatar.tsx b/src/components/FarcasterAvatar.tsx
index 6a1713eb..1444e6b7 100644
--- a/src/components/FarcasterAvatar.tsx
+++ b/src/components/FarcasterAvatar.tsx
@@ -13,10 +13,12 @@ export function FarcasterAvatar({
   address,
   size = 14,
   className,
+  linkProfile = true,
 }: {
   address: string;
   size?: number;
   className?: string;
+  linkProfile?: boolean;
 }) {
   const [profile, setProfile] = useState<FarcasterProfile | null>(null);
   const [loaded, setLoaded] = useState(false);
@@ -50,14 +52,18 @@ export function FarcasterAvatar({
           className="rounded-full"
         />
       )}
-      <a
-        href={`https://farcaster.com/${profile.username}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-foreground hover:text-accent transition-colors"
-      >
-        @{profile.username}
-      </a>
+      {linkProfile ? (
+        <a
+          href={`https://farcaster.com/${profile.username}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-foreground hover:text-accent transition-colors"
+        >
+          @{profile.username}
+        </a>
+      ) : (
+        <span>@{profile.username}</span>
+      )}
     </span>
   );
 }
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index 4e96ae6d..13ec5bf1 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -41,7 +41,7 @@ export function StoryCard({
 
       {/* Author + meta */}
       <div className="text-muted mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
-        <span className="inline-flex items-center gap-0.5">By: <WriterIdentityClient address={storyline.writer_address} /></span>
+        <span className="inline-flex items-center gap-0.5">By: <WriterIdentityClient address={storyline.writer_address} linkProfile={false} /></span>
         <span>
           {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
         </span>
diff --git a/src/components/WriterIdentityClient.tsx b/src/components/WriterIdentityClient.tsx
index e4cb1761..dd6b0566 100644
--- a/src/components/WriterIdentityClient.tsx
+++ b/src/components/WriterIdentityClient.tsx
@@ -9,7 +9,7 @@ import type { FarcasterProfile } from "../../lib/farcaster";
  * Client component that resolves a Farcaster identity via server action.
  * Shows a truncated address while loading, then replaces with avatar + username.
  */
-export function WriterIdentityClient({ address }: { address: string }) {
+export function WriterIdentityClient({ address, linkProfile = true }: { address: string; linkProfile?: boolean }) {
   const [profile, setProfile] = useState<FarcasterProfile | null>(null);
   const [loaded, setLoaded] = useState(false);
 
@@ -42,14 +42,18 @@ export function WriterIdentityClient({ address }: { address: string }) {
           className="rounded-full"
         />
       )}
-      <a
-        href={`https://farcaster.com/${profile.username}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-foreground hover:text-accent transition-colors"
-      >
-        @{profile.username}
-      </a>
+      {linkProfile ? (
+        <a
+          href={`https://farcaster.com/${profile.username}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-foreground hover:text-accent transition-colors"
+        >
+          @{profile.username}
+        </a>
+      ) : (
+        <span>@{profile.username}</span>
+      )}
     </span>
   );
 }

From a39c736abda7b5196dcc755ef18c6da635a10551 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 17 Mar 2026 14:38:22 +0000
Subject: [PATCH 3/3] [#255] Fix ESLint: avoid synchronous setState in
 useEffect

Restructure useConnectedIdentity to derive loading state from
resolvedFor comparison instead of calling setLoading synchronously
in the effect body.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/hooks/useConnectedIdentity.ts | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/hooks/useConnectedIdentity.ts b/src/hooks/useConnectedIdentity.ts
index fdb32ac9..8e63c4c3 100644
--- a/src/hooks/useConnectedIdentity.ts
+++ b/src/hooks/useConnectedIdentity.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAccount } from "wagmi";
 import { getFarcasterProfile } from "../../lib/actions";
 import type { FarcasterProfile } from "../../lib/farcaster";
@@ -11,21 +11,21 @@ import type { FarcasterProfile } from "../../lib/farcaster";
  */
 export function useConnectedIdentity() {
   const { address } = useAccount();
-  const [profile, setProfile] = useState<FarcasterProfile | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<{
+    profile: FarcasterProfile | null;
+    resolvedFor: string | undefined;
+  }>({ profile: null, resolvedFor: undefined });
+  const fetchingRef = useRef(false);
 
   useEffect(() => {
-    if (!address) {
-      setProfile(null);
-      return;
-    }
+    if (!address) return;
 
     let cancelled = false;
-    setLoading(true);
+    fetchingRef.current = true;
     getFarcasterProfile(address).then((p) => {
       if (!cancelled) {
-        setProfile(p);
-        setLoading(false);
+        setResult({ profile: p, resolvedFor: address });
+        fetchingRef.current = false;
       }
     });
     return () => {
@@ -33,5 +33,8 @@ export function useConnectedIdentity() {
     };
   }, [address]);
 
-  return { profile, loading };
+  if (!address) return { profile: null, loading: false };
+
+  const loading = result.resolvedFor !== address;
+  return { profile: loading ? null : result.profile, loading };
 }