chore: linting + improve CSS

app/src/components/ActivityFeed.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
-import { useForumData } from '@/hooks';
+import { useForum } from '@/hooks';
 import { Link } from 'react-router-dom';
 import { formatDistanceToNow } from 'date-fns';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -35,54 +35,48 @@ interface CommentFeedItem extends FeedItemBase {
 type FeedItem = PostFeedItem | CommentFeedItem;
 
 const ActivityFeed: React.FC = () => {
-  // ✅ Use reactive hooks for data
+  const { content, network } = useForum();
-  const forumData = useForumData();
 
-  const {
+  const { posts, comments, cells, commentsByPost } = content;
-    postsWithVoteStatus,
+  const { isConnected } = network;
-    commentsWithVoteStatus,
-    cellsWithStats,
-    isInitialLoading,
-  } = forumData;
 
-  // ✅ Use pre-computed data with vote scores
+
-  const combinedFeed: FeedItem[] = [
+  const combinedFeed: FeedItem[] = useMemo(() => {
-    ...postsWithVoteStatus.map(
+    return [
-      (post): PostFeedItem => ({
+      ...posts.map(
-        id: post.id,
+        (post): PostFeedItem => ({
-        type: 'post',
+          ...post,
-        timestamp: post.timestamp,
+          type: 'post',
-        ownerAddress: post.author,
+          ownerAddress: post.authorAddress,
-        title: post.title,
+          cellId: post.cellId,
-        cellId: post.cellId,
+          postId: post.id,
-        postId: post.id,
+          title: post.title,
-        commentCount: forumData.commentsByPost[post.id]?.length || 0,
+          commentCount: commentsByPost[post.id]?.length || 0,
-        voteCount: post.voteScore,
+          voteCount: post.upvotes.length - post.downvotes.length,
-      })
+        })
-    ),
+      ),
-    ...commentsWithVoteStatus
+      ...comments
-      .map((comment): CommentFeedItem | null => {
+        .map((comment): CommentFeedItem | null => {
-        const parentPost = postsWithVoteStatus.find(
+          const parentPost = posts.find(p => p.id === comment.postId);
-          p => p.id === comment.postId
+          if (!parentPost) return null;
-        );
+          return {
-        if (!parentPost) return null;
+            id: comment.id,
-        return {
+            type: 'comment',
-          id: comment.id,
+            timestamp: comment.timestamp,
-          type: 'comment',
+            ownerAddress: comment.author,
-          timestamp: comment.timestamp,
+            content: comment.content,
-          ownerAddress: comment.author,
+            postId: comment.postId,
-          content: comment.content,
+            cellId: parentPost.cellId,
-          postId: comment.postId,
+            voteCount: comment.upvotes.length - comment.downvotes.length,
-          cellId: parentPost.cellId,
+          };
-          voteCount: comment.voteScore,
+        })
-        };
+        .filter((item): item is CommentFeedItem => item !== null),
-      })
+    ].sort((a, b) => b.timestamp - a.timestamp);
-      .filter((item): item is CommentFeedItem => item !== null),
+  }, [posts, comments, commentsByPost]);
-  ].sort((a, b) => b.timestamp - a.timestamp);
 
   const renderFeedItem = (item: FeedItem) => {
     const cell = item.cellId
-      ? cellsWithStats.find(c => c.id === item.cellId)
+      ? cells.find(c => c.id === item.cellId)
       : undefined;
     const timeAgo = formatDistanceToNow(new Date(item.timestamp), {
       addSuffix: true,
@@ -150,7 +144,7 @@ const ActivityFeed: React.FC = () => {
     );
   };
 
-  if (isInitialLoading) {
+  if (!isConnected) {
     return (
       <div className="space-y-3">
         {[...Array(5)].map((_, i) => (

app/src/components/CellList.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import {  useContent, usePermissions } from '@/hooks';
+import { useContent, usePermissions } from '@/hooks';
 import {
   Layout,
   MessageSquare,
@@ -226,9 +226,7 @@ const CellList = () => {
                 title="Refresh data"
                 className="px-3 border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
               >
-                <RefreshCw
+                <RefreshCw className="w-4 h-4" />
-                  className="w-4 h-4"
-                />
               </Button>
 
               {canCreateCell && <CreateCellDialog />}

app/src/components/CommentCard.tsx

@@ -61,10 +61,14 @@ const CommentCard: React.FC<CommentCardProps> = ({
   // Use library pending API
   const commentVotePending = content.pending.isPending(comment.id);
 
-  const score = comment.voteScore ?? 0;
+  const score = comment.upvotes.length - comment.downvotes.length;
   const isModerated = Boolean(comment.moderated);
-  const userDownvoted = Boolean(comment.downvotes.some(v => v.author === currentUser?.address));
+  const userDownvoted = Boolean(
-  const userUpvoted = Boolean(comment.upvotes.some(v => v.author === currentUser?.address));  
+    comment.downvotes.some(v => v.author === currentUser?.address)
+  );
+  const userUpvoted = Boolean(
+    comment.upvotes.some(v => v.author === currentUser?.address)
+  );
   const isOwnComment = currentUser?.address === comment.author;
 
   const handleVoteComment = async (isUpvote: boolean) => {
@@ -86,7 +90,9 @@ const CommentCard: React.FC<CommentCardProps> = ({
         <div className="flex flex-col items-center">
           <button
             className={`p-1 rounded-sm hover:bg-cyber-muted/50 ${
-              userUpvoted ? 'text-cyber-accent' : 'text-cyber-neutral hover:text-cyber-accent'
+              userUpvoted
+                ? 'text-cyber-accent'
+                : 'text-cyber-neutral hover:text-cyber-accent'
             }`}
             onClick={() => handleVoteComment(true)}
             disabled={!permissions.canVote}
@@ -99,7 +105,9 @@ const CommentCard: React.FC<CommentCardProps> = ({
           <span className="text-sm font-bold">{score}</span>
           <button
             className={`p-1 rounded-sm hover:bg-cyber-muted/50 ${
-              userDownvoted ? 'text-cyber-accent' : 'text-cyber-neutral hover:text-cyber-accent'
+              userDownvoted
+                ? 'text-cyber-accent'
+                : 'text-cyber-neutral hover:text-cyber-accent'
             }`}
             onClick={() => handleVoteComment(false)}
             disabled={!permissions.canVote}

app/src/components/CreateCellDialog.tsx

@@ -79,7 +79,8 @@ export function CreateCellDialog({
     if (!canCreateCell) {
       toast({
         title: 'Permission Denied',
-        description: 'Only verified ENS or Logos Ordinal owners can create cells.',
+        description:
+          'Only verified ENS or Logos Ordinal owners can create cells.',
         variant: 'destructive',
       });
       return;

app/src/components/FeedSidebar.tsx

@@ -4,16 +4,15 @@ import { TrendingUp, Users, Eye, CheckCircle } from 'lucide-react';
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import {  useAuth, useContent } from '@/hooks';
+import { useAuth, useContent } from '@/hooks';
 import { EVerificationStatus } from '@opchan/core';
 import { CypherImage } from '@/components/ui/CypherImage';
 
 const FeedSidebar: React.FC = () => {
-  const {cells, posts, comments, cellsWithStats, userVerificationStatus} = useContent();
+  const { cells, posts, comments, cellsWithStats, userVerificationStatus } =
+    useContent();
   const { currentUser, verificationStatus } = useAuth();
 
-
-
   const stats = {
     totalCells: cells.length,
     totalPosts: posts.length,
@@ -61,7 +60,9 @@ const FeedSidebar: React.FC = () => {
                 <Users className="w-5 h-5 text-cyber-accent" />
               </div>
               <div className="flex-1">
-                <div className="font-medium text-sm">{currentUser?.displayName}</div>
+                <div className="font-medium text-sm">
+                  {currentUser?.displayName}
+                </div>
                 <Badge
                   variant="secondary"
                   className={`${verificationBadge.color} text-white text-xs`}

app/src/components/Header.tsx

@@ -49,9 +49,9 @@ import { WakuHealthDot } from '@/components/ui/waku-health-indicator';
 
 const Header = () => {
   const { currentUser, delegationInfo } = useAuth();
-  const {statusMessage} = useNetwork();
+  const { statusMessage } = useNetwork();
 
-  const location = useLocation()
+  const location = useLocation();
   const { toast } = useToast();
   const { content } = useForum();
 
@@ -65,7 +65,10 @@ const Header = () => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   // Use centralized UI state instead of direct LocalDatabase access
-  const [hasShownWizard, setHasShownWizard] = useUIState('hasShownWalletWizard', false);
+  const [hasShownWizard, setHasShownWizard] = useUIState(
+    'hasShownWalletWizard',
+    false
+  );
 
   // Auto-open wizard when wallet connects for the first time
   React.useEffect(() => {
@@ -109,23 +112,26 @@ const Header = () => {
     }
   };
 
-
   useEffect(() => {
-    console.log('currentUser', currentUser)
+    console.log('currentUser', currentUser);
-  }, [currentUser])
+  }, [currentUser]);
 
   const getStatusIcon = () => {
     if (!isConnected) return <CircleSlash className="w-4 h-4" />;
 
     if (
-      currentUser?.verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED &&
+      currentUser?.verificationStatus ===
+        EVerificationStatus.ENS_ORDINAL_VERIFIED &&
       delegationInfo?.isValid
     ) {
       return <CheckCircle className="w-4 h-4" />;
-    } else if (currentUser?.verificationStatus === EVerificationStatus.WALLET_CONNECTED) {
+    } else if (
+      currentUser?.verificationStatus === EVerificationStatus.WALLET_CONNECTED
+    ) {
       return <AlertTriangle className="w-4 h-4" />;
     } else if (
-      currentUser?.verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED
+      currentUser?.verificationStatus ===
+      EVerificationStatus.ENS_ORDINAL_VERIFIED
     ) {
       return <Key className="w-4 h-4" />;
     } else {
@@ -197,11 +203,13 @@ const Header = () => {
                   >
                     {getStatusIcon()}
                     <span className="ml-1">
-                      {currentUser?.verificationStatus === EVerificationStatus.WALLET_UNCONNECTED
+                      {currentUser?.verificationStatus ===
+                      EVerificationStatus.WALLET_UNCONNECTED
                         ? 'CONNECT'
                         : delegationInfo?.isValid
                           ? 'READY'
-                          : currentUser?.verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED
+                          : currentUser?.verificationStatus ===
+                              EVerificationStatus.ENS_ORDINAL_VERIFIED
                             ? 'EXPIRED'
                             : 'DELEGATE'}
                     </span>
@@ -215,7 +223,9 @@ const Header = () => {
                         size="sm"
                         className="flex items-center space-x-2 text-white hover:bg-cyber-muted/30"
                       >
-                        <div className="text-sm font-mono">{currentUser?.displayName}</div>
+                        <div className="text-sm font-mono">
+                          {currentUser?.displayName}
+                        </div>
                         <Settings className="w-4 h-4" />
                       </Button>
                     </DropdownMenuTrigger>

app/src/components/PostCard.tsx

@@ -2,59 +2,52 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { ArrowUp, ArrowDown, MessageSquare } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
-import type { Post, PostMessage } from '@opchan/core';
+import type { Post } from '@opchan/core';
 import { RelevanceIndicator } from '@/components/ui/relevance-indicator';
 import { AuthorDisplay } from '@/components/ui/author-display';
 import { BookmarkButton } from '@/components/ui/bookmark-button';
 import { LinkRenderer } from '@/components/ui/link-renderer';
-import { useContent, usePermissions } from '@/hooks';
+import { useAuth, useContent, usePermissions } from '@/hooks';
 import { ShareButton } from '@/components/ui/ShareButton';
 
 interface PostCardProps {
-  post: Post | PostMessage;
+  post: Post;
-  commentCount?: number;
 }
 
-const PostCard: React.FC<PostCardProps> = ({ post, commentCount = 0 }) => {
+const PostCard: React.FC<PostCardProps> = ({ post }) => {
-  const content = useContent();
+  const {
+    bookmarks,
+    pending,
+    vote,
+    togglePostBookmark,
+    cells,
+    commentsByPost,
+  } = useContent();
   const permissions = usePermissions();
+  const { currentUser } = useAuth();
 
-  // Get cell data from content
+  const cellName = cells.find(c => c.id === post.cellId)?.name || 'unknown';
-  const cell = content.cells.find((c) => c.id === post.cellId);
+  const commentCount = commentsByPost[post.id]?.length || 0;
-  const cellName = cell?.name || 'unknown';
 
-  // Use pre-computed vote data or safely compute from arrays when available
+  const isPending = pending.isPending(post.id);
-  const computedVoteScore =
-    'voteScore' in post && typeof (post as Post).voteScore === 'number'
-      ? (post as Post).voteScore
-      : undefined;
-  const upvoteCount =
-    'upvotes' in post && Array.isArray((post as Post).upvotes)
-      ? (post as Post).upvotes.length
-      : 0;
-  const downvoteCount =
-    'downvotes' in post && Array.isArray((post as Post).downvotes)
-      ? (post as Post).downvotes.length
-      : 0;
-  const score = computedVoteScore ?? upvoteCount - downvoteCount;
 
-  // Use library pending API
+  const isBookmarked = bookmarks.some(
-  const isPending = content.pending.isPending(post.id);
+    b => b.targetId === post.id && b.type === 'post'
-
+  );
-  // Get user vote status from post data
-  const userUpvoted =
-    (post as unknown as { userUpvoted?: boolean }).userUpvoted || false;
-  const userDownvoted =
-    (post as unknown as { userDownvoted?: boolean }).userDownvoted || false;
-
-  // Check if bookmarked
-  const isBookmarked = content.bookmarks.some((b) => b.targetId === post.id && b.type === 'post');
   const [bookmarkLoading, setBookmarkLoading] = React.useState(false);
 
-  // Remove duplicate vote status logic
+  const score = post.upvotes.length - post.downvotes.length;
+  const userUpvoted = Boolean(
+    post.upvotes.some(v => v.author === currentUser?.address)
+  );
+  const userDownvoted = Boolean(
+    post.downvotes.some(v => v.author === currentUser?.address)
+  );
 
-  // ✅ Content truncation (simple presentation logic is OK)
+  const contentText =
-  const contentText = typeof post.content === 'string' ? post.content : String(post.content ?? '');
+    typeof post.content === 'string'
+      ? post.content
+      : String(post.content ?? '');
   const contentPreview =
     contentText.length > 200
       ? contentText.substring(0, 200) + '...'
@@ -62,7 +55,7 @@ const PostCard: React.FC<PostCardProps> = ({ post, commentCount = 0 }) => {
 
   const handleVote = async (e: React.MouseEvent, isUpvote: boolean) => {
     e.preventDefault();
-    await content.vote({ targetId: post.id, isUpvote });
+    await vote({ targetId: post.id, isUpvote });
   };
 
   const handleBookmark = async (e?: React.MouseEvent) => {
@@ -72,7 +65,7 @@ const PostCard: React.FC<PostCardProps> = ({ post, commentCount = 0 }) => {
     }
     setBookmarkLoading(true);
     try {
-      await content.togglePostBookmark(post, post.cellId);
+      await togglePostBookmark(post, post.cellId);
     } finally {
       setBookmarkLoading(false);
     }
@@ -97,13 +90,7 @@ const PostCard: React.FC<PostCardProps> = ({ post, commentCount = 0 }) => {
           </button>
 
           <span
-            className={`text-sm font-medium px-1 ${
+            className={`text-sm font-medium px-1`}
-              score > 0
-                ? 'text-cyber-accent'
-                : score < 0
-                  ? 'text-blue-400'
-                  : 'text-cyber-neutral'
-            }`}
           >
             {score}
           </span>
@@ -130,9 +117,17 @@ const PostCard: React.FC<PostCardProps> = ({ post, commentCount = 0 }) => {
           <div className="block hover:opacity-80">
             {/* Post metadata */}
             <div className="flex items-center text-xs text-cyber-neutral mb-2 space-x-2">
-              <span className="font-medium text-cyber-accent">
+              <Link
-                r/{cellName}
+                to={cellName ? `/cell/${post.cellId}` : "#"}
-              </span>
+                className="font-medium text-cyber-accent hover:underline focus:underline"
+                tabIndex={0}
+                onClick={e => {
+                  if (!cellName) e.preventDefault();
+                }}
+                title={cellName ? `Go to /${cellName}` : undefined}
+              >
+                r/{cellName || 'unknown'}
+              </Link>
               <span>•</span>
               <span>Posted by u/</span>
               <AuthorDisplay
@@ -146,18 +141,23 @@ const PostCard: React.FC<PostCardProps> = ({ post, commentCount = 0 }) => {
                   addSuffix: true,
                 })}
               </span>
-              {('relevanceScore' in post) && typeof (post as Post).relevanceScore === 'number' && (
+              {'relevanceScore' in post &&
-                <>
+                typeof (post as Post).relevanceScore === 'number' && (
-                  <span>•</span>
+                  <>
-                  <RelevanceIndicator
+                    <span>•</span>
-                    score={(post as Post).relevanceScore as number}
+                    <RelevanceIndicator
-                    details={('relevanceDetails' in post ? (post as Post).relevanceDetails : undefined)}
+                      score={(post as Post).relevanceScore as number}
-                    type="post"
+                      details={
-                    className="text-xs"
+                        'relevanceDetails' in post
-                    showTooltip={true}
+                          ? (post as Post).relevanceDetails
-                  />
+                          : undefined
-                </>
+                      }
-              )}
+                      type="post"
+                      className="text-xs"
+                      showTooltip={true}
+                    />
+                  </>
+                )}
             </div>
 
             {/* Post title and content - clickable to navigate to post */}

app/src/components/PostDetail.tsx

@@ -17,7 +17,7 @@ import { AuthorDisplay } from './ui/author-display';
 import { BookmarkButton } from './ui/bookmark-button';
 import { MarkdownRenderer } from './ui/markdown-renderer';
 import CommentCard from './CommentCard';
-import { useContent, usePermissions } from '@/hooks';
+import { useAuth, useContent, usePermissions } from '@/hooks';
 import type { Cell as ForumCell } from '@opchan/core';
 import { ShareButton } from './ui/ShareButton';
 
@@ -28,17 +28,19 @@ const PostDetail = () => {
   // Use aggregated forum API
   const content = useContent();
   const permissions = usePermissions();
-
+  const { currentUser } = useAuth();
   // Get post and comments using focused hooks
-  const post = content.posts.find((p) => p.id === postId);
+  const post = content.posts.find(p => p.id === postId);
-  const visibleComments = postId ? content.commentsByPost[postId] ?? [] : [];
+  const visibleComments = postId ? (content.commentsByPost[postId] ?? []) : [];
 
   // Use library pending API
   const postPending = content.pending.isPending(post?.id);
   const postVotePending = content.pending.isPending(post?.id);
 
   // Check if bookmarked
-  const isBookmarked = content.bookmarks.some((b) => b.targetId === post?.id && b.type === 'post');
+  const isBookmarked = content.bookmarks.some(
+    b => b.targetId === post?.id && b.type === 'post'
+  );
   const [bookmarkLoading, setBookmarkLoading] = React.useState(false);
 
   const [newComment, setNewComment] = useState('');
@@ -115,11 +117,13 @@ const PostDetail = () => {
     }
   };
 
-  // Get vote status from post data (enhanced posts only)
+  const score = post.upvotes.length - post.downvotes.length;
-  const enhanced = post as unknown as { userUpvoted?: boolean; userDownvoted?: boolean; voteScore?: number };
+  const isPostUpvoted = Boolean(
-  const isPostUpvoted = Boolean(enhanced.userUpvoted);
+    post.upvotes.some(v => v.author === currentUser?.address)
-  const isPostDownvoted = Boolean(enhanced.userDownvoted);
+  );
-  const score = typeof enhanced.voteScore === 'number' ? enhanced.voteScore : 0;
+  const isPostDownvoted = Boolean(
+    post.downvotes.some(v => v.author === currentUser?.address)
+  );
 
   const handleModerateComment = async (commentId: string) => {
     const reason =
@@ -160,7 +164,9 @@ const PostDetail = () => {
             <div className="flex flex-col items-center">
               <button
                 className={`p-1 rounded-sm hover:bg-muted/50 ${
-                  isPostUpvoted ? 'text-primary' : ''
+                  isPostUpvoted
+                    ? 'text-cyber-accent'
+                    : 'text-cyber-neutral hover:text-cyber-accent'
                 }`}
                 onClick={() => handleVotePost(true)}
                 disabled={!permissions.canVote}
@@ -173,7 +179,9 @@ const PostDetail = () => {
               <span className="text-sm font-bold">{score}</span>
               <button
                 className={`p-1 rounded-sm hover:bg-muted/50 ${
-                  isPostDownvoted ? 'text-primary' : ''
+                  isPostDownvoted
+                    ? 'text-cyber-accent'
+                    : 'text-cyber-neutral hover:text-cyber-accent'
                 }`}
                 onClick={() => handleVotePost(false)}
                 disabled={!permissions.canVote}
@@ -194,9 +202,17 @@ const PostDetail = () => {
 
             <div className="flex-1">
               <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
-                <span className="font-medium text-primary">
+                <Link
+                  to={cell?.id ? `/cell/${cell.id}` : "#"}
+                  className="font-medium text-primary hover:underline focus:underline"
+                  tabIndex={0}
+                  onClick={e => {
+                    if (!cell?.id) e.preventDefault();
+                  }}
+                  title={cell?.name ? `Go to /${cell.name}` : undefined}
+                >
                   r/{cell?.name || 'unknown'}
-                </span>
+                </Link>
                 <span>•</span>
                 <span>Posted by u/</span>
                 <AuthorDisplay
@@ -279,9 +295,7 @@ const PostDetail = () => {
 
       {!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">
+          <p className="text-sm mb-3">Connect your wallet to comment</p>
-            Connect your wallet to comment
-          </p>
           <Button asChild size="sm">
             <Link to="/">Connect Wallet</Link>
           </Button>
@@ -306,7 +320,7 @@ const PostDetail = () => {
             </p>
           </div>
         ) : (
-          visibleComments.map((comment) => (
+          visibleComments.map(comment => (
             <CommentCard
               key={comment.id}
               comment={comment}

app/src/components/PostList.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { usePermissions, useAuth, useContent } from '@/hooks';
-import type { Post as ForumPost, Cell as ForumCell, VoteMessage } from '@opchan/core';
+import type {
+  Post as ForumPost,
+  Cell as ForumCell,
+  VoteMessage,
+} from '@opchan/core';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
@@ -31,8 +35,8 @@ import {
 const PostList = () => {
   const { cellId } = useParams<{ cellId: string }>();
 
-  // ✅ Use reactive hooks for data and actions
+  const { createPost, vote, moderate, refresh, commentsByPost, cells, posts } =
-  const { createPost, vote, moderate, refresh, commentsByPost, cells, posts } = useContent();
+    useContent();
   const cell = cells.find((c: ForumCell) => c.id === cellId);
   const isCreatingPost = false;
   const isVoting = false;
@@ -101,7 +105,11 @@ const PostList = () => {
     if (!newPostContent.trim()) return;
 
     // ✅ All validation handled in hook
-    const post = await createPost({ cellId, title: newPostTitle, content: newPostContent });
+    const post = await createPost({
+      cellId,
+      title: newPostTitle,
+      content: newPostContent,
+    });
     if (post) {
       setNewPostTitle('');
       setNewPostContent('');
@@ -129,8 +137,12 @@ const PostList = () => {
     if (!currentUser) return null;
     const p = posts.find((p: ForumPost) => p.id === postId);
     if (!p) return null;
-    const up = p.upvotes.some((v: VoteMessage) => v.author === currentUser.address);
+    const up = p.upvotes.some(
-    const down = p.downvotes.some((v: VoteMessage) => v.author === currentUser.address);
+      (v: VoteMessage) => v.author === currentUser.address
+    );
+    const down = p.downvotes.some(
+      (v: VoteMessage) => v.author === currentUser.address
+    );
     return up ? 'upvote' : down ? 'downvote' : null;
   };
 
@@ -248,9 +260,7 @@ const PostList = () => {
 
       {!canPost && !currentUser && (
         <div className="section-spacing content-card-sm text-center">
-          <p className="text-sm mb-3">
+          <p className="text-sm mb-3">Connect your wallet to post</p>
-            Connect your wallet to post
-          </p>
           <Button asChild size="sm">
             <Link to="/">Connect Wallet</Link>
           </Button>
@@ -277,9 +287,7 @@ const PostList = () => {
                     className={`p-1 rounded-sm hover:bg-cyber-muted/50 ${getPostVoteType(post.id) === 'upvote' ? 'text-cyber-accent' : ''}`}
                     onClick={() => handleVotePost(post.id, true)}
                     disabled={!canVote || isVoting}
-                    title={
+                    title={canVote ? 'Upvote' : 'Connect your wallet to vote'}
-                      canVote ? 'Upvote' : 'Connect your wallet to vote'
-                    }
                   >
                     <ArrowUp className="w-4 h-4" />
                   </button>
@@ -290,9 +298,7 @@ const PostList = () => {
                     className={`p-1 rounded-sm hover:bg-cyber-muted/50 ${getPostVoteType(post.id) === 'downvote' ? 'text-cyber-accent' : ''}`}
                     onClick={() => handleVotePost(post.id, false)}
                     disabled={!canVote || isVoting}
-                    title={
+                    title={canVote ? 'Downvote' : 'Connect your wallet to vote'}
-                      canVote ? 'Downvote' : 'Connect your wallet to vote'
-                    }
                   >
                     <ArrowDown className="w-4 h-4" />
                   </button>

app/src/components/ui/CypherImage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 type CypherImageProps = {
   src?: string;

app/src/components/ui/ShareButton.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { Share2 } from 'lucide-react';
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { useToast } from '../ui/use-toast';
 
 interface ShareButtonProps {

app/src/components/ui/accordion.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Accordion = AccordionPrimitive.Root;
 

app/src/components/ui/alert-dialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { buttonVariants } from '@/components/ui/button-variants';
 
 const AlertDialog = AlertDialogPrimitive.Root;

app/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const alertVariants = cva(
   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',

app/src/components/ui/author-display.tsx

@@ -14,11 +14,12 @@ export function AuthorDisplay({
   className = '',
   showBadge = true,
 }: AuthorDisplayProps) {
-  const { ensName, ordinalDetails, callSign, displayName } = useUserDisplay(address);
+  const { ensName, ordinalDetails, callSign, displayName } =
+    useUserDisplay(address);
 
-  useEffect(()=> {
+  useEffect(() => {
-    console.log({ensName, ordinalDetails, callSign, displayName, address})
+    console.log({ ensName, ordinalDetails, callSign, displayName, address });
-  }, [address, ensName, ordinalDetails, callSign, displayName])
+  }, [address, ensName, ordinalDetails, callSign, displayName]);
 
   // Only show a badge if the author has ENS, Ordinal, or Call Sign
   const shouldShowBadge = showBadge && (ensName || ordinalDetails || callSign);

app/src/components/ui/avatar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

app/src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',

app/src/components/ui/bookmark-button.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui/button';
 import { Bookmark, BookmarkCheck } from 'lucide-react';
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 interface BookmarkButtonProps {
   isBookmarked: boolean;

app/src/components/ui/bookmark-card.tsx

@@ -10,7 +10,7 @@ import {
 } from 'lucide-react';
 import { Bookmark, BookmarkType } from '@opchan/core';
 import { useUserDisplay } from '@opchan/react';
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { formatDistanceToNow } from 'date-fns';
 import { useNavigate } from 'react-router-dom';
 

app/src/components/ui/breadcrumb.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,

app/src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { buttonVariants } from './button-variants';
 
 export interface ButtonProps

app/src/components/ui/calendar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DayPicker } from 'react-day-picker';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { buttonVariants } from '@/components/ui/button-variants';
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;

app/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,

app/src/components/ui/carousel.tsx

@@ -4,7 +4,7 @@ import useEmblaCarousel, {
 } from 'embla-carousel-react';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { Button } from '@/components/ui/button';
 
 type CarouselApi = UseEmblaCarouselType[1];

app/src/components/ui/chart.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: '', dark: '.dark' } as const;

app/src/components/ui/checkbox.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

app/src/components/ui/command.tsx

@@ -3,7 +3,7 @@ import { type DialogProps } from '@radix-ui/react-dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 
 const Command = React.forwardRef<

app/src/components/ui/context-menu.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const ContextMenu = ContextMenuPrimitive.Root;
 

app/src/components/ui/delegation-step.tsx

@@ -194,7 +194,9 @@ export function DelegationStep({
           {/* User Address */}
           {currentUser && (
             <div className="text-xs text-neutral-400">
-              <div className="font-mono break-all">{currentUser.displayName}</div>
+              <div className="font-mono break-all">
+                {currentUser.displayName}
+              </div>
             </div>
           )}
 

app/src/components/ui/dialog.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Dialog = DialogPrimitive.Root;
 

app/src/components/ui/drawer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Drawer = ({
   shouldScaleBackground = true,

app/src/components/ui/dropdown-menu.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

app/src/components/ui/form.tsx

@@ -10,7 +10,7 @@ import {
   useFormContext,
 } from 'react-hook-form';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { Label } from '@/components/ui/label';
 
 const Form = FormProvider;

app/src/components/ui/hover-card.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const HoverCard = HoverCardPrimitive.Root;
 

app/src/components/ui/input-otp.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { OTPInput, OTPInputContext } from 'input-otp';
 import { Dot } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,

app/src/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
   ({ className, type, ...props }, ref) => {

app/src/components/ui/label.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'

app/src/components/ui/menubar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const MenubarMenu = MenubarPrimitive.Menu;
 

app/src/components/ui/moderation-toggle.tsx

@@ -8,8 +8,14 @@ export function ModerationToggle() {
   const { canModerate } = usePermissions();
   const { cellsWithStats } = useContent();
 
-  const [showModerated, setShowModerated] = useUIState<boolean>('showModerated', false);
+  const [showModerated, setShowModerated] = useUIState<boolean>(
-  const toggleShowModerated = React.useCallback((value: boolean) => setShowModerated(value), [setShowModerated]);
+    'showModerated',
+    false
+  );
+  const toggleShowModerated = React.useCallback(
+    (value: boolean) => setShowModerated(value),
+    [setShowModerated]
+  );
 
   // Check if user is admin of any cell
   const isAdminOfAnyCell = cellsWithStats.some(cell => canModerate(cell.id));

app/src/components/ui/navigation-menu.tsx

@@ -3,7 +3,7 @@ import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cva } from 'class-variance-authority';
 import { ChevronDown } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,

app/src/components/ui/pagination.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { ButtonProps } from '@/components/ui/button';
 import { buttonVariants } from '@/components/ui/button-variants';
 

app/src/components/ui/popover.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Popover = PopoverPrimitive.Root;
 

app/src/components/ui/progress.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,

app/src/components/ui/radio-group.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { Circle } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,

app/src/components/ui/resizable-textarea.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Resizable } from 're-resizable';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { Textarea } from '@/components/ui/textarea';
 
 type ResizableTextareaProps =

app/src/components/ui/resizable.tsx

@@ -1,7 +1,7 @@
 import { GripVertical } from 'lucide-react';
 import * as ResizablePrimitive from 'react-resizable-panels';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const ResizablePanelGroup = ({
   className,

app/src/components/ui/scroll-area.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,

app/src/components/ui/select.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Select = SelectPrimitive.Root;
 

app/src/components/ui/separator.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

app/src/components/ui/sheet.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
 import * as React from 'react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Sheet = SheetPrimitive.Root;
 

app/src/components/ui/sidebar.tsx

@@ -4,7 +4,7 @@ import { VariantProps, cva } from 'class-variance-authority';
 import { PanelLeft } from 'lucide-react';
 
 import { useIsMobile } from '@/hooks/use-mobile';
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';

app/src/components/ui/switch.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

app/src/components/ui/table.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,

app/src/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Tabs = TabsPrimitive.Root;
 

app/src/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const Textarea = React.forwardRef<
   HTMLTextAreaElement,

app/src/components/ui/toast.tsx

@@ -3,7 +3,7 @@ import * as ToastPrimitives from '@radix-ui/react-toast';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { X } from 'lucide-react';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const ToastProvider = ToastPrimitives.Provider;
 

app/src/components/ui/toggle-group.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { toggleVariants } from '@/components/ui/toggle-variants';
 
 const ToggleGroupContext = React.createContext<

app/src/components/ui/toggle.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 import { toggleVariants } from './toggle-variants';
 
 const Toggle = React.forwardRef<

app/src/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 

app/src/components/ui/verification-step.tsx

@@ -39,7 +39,9 @@ export function VerificationStep({
       verificationResult?.success &&
       verificationResult.message.includes('Checking ownership')
     ) {
-      const hasOwnership = currentUser?.verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED;
+      const hasOwnership =
+        currentUser?.verificationStatus ===
+        EVerificationStatus.ENS_ORDINAL_VERIFIED;
 
       if (hasOwnership) {
         setVerificationResult({
@@ -115,7 +117,9 @@ export function VerificationStep({
   };
 
   const getVerificationType = () => {
-    return currentUser?.walletType === 'bitcoin' ? 'Bitcoin Ordinal' : 'Ethereum ENS';
+    return currentUser?.walletType === 'bitcoin'
+      ? 'Bitcoin Ordinal'
+      : 'Ethereum ENS';
   };
 
   const getVerificationIcon = () => {
@@ -123,7 +127,9 @@ export function VerificationStep({
   };
 
   const getVerificationColor = () => {
-    return currentUser?.walletType === 'bitcoin' ? 'text-orange-500' : 'text-blue-500';
+    return currentUser?.walletType === 'bitcoin'
+      ? 'text-orange-500'
+      : 'text-blue-500';
   };
 
   const getVerificationDescription = () => {
@@ -206,7 +212,9 @@ export function VerificationStep({
   }
 
   // Show verification status
-  if (currentUser?.verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED) {
+  if (
+    currentUser?.verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED
+  ) {
     return (
       <div className="flex flex-col h-full">
         <div className="flex-1 space-y-4">
@@ -222,8 +230,12 @@ export function VerificationStep({
             </p>
             {currentUser && (
               <div className="text-xs text-neutral-400">
-                {currentUser?.walletType === 'bitcoin' && <p>Ordinal ID: Verified</p>}
+                {currentUser?.walletType === 'bitcoin' && (
-                {currentUser?.walletType === 'ethereum' && <p>ENS Name: Verified</p>}
+                  <p>Ordinal ID: Verified</p>
+                )}
+                {currentUser?.walletType === 'ethereum' && (
+                  <p>ENS Name: Verified</p>
+                )}
               </div>
             )}
           </div>

app/src/components/ui/waku-health-indicator.tsx

@@ -1,6 +1,6 @@
 import { Wifi, WifiOff, CheckCircle } from 'lucide-react';
 import { useNetwork } from '@opchan/react';
-import { cn } from '../../utils'
+import { cn } from '../../utils';
 
 interface WakuHealthIndicatorProps {
   className?: string;
@@ -13,7 +13,7 @@ export function WakuHealthIndicator({
   showText = true,
   size = 'md',
 }: WakuHealthIndicatorProps) {
-  const {isConnected, statusMessage} = useNetwork();
+  const { isConnected, statusMessage } = useNetwork();
 
   const getIcon = () => {
     if (isConnected === true) {
@@ -61,7 +61,8 @@ export function WakuHealthIndicator({
  */
 export function WakuHealthDot({ className }: { className?: string }) {
   const { isConnected } = useNetwork();
-  const statusColor = isConnected === true ? 'green' : isConnected === false ? 'red' : 'gray';
+  const statusColor =
+    isConnected === true ? 'green' : isConnected === false ? 'red' : 'gray';
 
   return (
     <div

app/src/components/ui/wallet-dialog.tsx

@@ -194,7 +194,9 @@ export function WalletConnectionDialog({
                 </p>
                 <p className="text-sm text-neutral-300 mb-2">Address:</p>
                 <p className="text-xs font-mono text-neutral-400 break-all">
-                  {activeAddress ? `${activeAddress.slice(0, 6)}...${activeAddress.slice(-4)}` : ''}
+                  {activeAddress
+                    ? `${activeAddress.slice(0, 6)}...${activeAddress.slice(-4)}`
+                    : ''}
                 </p>
               </div>
 

app/src/components/ui/wallet-wizard.tsx

@@ -29,8 +29,13 @@ export function WalletWizard({
 }: WalletWizardProps) {
   const [currentStep, setCurrentStep] = React.useState<WizardStep>(1);
   const [isLoading, setIsLoading] = React.useState(false);
-  const [delegationStatus, setDelegationStatus] = React.useState<boolean>(false);
+  const [delegationStatus, setDelegationStatus] =
-  const { isAuthenticated, verificationStatus, delegationStatus: getDelegationStatus } = useAuth();
+    React.useState<boolean>(false);
+  const {
+    isAuthenticated,
+    verificationStatus,
+    delegationStatus: getDelegationStatus,
+  } = useAuth();
 
   // Reset wizard when opened - always start at step 1 for simplicity
   React.useEffect(() => {
@@ -43,9 +48,11 @@ export function WalletWizard({
   // Load delegation status when component mounts or when user changes
   React.useEffect(() => {
     if (isAuthenticated) {
-      getDelegationStatus().then(status => {
+      getDelegationStatus()
-        setDelegationStatus(status.isValid);
+        .then(status => {
-      }).catch(console.error);
+          setDelegationStatus(status.isValid);
+        })
+        .catch(console.error);
     } else {
       setDelegationStatus(false);
     }

app/src/hooks/index.ts

@@ -1,11 +1,9 @@
-
 export {
-  useAuth ,
+  useAuth,
-  useForum ,
+  useForum,
   useNetwork,
   usePermissions,
   useContent,
   useUIState,
   useUserDisplay,
 } from '@opchan/react';
-

app/src/main.tsx

@@ -14,7 +14,9 @@ if (!(window as Window & typeof globalThis).Buffer) {
 createRoot(document.getElementById('root')!).render(
   <WagmiProvider config={config}>
     <AppKitProvider {...appkitConfig}>
-      <OpchanWithAppKit config={{ ordiscanApiKey: '6bb07766-d98c-4ddd-93fb-6a0e94d629dd' }}>
+      <OpchanWithAppKit
+        config={{ ordiscanApiKey: '6bb07766-d98c-4ddd-93fb-6a0e94d629dd' }}
+      >
         <App />
       </OpchanWithAppKit>
     </AppKitProvider>

app/src/pages/BookmarksPage.tsx

@@ -53,8 +53,12 @@ const BookmarksPage = () => {
     );
   }
 
-  const postBookmarks = bookmarks.filter(bookmark => bookmark.type === BookmarkType.POST);
+  const postBookmarks = bookmarks.filter(
-  const commentBookmarks = bookmarks.filter(bookmark => bookmark.type === BookmarkType.COMMENT);
+    bookmark => bookmark.type === BookmarkType.POST
+  );
+  const commentBookmarks = bookmarks.filter(
+    bookmark => bookmark.type === BookmarkType.COMMENT
+  );
 
   const getFilteredBookmarks = () => {
     switch (activeTab) {
@@ -79,7 +83,6 @@ const BookmarksPage = () => {
     await clearAllBookmarks();
   };
 
-
   return (
     <div className="page-container">
       <Header />

app/src/pages/FeedPage.tsx

@@ -20,15 +20,17 @@ const FeedPage: React.FC = () => {
   const { verificationStatus } = useAuth();
   const [sortOption, setSortOption] = useState<SortOption>('relevance');
 
-
+  const allPosts = useMemo(
-  // Build sorted posts from content slices
+    () => sortPosts([...content.posts], sortOption),
-  const allPosts = useMemo(() => sortPosts([...content.posts], sortOption), [content.posts, sortOption]);
+    [content.posts, sortOption]
-
+  );
-  // ✅ Get comment count from filtered organized data
-  const getCommentCount = (postId: string) => (content.commentsByPost[postId] || []).length;
 
   // Loading skeleton
-  if (!content.posts.length && !content.comments.length && !content.cells.length) {
+  if (
+    !content.posts.length &&
+    !content.comments.length &&
+    !content.cells.length
+  ) {
     return (
       <div className="min-h-screen bg-cyber-dark">
         <div className="container mx-auto px-4 py-6 max-w-6xl">
@@ -151,20 +153,13 @@ const FeedPage: React.FC = () => {
                     {verificationStatus !==
                       EVerificationStatus.ENS_ORDINAL_VERIFIED && (
                       <p className="text-sm text-cyber-neutral/80">
-                        Connect your wallet to
+                        Connect your wallet to start posting
-                        start posting
                       </p>
                     )}
                   </div>
                 </div>
               ) : (
-                allPosts.map(post => (
+                allPosts.map(post => <PostCard key={post.id} post={post} />)
-                  <PostCard
-                    key={post.id}
-                    post={post}
-                    commentCount={getCommentCount(post.id)}
-                  />
-                ))
               )}
             </div>
           </div>

app/src/pages/ProfilePage.tsx

@@ -1,4 +1,4 @@
-import { useState} from 'react';
+import { useState } from 'react';
 import { useForum } from '@opchan/react';
 import { useAuth } from '@opchan/react';
 import { Button } from '@/components/ui/button';
@@ -27,8 +27,7 @@ import {
   Globe,
   Edit3,
   Save,
-  X,  
+  X,
-
 } from 'lucide-react';
 import { EDisplayPreference, EVerificationStatus } from '@opchan/core';
 import { useToast } from '@/hooks/use-toast';
@@ -42,7 +41,6 @@ export default function ProfilePage() {
   // Get current user from auth context for the address
   const { currentUser, delegationInfo } = useAuth();
 
-
   const [isEditing, setIsEditing] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [callSign, setCallSign] = useState('');
@@ -253,36 +251,31 @@ export default function ProfilePage() {
                         </div>
                         <div className="text-sm text-cyber-neutral">
                           {/* Show ENS name if available */}
-                          {(currentUser.ensDetails?.ensName ) && (
+                          {currentUser.ensDetails?.ensName && (
-                            <div>
+                            <div>ENS: {currentUser.ensDetails?.ensName}</div>
-                              ENS:{' '}
-                              {currentUser.ensDetails?.ensName}
-                            </div>
                           )}
                           {/* Show Ordinal details if available */}
-                          {(currentUser.ordinalDetails ) && (
+                          {currentUser.ordinalDetails && (
                             <div>
                               Ordinal:{' '}
                               {currentUser.ordinalDetails.ordinalDetails}
                             </div>
                           )}
                           {/* Show fallback if neither ENS nor Ordinal */}
-                          {!(
+                          {!currentUser.ensDetails?.ensName &&
-                            currentUser.ensDetails?.ensName
+                            !currentUser.ordinalDetails?.ordinalDetails && (
-                          ) &&
+                              <div>No ENS or Ordinal verification</div>
-                            !(
+                            )}
-                              currentUser.ordinalDetails?.ordinalDetails
+                          <div className="flex items-center gap-2 mt-2">
-                            ) && <div>No ENS or Ordinal verification</div>}
+                            {getVerificationIcon()}
-                        <div className="flex items-center gap-2 mt-2">
+                            <Badge className={getVerificationColor()}>
-                          {getVerificationIcon()}
+                              {getVerificationText()}
-                          <Badge className={getVerificationColor()}>
+                            </Badge>
-                            {getVerificationText()}
+                          </div>
-                          </Badge>
                         </div>
                       </div>
                     </div>
                   </div>
-                  </div>
 
                   {/* Wallet Section */}
                   <div className="space-y-3">
@@ -469,7 +462,9 @@ export default function ProfilePage() {
                         Delegation
                       </span>
                       <Badge
-                        variant={delegationInfo.isValid ? 'default' : 'secondary'}
+                        variant={
+                          delegationInfo.isValid ? 'default' : 'secondary'
+                        }
                         className={
                           delegationInfo.isValid
                             ? 'bg-green-500/20 text-green-400 border-green-500/30'
@@ -540,17 +535,17 @@ export default function ProfilePage() {
                   </div>
 
                   {/* Warning for expired delegation */}
-                  {(!delegationInfo.isValid && delegationInfo.hasDelegation) && (
+                  {!delegationInfo.isValid && delegationInfo.hasDelegation && (
-                        <div className="p-3 bg-orange-500/10 border border-orange-500/30 rounded-md">
+                    <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">
+                      <div className="flex items-center gap-2 text-orange-400">
-                            <AlertTriangle className="w-4 h-4" />
+                        <AlertTriangle className="w-4 h-4" />
-                            <span className="text-xs font-medium">
+                        <span className="text-xs font-medium">
-                              Delegation expired. Renew to continue using your
+                          Delegation expired. Renew to continue using your
-                              browser key.
+                          browser key.
-                            </span>
+                        </span>
-                          </div>
+                      </div>
-                        </div>
+                    </div>
-                      )}
+                  )}
                 </CardContent>
               </Card>
             </div>

app/src/providers/OpchanWithAppKit.tsx

@@ -1,37 +1,57 @@
 import * as React from 'react';
-import { OpChanProvider, type WalletAdapter, type WalletAdapterAccount } from '@opchan/react';
+import {
+  OpChanProvider,
+  type WalletAdapter,
+  type WalletAdapterAccount,
+} from '@opchan/react';
 import { useAppKitAccount, modal } from '@reown/appkit/react';
 import { AppKit } from '@reown/appkit';
 import type { OpChanClientConfig } from '@opchan/core';
 import { walletManager } from '@opchan/core';
 
-interface Props { config: OpChanClientConfig; children: React.ReactNode }
+interface Props {
+  config: OpChanClientConfig;
+  children: React.ReactNode;
+}
 
 export const OpchanWithAppKit: React.FC<Props> = ({ config, children }) => {
   const btc = useAppKitAccount({ namespace: 'bip122' });
   const eth = useAppKitAccount({ namespace: 'eip155' });
 
-  const listenersRef = React.useRef(new Set<(a: WalletAdapterAccount | null) => void>());
+  const listenersRef = React.useRef(
+    new Set<(a: WalletAdapterAccount | null) => void>()
+  );
 
   const getCurrent = React.useCallback((): WalletAdapterAccount | null => {
-    if (btc.isConnected && btc.address) return { address: btc.address, walletType: 'bitcoin' };
+    if (btc.isConnected && btc.address)
-    if (eth.isConnected && eth.address) return { address: eth.address, walletType: 'ethereum' };
+      return { address: btc.address, walletType: 'bitcoin' };
+    if (eth.isConnected && eth.address)
+      return { address: eth.address, walletType: 'ethereum' };
     return null;
   }, [btc.isConnected, btc.address, eth.isConnected, eth.address]);
 
-  const adapter = React.useMemo<WalletAdapter>(() => ({
+  const adapter = React.useMemo<WalletAdapter>(
-    getAccount: () => getCurrent(),
+    () => ({
-    onChange: (cb) => {
+      getAccount: () => getCurrent(),
-      listenersRef.current.add(cb);
+      onChange: cb => {
-      return () => { listenersRef.current.delete(cb); };
+        listenersRef.current.add(cb);
-    },
+        return () => {
-  }), [getCurrent]); 
+          listenersRef.current.delete(cb);
+        };
+      },
+    }),
+    [getCurrent]
+  );
 
   // Notify listeners when AppKit account changes
   React.useEffect(() => {
     const account = getCurrent();
     listenersRef.current.forEach(cb => {
-      try { cb(account); } catch { /* ignore */ }
+      try {
+        cb(account);
+      } catch {
+        /* ignore */
+      }
     });
   }, [getCurrent]);
 
@@ -56,5 +76,3 @@ export const OpchanWithAppKit: React.FC<Props> = ({ config, children }) => {
     </OpChanProvider>
   );
 };
-
-

app/src/utils/index.ts

@@ -1,9 +1,8 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
-
 export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs));
-  }  
+}
 
-  export { urlLoads } from './urlLoads';
+export { urlLoads } from './urlLoads';