Add follow controls to directory fidget

[willyogo]

Summary

• add follow and unfollow controls to the directory card and list layouts via a reusable DirectoryFollowButton
• pass Farcaster viewer information through directory data fetching so member viewer_context is available in the UI
• update the token directory API to accept an optional viewer fid and return viewer follow status alongside members

Testing

• npm run lint

---

Codex Task

Summary by CodeRabbit

• New Features
  • Added follow/unfollow buttons to directory member cards and list entries
  • Directory now displays your follow status for each member
  • Follow actions integrated with account authentication for seamless interactions

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
nounspace-ts	Ready	Preview	Comment	Nov 15, 2025 3:33pm

[coderabbitai]

Walkthrough

This change adds Farcaster viewer context hydration to the token directory, enabling follow relationship tracking between viewers and directory members. It introduces viewerFid and signer propagation through components, defines new viewer context types, extends API query parameters, and implements a new DirectoryFollowButton component for managing follow actions.

Changes

Cohort / File(s)	Summary
Type and utility definitions src/fidgets/token/Directory/types.ts, src/fidgets/token/Directory/utils.ts, src/fidgets/token/Directory/utils/memberData.ts	Introduces DirectoryMemberViewerContext type with optional following flag; extends DirectoryMemberData to include viewerContext property; adds extractViewerContext utility function to derive viewer context from Neynar user data; updates NeynarUser type to include viewer_context field.
Core Directory component src/fidgets/token/Directory/Directory.tsx	Implements viewerFid and signer hydration via useFarcasterSigner hook; adds lastViewerContextFid state tracking; batches viewerContext hydration requests for members when viewerFid is present; resets viewerContext when viewer is absent; propagates viewerFid and signer to child components; exports DirectoryMemberViewerContext type.
New follow button component src/fidgets/token/Directory/components/DirectoryFollowButton.tsx	New component rendering follow/unfollow button with optimistic state updates; manages loading, error, and hover states; validates signer and FIDs before executing follow/unfollow actions; adapts button label based on following status.
List and card view components src/fidgets/token/Directory/components/DirectoryListView.tsx, src/fidgets/token/Directory/components/DirectoryCardView.tsx	Extends component prop signatures to accept viewerFid and signer; integrates DirectoryFollowButton into member entries; repositions token/follower details in list view alongside new button.
API endpoint src/pages/api/token/directory.ts	Extends DIRECTORY_QUERY_SCHEMA with optional viewerFid parameter; passes viewerFid to Neynar bulk user fetch calls; adds viewerContext extraction and propagation to member aggregates and final member list.

Sequence Diagram

sequenceDiagram
    participant User
    participant Directory as Directory Component
    participant FollowBtn as DirectoryFollowButton
    participant API as Farcaster/Neynar API
    participant Store as Global Store

    User->>Directory: Load directory with viewerFid
    Directory->>Directory: Hydrate viewerContext for members<br/>(batch request)
    Directory->>FollowBtn: Pass member, viewerFid, signer
    
    User->>FollowBtn: Click follow/unfollow button
    FollowBtn->>Store: Check account readiness
    
    alt Account ready & valid props
        FollowBtn->>FollowBtn: Optimistic state update
        FollowBtn->>API: Call followUser or unfollowUser
        
        alt API success
            API-->>FollowBtn: Success
            FollowBtn->>FollowBtn: Set idle state
        else API error
            API-->>FollowBtn: Error
            FollowBtn->>FollowBtn: Revert optimistic change<br/>Set error state
            FollowBtn->>FollowBtn: Return to idle after delay
        end
    else Missing validation
        FollowBtn->>FollowBtn: Persist error state
    end
    
    FollowBtn-->>User: Update button label & style

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• File diversity: Changes span 7 files across types, utils, components, and API endpoints, requiring context-switching between layers.
• Logic density: DirectoryFollowButton introduces state machine logic with optimistic updates, error handling, and async operations.
• Type extensions: Multiple layers of type propagation (DirectoryMemberViewerContext → DirectoryMemberData → component props) need verification for correctness.
• Areas requiring extra attention:
  • DirectoryFollowButton state machine and error recovery flow
  • viewerContext hydration batching logic and lastViewerContextFid tracking in Directory.tsx
  • API parameter propagation and extractViewerContext integration across multiple aggregation points in directory.ts
  • Prop threading consistency across DirectoryCardView, DirectoryListView, and DirectoryHeader

Possibly related PRs

• Update token directory API and tests #1558: Modifies token directory API and component types, adding viewerFid/viewerContext data shapes and related directory member typing.

Poem

🐰 A follower's dance through Farcaster trails,
Viewer contexts bloom where the directory sails,
With buttons to follow and follow once more,
The rabbit hops proudly through connection's front door! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add follow controls to directory fidget' clearly and concisely summarizes the main change: introducing follow/unfollow functionality to the directory component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/add-follow/following-button-to-cards

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

src/fidgets/token/Directory/types.ts (1)

16-18: Viewer context type wiring is consistent with usage

The DirectoryMemberViewerContext shape and the optional viewerContext field on DirectoryMemberData match how you consume it elsewhere (viewerContext?.following and explicit null when cleared). If you rely on the distinction between undefined and null (unknown vs “no relationship”), consider capturing that in a brief type-level comment, but the current design is sound.

Also applies to: 38-39

src/pages/api/token/directory.ts (1)

85-88: Consider de‑duplicating extractViewerContext logic

DirectoryMemberViewerContext and extractViewerContext here closely mirror the versions in src/fidgets/token/Directory/utils/memberData.ts. Even though the Neynar user types differ between API and fidget layers, the viewer_context shape is effectively the same.

If layering allows it, consider centralizing this logic (e.g., a small shared helper in a common Farcaster/Neynar utils module) to avoid future drift if Neynar’s viewer_context contract changes.

Also applies to: 734-748

src/fidgets/token/Directory/components/DirectoryFollowButton.tsx (1)

1-12: Follow button logic is robust; consider surfacing error state

The button correctly:

• Hides itself for invalid memberFid/self‑profile.
• Opens the account modal if the Farcaster account isn’t ready.
• Guards against missing signer or invalid viewerFid.
• Performs an optimistic follow/unfollow toggle and reverts on failure.

Currently, the "error" status doesn’t change the UI (label and styling are the same as "idle"). If you want to signal failures, you could optionally tweak the label or style when status === "error", or else simplify by dropping the "error" state entirely.

Also applies to: 20-37, 38-41, 46-81, 83-105

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1d08bc9 and 3ab9220.

📒 Files selected for processing (8)

• src/fidgets/token/Directory/Directory.tsx (18 hunks)
• src/fidgets/token/Directory/components/DirectoryCardView.tsx (5 hunks)
• src/fidgets/token/Directory/components/DirectoryFollowButton.tsx (1 hunks)
• src/fidgets/token/Directory/components/DirectoryListView.tsx (5 hunks)
• src/fidgets/token/Directory/types.ts (2 hunks)
• src/fidgets/token/Directory/utils.ts (1 hunks)
• src/fidgets/token/Directory/utils/memberData.ts (6 hunks)
• src/pages/api/token/directory.ts (10 hunks)

🧰 Additional context used

🧬 Code graph analysis (6)

src/fidgets/token/Directory/components/DirectoryCardView.tsx (1)

src/fidgets/token/Directory/components/DirectoryFollowButton.tsx (2)

• DirectoryFollowButtonProps (7-12)
• DirectoryFollowButton (14-105)

src/pages/api/token/directory.ts (3)

src/fidgets/token/Directory/types.ts (1)

• DirectoryMemberViewerContext (16-18)

src/fidgets/token/Directory/utils/memberData.ts (2)

• extractViewerContext (25-40)
• NeynarUser (14-23)

src/common/data/api/token/types.ts (1)

• NeynarUser (53-57)

src/fidgets/token/Directory/components/DirectoryFollowButton.tsx (2)

src/fidgets/token/Directory/types.ts (1)

• DirectoryMemberData (20-39)

src/fidgets/farcaster/utils.ts (2)

• followUser (108-126)
• unfollowUser (128-146)

src/fidgets/token/Directory/components/DirectoryListView.tsx (1)

src/fidgets/token/Directory/components/DirectoryFollowButton.tsx (2)

• DirectoryFollowButtonProps (7-12)
• DirectoryFollowButton (14-105)

src/fidgets/token/Directory/Directory.tsx (4)

src/fidgets/farcaster/index.tsx (1)

• useFarcasterSigner (59-105)

src/fidgets/token/Directory/types.ts (3)

• DirectoryFidgetData (41-47)
• DirectoryMemberData (20-39)
• DirectoryMemberViewerContext (16-18)

src/fidgets/token/Directory/utils/csv.ts (1)

• chunkArray (85-89)

src/fidgets/token/Directory/utils/memberData.ts (2)

• getNestedUser (46-53)
• extractViewerContext (25-40)

src/fidgets/token/Directory/utils/memberData.ts (2)

src/common/data/api/token/types.ts (1)

• NeynarUser (53-57)

src/fidgets/token/Directory/types.ts (1)

• DirectoryMemberViewerContext (16-18)

🔇 Additional comments (6)

src/fidgets/token/Directory/utils.ts (1)

152-160: Re‑export of extractViewerContext looks correct

The new re‑export aligns this module with utils/memberData.ts and keeps viewer context extraction centralized and reusable. No changes needed.

src/fidgets/token/Directory/components/DirectoryCardView.tsx (1)

8-13: Card view follow button integration is coherent

New props (viewerFid, signer) and the DirectoryFollowButton overlay are wired correctly and respect the existing card link behavior (via stopPropagation in the button and the pointer-events container). This looks good.

Also applies to: 25-28, 30-40, 70-71, 154-161

src/pages/api/token/directory.ts (1)

21-30: API viewer context support is correctly threaded

The API now:

• Accepts an optional, validated viewerFid in DIRECTORY_QUERY_SCHEMA.
• Passes it through to Neynar bulk calls.
• Extracts viewerContext per profile and attaches it to both per‑fid aggregates and per‑address members.

The guards around viewerFid and the aggregation logic look consistent with the front‑end expectations (viewerContext?.following), and they shouldn’t affect behavior when viewerFid is omitted.

Also applies to: 85-88, 89-108, 773-787, 815-833, 873-874, 997-1043, 1048-1081

src/fidgets/token/Directory/components/DirectoryListView.tsx (1)

8-13: List view follow controls and layout update look solid

The additional props (viewerFid, signer) and the new right‑side layout (follow button plus the metrics column) are wired correctly, preserve previous conditional rendering for balances/followers/last activity, and delegate follow logic cleanly to DirectoryFollowButton.

Also applies to: 25-28, 30-38, 123-144

src/fidgets/token/Directory/utils/memberData.ts (1)

6-9: Viewer context mapping for Neynar users and CSV defaults is consistent

Extending NeynarUser with viewer_context, adding extractViewerContext, wiring it into mapNeynarUserToMember, and initializing CSV members with viewerContext: null gives a clean, predictable contract for downstream components (DirectoryFollowButton and hydration logic). This matches the API behavior and looks correct.

Also applies to: 14-23, 25-40, 58-81, 87-113, 114-136, 138-158

src/fidgets/token/Directory/Directory.tsx (1)

29-39: Viewer context lifecycle and wiring are well designed

This module now cleanly owns the viewer‑specific concerns:

• Obtains viewerFid/signer via useFarcasterSigner.
• Clears all member viewerContext when there is no valid viewer.
• Lazily hydrates viewerContext for only the members that need it, with chunking and abort handling.
• Uses lastViewerContextFid and stripViewerContext to ensure persisted DirectoryFidgetData remains viewer‑agnostic while still triggering refreshes when the viewer changes.
• Plumbs viewerFid through all relevant fetch paths and into the list/card views, matching the new API contracts.

The flow looks coherent and avoids obvious stale‑state pitfalls.

Also applies to: 45-59, 77-79, 163-173, 208-235, 270-379, 381-441, 443-473, 475-518, 520-588, 645-649, 677-680, 701-705, 840-847, 898-915, 1056-1065, 1067-1077