Thread
Thread-based Social Feed
Overview
A Twitter-like or Reddit-like post & reply system created by combining components from src/components/thread
and src/state/thread
.
Key Features
📱 Content Types
Users can post various content:
- Text posts
- Images and media
- Interactive polls
- Trade information
- NFT listings (including Collection Floor listings)
- Retweet/Quote Retweet support
🧩 Component Structure
Built from modular components:
Thread.tsx
- Container for multiple posts (root-level)ThreadItem.tsx
- Renders a single post with optional repliesThreadComposer.tsx
- For composing new posts or repliesThreadEditModal.tsx
- In-line editing of text-only post sections- Post sub-components:
PostHeader
PostBody
PostFooter
PostCTA
- Retweet sub-components:
RetweetModal.tsx
(modal to quote-retweet or retweet a post)RetweetPreview.tsx
(inline preview of a retweeted post)
🔄 State Management
Utilizes Redux for state handling:
- Async thunks for data fetching
- Post creation and reply creation
- Retweet flow (server or local fallback)
- Edit and delete operations
- Reaction additions and local fallback
🎨 Customization
- Theme customization via
thread.theme.ts
- Styling utilities in
thread.styles.ts
- Type definitions in
thread.types.ts
- Optional callbacks for advanced usage:
onPressPost
onPressUser
ctaButtons
onRefresh
- and more…
🆕 Highlights / New Additions
- Disable Replies:
disableReplies
prop forThread
orThreadItem
to hide nested replies. - onPressUser: callback when a user’s avatar or name is tapped.
- NFT Collection Listing: Post can represent an entire collection floor buy.
- TradeModal
disableTabs
option: lock users into a single tab (e.g. “Swap & Share”). - ThreadEditModal: A straightforward modal that lets owners edit text sections of their post.