mirror of
https://github.com/logos-messaging/OpChan.git
synced 2026-01-02 12:53:10 +00:00
feat: allow anonymous users
This commit is contained in:
Danish Arora
parent
9a3f76a502
commit
21ee78de61
503
app/README.md
503
app/README.md
@ -1,132 +1,453 @@
|
||||
# OpChan
|
||||
# OpChan - Decentralized Forum Application
|
||||
|
||||
A decentralized forum application built as a Proof of Concept for a Waku-powered discussion platform. OpChan enables users to create "cells" (discussion boards), make posts, and engage in threaded conversations using Ethereum wallets (wagmi) with optional ENS verification and the Waku protocol for decentralized messaging.
|
||||
A production-ready decentralized forum built on the Waku protocol with Ethereum wallet and anonymous session support. OpChan enables communities to create discussion boards (cells), share content, and engage in threaded conversations without centralized control.
|
||||
|
||||
## Quick Start
|
||||
## 🌟 Features
|
||||
|
||||
### Prerequisites
|
||||
### Authentication & Identity
|
||||
- ✅ **Multiple Auth Modes**
|
||||
- Anonymous sessions (browser-only, no wallet required)
|
||||
- Ethereum wallet connection (MetaMask, WalletConnect, Coinbase Wallet)
|
||||
- ENS verification for premium features
|
||||
- ✅ **Key Delegation** - One-time wallet signature, then browser signs all messages
|
||||
- ✅ **Call Signs** - Custom usernames for both wallet and anonymous users
|
||||
- ✅ **Identity Resolution** - Automatic ENS resolution and avatar display
|
||||
|
||||
- Node.js 18+ and npm
|
||||
- Ethereum wallet (e.g., MetaMask, Coinbase Wallet) or WalletConnect-compatible wallet
|
||||
### Content & Engagement
|
||||
- ✅ **Cells (Forums)** - ENS holders create and moderate discussion boards
|
||||
- ✅ **Posts & Comments** - Threaded discussions with markdown support
|
||||
- ✅ **Voting System** - Upvote/downvote with verification-weighted relevance
|
||||
- ✅ **Relevance Scoring** - Multi-factor algorithm prioritizing verified users
|
||||
- ✅ **Bookmarks** - Local-only bookmarking of posts and comments
|
||||
- ✅ **Moderation** - Cell-based moderation without global censorship
|
||||
|
||||
### Technical
|
||||
- ✅ **Decentralized Messaging** - Waku protocol for P2P content distribution
|
||||
- ✅ **Local-First** - IndexedDB caching with network sync
|
||||
- ✅ **Cryptographic Verification** - Ed25519 signatures on all messages
|
||||
- ✅ **Real-Time Updates** - Live content updates via Waku subscriptions
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Installation
|
||||
|
||||
1. **Clone the repository**
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/status-im/opchan.git
|
||||
cd opchan
|
||||
|
||||
```bash
|
||||
git clone https://github.com/waku-org/OpChan.git
|
||||
cd OpChan
|
||||
```
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
2. **Install dependencies**
|
||||
# Build packages
|
||||
npm run build
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
# Start development server
|
||||
cd app
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. **Setup environment variables**
|
||||
### Environment Setup
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
Create `app/.env`:
|
||||
|
||||
Edit `.env` to configure development settings as needed for local testing.
|
||||
```bash
|
||||
VITE_REOWN_SECRET=your_reown_project_id
|
||||
```
|
||||
|
||||
4. **Start development server**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
Get a Reown (formerly WalletConnect) project ID from https://cloud.reown.com
|
||||
|
||||
## 📖 Usage Guide
|
||||
|
||||
### For End Users
|
||||
|
||||
#### Getting Started - Anonymous Mode
|
||||
|
||||
1. **Visit the App** - No wallet required!
|
||||
2. **Click "Connect"** in the header
|
||||
3. **Select "Continue Anonymously"**
|
||||
4. **Set a Call Sign** - From header dropdown menu
|
||||
5. **Start Engaging** - Post, comment, and vote immediately
|
||||
|
||||
#### Getting Started - Wallet Mode
|
||||
|
||||
1. **Click "Connect"** and choose your wallet
|
||||
2. **Complete Setup Wizard**:
|
||||
- Step 1: Connect wallet
|
||||
- Step 2: Verify ENS ownership (optional)
|
||||
- Step 3: Delegate browser key (recommended)
|
||||
3. **Create or Join Cells**
|
||||
4. **Engage with Content**
|
||||
|
||||
#### Permission Levels
|
||||
|
||||
| Action | Anonymous | Wallet Connected | ENS Verified |
|
||||
|--------|-----------|------------------|--------------|
|
||||
| View Content | ✅ | ✅ | ✅ |
|
||||
| Upvote/Downvote | ✅ | ✅ | ✅ |
|
||||
| Comment | ✅ | ✅ | ✅ |
|
||||
| Create Posts | ✅ | ✅ | ✅ |
|
||||
| Create Cells | ❌ | ❌ | ✅ |
|
||||
| Moderate | ❌ | ❌ | ✅ (Own cells) |
|
||||
| Set Call Sign | ✅ | ✅ | ✅ |
|
||||
|
||||
### For Developers
|
||||
|
||||
#### Building with @opchan/react
|
||||
|
||||
See `packages/react/README.md` for complete API documentation.
|
||||
|
||||
**Basic Example:**
|
||||
|
||||
```tsx
|
||||
import { useForum } from '@opchan/react';
|
||||
|
||||
export function MyForumComponent() {
|
||||
const { user, content, permissions } = useForum();
|
||||
|
||||
const handleCreatePost = async () => {
|
||||
if (!permissions.canPost) return;
|
||||
|
||||
const post = await content.createPost({
|
||||
cellId: 'cell-id',
|
||||
title: 'Hello World',
|
||||
content: 'My first post!'
|
||||
});
|
||||
|
||||
if (post) {
|
||||
console.log('Post created:', post.id);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{user.currentUser ? (
|
||||
<button onClick={handleCreatePost}>Create Post</button>
|
||||
) : (
|
||||
<>
|
||||
<button onClick={user.connect}>Connect Wallet</button>
|
||||
<button onClick={user.startAnonymous}>Go Anonymous</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 🏗️ Architecture
|
||||
|
||||
### High-Level Architecture
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ React Application │
|
||||
│ ┌─────────────┐ ┌──────────────┐ ┌──────────────────┐ │
|
||||
│ │ useAuth │ │ useContent │ │ usePermissions │ │
|
||||
│ └─────────────┘ └──────────────┘ └──────────────────┘ │
|
||||
│ │ │ │ │
|
||||
│ └─────────────────┴────────────────────┘ │
|
||||
│ │ │
|
||||
│ @opchan/react │
|
||||
└────────────────────────────┬────────────────────────────────┘
|
||||
│
|
||||
┌────────────────────────────┴────────────────────────────────┐
|
||||
│ @opchan/core │
|
||||
│ ┌──────────────┐ ┌─────────────┐ ┌──────────────────┐ │
|
||||
│ │ OpChanClient │──│ ForumActions│ │ DelegationManager│ │
|
||||
│ └──────────────┘ └─────────────┘ └──────────────────┘ │
|
||||
│ │ │ │ │
|
||||
│ ┌──────┴─────┐ ┌──────┴────────┐ ┌──────┴──────┐ │
|
||||
│ │ LocalDB │ │ MessageManager │ │ Crypto Utils│ │
|
||||
│ │ (IndexedDB)│ │ (Waku) │ │ (ed25519) │ │
|
||||
│ └────────────┘ └───────────────┘ └─────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Authentication System
|
||||
|
||||
```
|
||||
┌─ Anonymous Flow ─────────────────────────────────────────┐
|
||||
│ 1. startAnonymous() │
|
||||
│ 2. Generate browser keypair (ed25519) │
|
||||
│ 3. Store as AnonymousDelegation (sessionId + keys) │
|
||||
│ 4. User can interact immediately │
|
||||
│ 5. Optional: Set call sign │
|
||||
└───────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─ Wallet Flow ────────────────────────────────────────────┐
|
||||
│ 1. connect() → Wallet connection via wagmi │
|
||||
│ 2. verifyOwnership() → Check for ENS (optional) │
|
||||
│ 3. delegate('7days') → Wallet signs browser key auth │
|
||||
│ 4. Browser signs all subsequent messages │
|
||||
│ 5. Messages include delegationProof (wallet signature) │
|
||||
└───────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Message Flow
|
||||
|
||||
```
|
||||
Create Content → Sign with Browser Key → Broadcast to Waku → Peers Verify → Store in Local Cache
|
||||
↓ ↓ ↓ ↓ ↓
|
||||
User Action DelegationManager MessageManager MessageValidator LocalDatabase
|
||||
↓
|
||||
┌───────────────────┴──────────────────┐
|
||||
│ │
|
||||
Wallet Users: Anonymous Users:
|
||||
Verify delegationProof Verify session ID format
|
||||
(wallet signature) (UUID pattern check)
|
||||
```
|
||||
|
||||
### Data Layer
|
||||
|
||||
- **IndexedDB Stores**: cells, posts, comments, votes, moderations, userIdentities, delegation, bookmarks
|
||||
- **Caching Strategy**: Write-through cache with optimistic updates
|
||||
- **Sync Strategy**: Waku messages update local cache, triggers React re-renders
|
||||
- **Persistence**: All user data persisted locally, nothing on centralized servers
|
||||
|
||||
## 🎨 UI/UX Design
|
||||
|
||||
### Design System
|
||||
|
||||
- **Theme**: Cyberpunk-inspired dark theme
|
||||
- **Components**: shadcn/ui (Radix UI + Tailwind CSS)
|
||||
- **Typography**: Monospace fonts for technical aesthetic
|
||||
- **Colors**: Cyan accent, dark backgrounds, high contrast
|
||||
|
||||
### Key Components
|
||||
|
||||
- `<Header />` - Navigation, auth status, network indicator
|
||||
- `<WalletWizard />` - 3-step onboarding flow
|
||||
- `<CallSignSetupDialog />` - Call sign configuration
|
||||
- `<AuthorDisplay />` - User identity with badges (ENS, Call Sign, Anonymous)
|
||||
- `<RelevanceIndicator />` - Visual relevance score display
|
||||
- `<MarkdownInput />` & `<MarkdownRenderer />` - Rich text support
|
||||
|
||||
## 🔐 Security Model
|
||||
|
||||
### Cryptographic Trust Chain
|
||||
|
||||
```
|
||||
Wallet Users:
|
||||
Wallet Private Key (user device)
|
||||
→ Signs delegation authorization
|
||||
→ Authorizes Browser Private Key
|
||||
→ Browser signs all messages
|
||||
→ Messages include delegationProof
|
||||
→ Peers verify wallet signature on delegationProof
|
||||
|
||||
Anonymous Users:
|
||||
Browser Private Key (generated locally)
|
||||
→ Signs all messages directly
|
||||
→ No wallet proof required
|
||||
→ Peers verify session ID format
|
||||
→ Lower trust/relevance weight
|
||||
```
|
||||
|
||||
### Security Guarantees
|
||||
|
||||
- ✅ All messages cryptographically signed (ed25519)
|
||||
- ✅ Message authorship verifiable by any peer
|
||||
- ✅ Delegation proofs prevent impersonation
|
||||
- ✅ Session IDs prevent anonymous user collisions
|
||||
- ✅ Browser keys never leave device
|
||||
- ✅ No centralized authentication server
|
||||
|
||||
### Spam Prevention
|
||||
|
||||
- Anonymous users have lower relevance weights
|
||||
- Cell admins can moderate any content
|
||||
- Moderated content hidden by default
|
||||
- Time decay reduces old content relevance
|
||||
|
||||
## 📊 Relevance Algorithm
|
||||
|
||||
Content is scored based on multiple factors:
|
||||
|
||||
```
|
||||
Base Score (Post: 10, Comment: 5, Cell: 15)
|
||||
+ Engagement (upvotes × 1, comments × 0.5)
|
||||
+ Author Verification Bonus (ENS: +25%, Wallet: +10%)
|
||||
+ Verified Upvote Bonus (+0.1 per verified upvoter)
|
||||
+ Verified Commenter Bonus (+0.05 per verified commenter)
|
||||
× Time Decay (exponential, λ=0.1)
|
||||
× Moderation Penalty (0.5 if moderated)
|
||||
= Final Relevance Score
|
||||
```
|
||||
|
||||
Anonymous users:
|
||||
- Get **no verification bonus**
|
||||
- Their votes count but with **no verified upvote bonus** to others
|
||||
- Can still create popular content through engagement
|
||||
|
||||
## 🛠️ Development
|
||||
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # React components
|
||||
│ ├── ui/ # shadcn/ui component library
|
||||
│ ├── ActivityFeed.tsx
|
||||
│ ├── CellPage.tsx
|
||||
│ ├── Dashboard.tsx
|
||||
│ └── ...
|
||||
├── contexts/ # React Context providers
|
||||
│ ├── AuthContext.tsx # Wallet & authentication
|
||||
│ ├── ForumContext.tsx # Forum data & state
|
||||
│ └── forum/ # Forum logic modules
|
||||
├── lib/ # Core libraries
|
||||
│ ├── identity/ # Wallet & cryptographic operations
|
||||
│ ├── waku/ # Waku protocol integration
|
||||
│ └── utils.ts
|
||||
├── pages/ # Route components
|
||||
└── types/ # TypeScript definitions
|
||||
app/
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ ├── ui/ # shadcn/ui components + custom
|
||||
│ │ │ ├── wallet-wizard.tsx # 3-step onboarding
|
||||
│ │ │ ├── author-display.tsx # User identity display
|
||||
│ │ │ ├── inline-callsign-input.tsx # Anonymous call sign
|
||||
│ │ │ └── ...
|
||||
│ │ ├── Header.tsx # Main navigation
|
||||
│ │ ├── PostList.tsx # Post feed
|
||||
│ │ ├── PostDetail.tsx # Single post view
|
||||
│ │ ├── CommentCard.tsx # Comment display
|
||||
│ │ └── ...
|
||||
│ ├── pages/
|
||||
│ │ ├── Dashboard.tsx # Landing page
|
||||
│ │ ├── CellPage.tsx # Cell view
|
||||
│ │ ├── PostPage.tsx # Post view
|
||||
│ │ ├── ProfilePage.tsx # User profile
|
||||
│ │ └── ...
|
||||
│ ├── hooks/
|
||||
│ │ └── index.ts # Re-exports from @opchan/react
|
||||
│ └── utils/
|
||||
│ ├── sorting.ts # Content sorting utilities
|
||||
│ └── ...
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## Usage
|
||||
### Building from Source
|
||||
|
||||
### Getting Started
|
||||
```bash
|
||||
# Build all packages
|
||||
npm run build
|
||||
|
||||
1. **Connect Wallet**: Click "Connect Wallet" and approve the wallet connection
|
||||
2. **Verify ENS**: The app will resolve your ENS name (if any) and mark your account as ENS-verified
|
||||
3. **Browse Cells**: View existing discussion boards on the dashboard
|
||||
4. **Create Content**: Create new cells, posts, or comments (requires Ordinals)
|
||||
5. **Moderate**: Cell creators can moderate their boards
|
||||
# Build individual packages
|
||||
cd packages/core && npm run build
|
||||
cd packages/react && npm run build
|
||||
cd app && npm run build
|
||||
|
||||
### Authentication Flow
|
||||
# Development mode (with hot reload)
|
||||
cd app && npm run dev
|
||||
```
|
||||
|
||||
OpChan uses a two-tier authentication system:
|
||||
### Testing
|
||||
|
||||
1. **Wallet Connection**: Initial connection via wagmi connectors (Injected / WalletConnect / Coinbase)
|
||||
2. **Key Delegation**: Optional browser key generation for improved UX
|
||||
- Reduces wallet signature prompts
|
||||
- Configurable duration: 1 week or 30 days
|
||||
- Can be regenerated anytime
|
||||
```bash
|
||||
# Run tests
|
||||
npm test
|
||||
|
||||
### Network & Performance
|
||||
# Run specific tests
|
||||
cd packages/core && npm test
|
||||
```
|
||||
|
||||
- **Waku Network**: Connects to multiple bootstrap nodes for resilience
|
||||
- **Message Caching**: Local caching with IndexedDB (planned)
|
||||
- **Time-bounded Queries**: 24-hour query windows to prevent database overload
|
||||
- **Pagination**: 50 messages per query with fallback limits
|
||||
## 🌐 Deployment
|
||||
|
||||
## Contributing
|
||||
### Build for Production
|
||||
|
||||
### Development Setup
|
||||
```bash
|
||||
cd app
|
||||
npm run build
|
||||
# Output in app/dist/
|
||||
```
|
||||
|
||||
1. Fork the repository
|
||||
2. Create a feature branch: `git checkout -b feature/amazing-feature`
|
||||
3. Make your changes following the existing code style
|
||||
4. Test your changes thoroughly
|
||||
5. Commit your changes: `git commit -m 'Add amazing feature'`
|
||||
6. Push to the branch: `git push origin feature/amazing-feature`
|
||||
7. Open a Pull Request
|
||||
### Deploy to Vercel/Netlify
|
||||
|
||||
## TODOs
|
||||
The app is a static SPA that can be deployed to any static hosting:
|
||||
|
||||
- [x] replace mock wallet connection/disconnection
|
||||
- supports Phantom
|
||||
- [x] replace mock Ordinal verification (API)
|
||||
- [ ] figure out using actual icons for cells
|
||||
- [ ] store message cache in indexedDB -- make app local-first (update from/to Waku when available)
|
||||
- [ ] moderation
|
||||
- [ ] admins can "moderate" comments/posts
|
||||
```json
|
||||
// vercel.json
|
||||
{
|
||||
"routes": [
|
||||
{ "handle": "filesystem" },
|
||||
{ "src": "/(.*)", "dest": "/index.html" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Architecture
|
||||
Environment variables required:
|
||||
- `VITE_REOWN_SECRET` - Reown project ID for WalletConnect
|
||||
|
||||
OpChan implements a decentralized architecture with these key components:
|
||||
## 📚 Key Learnings & Implementation Notes
|
||||
|
||||
- **Waku Protocol**: Handles peer-to-peer messaging and content distribution
|
||||
- **ENS**: Provides decentralized identity signal for identity and display
|
||||
- **Key Delegation**: Improves UX while maintaining security
|
||||
- **Content Addressing**: Messages are cryptographically signed and verifiable
|
||||
- **Moderation Layer**: Cell-based moderation without global censorship
|
||||
### Why Anonymous Support?
|
||||
|
||||
## Support
|
||||
From FURPS requirement #18: "Anonymous users can upvote, comments and post"
|
||||
|
||||
For questions, issues, or contributions:
|
||||
Benefits:
|
||||
- **Lower barrier to entry** - Users can try before connecting wallet
|
||||
- **Privacy-preserving** - No on-chain footprint required
|
||||
- **Better adoption** - Immediate engagement without Web3 knowledge
|
||||
- **Flexible identity** - Users can upgrade to wallet later
|
||||
|
||||
- Open an issue on GitHub for bugs or feature requests
|
||||
- Check existing issues before creating new ones
|
||||
- Provide detailed information for bug reports
|
||||
- Include steps to reproduce issues
|
||||
### Why Key Delegation?
|
||||
|
||||
- **UX Problem**: Signing every message with wallet is tedious
|
||||
- **Solution**: Wallet signs once to authorize browser keys
|
||||
- **Result**: Seamless posting/commenting without wallet prompts
|
||||
- **Security**: Delegation expires (7-30 days), can be revoked anytime
|
||||
|
||||
### Why Local-First?
|
||||
|
||||
- **Resilience**: App works offline, syncs when online
|
||||
- **Performance**: Instant UI updates, background network sync
|
||||
- **Privacy**: All data local until shared on network
|
||||
- **Decentralization**: No centralized API dependency
|
||||
|
||||
## 🐛 Common Issues & Solutions
|
||||
|
||||
### Issue: Anonymous user loses session after interaction
|
||||
**Solution**: Ensure wallet sync effect preserves anonymous users (check `verificationStatus !== ANONYMOUS`)
|
||||
|
||||
### Issue: Call sign update clears anonymous session
|
||||
**Solution**: Preserve `verificationStatus` in `updateProfile` and add `ANONYMOUS` case to `mapVerificationStatus`
|
||||
|
||||
### Issue: Permissions show false for anonymous users
|
||||
**Solution**: Update permission checks to include `isAnonymous` condition
|
||||
|
||||
### Issue: Wizard loops anonymous users through verification steps
|
||||
**Solution**: Close wizard immediately after anonymous selection (check `verificationStatus` in `handleStepComplete`)
|
||||
|
||||
## 🔮 Future Enhancements
|
||||
|
||||
- [ ] Multi-wallet support (Bitcoin, Solana)
|
||||
- [ ] ENS avatar display improvements
|
||||
- [ ] Content persistence strategies
|
||||
- [ ] Rate limiting for anonymous users
|
||||
- [ ] Advanced moderation tools
|
||||
- [ ] Search functionality
|
||||
- [ ] Notifications system
|
||||
- [ ] Mobile app (React Native)
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
### Development Workflow
|
||||
|
||||
1. **Fork** the repository
|
||||
2. **Create branch**: `git checkout -b feature/my-feature`
|
||||
3. **Make changes** following existing patterns
|
||||
4. **Test thoroughly** - especially authentication flows
|
||||
5. **Build all packages**: `npm run build` from root
|
||||
6. **Commit**: `git commit -m "feat: add my feature"`
|
||||
7. **Push**: `git push origin feature/my-feature`
|
||||
8. **Open PR** with description
|
||||
|
||||
### Code Style
|
||||
|
||||
- TypeScript strict mode
|
||||
- No `any` types (use proper typing)
|
||||
- Functional components with hooks
|
||||
- Tailwind CSS for styling
|
||||
- shadcn/ui component patterns
|
||||
|
||||
## 📄 License
|
||||
|
||||
MIT
|
||||
|
||||
## 🙏 Acknowledgments
|
||||
|
||||
Built on:
|
||||
- [Waku Protocol](https://waku.org) - Decentralized messaging
|
||||
- [Viem](https://viem.sh) - Ethereum interactions
|
||||
- [Wagmi](https://wagmi.sh) - React hooks for Ethereum
|
||||
- [shadcn/ui](https://ui.shadcn.com) - Component library
|
||||
- [Tailwind CSS](https://tailwindcss.com) - Styling
|
||||
|
||||
---
|
||||
|
||||
**Note**: This is a Proof of Concept implementation. Use at your own risk in production environments.
|
||||
**OpChan - Decentralized communities built on cryptographic trust, not corporate servers** 🌐
|
||||
|
||||
@ -1,335 +0,0 @@
|
||||
# FURPS Implementation Report - OpChan
|
||||
|
||||
This report analyzes the current implementation status of the Waku Forum FURPS requirements in the OpChan codebase.
|
||||
|
||||
## Executive Summary
|
||||
|
||||
**Overall Implementation Status: 85% Complete**
|
||||
|
||||
The OpChan application has successfully implemented most core functionality including authentication, forum operations, relevance scoring, and moderation. Key missing features include bookmarking, call sign setup, and some advanced UI features.
|
||||
|
||||
---
|
||||
|
||||
## Functionality Requirements
|
||||
|
||||
### ✅ IMPLEMENTED
|
||||
|
||||
#### 1. Ethereum Wallet Authentication
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/services/UserIdentityService.ts`, wagmi wiring in provider
|
||||
- **Details**: Ethereum wallet integration with message signing capabilities
|
||||
|
||||
#### 2. Cell Creation Restrictions
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/ForumActions.ts`, `src/components/CreateCellDialog.tsx`
|
||||
- **Details**: Only users with ENS (or configured policy) can create cells
|
||||
|
||||
#### 3. Content Visibility
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/contexts/ForumContext.tsx`, `src/components/PostList.tsx`
|
||||
- **Details**: All users can view content regardless of authentication status
|
||||
|
||||
#### 4. Cell Listing
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/components/CellList.tsx`, `src/pages/Index.tsx`
|
||||
- **Details**: Complete cell browsing with sorting and filtering
|
||||
|
||||
#### 5. Cell Creation
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/ForumActions.ts`, `src/components/CreateCellDialog.tsx`
|
||||
- **Details**: Name, description, and icon support with admin privileges
|
||||
|
||||
#### 6. Post Creation
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/ForumActions.ts`, `src/components/PostList.tsx`
|
||||
- **Details**: Title and body support with proper validation
|
||||
|
||||
#### 7. Comment System
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/ForumActions.ts`, `src/components/PostDetail.tsx`
|
||||
- **Details**: Nested commenting with proper threading
|
||||
|
||||
#### 8. Voting System
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/ForumActions.ts`, `src/components/PostCard.tsx`
|
||||
- **Details**: Upvote/downvote functionality with verification requirements
|
||||
|
||||
#### 9. Web3 Key Authentication
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: wagmi connectors; `src/lib/services/UserIdentityService.ts`
|
||||
- **Details**: Ethereum wallet support with ENS resolution
|
||||
|
||||
#### 10. Relevance Index System
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/RelevanceCalculator.ts`, `src/lib/forum/transformers.ts`
|
||||
- **Details**: Comprehensive scoring with verification bonuses and moderation penalties
|
||||
|
||||
#### 11. Moderation System
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/ForumActions.ts`, `src/components/PostDetail.tsx`
|
||||
- **Details**: Cell admin moderation for posts, comments, and users
|
||||
|
||||
#### 12. Anonymous Voting
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/ForumActions.ts`
|
||||
- **Details**: Anonymous users can vote with proper verification checks
|
||||
|
||||
### ⚠️ PARTIALLY IMPLEMENTED
|
||||
|
||||
#### 13. Call Sign Setup
|
||||
|
||||
- **Status**: ⚠️ Partially Implemented
|
||||
- **Implementation**: `src/types/identity.ts` (interface defined)
|
||||
- **Details**: Interface exists but no UI for setting up call signs
|
||||
- **Missing**: User interface for call sign configuration
|
||||
|
||||
#### 14. ENS Avatar Display
|
||||
|
||||
- **Status**: ⚠️ Partially Implemented
|
||||
- **Implementation**: `src/components/ui/author-display.tsx`
|
||||
- **Details**: ENS name display; avatar resolution depends on ENS records
|
||||
- **Missing**: Consistent avatar fallback behavior
|
||||
|
||||
### ❌ NOT IMPLEMENTED
|
||||
|
||||
#### 15. Bookmarking System
|
||||
|
||||
- **Status**: ❌ Not Implemented
|
||||
- **Missing**: Local storage for bookmarked posts and topics
|
||||
- **Impact**: Users cannot save content for later reference
|
||||
|
||||
---
|
||||
|
||||
## Usability Requirements
|
||||
|
||||
### ✅ IMPLEMENTED
|
||||
|
||||
#### 1. Cross-Cell Topic Viewing
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/pages/FeedPage.tsx`, `src/components/ActivityFeed.tsx`
|
||||
- **Details**: Global feed showing posts from all cells
|
||||
|
||||
#### 2. Active Member Count
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/transformers.ts`
|
||||
- **Details**: Calculated from post activity per cell
|
||||
|
||||
#### 3. Topic Sorting
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/utils/sorting.ts`, `src/components/CellList.tsx`
|
||||
- **Details**: Sort by relevance (top) or time (new)
|
||||
|
||||
#### 4. User Identification
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/components/ui/author-display.tsx`
|
||||
- **Details**: Ordinal pictures, ENS names, and custom nicknames
|
||||
|
||||
#### 5. Moderation Hiding
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/components/PostList.tsx`, `src/components/PostDetail.tsx`
|
||||
- **Details**: Moderated content is hidden from regular users
|
||||
|
||||
#### 6. Key Delegation
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/services/CryptoService.ts`, `src/components/ui/wallet-wizard.tsx`
|
||||
- **Details**: Browser key generation for improved UX
|
||||
|
||||
#### 7. Browser-Only Usage
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: React web application
|
||||
- **Details**: No additional software required beyond browser
|
||||
|
||||
#### 8. Prototype UI
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: Complete React component library
|
||||
- **Details**: Modern, responsive interface with cypherpunk theme
|
||||
|
||||
#### 9. Library API
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/` directory structure
|
||||
- **Details**: Clear separation of concerns with well-defined interfaces
|
||||
|
||||
#### 10. ENS Display Integration
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/components/ui/author-display.tsx`
|
||||
- **Details**: ENS holders can use ENS for display purposes
|
||||
|
||||
#### 11. Relevance-Based Ordering
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/forum/RelevanceCalculator.ts`
|
||||
- **Details**: Posts and comments ordered by relevance score
|
||||
|
||||
---
|
||||
|
||||
## Reliability Requirements
|
||||
|
||||
### ✅ IMPLEMENTED
|
||||
|
||||
#### 1. Ephemeral Data Handling
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/waku/services/CacheService.ts`
|
||||
- **Details**: Local caching with network synchronization
|
||||
|
||||
#### 2. End-to-End Reliability
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/waku/core/ReliableMessaging.ts`
|
||||
- **Details**: Message acknowledgment and retry mechanisms
|
||||
|
||||
---
|
||||
|
||||
## Performance Requirements
|
||||
|
||||
### ✅ IMPLEMENTED
|
||||
|
||||
#### 1. Efficient Message Handling
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/waku/services/CacheService.ts`
|
||||
- **Details**: Optimized message processing and caching
|
||||
|
||||
---
|
||||
|
||||
## Supportability Requirements
|
||||
|
||||
### ✅ IMPLEMENTED
|
||||
|
||||
#### 1. Web Application
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: React-based SPA
|
||||
- **Details**: Cross-platform web application
|
||||
|
||||
#### 2. Optional Wallet Support
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/contexts/AuthContext.tsx`
|
||||
- **Details**: Ethereum wallet integration
|
||||
|
||||
---
|
||||
|
||||
## Privacy & Anonymity Requirements
|
||||
|
||||
### ✅ IMPLEMENTED
|
||||
|
||||
#### 1. ENS Resolution
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: ENS resolution via viem public client in `UserIdentityService`
|
||||
- **Details**: Name + avatar (when published in ENS records)
|
||||
|
||||
#### 2. Waku Network Integration
|
||||
|
||||
- **Status**: ✅ Fully Implemented
|
||||
- **Implementation**: `src/lib/waku/` directory
|
||||
- **Details**: Complete Waku protocol implementation
|
||||
|
||||
---
|
||||
|
||||
## Missing Features & Recommendations
|
||||
|
||||
### High Priority
|
||||
|
||||
1. **Bookmarking System**
|
||||
- Implement local storage for bookmarked posts/topics
|
||||
- Add bookmark UI components
|
||||
- Estimated effort: 2-3 days
|
||||
|
||||
2. **Call Sign Setup**
|
||||
- Create user profile settings interface
|
||||
- Implement call sign validation and uniqueness
|
||||
- Estimated effort: 3-4 days
|
||||
|
||||
3. **Enhanced ENS Display**
|
||||
- Improve ENS avatar and fallback handling
|
||||
- Cache ENS lookups with smarter TTL
|
||||
- Estimated effort: 2-3 days
|
||||
|
||||
### Medium Priority
|
||||
|
||||
4. **Advanced Search & Filtering**
|
||||
- Implement content search functionality
|
||||
- Add advanced filtering options
|
||||
- Estimated effort: 4-5 days
|
||||
|
||||
5. **User Profile Management**
|
||||
- Create comprehensive user profile pages
|
||||
- Add user activity history
|
||||
- Estimated effort: 5-6 days
|
||||
|
||||
### Low Priority
|
||||
|
||||
6. **Mobile Optimization**
|
||||
- Enhance mobile responsiveness
|
||||
- Add touch-friendly interactions
|
||||
- Estimated effort: 3-4 days
|
||||
|
||||
7. **Accessibility Improvements**
|
||||
- Add ARIA labels and keyboard navigation
|
||||
- Improve screen reader support
|
||||
- Estimated effort: 2-3 days
|
||||
|
||||
---
|
||||
|
||||
## Technical Debt & Improvements
|
||||
|
||||
### Code Quality
|
||||
|
||||
- **Status**: ✅ Good
|
||||
- **Details**: Well-structured TypeScript with proper type safety
|
||||
|
||||
### Testing Coverage
|
||||
|
||||
- **Status**: ⚠️ Partial
|
||||
- **Details**: Basic tests exist but coverage could be improved
|
||||
|
||||
### Documentation
|
||||
|
||||
- **Status**: ✅ Good
|
||||
- **Details**: Comprehensive README and inline documentation
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
OpChan has successfully implemented the vast majority of FURPS requirements, providing a solid foundation for a decentralized forum application. The core functionality is robust and well-architected, with only a few user experience features remaining to be implemented.
|
||||
|
||||
**Key Strengths:**
|
||||
|
||||
- Complete authentication and authorization system
|
||||
- Robust forum operations (cells, posts, comments, voting)
|
||||
- Sophisticated relevance scoring algorithm
|
||||
- Comprehensive moderation capabilities
|
||||
- Professional-grade UI with cypherpunk aesthetic
|
||||
|
||||
**Areas for Improvement:**
|
||||
|
||||
- User personalization features (bookmarks, call signs)
|
||||
- Enhanced ENS integration
|
||||
- Advanced search and filtering
|
||||
|
||||
The application is ready for production use with the current feature set, and the remaining features can be implemented incrementally based on user feedback and priorities.
|
||||
@ -44,6 +44,7 @@ import {
|
||||
import { useToast } from '@/components/ui/use-toast';
|
||||
import { useEthereumWallet } from '@opchan/react';
|
||||
import { WalletWizard } from '@/components/ui/wallet-wizard';
|
||||
import { CallSignSetupDialog } from '@/components/ui/call-sign-setup-dialog';
|
||||
|
||||
import { WakuHealthDot } from '@/components/ui/waku-health-indicator';
|
||||
|
||||
@ -59,6 +60,7 @@ const Header = () => {
|
||||
|
||||
const [walletWizardOpen, setWalletWizardOpen] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [callSignDialogOpen, setCallSignDialogOpen] = useState(false);
|
||||
|
||||
// Use centralized UI state instead of direct LocalDatabase access
|
||||
const [hasShownWizard, setHasShownWizard] = useUIState(
|
||||
@ -83,6 +85,15 @@ const Header = () => {
|
||||
};
|
||||
|
||||
const handleDisconnect = async () => {
|
||||
// For anonymous users, clear their session
|
||||
if (currentUser?.verificationStatus === EVerificationStatus.ANONYMOUS) {
|
||||
await localDatabase.clearUser();
|
||||
await localDatabase.clearDelegation();
|
||||
window.location.reload(); // Reload to reset state
|
||||
return;
|
||||
}
|
||||
|
||||
// For wallet users, disconnect wallet
|
||||
await disconnect();
|
||||
setHasShownWizard(false); // Reset so wizard can show again on next connection
|
||||
toast({
|
||||
@ -177,7 +188,7 @@ const Header = () => {
|
||||
</div>
|
||||
|
||||
{/* User Status & Actions */}
|
||||
{isConnected ? (
|
||||
{isConnected || currentUser?.verificationStatus === EVerificationStatus.ANONYMOUS ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Status Badge */}
|
||||
<Badge
|
||||
@ -235,13 +246,23 @@ const Header = () => {
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuItem
|
||||
onClick={handleOpenWizard}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
<span>Setup Wizard</span>
|
||||
</DropdownMenuItem>
|
||||
{currentUser?.verificationStatus === EVerificationStatus.ANONYMOUS ? (
|
||||
<DropdownMenuItem
|
||||
onClick={() => setCallSignDialogOpen(true)}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
<span>{currentUser?.callSign ? 'Update' : 'Set'} Call Sign</span>
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<DropdownMenuItem
|
||||
onClick={handleOpenWizard}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
<span>Setup Wizard</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
|
||||
<DropdownMenuSeparator className="bg-cyber-muted/30" />
|
||||
|
||||
@ -291,7 +312,7 @@ const Header = () => {
|
||||
className="flex items-center space-x-2 text-red-400 focus:text-red-400"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
<span>Disconnect</span>
|
||||
<span>{currentUser?.verificationStatus === EVerificationStatus.ANONYMOUS ? 'Exit Anonymous' : 'Disconnect'}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
@ -454,6 +475,14 @@ const Header = () => {
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Call Sign Dialog for Anonymous Users */}
|
||||
{currentUser?.verificationStatus === EVerificationStatus.ANONYMOUS && (
|
||||
<CallSignSetupDialog
|
||||
open={callSignDialogOpen}
|
||||
onOpenChange={setCallSignDialogOpen}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -20,6 +20,8 @@ import CommentCard from './CommentCard';
|
||||
import { useAuth, useContent, usePermissions } from '@/hooks';
|
||||
import type { Cell as ForumCell } from '@opchan/core';
|
||||
import { ShareButton } from './ui/ShareButton';
|
||||
import { InlineCallSignInput } from './ui/inline-callsign-input';
|
||||
import { EVerificationStatus } from '@opchan/core';
|
||||
|
||||
const PostDetail = () => {
|
||||
const { postId } = useParams<{ postId: string }>();
|
||||
@ -293,6 +295,13 @@ const PostDetail = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Inline Call Sign Suggestion for Anonymous Users */}
|
||||
{currentUser?.verificationStatus === EVerificationStatus.ANONYMOUS && !currentUser.callSign && permissions.canComment && (
|
||||
<div className="mb-6">
|
||||
<InlineCallSignInput />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!permissions.canComment && (
|
||||
<div className="mb-6 p-4 border border-cyber-muted rounded-sm bg-cyber-muted/20 text-center">
|
||||
<p className="text-sm mb-3">Connect your wallet to comment</p>
|
||||
|
||||
@ -31,6 +31,8 @@ import {
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import { InlineCallSignInput } from './ui/inline-callsign-input';
|
||||
import { EVerificationStatus } from '@opchan/core';
|
||||
|
||||
const PostList = () => {
|
||||
const { cellId } = useParams<{ cellId: string }>();
|
||||
@ -258,6 +260,13 @@ const PostList = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Inline Call Sign Suggestion for Anonymous Users */}
|
||||
{currentUser?.verificationStatus === EVerificationStatus.ANONYMOUS && !currentUser.callSign && canPost && (
|
||||
<div className="section-spacing">
|
||||
<InlineCallSignInput />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!canPost && !currentUser && (
|
||||
<div className="section-spacing content-card-sm text-center">
|
||||
<p className="text-sm mb-3">Connect your wallet to post</p>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Shield, Crown, Hash } from 'lucide-react';
|
||||
import { Shield, Crown, Hash, UserX } from 'lucide-react';
|
||||
import { useUserDisplay } from '@opchan/react';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
@ -21,6 +21,42 @@ export function AuthorDisplay({
|
||||
console.log({ ensName, ordinalDetails, callSign, displayName, address });
|
||||
}, [address, ensName, ordinalDetails, callSign, displayName]);
|
||||
|
||||
// Check if author is anonymous (UUID format)
|
||||
const isAnonymous = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(address);
|
||||
|
||||
// If anonymous, show call sign if available, otherwise "Anonymous User"
|
||||
if (isAnonymous) {
|
||||
return (
|
||||
<div className={`flex items-center gap-1.5 ${className}`}>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{callSign || 'Anonymous User'}
|
||||
</span>
|
||||
{showBadge && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={`text-xs px-1.5 py-0.5 h-auto ${
|
||||
callSign
|
||||
? 'bg-green-900/20 border-green-500/30 text-green-400'
|
||||
: 'bg-neutral-800/50 border-neutral-700/30 text-neutral-400'
|
||||
}`}
|
||||
>
|
||||
{callSign ? (
|
||||
<>
|
||||
<Hash className="w-3 h-3 mr-1" />
|
||||
Call Sign
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserX className="w-3 h-3 mr-1" />
|
||||
Anonymous
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Only show a badge if the author has ENS, Ordinal, or Call Sign
|
||||
const shouldShowBadge = showBadge && (ensName || ordinalDetails || callSign);
|
||||
|
||||
|
||||
134
app/src/components/ui/inline-callsign-input.tsx
Normal file
134
app/src/components/ui/inline-callsign-input.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import { useState } from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Hash, Loader2 } from 'lucide-react';
|
||||
import { useAuth } from '@/hooks';
|
||||
import { EVerificationStatus } from '@opchan/core';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
|
||||
export function InlineCallSignInput() {
|
||||
const { currentUser, updateProfile } = useAuth();
|
||||
const { toast } = useToast();
|
||||
const [callSign, setCallSign] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Only show for anonymous users without call sign
|
||||
if (!currentUser || currentUser.verificationStatus !== EVerificationStatus.ANONYMOUS) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// If user already has a call sign, don't show this
|
||||
if (currentUser.callSign) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleSubmit = async (e?: React.FormEvent) => {
|
||||
e?.preventDefault();
|
||||
|
||||
const trimmedCallSign = callSign.trim();
|
||||
|
||||
// Validation
|
||||
if (!trimmedCallSign) {
|
||||
toast({
|
||||
title: 'Call Sign Required',
|
||||
description: 'Please enter a call sign to continue.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (trimmedCallSign.length < 3) {
|
||||
toast({
|
||||
title: 'Call Sign Too Short',
|
||||
description: 'Call sign must be at least 3 characters.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (trimmedCallSign.length > 20) {
|
||||
toast({
|
||||
title: 'Call Sign Too Long',
|
||||
description: 'Call sign must be less than 20 characters.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^[a-zA-Z0-9_-]+$/.test(trimmedCallSign)) {
|
||||
toast({
|
||||
title: 'Invalid Characters',
|
||||
description: 'Only letters, numbers, hyphens, and underscores allowed.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const success = await updateProfile({
|
||||
callSign: trimmedCallSign
|
||||
});
|
||||
|
||||
if (success) {
|
||||
toast({
|
||||
title: 'Call Sign Set!',
|
||||
description: `You're now known as ${trimmedCallSign}`,
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: 'Update Failed',
|
||||
description: 'Failed to set call sign. Please try again.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error setting call sign:', error);
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: 'An error occurred. Please try again.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 border border-cyber-muted rounded-sm bg-cyber-muted/20">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Hash className="w-4 h-4 text-cyber-accent" />
|
||||
<p className="text-sm font-medium">Set a call sign to participate</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mb-3">
|
||||
Choose a unique identifier to personalize your anonymous identity
|
||||
</p>
|
||||
<form onSubmit={handleSubmit} className="flex gap-2">
|
||||
<Input
|
||||
placeholder="your_call_sign"
|
||||
value={callSign}
|
||||
onChange={(e) => setCallSign(e.target.value)}
|
||||
disabled={isSubmitting}
|
||||
className="bg-cyber-muted/50 border-cyber-muted"
|
||||
maxLength={20}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !callSign.trim()}
|
||||
className="bg-cyber-accent hover:bg-cyber-accent/80 text-black"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
Setting...
|
||||
</>
|
||||
) : (
|
||||
'Set Call Sign'
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Wallet, Loader2, CheckCircle } from 'lucide-react';
|
||||
import { Wallet, Loader2, CheckCircle, UserX } from 'lucide-react';
|
||||
import { useAuth } from '@opchan/react';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
@ -15,7 +15,7 @@ export function WalletConnectionStep({
|
||||
isLoading,
|
||||
setIsLoading,
|
||||
}: WalletConnectionStepProps) {
|
||||
const { isAuthenticated, currentUser, connect } = useAuth();
|
||||
const { isAuthenticated, currentUser, connect, startAnonymous } = useAuth();
|
||||
|
||||
// Auto-complete step when wallet connects
|
||||
useEffect(() => {
|
||||
@ -35,6 +35,20 @@ export function WalletConnectionStep({
|
||||
}
|
||||
};
|
||||
|
||||
const handleAnonymous = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const sessionId = await startAnonymous();
|
||||
if (sessionId) {
|
||||
onComplete();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error starting anonymous session:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Show connected state
|
||||
if (isAuthenticated && currentUser) {
|
||||
return (
|
||||
@ -118,6 +132,34 @@ export function WalletConnectionStep({
|
||||
<div className="text-xs text-neutral-500 text-center pt-2">
|
||||
Supports MetaMask, WalletConnect, Coinbase Wallet, and more
|
||||
</div>
|
||||
|
||||
{/* Anonymous Option */}
|
||||
<div className="mt-6 pt-4 border-t border-neutral-800">
|
||||
<p className="text-xs text-neutral-500 text-center mb-3">
|
||||
Or continue without connecting a wallet
|
||||
</p>
|
||||
<Button
|
||||
onClick={handleAnonymous}
|
||||
disabled={isLoading}
|
||||
variant="outline"
|
||||
className="w-full border-neutral-700 hover:bg-neutral-800"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
Starting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserX className="h-4 w-4 mr-2" />
|
||||
Continue Anonymously
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<p className="text-xs text-neutral-600 text-center mt-2">
|
||||
You can post, comment, and vote (but not create cells)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -59,6 +59,13 @@ export function WalletWizard({
|
||||
}, [isAuthenticated, getDelegationStatus]);
|
||||
|
||||
const handleStepComplete = (step: WizardStep) => {
|
||||
// If user is anonymous after step 1, close wizard immediately
|
||||
if (step === 1 && verificationStatus === EVerificationStatus.ANONYMOUS) {
|
||||
onComplete();
|
||||
onOpenChange(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (step < 3) {
|
||||
setCurrentStep((step + 1) as WizardStep);
|
||||
} else {
|
||||
|
||||
@ -10,7 +10,6 @@ if (!(window as Window & typeof globalThis).Buffer) {
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<OpChanProvider config={{
|
||||
ordiscanApiKey: '6bb07766-d98c-4ddd-93fb-6a0e94d629dd',
|
||||
wakuConfig: {
|
||||
contentTopic: '/opchan/1/messages/proto',
|
||||
reliableChannelId: 'opchan-messages'
|
||||
|
||||
@ -441,7 +441,7 @@ export default function ProfilePage() {
|
||||
<Shield className="h-5 w-5 text-cyber-accent" />
|
||||
Security
|
||||
</div>
|
||||
{delegationInfo.hasDelegation && (
|
||||
{currentUser.verificationStatus !== EVerificationStatus.ANONYMOUS && delegationInfo.hasDelegation && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@ -455,25 +455,48 @@ export default function ProfilePage() {
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Delegation Status */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-cyber-neutral">
|
||||
Delegation
|
||||
</span>
|
||||
<Badge
|
||||
variant={
|
||||
delegationInfo.isValid ? 'default' : 'secondary'
|
||||
}
|
||||
className={
|
||||
delegationInfo.isValid
|
||||
? 'bg-green-500/20 text-green-400 border-green-500/30'
|
||||
: 'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}
|
||||
>
|
||||
{delegationInfo.isValid ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
{currentUser.verificationStatus === EVerificationStatus.ANONYMOUS ? (
|
||||
/* Anonymous User Security Info */
|
||||
<div className="space-y-3">
|
||||
<div className="p-3 bg-blue-500/10 border border-blue-500/30 rounded-md">
|
||||
<div className="flex items-center gap-2 text-blue-400">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
<span className="text-xs font-medium">
|
||||
Anonymous Session Active
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-cyber-neutral mt-2">
|
||||
Your session is secured with browser-generated encryption keys. No wallet connection required.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<span className="text-xs text-cyber-neutral">Session ID</span>
|
||||
<div className="text-xs font-mono text-cyber-light bg-cyber-dark/50 px-2 py-1 rounded">
|
||||
{currentUser.address.slice(0, 8)}...{currentUser.address.slice(-8)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* Wallet User Delegation Status */
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-cyber-neutral">
|
||||
Delegation
|
||||
</span>
|
||||
<Badge
|
||||
variant={
|
||||
delegationInfo.isValid ? 'default' : 'secondary'
|
||||
}
|
||||
className={
|
||||
delegationInfo.isValid
|
||||
? 'bg-green-500/20 text-green-400 border-green-500/30'
|
||||
: 'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}
|
||||
>
|
||||
{delegationInfo.isValid ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Expiry Date */}
|
||||
{delegationInfo.expiresAt && (
|
||||
@ -534,17 +557,19 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warning for expired delegation */}
|
||||
{!delegationInfo.isValid && delegationInfo.hasDelegation && (
|
||||
<div className="p-3 bg-orange-500/10 border border-orange-500/30 rounded-md">
|
||||
<div className="flex items-center gap-2 text-orange-400">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<span className="text-xs font-medium">
|
||||
Delegation expired. Renew to continue using your
|
||||
browser key.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Warning for expired delegation */}
|
||||
{!delegationInfo.isValid && delegationInfo.hasDelegation && (
|
||||
<div className="p-3 bg-orange-500/10 border border-orange-500/30 rounded-md">
|
||||
<div className="flex items-center gap-2 text-orange-400">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<span className="text-xs font-medium">
|
||||
Delegation expired. Renew to continue using your
|
||||
browser key.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
3440
package-lock.json
generated
3440
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,6 +5,8 @@ import {
|
||||
DelegationInfo,
|
||||
DelegationStatus,
|
||||
DelegationProof,
|
||||
AnonymousDelegationInfo,
|
||||
WalletDelegationInfo,
|
||||
} from './types';
|
||||
import { DelegationStorage } from './storage';
|
||||
import { DelegationCrypto } from './crypto';
|
||||
@ -59,7 +61,7 @@ export class DelegationManager {
|
||||
const walletSignature = await signFunction(authMessage);
|
||||
|
||||
// Store delegation
|
||||
const delegationInfo: DelegationInfo = {
|
||||
const delegationInfo: WalletDelegationInfo = {
|
||||
authMessage,
|
||||
walletSignature,
|
||||
expiryTimestamp,
|
||||
@ -70,6 +72,8 @@ export class DelegationManager {
|
||||
};
|
||||
|
||||
await DelegationStorage.store(delegationInfo);
|
||||
this.cachedDelegation = delegationInfo;
|
||||
this.cachedAt = Date.now();
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error creating delegation:', error);
|
||||
@ -77,6 +81,40 @@ export class DelegationManager {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an anonymous delegation (no wallet proof required)
|
||||
*/
|
||||
async delegateAnonymous(duration: DelegationDuration = '7days'): Promise<string> {
|
||||
try {
|
||||
// Generate browser keypair
|
||||
const keypair = DelegationCrypto.generateKeypair();
|
||||
|
||||
// Create expiry, nonce, and session ID
|
||||
const expiryTimestamp =
|
||||
Date.now() +
|
||||
DelegationManager.getDurationHours(duration) * 60 * 60 * 1000;
|
||||
const nonce = crypto.randomUUID();
|
||||
const sessionId = crypto.randomUUID();
|
||||
|
||||
// Store anonymous delegation
|
||||
const anonymousDelegation: AnonymousDelegationInfo = {
|
||||
sessionId,
|
||||
browserPublicKey: keypair.publicKey,
|
||||
browserPrivateKey: keypair.privateKey,
|
||||
expiryTimestamp,
|
||||
nonce,
|
||||
};
|
||||
|
||||
await DelegationStorage.store(anonymousDelegation);
|
||||
this.cachedDelegation = anonymousDelegation;
|
||||
this.cachedAt = Date.now();
|
||||
return sessionId;
|
||||
} catch (error) {
|
||||
console.error('Error creating anonymous delegation:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sign a message with delegated key
|
||||
*/
|
||||
@ -108,12 +146,24 @@ export class DelegationManager {
|
||||
);
|
||||
if (!signature) return null;
|
||||
|
||||
return {
|
||||
...message,
|
||||
signature,
|
||||
browserPubKey: delegation.browserPublicKey,
|
||||
delegationProof: this.createProof(delegation),
|
||||
} as OpchanMessage;
|
||||
// Check delegation type and construct appropriate message
|
||||
if ('walletAddress' in delegation) {
|
||||
// Wallet delegation - include delegationProof
|
||||
return {
|
||||
...message,
|
||||
signature,
|
||||
browserPubKey: delegation.browserPublicKey,
|
||||
delegationProof: this.createProof(delegation as WalletDelegationInfo),
|
||||
} as OpchanMessage;
|
||||
} else {
|
||||
// Anonymous delegation - no delegationProof
|
||||
return {
|
||||
...message,
|
||||
signature,
|
||||
browserPubKey: delegation.browserPublicKey,
|
||||
delegationProof: undefined,
|
||||
} as OpchanMessage;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -124,7 +174,6 @@ export class DelegationManager {
|
||||
if (
|
||||
!message.signature ||
|
||||
!message.browserPubKey ||
|
||||
!message.delegationProof ||
|
||||
!message.author
|
||||
) {
|
||||
return false;
|
||||
@ -148,12 +197,17 @@ export class DelegationManager {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Verify delegation proof
|
||||
return await this.verifyProof(
|
||||
message.delegationProof,
|
||||
message.browserPubKey,
|
||||
message.author
|
||||
);
|
||||
// If has delegationProof, verify it (wallet user)
|
||||
if (message.delegationProof) {
|
||||
return await this.verifyProof(
|
||||
message.delegationProof,
|
||||
message.browserPubKey,
|
||||
message.author
|
||||
);
|
||||
}
|
||||
|
||||
// Anonymous message - verify author is valid session ID (UUID format)
|
||||
return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(message.author);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -167,8 +221,7 @@ export class DelegationManager {
|
||||
// Check required fields
|
||||
if (!message.signature) reasons.push('Missing message signature');
|
||||
if (!message.browserPubKey) reasons.push('Missing browser public key');
|
||||
if (!message.delegationProof) reasons.push('Missing delegation proof');
|
||||
if (!message.author) reasons.push('Missing author address');
|
||||
if (!message.author) reasons.push('Missing author');
|
||||
if (reasons.length > 0) return { isValid: false, reasons };
|
||||
|
||||
// Verify message signature
|
||||
@ -189,15 +242,23 @@ export class DelegationManager {
|
||||
return { isValid: false, reasons };
|
||||
}
|
||||
|
||||
// Verify delegation proof with details
|
||||
const proofResult = await this.verifyProofWithReason(
|
||||
message.delegationProof,
|
||||
message.browserPubKey,
|
||||
message.author
|
||||
);
|
||||
if (!proofResult.isValid) {
|
||||
reasons.push(...proofResult.reasons);
|
||||
return { isValid: false, reasons };
|
||||
// If has delegationProof, verify it (wallet user)
|
||||
if (message.delegationProof) {
|
||||
const proofResult = await this.verifyProofWithReason(
|
||||
message.delegationProof,
|
||||
message.browserPubKey,
|
||||
message.author
|
||||
);
|
||||
if (!proofResult.isValid) {
|
||||
reasons.push(...proofResult.reasons);
|
||||
return { isValid: false, reasons };
|
||||
}
|
||||
} else {
|
||||
// Anonymous message - verify session ID format
|
||||
if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(message.author)) {
|
||||
reasons.push('Invalid anonymous session ID format');
|
||||
return { isValid: false, reasons };
|
||||
}
|
||||
}
|
||||
|
||||
return { isValid: true, reasons: [] };
|
||||
@ -207,7 +268,7 @@ export class DelegationManager {
|
||||
* Get delegation status
|
||||
*/
|
||||
async getStatus(
|
||||
currentAddress?: `0x${string}`
|
||||
currentAddress?: string
|
||||
): Promise<DelegationFullStatus> {
|
||||
const now = Date.now();
|
||||
if (
|
||||
@ -223,8 +284,11 @@ export class DelegationManager {
|
||||
}
|
||||
|
||||
const hasExpired = now >= delegation.expiryTimestamp;
|
||||
const addressMatches =
|
||||
!currentAddress || delegation.walletAddress === currentAddress;
|
||||
|
||||
// Check if wallet delegation (has walletAddress property)
|
||||
const isWalletDelegation = 'walletAddress' in delegation;
|
||||
const addressMatches = !currentAddress ||
|
||||
(isWalletDelegation && delegation.walletAddress === currentAddress);
|
||||
const isValid = !hasExpired && addressMatches;
|
||||
|
||||
return {
|
||||
@ -234,8 +298,8 @@ export class DelegationManager {
|
||||
? Math.max(0, delegation.expiryTimestamp - now)
|
||||
: undefined,
|
||||
publicKey: delegation.browserPublicKey,
|
||||
address: delegation.walletAddress,
|
||||
proof: isValid ? this.createProof(delegation) : undefined,
|
||||
address: isWalletDelegation ? delegation.walletAddress : undefined,
|
||||
proof: isValid && isWalletDelegation ? this.createProof(delegation as WalletDelegationInfo) : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
@ -256,7 +320,7 @@ export class DelegationManager {
|
||||
/**
|
||||
* Create delegation proof from stored info
|
||||
*/
|
||||
private createProof(delegation: DelegationInfo): DelegationProof {
|
||||
private createProof(delegation: WalletDelegationInfo): DelegationProof {
|
||||
return {
|
||||
authMessage: delegation.authMessage,
|
||||
walletSignature: delegation.walletSignature,
|
||||
|
||||
@ -11,14 +11,30 @@ export interface DelegationProof {
|
||||
}
|
||||
|
||||
/**
|
||||
* Complete delegation information including private key (stored locally)
|
||||
* Anonymous delegation information (browser-only, no wallet proof)
|
||||
*/
|
||||
export interface DelegationInfo extends DelegationProof {
|
||||
export interface AnonymousDelegationInfo {
|
||||
sessionId: string; // UUID session identifier
|
||||
browserPublicKey: string; // Browser-generated public key
|
||||
browserPrivateKey: string; // Browser-generated private key (never shared)
|
||||
expiryTimestamp: number; // When this delegation expires
|
||||
nonce: string; // Unique nonce to prevent replay attacks
|
||||
}
|
||||
|
||||
/**
|
||||
* Wallet delegation information (includes wallet proof)
|
||||
*/
|
||||
export interface WalletDelegationInfo extends DelegationProof {
|
||||
browserPublicKey: string; // Browser-generated public key
|
||||
browserPrivateKey: string; // Browser-generated private key (never shared)
|
||||
nonce: string; // Unique nonce to prevent replay attacks
|
||||
}
|
||||
|
||||
/**
|
||||
* Complete delegation information - can be wallet-based or anonymous
|
||||
*/
|
||||
export type DelegationInfo = WalletDelegationInfo | AnonymousDelegationInfo;
|
||||
|
||||
/**
|
||||
* Status of current delegation
|
||||
*/
|
||||
|
||||
@ -55,10 +55,11 @@ export class ForumActions {
|
||||
case 'createPost':
|
||||
case 'createComment':
|
||||
case 'vote':
|
||||
if (!_isAuthenticated || !currentUser) {
|
||||
// Allow wallet-connected OR anonymous users
|
||||
if (verificationStatus === EVerificationStatus.WALLET_UNCONNECTED) {
|
||||
return {
|
||||
valid: false,
|
||||
error: 'Connect your wallet to perform this action',
|
||||
error: 'Connect your wallet or use anonymous mode to perform this action',
|
||||
};
|
||||
}
|
||||
break;
|
||||
|
||||
@ -275,6 +275,11 @@ export class RelevanceCalculator {
|
||||
authorAddress: string,
|
||||
userVerificationStatus: UserVerificationStatus
|
||||
): { bonus: number; isVerified: boolean } {
|
||||
// Anonymous users (UUID format) get no bonus
|
||||
if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(authorAddress)) {
|
||||
return { bonus: 0, isVerified: false };
|
||||
}
|
||||
|
||||
const authorStatus = userVerificationStatus[authorAddress];
|
||||
const isVerified = authorStatus?.isVerified || false;
|
||||
|
||||
|
||||
@ -371,6 +371,8 @@ export class UserIdentityService {
|
||||
return EVerificationStatus.WALLET_CONNECTED; // Temporary state during verification
|
||||
|
||||
// Enum string values persisted in LocalDatabase
|
||||
case EVerificationStatus.ANONYMOUS:
|
||||
return EVerificationStatus.ANONYMOUS;
|
||||
case EVerificationStatus.WALLET_UNCONNECTED:
|
||||
return EVerificationStatus.WALLET_UNCONNECTED;
|
||||
case EVerificationStatus.WALLET_CONNECTED:
|
||||
|
||||
@ -106,12 +106,13 @@ export interface Comment extends CommentMessage {
|
||||
|
||||
/**
|
||||
* Extended message types for verification
|
||||
* These fields are now REQUIRED for all valid messages
|
||||
* Signature and browserPubKey are REQUIRED for all messages
|
||||
* delegationProof is OPTIONAL - present for wallet users, absent for anonymous users
|
||||
*/
|
||||
export interface SignedMessage {
|
||||
signature: string;
|
||||
browserPubKey: string;
|
||||
delegationProof: DelegationProof; // Cryptographic proof that browser key was authorized - REQUIRED
|
||||
delegationProof?: DelegationProof; // Cryptographic proof that browser key was authorized (wallet users only)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export type User = {
|
||||
address: `0x${string}`;
|
||||
address: string; // Can be `0x${string}` for wallet users or UUID for anonymous users
|
||||
|
||||
ensName?: string;
|
||||
ensAvatar?: string;
|
||||
@ -18,6 +18,7 @@ export type User = {
|
||||
};
|
||||
|
||||
export enum EVerificationStatus {
|
||||
ANONYMOUS = 'anonymous',
|
||||
WALLET_UNCONNECTED = 'wallet-unconnected',
|
||||
WALLET_CONNECTED = 'wallet-connected',
|
||||
ENS_VERIFIED = 'ens-verified',
|
||||
|
||||
@ -37,7 +37,7 @@ export interface UnsignedBaseMessage {
|
||||
export interface BaseMessage extends UnsignedBaseMessage {
|
||||
signature: string; // Message signature for verification
|
||||
browserPubKey: string; // Public key that signed the message
|
||||
delegationProof: DelegationProof; // Cryptographic proof that browser key was authorized
|
||||
delegationProof?: DelegationProof; // Cryptographic proof that browser key was authorized (wallet users only)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,157 +1,667 @@
|
||||
## @opchan/react
|
||||
# @opchan/react
|
||||
|
||||
Lightweight React provider and hooks for building OpChan clients on top of `@opchan/core`.
|
||||
React hooks and providers for building decentralized forum applications on top of `@opchan/core`.
|
||||
|
||||
### Install
|
||||
## Overview
|
||||
|
||||
`@opchan/react` provides a complete React integration layer for the OpChan protocol, featuring:
|
||||
|
||||
- 🔐 **Flexible Authentication** - Wallet-based (Ethereum) or anonymous sessions
|
||||
- 🔑 **Key Delegation** - Browser-based signing to reduce wallet prompts
|
||||
- 📝 **Content Management** - Cells, posts, comments, and votes
|
||||
- 👤 **Identity System** - ENS resolution, call signs, and user profiles
|
||||
- ⚖️ **Permission Management** - Role-based access control
|
||||
- 🌐 **Network State** - Waku connection monitoring
|
||||
- 💾 **Local-First** - IndexedDB caching with network sync
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm i @opchan/react @opchan/core react react-dom
|
||||
npm install @opchan/react @opchan/core react react-dom
|
||||
```
|
||||
|
||||
### Quickstart
|
||||
## Quick Start
|
||||
|
||||
#### Quickstart Provider (wagmi-only)
|
||||
### 1. Setup Provider
|
||||
|
||||
OpChan uses wagmi connectors for wallet management. The OpChanProvider already wraps WagmiProvider and React Query internally, so you can mount it directly:
|
||||
The `OpChanProvider` wraps WagmiProvider and QueryClientProvider internally:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { OpChanProvider } from '@opchan/react';
|
||||
import { Buffer } from 'buffer';
|
||||
import App from './App';
|
||||
|
||||
const opchanConfig = {};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<OpChanProvider config={opchanConfig}>
|
||||
{/* your app */}
|
||||
</OpChanProvider>
|
||||
);
|
||||
// Required polyfill for crypto libraries
|
||||
if (!(window as any).Buffer) {
|
||||
(window as any).Buffer = Buffer;
|
||||
}
|
||||
|
||||
createRoot(document.getElementById('root')!).render(<App />);
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<OpChanProvider
|
||||
config={{
|
||||
wakuConfig: {
|
||||
contentTopic: '/opchan/1/messages/proto',
|
||||
reliableChannelId: 'opchan-messages'
|
||||
},
|
||||
reownProjectId: 'your-reown-project-id' // For WalletConnect
|
||||
}}
|
||||
>
|
||||
<App />
|
||||
</OpChanProvider>
|
||||
);
|
||||
```
|
||||
|
||||
### Common usage
|
||||
### 2. Use Hooks in Your App
|
||||
|
||||
```tsx
|
||||
import { useForum } from '@opchan/react';
|
||||
|
||||
export function NewPostButton({ cellId }: { cellId: string }) {
|
||||
const { user, content, permissions } = useForum();
|
||||
|
||||
const onCreate = async () => {
|
||||
if (!permissions.canPost) return;
|
||||
await content.createPost({ cellId, title: 'Hello', content: 'World' });
|
||||
};
|
||||
export function MyComponent() {
|
||||
const { user, content, permissions, network } = useForum();
|
||||
|
||||
return (
|
||||
<button disabled={!permissions.canPost || !user.isAuthenticated} onClick={onCreate}>
|
||||
New post
|
||||
</button>
|
||||
<div>
|
||||
<h1>Cells: {content.cells.length}</h1>
|
||||
<p>Network: {network.isConnected ? 'Connected' : 'Disconnected'}</p>
|
||||
{permissions.canPost && <button>Create Post</button>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
import { useAuth, useUserDisplay } from '@opchan/react';
|
||||
## Core Concepts
|
||||
|
||||
export function Connect() {
|
||||
const { currentUser, connect, disconnect, verifyOwnership } = useAuth();
|
||||
const display = useUserDisplay(currentUser?.address ?? '');
|
||||
### Authentication Modes
|
||||
|
||||
OpChan supports three authentication modes:
|
||||
|
||||
1. **Anonymous** (`ANONYMOUS`) - Browser-only session, no wallet required
|
||||
- Can post, comment, and vote
|
||||
- Cannot create cells
|
||||
- Optional call sign for identity
|
||||
|
||||
2. **Wallet Connected** (`WALLET_CONNECTED`) - Ethereum wallet connected
|
||||
- Full interaction capabilities
|
||||
- Can create posts, comment, vote
|
||||
- Cannot create cells (requires ENS verification)
|
||||
|
||||
3. **ENS Verified** (`ENS_VERIFIED`) - Wallet + ENS ownership verified
|
||||
- Full platform access
|
||||
- Can create cells (becomes cell admin)
|
||||
- Enhanced relevance scoring for content
|
||||
|
||||
### Key Delegation
|
||||
|
||||
To reduce wallet signature prompts, OpChan uses browser-based key delegation:
|
||||
|
||||
- **For Wallet Users**: Wallet signs authorization for browser keys (7 or 30 days)
|
||||
- **For Anonymous Users**: Browser keys generated automatically (no wallet signature)
|
||||
|
||||
This enables one-time wallet interaction with subsequent actions signed by browser keys.
|
||||
|
||||
## API Reference
|
||||
|
||||
### Hooks
|
||||
|
||||
#### `useForum()`
|
||||
|
||||
Convenience hook that bundles all core hooks:
|
||||
|
||||
```tsx
|
||||
const { user, content, permissions, network } = useForum();
|
||||
```
|
||||
|
||||
Equivalent to:
|
||||
```tsx
|
||||
const user = useAuth();
|
||||
const content = useContent();
|
||||
const permissions = usePermissions();
|
||||
const network = useNetwork();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### `useAuth()`
|
||||
|
||||
Manages user session, authentication, and identity.
|
||||
|
||||
**Data:**
|
||||
- `currentUser: User | null` - Current authenticated user
|
||||
- `verificationStatus: EVerificationStatus` - Authentication level
|
||||
- `isAuthenticated: boolean` - Whether user is logged in (wallet or anonymous)
|
||||
- `delegationInfo: { hasDelegation, isValid, timeRemaining?, expiresAt? }` - Delegation status
|
||||
|
||||
**Actions:**
|
||||
- `connect()` - Open wallet connection modal
|
||||
- `disconnect()` - Disconnect wallet or exit anonymous session
|
||||
- `startAnonymous(): Promise<string | null>` - Start anonymous session, returns sessionId
|
||||
- `verifyOwnership(): Promise<boolean>` - Verify ENS ownership
|
||||
- `delegate(duration: '7days' | '30days'): Promise<boolean>` - Create wallet delegation
|
||||
- `delegationStatus(): Promise<DelegationStatus>` - Check delegation status
|
||||
- `clearDelegation(): Promise<boolean>` - Clear stored delegation
|
||||
- `updateProfile({ callSign?, displayPreference? }): Promise<boolean>` - Update user profile
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
function AuthButton() {
|
||||
const { currentUser, connect, startAnonymous, disconnect } = useAuth();
|
||||
|
||||
if (currentUser) {
|
||||
return <button onClick={disconnect}>Disconnect</button>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button onClick={connect}>Connect Wallet</button>
|
||||
<button onClick={startAnonymous}>Continue Anonymously</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### `useContent()`
|
||||
|
||||
Access forum content and perform content actions.
|
||||
|
||||
**Data:**
|
||||
- `cells: Cell[]` - All cells
|
||||
- `posts: Post[]` - All posts
|
||||
- `comments: Comment[]` - All comments
|
||||
- `bookmarks: Bookmark[]` - User's bookmarks
|
||||
- `postsByCell: Record<string, Post[]>` - Posts grouped by cell
|
||||
- `commentsByPost: Record<string, Comment[]>` - Comments grouped by post
|
||||
- `cellsWithStats: Cell[]` - Cells with computed stats (activeMembers, relevance)
|
||||
- `userVerificationStatus: Record<string, { isVerified, hasENS, ensName? }>` - Verification cache
|
||||
- `lastSync: number | null` - Last network sync timestamp
|
||||
- `pending: { isPending(id), onChange(callback) }` - Pending operations tracking
|
||||
|
||||
**Actions:**
|
||||
- `createCell({ name, description, icon? }): Promise<Cell | null>`
|
||||
- `createPost({ cellId, title, content }): Promise<Post | null>`
|
||||
- `createComment({ postId, content }): Promise<Comment | null>`
|
||||
- `vote({ targetId, isUpvote }): Promise<boolean>`
|
||||
- `moderate.post(cellId, postId, reason?)` - Moderate a post
|
||||
- `moderate.unpost(cellId, postId)` - Unmoderate a post
|
||||
- `moderate.comment(cellId, commentId, reason?)` - Moderate a comment
|
||||
- `moderate.uncomment(cellId, commentId)` - Unmoderate a comment
|
||||
- `moderate.user(cellId, userAddress, reason?)` - Moderate a user
|
||||
- `moderate.unuser(cellId, userAddress)` - Unmoderate a user
|
||||
- `togglePostBookmark(post, cellId?): Promise<void>` - Toggle post bookmark
|
||||
- `toggleCommentBookmark(comment, postId?): Promise<void>` - Toggle comment bookmark
|
||||
- `removeBookmark(bookmarkId): Promise<void>` - Remove specific bookmark
|
||||
- `clearAllBookmarks(): Promise<void>` - Clear all bookmarks
|
||||
- `refresh(): Promise<void>` - Refresh content from cache
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
function CreatePostForm({ cellId }: { cellId: string }) {
|
||||
const { createPost } = useContent();
|
||||
const [title, setTitle] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const post = await createPost({ cellId, title, content });
|
||||
if (post) {
|
||||
setTitle('');
|
||||
setContent('');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
|
||||
<input value={title} onChange={(e) => setTitle(e.target.value)} />
|
||||
<textarea value={content} onChange={(e) => setContent(e.target.value)} />
|
||||
<button type="submit">Post</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### `usePermissions()`
|
||||
|
||||
Check user permissions for various actions.
|
||||
|
||||
**Data:**
|
||||
- `canPost: boolean` - Can create posts (wallet or anonymous)
|
||||
- `canComment: boolean` - Can create comments (wallet or anonymous)
|
||||
- `canVote: boolean` - Can vote (wallet or anonymous)
|
||||
- `canCreateCell: boolean` - Can create cells (ENS verified only)
|
||||
- `canDelegate: boolean` - Can delegate keys (wallet only)
|
||||
- `canModerate(cellId): boolean` - Can moderate cell (cell creator only)
|
||||
- `reasons: { post, comment, vote, createCell, moderate(cellId) }` - Reason strings when permission denied
|
||||
- `check(action, cellId?): { allowed, reason }` - Unified permission check
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
function PostActions() {
|
||||
const permissions = usePermissions();
|
||||
|
||||
return (
|
||||
<div>
|
||||
{currentUser ? (
|
||||
<>
|
||||
<span>{display.displayName}</span>
|
||||
<button onClick={() => verifyOwnership()}>Verify</button>
|
||||
<button onClick={() => disconnect()}>Disconnect</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button onClick={() => connect()}>
|
||||
Connect Wallet
|
||||
<button disabled={!permissions.canVote}>
|
||||
{permissions.canVote ? 'Upvote' : permissions.reasons.vote}
|
||||
</button>
|
||||
</>
|
||||
{!permissions.canCreateCell && (
|
||||
<p>{permissions.reasons.createCell}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
---
|
||||
|
||||
- **Providers**
|
||||
- **`OpChanProvider`**: High-level provider that constructs an `OpChanClient` and wires wagmi + React Query.
|
||||
- Props:
|
||||
- `config: OpChanClientConfig` — core client configuration.
|
||||
- `children: React.ReactNode`.
|
||||
- Requirements: None — this provider already wraps `WagmiProvider` and `QueryClientProvider` internally.
|
||||
#### `useNetwork()`
|
||||
|
||||
Monitor Waku network connection state.
|
||||
|
||||
**Data:**
|
||||
- `isConnected: boolean` - Waku network connection status
|
||||
- `statusMessage: string` - Human-readable status
|
||||
- `issues: string[]` - Connection issues
|
||||
- `isHydrated: boolean` - Whether initial data loaded
|
||||
- `canRefresh: boolean` - Whether refresh is available
|
||||
|
||||
**Actions:**
|
||||
- `refresh(): Promise<void>` - Refresh network data
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
function NetworkIndicator() {
|
||||
const { isConnected, statusMessage, refresh } = useNetwork();
|
||||
|
||||
- **`AppKitWalletProvider`**: Wallet context provider (automatically included in `OpChanProvider`).
|
||||
- Provides wallet state and controls from AppKit.
|
||||
return (
|
||||
<div>
|
||||
<span>{statusMessage}</span>
|
||||
{!isConnected && <button onClick={refresh}>Reconnect</button>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### `useUserDisplay(address: string)`
|
||||
|
||||
Get display information for any user address (wallet or anonymous).
|
||||
|
||||
**Returns:**
|
||||
- `address: string` - User's address or session ID
|
||||
- `displayName: string` - Computed display name
|
||||
- `callSign?: string` - User's call sign
|
||||
- `ensName?: string` - ENS name (wallet users only)
|
||||
- `ensAvatar?: string` - ENS avatar URL
|
||||
- `verificationStatus: EVerificationStatus` - Verification level
|
||||
- `displayPreference: EDisplayPreference` - Display preference
|
||||
- `lastUpdated: number` - Last identity update timestamp
|
||||
- `isLoading: boolean` - Loading state
|
||||
- `error?: string` - Error message
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
function AuthorBadge({ authorAddress }: { authorAddress: string }) {
|
||||
const { displayName, callSign, ensName, verificationStatus } =
|
||||
useUserDisplay(authorAddress);
|
||||
|
||||
- **`ClientProvider`**: Low-level provider if you construct `OpChanClient` yourself.
|
||||
- Props: `{ client: OpChanClient; children: React.ReactNode }`.
|
||||
return (
|
||||
<div>
|
||||
<span>{displayName}</span>
|
||||
{ensName && <span className="badge">ENS</span>}
|
||||
{callSign && <span className="badge">Call Sign</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
- **Hooks**
|
||||
- **`useForum()`** → `{ user, content, permissions, network }` — convenience bundle of the hooks below.
|
||||
---
|
||||
|
||||
- **`useAuth()`** → session & identity actions
|
||||
- Data: `currentUser`, `verificationStatus`, `isAuthenticated`, `delegationInfo`.
|
||||
- Actions: `connect(walletType: 'bitcoin' | 'ethereum')`, `disconnect()`, `verifyOwnership()`,
|
||||
`delegate(duration)`, `delegationStatus()`, `clearDelegation()`,
|
||||
`updateProfile({ callSign?, displayPreference? })`.
|
||||
#### `useUIState<T>(key, defaultValue, category?)`
|
||||
|
||||
Persist UI state to IndexedDB with React state management.
|
||||
|
||||
**Parameters:**
|
||||
- `key: string` - Unique key for the state
|
||||
- `defaultValue: T` - Default value
|
||||
- `category?: 'wizardStates' | 'preferences' | 'temporaryStates'` - Storage category (default: 'preferences')
|
||||
|
||||
**Returns:**
|
||||
- `[value, setValue, { loading, error? }]` - Similar to useState with persistence
|
||||
|
||||
**Example:**
|
||||
```tsx
|
||||
function ThemeToggle() {
|
||||
const [darkMode, setDarkMode] = useUIState('darkMode', true, 'preferences');
|
||||
|
||||
|
||||
return (
|
||||
<button onClick={() => setDarkMode(!darkMode)}>
|
||||
{darkMode ? 'Light' : 'Dark'} Mode
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
- **`useContent()`** → forum data & actions
|
||||
- Data: `cells`, `posts`, `comments`, `bookmarks`, `postsByCell`, `commentsByPost`,
|
||||
`cellsWithStats`, `userVerificationStatus`, `lastSync`, `pending` helpers.
|
||||
- Actions: `createCell({ name, description, icon? })`,
|
||||
`createPost({ cellId, title, content })`,
|
||||
`createComment({ postId, content })`,
|
||||
`vote({ targetId, isUpvote })`,
|
||||
`moderate.{post,unpost,comment,uncomment,user,unuser}(...)`,
|
||||
`togglePostBookmark(post, cellId?)`, `toggleCommentBookmark(comment, postId?)`,
|
||||
`removeBookmark(bookmarkId)`, `clearAllBookmarks()`, `refresh()`.
|
||||
---
|
||||
|
||||
- **`usePermissions()`** → permission checks
|
||||
- Booleans: `canPost`, `canComment`, `canVote`, `canCreateCell`, `canDelegate`.
|
||||
- Functions: `canModerate(cellId)`, `check(action, cellId?) → { allowed, reason }`, `reasons`.
|
||||
#### `useEthereumWallet()`
|
||||
|
||||
- **`useNetwork()`** → connection state
|
||||
- Data: `isConnected`, `statusMessage`, `issues`, `isHydrated`, `canRefresh`.
|
||||
- Actions: `refresh()` — triggers a light data refresh via core.
|
||||
Low-level access to Ethereum wallet state (advanced use).
|
||||
|
||||
- **`useUIState(key, defaultValue, category?)`** → persisted UI state
|
||||
- Returns `[value, setValue, { loading, error? }]`.
|
||||
- Categories: `'wizardStates' | 'preferences' | 'temporaryStates'` (default `'preferences'`).
|
||||
**Data:**
|
||||
- `address: string | null`
|
||||
- `isConnected: boolean`
|
||||
- `connectors: Connector[]`
|
||||
- `publicClient: PublicClient`
|
||||
- `walletClient: WalletClient`
|
||||
|
||||
- **`useUserDisplay(address)`** → identity details for any address
|
||||
- Returns `{ address, displayName, callSign?, ensName?, verificationStatus, displayPreference, lastUpdated, isLoading, error }`.
|
||||
- Backed by a centralized identity cache; updates propagate automatically.
|
||||
**Actions:**
|
||||
- `connect(connectorId?): Promise<void>`
|
||||
- `disconnect(): Promise<void>`
|
||||
- `signMessage(message): Promise<string>`
|
||||
|
||||
- **`useClient()`** → access the underlying `OpChanClient` (advanced use only).
|
||||
---
|
||||
|
||||
### Notes
|
||||
#### `useClient()`
|
||||
|
||||
- Identity resolution, verification states, and display preferences are centralized and cached;
|
||||
`useUserDisplay` and `useAuth.verifyOwnership()` will keep store and local DB in sync.
|
||||
- This package is UI-agnostic; pair with your component library of choice.
|
||||
Access the underlying `OpChanClient` instance (advanced use only).
|
||||
|
||||
### Runtime requirements
|
||||
```tsx
|
||||
const client = useClient();
|
||||
// Access low-level APIs:
|
||||
// - client.database
|
||||
// - client.delegation
|
||||
// - client.forumActions
|
||||
// - client.userIdentityService
|
||||
// - client.messageManager
|
||||
```
|
||||
|
||||
- Browser Buffer polyfill (for some crypto/wallet libs):
|
||||
```ts
|
||||
import { Buffer } from 'buffer'
|
||||
if (!(window as any).Buffer) (window as any).Buffer = Buffer
|
||||
```
|
||||
- Config values you likely need to pass to `OpChanProvider`:
|
||||
- `wakuConfig` with `contentTopic` and `reliableChannelId`
|
||||
## Usage Patterns
|
||||
|
||||
### License
|
||||
### Pattern 1: Anonymous-First UX
|
||||
|
||||
Allow users to interact immediately without wallet connection:
|
||||
|
||||
```tsx
|
||||
function PostPage() {
|
||||
const { user, permissions } = useForum();
|
||||
|
||||
return (
|
||||
<>
|
||||
{!user.currentUser && (
|
||||
<div>
|
||||
<button onClick={user.connect}>Connect Wallet</button>
|
||||
<button onClick={user.startAnonymous}>Continue Anonymously</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{permissions.canComment && <CommentForm />}
|
||||
|
||||
{user.verificationStatus === 'anonymous' && !user.currentUser?.callSign && (
|
||||
<CallSignPrompt />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 2: Permission-Based UI
|
||||
|
||||
Show/hide features based on user capabilities:
|
||||
|
||||
```tsx
|
||||
function CellActions() {
|
||||
const { permissions } = useForum();
|
||||
const check = permissions.check('canCreateCell');
|
||||
|
||||
return (
|
||||
<div>
|
||||
{check.allowed ? (
|
||||
<CreateCellButton />
|
||||
) : (
|
||||
<p>{check.reason}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 3: Real-Time Content Updates
|
||||
|
||||
Listen to content changes with React state:
|
||||
|
||||
```tsx
|
||||
function PostList({ cellId }: { cellId: string }) {
|
||||
const { postsByCell, pending } = useContent();
|
||||
const posts = postsByCell[cellId] || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{posts.map(post => (
|
||||
<div key={post.id}>
|
||||
{post.title}
|
||||
{pending.isPending(post.id) && <span>Syncing...</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 4: User Identity Display
|
||||
|
||||
Display user information with automatic updates:
|
||||
|
||||
```tsx
|
||||
function UserAvatar({ address }: { address: string }) {
|
||||
const { displayName, ensName, callSign, ensAvatar } = useUserDisplay(address);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ensAvatar && <img src={ensAvatar} alt={displayName} />}
|
||||
<span>{displayName}</span>
|
||||
{ensName && <span className="badge">ENS: {ensName}</span>}
|
||||
{callSign && <span className="badge">#{callSign}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Authentication Flows
|
||||
|
||||
### Anonymous User Flow
|
||||
|
||||
```tsx
|
||||
// 1. Start anonymous session
|
||||
const sessionId = await startAnonymous();
|
||||
|
||||
// 2. User can immediately interact
|
||||
await createPost({ cellId, title, content });
|
||||
await vote({ targetId: postId, isUpvote: true });
|
||||
|
||||
// 3. Optionally set call sign
|
||||
await updateProfile({ callSign: 'my_username' });
|
||||
|
||||
// 4. Later upgrade to wallet if desired
|
||||
await connect();
|
||||
```
|
||||
|
||||
### Wallet User Flow
|
||||
|
||||
```tsx
|
||||
// 1. Connect wallet
|
||||
await connect();
|
||||
// User is now WALLET_CONNECTED
|
||||
|
||||
// 2. Optionally verify ENS ownership
|
||||
const isVerified = await verifyOwnership();
|
||||
// If ENS found, user becomes ENS_VERIFIED
|
||||
|
||||
// 3. Delegate browser keys for better UX
|
||||
await delegate('7days');
|
||||
// Subsequent actions don't require wallet signatures
|
||||
|
||||
// 4. Interact with platform
|
||||
await createCell({ name, description });
|
||||
await createPost({ cellId, title, content });
|
||||
```
|
||||
|
||||
## Type Definitions
|
||||
|
||||
### User
|
||||
|
||||
```typescript
|
||||
type User = {
|
||||
address: string; // 0x${string} for wallet, UUID for anonymous
|
||||
displayName: string;
|
||||
displayPreference: EDisplayPreference;
|
||||
verificationStatus: EVerificationStatus;
|
||||
callSign?: string;
|
||||
ensName?: string;
|
||||
ensAvatar?: string;
|
||||
lastChecked?: number;
|
||||
};
|
||||
```
|
||||
|
||||
### EVerificationStatus
|
||||
|
||||
```typescript
|
||||
enum EVerificationStatus {
|
||||
ANONYMOUS = 'anonymous',
|
||||
WALLET_UNCONNECTED = 'wallet-unconnected',
|
||||
WALLET_CONNECTED = 'wallet-connected',
|
||||
ENS_VERIFIED = 'ens-verified',
|
||||
}
|
||||
```
|
||||
|
||||
### Cell, Post, Comment
|
||||
|
||||
All content types include:
|
||||
- Cryptographic signatures
|
||||
- Author information
|
||||
- Timestamps
|
||||
- Relevance scores
|
||||
- Moderation state
|
||||
|
||||
See `@opchan/core` for detailed type definitions.
|
||||
|
||||
## Advanced Usage
|
||||
|
||||
### Custom Permission Logic
|
||||
|
||||
```tsx
|
||||
function AdminPanel({ cellId }: { cellId: string }) {
|
||||
const { permissions, content } = useForum();
|
||||
const cell = content.cells.find(c => c.id === cellId);
|
||||
|
||||
if (!permissions.canModerate(cellId)) {
|
||||
return <p>Admin access required</p>;
|
||||
}
|
||||
|
||||
return <ModerationTools cell={cell} />;
|
||||
}
|
||||
```
|
||||
|
||||
### Message Pending States
|
||||
|
||||
```tsx
|
||||
function PostWithSyncStatus({ post }: { post: Post }) {
|
||||
const { pending } = useContent();
|
||||
const [isPending, setIsPending] = useState(pending.isPending(post.id));
|
||||
|
||||
useEffect(() => {
|
||||
return pending.onChange(() => {
|
||||
setIsPending(pending.isPending(post.id));
|
||||
});
|
||||
}, [post.id]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{post.title}
|
||||
{isPending && <span className="badge">Syncing...</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Identity Cache Management
|
||||
|
||||
```tsx
|
||||
function UserList({ addresses }: { addresses: string[] }) {
|
||||
return addresses.map(addr => {
|
||||
const display = useUserDisplay(addr);
|
||||
// Identity automatically cached and shared across all components
|
||||
// Updates propagate automatically when user profiles change
|
||||
return <UserCard key={addr} {...display} />;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
### OpChanProvider Config
|
||||
|
||||
```typescript
|
||||
interface OpChanProviderProps {
|
||||
config: {
|
||||
wakuConfig?: {
|
||||
contentTopic?: string;
|
||||
reliableChannelId?: string;
|
||||
};
|
||||
reownProjectId?: string; // For WalletConnect v2
|
||||
};
|
||||
children: React.ReactNode;
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use `useForum()` for most cases** - Cleaner than importing individual hooks
|
||||
2. **Check permissions before showing UI** - Better UX than showing disabled buttons
|
||||
3. **Handle anonymous users gracefully** - Offer both wallet and anonymous options
|
||||
4. **Use `useUserDisplay` for all identity rendering** - Automatic caching and updates
|
||||
5. **Monitor `network.isHydrated`** - Wait for initial data before rendering content
|
||||
6. **Use `pending` helpers** - Show loading states for async operations
|
||||
7. **Preserve verification status** - When updating anonymous users, maintain their status
|
||||
|
||||
## Migration from v1.0
|
||||
|
||||
### Breaking Changes in v2.0
|
||||
|
||||
- Added `ANONYMOUS` verification status
|
||||
- `delegationProof` is now optional in messages
|
||||
- `startAnonymous()` method added to `useAuth()`
|
||||
- Permission checks now support anonymous users
|
||||
- `User.address` is now `string` (was `0x${string}`)
|
||||
|
||||
### Migration Steps
|
||||
|
||||
1. Update permission checks to handle anonymous users
|
||||
2. Update UI to offer anonymous option alongside wallet connection
|
||||
3. Handle both wallet addresses and session IDs in identity display
|
||||
4. Test message verification with optional delegation proofs
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Anonymous users can't interact after setting call sign
|
||||
- Ensure `mapVerificationStatus` includes `ANONYMOUS` case
|
||||
- Check that `updateProfile` preserves `verificationStatus`
|
||||
|
||||
### Wallet sync clearing anonymous sessions
|
||||
- Verify wallet disconnect logic checks for anonymous users before clearing
|
||||
|
||||
### Permission checks failing for anonymous users
|
||||
- Ensure `isAnonymous` is included in permission conditions
|
||||
- Check that `canPost/canComment/canVote` return true for anonymous
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
---
|
||||
|
||||
**Built with ❤️ for decentralized communities**
|
||||
|
||||
@ -64,8 +64,8 @@ export function useAuth() {
|
||||
} catch (e) {
|
||||
console.error('Failed to sync wallet to session', e);
|
||||
}
|
||||
} else if (!wallet.isConnected && currentUser) {
|
||||
// Wallet disconnected - clear session
|
||||
} else if (!wallet.isConnected && currentUser && currentUser.verificationStatus !== EVerificationStatus.ANONYMOUS) {
|
||||
// Wallet disconnected - clear session (but preserve anonymous users)
|
||||
try {
|
||||
await client.database.clearUser();
|
||||
} catch (e) {
|
||||
@ -134,9 +134,14 @@ export function useAuth() {
|
||||
): Promise<boolean> => {
|
||||
const user = currentUser;
|
||||
if (!user) return false;
|
||||
// Only wallet users (not anonymous) can delegate with wallet signature
|
||||
if (user.verificationStatus === EVerificationStatus.ANONYMOUS) {
|
||||
console.warn('Anonymous users cannot create wallet delegations');
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
const ok = await client.delegation.delegate(
|
||||
user.address,
|
||||
user.address as `0x${string}`,
|
||||
duration,
|
||||
wallet.signMessage,
|
||||
);
|
||||
@ -173,6 +178,35 @@ export function useAuth() {
|
||||
}
|
||||
}, [client]);
|
||||
|
||||
const startAnonymous = React.useCallback(async (): Promise<string | null> => {
|
||||
try {
|
||||
const sessionId = await client.delegation.delegateAnonymous('7days');
|
||||
|
||||
const anonymousUser: User = {
|
||||
address: sessionId,
|
||||
displayName: `Anonymous-${sessionId.slice(0, 8)}`,
|
||||
displayPreference: EDisplayPreference.WALLET_ADDRESS,
|
||||
verificationStatus: EVerificationStatus.ANONYMOUS,
|
||||
lastChecked: Date.now(),
|
||||
};
|
||||
|
||||
await client.database.storeUser(anonymousUser);
|
||||
setOpchanState(prev => ({
|
||||
...prev,
|
||||
session: {
|
||||
...prev.session,
|
||||
currentUser: anonymousUser,
|
||||
verificationStatus: EVerificationStatus.ANONYMOUS,
|
||||
},
|
||||
}));
|
||||
|
||||
return sessionId;
|
||||
} catch (e) {
|
||||
console.error('startAnonymous failed', e);
|
||||
return null;
|
||||
}
|
||||
}, [client]);
|
||||
|
||||
const updateProfile = React.useCallback(async (updates: { callSign?: string; displayPreference?: EDisplayPreference }): Promise<boolean> => {
|
||||
const user = currentUser;
|
||||
if (!user) return false;
|
||||
@ -190,6 +224,8 @@ export function useAuth() {
|
||||
const updated: User = {
|
||||
...user,
|
||||
...identity,
|
||||
// Preserve verification status for anonymous users (getIdentity might not return it)
|
||||
verificationStatus: user.verificationStatus,
|
||||
};
|
||||
await client.database.storeUser(updated);
|
||||
setOpchanState(prev => ({ ...prev, session: { ...prev.session, currentUser: updated } }));
|
||||
@ -220,6 +256,7 @@ export function useAuth() {
|
||||
delegate,
|
||||
delegationStatus,
|
||||
clearDelegation,
|
||||
startAnonymous,
|
||||
updateProfile,
|
||||
} as const;
|
||||
}
|
||||
|
||||
@ -6,12 +6,14 @@ export function usePermissions() {
|
||||
const currentUser = session.currentUser;
|
||||
|
||||
const isVerified = session.verificationStatus === EVerificationStatus.ENS_VERIFIED;
|
||||
const isConnected = session.verificationStatus !== EVerificationStatus.WALLET_UNCONNECTED;
|
||||
const isConnected = session.verificationStatus !== EVerificationStatus.WALLET_UNCONNECTED &&
|
||||
session.verificationStatus !== EVerificationStatus.ANONYMOUS;
|
||||
const isAnonymous = session.verificationStatus === EVerificationStatus.ANONYMOUS;
|
||||
|
||||
const canCreateCell = isVerified;
|
||||
const canPost = isConnected;
|
||||
const canComment = isConnected;
|
||||
const canVote = isConnected;
|
||||
const canPost = isConnected || isAnonymous;
|
||||
const canComment = isConnected || isAnonymous;
|
||||
const canVote = isConnected || isAnonymous;
|
||||
|
||||
const canModerate = (cellId: string): boolean => {
|
||||
if (!currentUser) return false;
|
||||
@ -20,9 +22,9 @@ export function usePermissions() {
|
||||
};
|
||||
|
||||
const reasons = {
|
||||
post: canPost ? '' : 'Connect your wallet to post',
|
||||
comment: canComment ? '' : 'Connect your wallet to comment',
|
||||
vote: canVote ? '' : 'Connect your wallet to vote',
|
||||
post: canPost ? '' : 'Connect your wallet or use anonymous mode to post',
|
||||
comment: canComment ? '' : 'Connect your wallet or use anonymous mode to comment',
|
||||
vote: canVote ? '' : 'Connect your wallet or use anonymous mode to vote',
|
||||
createCell: canCreateCell ? '' : 'Verification required to create a cell',
|
||||
moderate: (cellId: string) => (canModerate(cellId) ? '' : 'Only cell owner can moderate'),
|
||||
} as const;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user