From f9863121ba4036a624abc1ec9def01ef996973fa Mon Sep 17 00:00:00 2001 From: Danish Arora Date: Fri, 3 Oct 2025 19:00:01 +0530 Subject: [PATCH] chore: linting + improve CSS --- app/src/components/ActivityFeed.tsx | 86 ++++++------ app/src/components/CellList.tsx | 6 +- app/src/components/CommentCard.tsx | 18 ++- app/src/components/CreateCellDialog.tsx | 3 +- app/src/components/FeedSidebar.tsx | 11 +- app/src/components/Header.tsx | 34 +++-- app/src/components/PostCard.tsx | 122 +++++++++--------- app/src/components/PostDetail.tsx | 50 ++++--- app/src/components/PostList.tsx | 36 +++--- app/src/components/ui/CypherImage.tsx | 2 +- app/src/components/ui/ShareButton.tsx | 2 +- app/src/components/ui/accordion.tsx | 2 +- app/src/components/ui/alert-dialog.tsx | 2 +- app/src/components/ui/alert.tsx | 2 +- app/src/components/ui/author-display.tsx | 9 +- app/src/components/ui/avatar.tsx | 2 +- app/src/components/ui/badge.tsx | 2 +- app/src/components/ui/bookmark-button.tsx | 2 +- app/src/components/ui/bookmark-card.tsx | 2 +- app/src/components/ui/breadcrumb.tsx | 2 +- app/src/components/ui/button.tsx | 2 +- app/src/components/ui/calendar.tsx | 2 +- app/src/components/ui/card.tsx | 2 +- app/src/components/ui/carousel.tsx | 2 +- app/src/components/ui/chart.tsx | 2 +- app/src/components/ui/checkbox.tsx | 2 +- app/src/components/ui/command.tsx | 2 +- app/src/components/ui/context-menu.tsx | 2 +- app/src/components/ui/delegation-step.tsx | 4 +- app/src/components/ui/dialog.tsx | 2 +- app/src/components/ui/drawer.tsx | 2 +- app/src/components/ui/dropdown-menu.tsx | 2 +- app/src/components/ui/form.tsx | 2 +- app/src/components/ui/hover-card.tsx | 2 +- app/src/components/ui/input-otp.tsx | 2 +- app/src/components/ui/input.tsx | 2 +- app/src/components/ui/label.tsx | 2 +- app/src/components/ui/menubar.tsx | 2 +- app/src/components/ui/moderation-toggle.tsx | 10 +- app/src/components/ui/navigation-menu.tsx | 2 +- app/src/components/ui/pagination.tsx | 2 +- app/src/components/ui/popover.tsx | 2 +- app/src/components/ui/progress.tsx | 2 +- app/src/components/ui/radio-group.tsx | 2 +- app/src/components/ui/resizable-textarea.tsx | 2 +- app/src/components/ui/resizable.tsx | 2 +- app/src/components/ui/scroll-area.tsx | 2 +- app/src/components/ui/select.tsx | 2 +- app/src/components/ui/separator.tsx | 2 +- app/src/components/ui/sheet.tsx | 2 +- app/src/components/ui/sidebar.tsx | 2 +- app/src/components/ui/switch.tsx | 2 +- app/src/components/ui/table.tsx | 2 +- app/src/components/ui/tabs.tsx | 2 +- app/src/components/ui/textarea.tsx | 2 +- app/src/components/ui/toast.tsx | 2 +- app/src/components/ui/toggle-group.tsx | 2 +- app/src/components/ui/toggle.tsx | 2 +- app/src/components/ui/tooltip.tsx | 2 +- app/src/components/ui/verification-step.tsx | 24 +++- .../components/ui/waku-health-indicator.tsx | 7 +- app/src/components/ui/wallet-dialog.tsx | 4 +- app/src/components/ui/wallet-wizard.tsx | 17 ++- app/src/hooks/index.ts | 6 +- app/src/main.tsx | 4 +- app/src/pages/BookmarksPage.tsx | 9 +- app/src/pages/FeedPage.tsx | 27 ++-- app/src/pages/ProfilePage.tsx | 63 +++++---- app/src/providers/OpchanWithAppKit.tsx | 48 ++++--- app/src/utils/index.ts | 7 +- 70 files changed, 386 insertions(+), 313 deletions(-) diff --git a/app/src/components/ActivityFeed.tsx b/app/src/components/ActivityFeed.tsx index 9c4dfce..0074600 100644 --- a/app/src/components/ActivityFeed.tsx +++ b/app/src/components/ActivityFeed.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import { useForumData } from '@/hooks'; +import React, { useMemo } from 'react'; +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 forumData = useForumData(); + const { content, network } = useForum(); - const { - postsWithVoteStatus, - commentsWithVoteStatus, - cellsWithStats, - isInitialLoading, - } = forumData; + const { posts, comments, cells, commentsByPost } = content; + const { isConnected } = network; - // ✅ Use pre-computed data with vote scores - const combinedFeed: FeedItem[] = [ - ...postsWithVoteStatus.map( - (post): PostFeedItem => ({ - id: post.id, - type: 'post', - timestamp: post.timestamp, - ownerAddress: post.author, - title: post.title, - cellId: post.cellId, - postId: post.id, - commentCount: forumData.commentsByPost[post.id]?.length || 0, - voteCount: post.voteScore, - }) - ), - ...commentsWithVoteStatus - .map((comment): CommentFeedItem | null => { - const parentPost = postsWithVoteStatus.find( - p => p.id === comment.postId - ); - if (!parentPost) return null; - return { - id: comment.id, - type: 'comment', - timestamp: comment.timestamp, - ownerAddress: comment.author, - content: comment.content, - postId: comment.postId, - cellId: parentPost.cellId, - voteCount: comment.voteScore, - }; - }) - .filter((item): item is CommentFeedItem => item !== null), - ].sort((a, b) => b.timestamp - a.timestamp); + + const combinedFeed: FeedItem[] = useMemo(() => { + return [ + ...posts.map( + (post): PostFeedItem => ({ + ...post, + type: 'post', + ownerAddress: post.authorAddress, + cellId: post.cellId, + postId: post.id, + title: post.title, + commentCount: commentsByPost[post.id]?.length || 0, + voteCount: post.upvotes.length - post.downvotes.length, + }) + ), + ...comments + .map((comment): CommentFeedItem | null => { + const parentPost = posts.find(p => p.id === comment.postId); + if (!parentPost) return null; + return { + id: comment.id, + type: 'comment', + timestamp: comment.timestamp, + ownerAddress: comment.author, + content: comment.content, + postId: comment.postId, + cellId: parentPost.cellId, + voteCount: comment.upvotes.length - comment.downvotes.length, + }; + }) + .filter((item): item is CommentFeedItem => item !== null), + ].sort((a, b) => b.timestamp - a.timestamp); + }, [posts, comments, commentsByPost]); 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 (
{[...Array(5)].map((_, i) => ( diff --git a/app/src/components/CellList.tsx b/app/src/components/CellList.tsx index d3892d5..702d475 100644 --- a/app/src/components/CellList.tsx +++ b/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" > - + {canCreateCell && } diff --git a/app/src/components/CommentCard.tsx b/app/src/components/CommentCard.tsx index 73fa239..1ba62c8 100644 --- a/app/src/components/CommentCard.tsx +++ b/app/src/components/CommentCard.tsx @@ -61,10 +61,14 @@ const CommentCard: React.FC = ({ // 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 userUpvoted = Boolean(comment.upvotes.some(v => v.author === currentUser?.address)); + const userDownvoted = Boolean( + 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 = ({
-
{currentUser?.displayName}
+
+ {currentUser?.displayName} +
{ 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) - }, [currentUser]) + console.log('currentUser', currentUser); + }, [currentUser]); const getStatusIcon = () => { if (!isConnected) return ; if ( - currentUser?.verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED && + currentUser?.verificationStatus === + EVerificationStatus.ENS_ORDINAL_VERIFIED && delegationInfo?.isValid ) { return ; - } else if (currentUser?.verificationStatus === EVerificationStatus.WALLET_CONNECTED) { + } else if ( + currentUser?.verificationStatus === EVerificationStatus.WALLET_CONNECTED + ) { return ; } else if ( - currentUser?.verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED + currentUser?.verificationStatus === + EVerificationStatus.ENS_ORDINAL_VERIFIED ) { return ; } else { @@ -197,11 +203,13 @@ const Header = () => { > {getStatusIcon()} - {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'} @@ -215,7 +223,9 @@ const Header = () => { size="sm" className="flex items-center space-x-2 text-white hover:bg-cyber-muted/30" > -
{currentUser?.displayName}
+
+ {currentUser?.displayName} +
diff --git a/app/src/components/PostCard.tsx b/app/src/components/PostCard.tsx index cffd9c9..3486b30 100644 --- a/app/src/components/PostCard.tsx +++ b/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; - commentCount?: number; + post: Post; } -const PostCard: React.FC = ({ post, commentCount = 0 }) => { - const content = useContent(); +const PostCard: React.FC = ({ post }) => { + const { + bookmarks, + pending, + vote, + togglePostBookmark, + cells, + commentsByPost, + } = useContent(); const permissions = usePermissions(); + const { currentUser } = useAuth(); - // Get cell data from content - const cell = content.cells.find((c) => c.id === post.cellId); - const cellName = cell?.name || 'unknown'; + const cellName = cells.find(c => c.id === post.cellId)?.name || 'unknown'; + const commentCount = commentsByPost[post.id]?.length || 0; - // Use pre-computed vote data or safely compute from arrays when available - 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; + const isPending = pending.isPending(post.id); - // Use library pending API - const isPending = content.pending.isPending(post.id); - - // 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 isBookmarked = 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 = typeof post.content === 'string' ? post.content : String(post.content ?? ''); + const contentText = + 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 = ({ 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 = ({ 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 = ({ post, commentCount = 0 }) => { 0 - ? 'text-cyber-accent' - : score < 0 - ? 'text-blue-400' - : 'text-cyber-neutral' - }`} + className={`text-sm font-medium px-1`} > {score} @@ -130,9 +117,17 @@ const PostCard: React.FC = ({ post, commentCount = 0 }) => {
{/* Post metadata */}
- - r/{cellName} - + { + if (!cellName) e.preventDefault(); + }} + title={cellName ? `Go to /${cellName}` : undefined} + > + r/{cellName || 'unknown'} + • Posted by u/ = ({ post, commentCount = 0 }) => { addSuffix: true, })} - {('relevanceScore' in post) && typeof (post as Post).relevanceScore === 'number' && ( - <> - • - - - )} + {'relevanceScore' in post && + typeof (post as Post).relevanceScore === 'number' && ( + <> + • + + + )}
{/* Post title and content - clickable to navigate to post */} diff --git a/app/src/components/PostDetail.tsx b/app/src/components/PostDetail.tsx index a9ae238..9e7a964 100644 --- a/app/src/components/PostDetail.tsx +++ b/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 visibleComments = postId ? content.commentsByPost[postId] ?? [] : []; + const post = content.posts.find(p => p.id === 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 enhanced = post as unknown as { userUpvoted?: boolean; userDownvoted?: boolean; voteScore?: number }; - const isPostUpvoted = Boolean(enhanced.userUpvoted); - const isPostDownvoted = Boolean(enhanced.userDownvoted); - const score = typeof enhanced.voteScore === 'number' ? enhanced.voteScore : 0; + const score = post.upvotes.length - post.downvotes.length; + const isPostUpvoted = Boolean( + post.upvotes.some(v => v.author === currentUser?.address) + ); + const isPostDownvoted = Boolean( + post.downvotes.some(v => v.author === currentUser?.address) + ); const handleModerateComment = async (commentId: string) => { const reason = @@ -160,7 +164,9 @@ const PostDetail = () => {
@@ -306,7 +320,7 @@ const PostDetail = () => {

) : ( - visibleComments.map((comment) => ( + visibleComments.map(comment => ( { const { cellId } = useParams<{ cellId: string }>(); - // ✅ Use reactive hooks for data and actions - const { createPost, vote, moderate, refresh, commentsByPost, cells, posts } = useContent(); + const { createPost, vote, moderate, refresh, commentsByPost, cells, posts } = + 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 down = p.downvotes.some((v: VoteMessage) => v.author === currentUser.address); + const up = p.upvotes.some( + (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 && (
-

- Connect your wallet to post -

+

Connect your wallet to post

@@ -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={ - canVote ? 'Upvote' : 'Connect your wallet to vote' - } + title={canVote ? 'Upvote' : 'Connect your wallet to vote'} > @@ -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={ - canVote ? 'Downvote' : 'Connect your wallet to vote' - } + title={canVote ? 'Downvote' : 'Connect your wallet to vote'} > diff --git a/app/src/components/ui/CypherImage.tsx b/app/src/components/ui/CypherImage.tsx index 47f8e34..e4d319d 100644 --- a/app/src/components/ui/CypherImage.tsx +++ b/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; diff --git a/app/src/components/ui/ShareButton.tsx b/app/src/components/ui/ShareButton.tsx index 1b5743c..d9a3ed7 100644 --- a/app/src/components/ui/ShareButton.tsx +++ b/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 { diff --git a/app/src/components/ui/accordion.tsx b/app/src/components/ui/accordion.tsx index 77233ec..4e96e26 100644 --- a/app/src/components/ui/accordion.tsx +++ b/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; diff --git a/app/src/components/ui/alert-dialog.tsx b/app/src/components/ui/alert-dialog.tsx index 2898c57..dbe8a5f 100644 --- a/app/src/components/ui/alert-dialog.tsx +++ b/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; diff --git a/app/src/components/ui/alert.tsx b/app/src/components/ui/alert.tsx index d0eaa61..d8c6cb2 100644 --- a/app/src/components/ui/alert.tsx +++ b/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', diff --git a/app/src/components/ui/author-display.tsx b/app/src/components/ui/author-display.tsx index f7623e7..04fe9b0 100644 --- a/app/src/components/ui/author-display.tsx +++ b/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(()=> { - console.log({ensName, ordinalDetails, callSign, displayName, address}) - }, [address, ensName, ordinalDetails, callSign, displayName]) + useEffect(() => { + console.log({ ensName, ordinalDetails, callSign, displayName, address }); + }, [address, ensName, ordinalDetails, callSign, displayName]); // Only show a badge if the author has ENS, Ordinal, or Call Sign const shouldShowBadge = showBadge && (ensName || ordinalDetails || callSign); diff --git a/app/src/components/ui/avatar.tsx b/app/src/components/ui/avatar.tsx index 4606161..42a8dc6 100644 --- a/app/src/components/ui/avatar.tsx +++ b/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, diff --git a/app/src/components/ui/badge.tsx b/app/src/components/ui/badge.tsx index b347058..b59666a 100644 --- a/app/src/components/ui/badge.tsx +++ b/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', diff --git a/app/src/components/ui/bookmark-button.tsx b/app/src/components/ui/bookmark-button.tsx index 0c3623e..047c0fc 100644 --- a/app/src/components/ui/bookmark-button.tsx +++ b/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; diff --git a/app/src/components/ui/bookmark-card.tsx b/app/src/components/ui/bookmark-card.tsx index 21dee46..87ae896 100644 --- a/app/src/components/ui/bookmark-card.tsx +++ b/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'; diff --git a/app/src/components/ui/breadcrumb.tsx b/app/src/components/ui/breadcrumb.tsx index eee54dd..a44fdab 100644 --- a/app/src/components/ui/breadcrumb.tsx +++ b/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, diff --git a/app/src/components/ui/button.tsx b/app/src/components/ui/button.tsx index 1db864b..dc759d4 100644 --- a/app/src/components/ui/button.tsx +++ b/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 diff --git a/app/src/components/ui/calendar.tsx b/app/src/components/ui/calendar.tsx index 8c43da7..cb84cd2 100644 --- a/app/src/components/ui/calendar.tsx +++ b/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; diff --git a/app/src/components/ui/card.tsx b/app/src/components/ui/card.tsx index b8847c3..4b5bdb9 100644 --- a/app/src/components/ui/card.tsx +++ b/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, diff --git a/app/src/components/ui/carousel.tsx b/app/src/components/ui/carousel.tsx index 8d452da..b709327 100644 --- a/app/src/components/ui/carousel.tsx +++ b/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]; diff --git a/app/src/components/ui/chart.tsx b/app/src/components/ui/chart.tsx index 37391ab..f6a1113 100644 --- a/app/src/components/ui/chart.tsx +++ b/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; diff --git a/app/src/components/ui/checkbox.tsx b/app/src/components/ui/checkbox.tsx index 35548e4..7170bdb 100644 --- a/app/src/components/ui/checkbox.tsx +++ b/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, diff --git a/app/src/components/ui/command.tsx b/app/src/components/ui/command.tsx index 0986715..16a095a 100644 --- a/app/src/components/ui/command.tsx +++ b/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< diff --git a/app/src/components/ui/context-menu.tsx b/app/src/components/ui/context-menu.tsx index ea200c1..665f3a4 100644 --- a/app/src/components/ui/context-menu.tsx +++ b/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; diff --git a/app/src/components/ui/delegation-step.tsx b/app/src/components/ui/delegation-step.tsx index 3cfc9c0..0b3539a 100644 --- a/app/src/components/ui/delegation-step.tsx +++ b/app/src/components/ui/delegation-step.tsx @@ -194,7 +194,9 @@ export function DelegationStep({ {/* User Address */} {currentUser && (
-
{currentUser.displayName}
+
+ {currentUser.displayName} +
)} diff --git a/app/src/components/ui/dialog.tsx b/app/src/components/ui/dialog.tsx index 5fa0154..8fe2379 100644 --- a/app/src/components/ui/dialog.tsx +++ b/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; diff --git a/app/src/components/ui/drawer.tsx b/app/src/components/ui/drawer.tsx index 927c148..a9731c0 100644 --- a/app/src/components/ui/drawer.tsx +++ b/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, diff --git a/app/src/components/ui/dropdown-menu.tsx b/app/src/components/ui/dropdown-menu.tsx index 7711c34..2527108 100644 --- a/app/src/components/ui/dropdown-menu.tsx +++ b/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; diff --git a/app/src/components/ui/form.tsx b/app/src/components/ui/form.tsx index 71e9787..8e73f74 100644 --- a/app/src/components/ui/form.tsx +++ b/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; diff --git a/app/src/components/ui/hover-card.tsx b/app/src/components/ui/hover-card.tsx index bc5502a..dc9acb7 100644 --- a/app/src/components/ui/hover-card.tsx +++ b/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; diff --git a/app/src/components/ui/input-otp.tsx b/app/src/components/ui/input-otp.tsx index 2881012..1f4f1ec 100644 --- a/app/src/components/ui/input-otp.tsx +++ b/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, diff --git a/app/src/components/ui/input.tsx b/app/src/components/ui/input.tsx index a19b266..3c12cb7 100644 --- a/app/src/components/ui/input.tsx +++ b/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>( ({ className, type, ...props }, ref) => { diff --git a/app/src/components/ui/label.tsx b/app/src/components/ui/label.tsx index 6cfbde3..2aa01f2 100644 --- a/app/src/components/ui/label.tsx +++ b/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' diff --git a/app/src/components/ui/menubar.tsx b/app/src/components/ui/menubar.tsx index b61778f..bf413fc 100644 --- a/app/src/components/ui/menubar.tsx +++ b/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; diff --git a/app/src/components/ui/moderation-toggle.tsx b/app/src/components/ui/moderation-toggle.tsx index ac98d87..39e0bed 100644 --- a/app/src/components/ui/moderation-toggle.tsx +++ b/app/src/components/ui/moderation-toggle.tsx @@ -8,8 +8,14 @@ export function ModerationToggle() { const { canModerate } = usePermissions(); const { cellsWithStats } = useContent(); - const [showModerated, setShowModerated] = useUIState('showModerated', false); - const toggleShowModerated = React.useCallback((value: boolean) => setShowModerated(value), [setShowModerated]); + const [showModerated, setShowModerated] = useUIState( + '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)); diff --git a/app/src/components/ui/navigation-menu.tsx b/app/src/components/ui/navigation-menu.tsx index b0c9afb..893c17a 100644 --- a/app/src/components/ui/navigation-menu.tsx +++ b/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, diff --git a/app/src/components/ui/pagination.tsx b/app/src/components/ui/pagination.tsx index 859c3f1..13f8b42 100644 --- a/app/src/components/ui/pagination.tsx +++ b/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'; diff --git a/app/src/components/ui/popover.tsx b/app/src/components/ui/popover.tsx index f40de05..e6d889d 100644 --- a/app/src/components/ui/popover.tsx +++ b/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; diff --git a/app/src/components/ui/progress.tsx b/app/src/components/ui/progress.tsx index e5bac67..3487a41 100644 --- a/app/src/components/ui/progress.tsx +++ b/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, diff --git a/app/src/components/ui/radio-group.tsx b/app/src/components/ui/radio-group.tsx index 1ad251e..0dc74fb 100644 --- a/app/src/components/ui/radio-group.tsx +++ b/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, diff --git a/app/src/components/ui/resizable-textarea.tsx b/app/src/components/ui/resizable-textarea.tsx index 2f5c3a8..34a78db 100644 --- a/app/src/components/ui/resizable-textarea.tsx +++ b/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 = diff --git a/app/src/components/ui/resizable.tsx b/app/src/components/ui/resizable.tsx index 1ad9455..0024246 100644 --- a/app/src/components/ui/resizable.tsx +++ b/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, diff --git a/app/src/components/ui/scroll-area.tsx b/app/src/components/ui/scroll-area.tsx index 7126250..fbc53fc 100644 --- a/app/src/components/ui/scroll-area.tsx +++ b/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, diff --git a/app/src/components/ui/select.tsx b/app/src/components/ui/select.tsx index 74f8592..957e15d 100644 --- a/app/src/components/ui/select.tsx +++ b/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; diff --git a/app/src/components/ui/separator.tsx b/app/src/components/ui/separator.tsx index d8b4836..93ae3e6 100644 --- a/app/src/components/ui/separator.tsx +++ b/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, diff --git a/app/src/components/ui/sheet.tsx b/app/src/components/ui/sheet.tsx index 0596423..9f314ea 100644 --- a/app/src/components/ui/sheet.tsx +++ b/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; diff --git a/app/src/components/ui/sidebar.tsx b/app/src/components/ui/sidebar.tsx index f6cca4c..9ead47f 100644 --- a/app/src/components/ui/sidebar.tsx +++ b/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'; diff --git a/app/src/components/ui/switch.tsx b/app/src/components/ui/switch.tsx index 811f207..cd28400 100644 --- a/app/src/components/ui/switch.tsx +++ b/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, diff --git a/app/src/components/ui/table.tsx b/app/src/components/ui/table.tsx index ba596a4..772ef0b 100644 --- a/app/src/components/ui/table.tsx +++ b/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, diff --git a/app/src/components/ui/tabs.tsx b/app/src/components/ui/tabs.tsx index cff9818..7bc6b42 100644 --- a/app/src/components/ui/tabs.tsx +++ b/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; diff --git a/app/src/components/ui/textarea.tsx b/app/src/components/ui/textarea.tsx index 9fd3984..d03cd03 100644 --- a/app/src/components/ui/textarea.tsx +++ b/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, diff --git a/app/src/components/ui/toast.tsx b/app/src/components/ui/toast.tsx index c8c19f8..23ca258 100644 --- a/app/src/components/ui/toast.tsx +++ b/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; diff --git a/app/src/components/ui/toggle-group.tsx b/app/src/components/ui/toggle-group.tsx index 2401f5f..b624f1a 100644 --- a/app/src/components/ui/toggle-group.tsx +++ b/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< diff --git a/app/src/components/ui/toggle.tsx b/app/src/components/ui/toggle.tsx index a18e30b..189d704 100644 --- a/app/src/components/ui/toggle.tsx +++ b/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< diff --git a/app/src/components/ui/tooltip.tsx b/app/src/components/ui/tooltip.tsx index 3983bec..57a9ec3 100644 --- a/app/src/components/ui/tooltip.tsx +++ b/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; diff --git a/app/src/components/ui/verification-step.tsx b/app/src/components/ui/verification-step.tsx index 9668155..a5223e4 100644 --- a/app/src/components/ui/verification-step.tsx +++ b/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 (
@@ -222,8 +230,12 @@ export function VerificationStep({

{currentUser && (
- {currentUser?.walletType === 'bitcoin' &&

Ordinal ID: Verified

} - {currentUser?.walletType === 'ethereum' &&

ENS Name: Verified

} + {currentUser?.walletType === 'bitcoin' && ( +

Ordinal ID: Verified

+ )} + {currentUser?.walletType === 'ethereum' && ( +

ENS Name: Verified

+ )}
)}
diff --git a/app/src/components/ui/waku-health-indicator.tsx b/app/src/components/ui/waku-health-indicator.tsx index 343a9cf..7e28fe5 100644 --- a/app/src/components/ui/waku-health-indicator.tsx +++ b/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 (

Address:

- {activeAddress ? `${activeAddress.slice(0, 6)}...${activeAddress.slice(-4)}` : ''} + {activeAddress + ? `${activeAddress.slice(0, 6)}...${activeAddress.slice(-4)}` + : ''}

diff --git a/app/src/components/ui/wallet-wizard.tsx b/app/src/components/ui/wallet-wizard.tsx index 778cc17..511b208 100644 --- a/app/src/components/ui/wallet-wizard.tsx +++ b/app/src/components/ui/wallet-wizard.tsx @@ -29,8 +29,13 @@ export function WalletWizard({ }: WalletWizardProps) { const [currentStep, setCurrentStep] = React.useState(1); const [isLoading, setIsLoading] = React.useState(false); - const [delegationStatus, setDelegationStatus] = React.useState(false); - const { isAuthenticated, verificationStatus, delegationStatus: getDelegationStatus } = useAuth(); + const [delegationStatus, setDelegationStatus] = + React.useState(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 => { - setDelegationStatus(status.isValid); - }).catch(console.error); + getDelegationStatus() + .then(status => { + setDelegationStatus(status.isValid); + }) + .catch(console.error); } else { setDelegationStatus(false); } diff --git a/app/src/hooks/index.ts b/app/src/hooks/index.ts index 57a0403..b49ec0f 100644 --- a/app/src/hooks/index.ts +++ b/app/src/hooks/index.ts @@ -1,11 +1,9 @@ - export { - useAuth , - useForum , + useAuth, + useForum, useNetwork, usePermissions, useContent, useUIState, useUserDisplay, } from '@opchan/react'; - diff --git a/app/src/main.tsx b/app/src/main.tsx index ce6d4c9..51ba29f 100644 --- a/app/src/main.tsx +++ b/app/src/main.tsx @@ -14,7 +14,9 @@ if (!(window as Window & typeof globalThis).Buffer) { createRoot(document.getElementById('root')!).render( - + diff --git a/app/src/pages/BookmarksPage.tsx b/app/src/pages/BookmarksPage.tsx index 48fabcd..3b70bb9 100644 --- a/app/src/pages/BookmarksPage.tsx +++ b/app/src/pages/BookmarksPage.tsx @@ -53,8 +53,12 @@ const BookmarksPage = () => { ); } - const postBookmarks = bookmarks.filter(bookmark => bookmark.type === BookmarkType.POST); - const commentBookmarks = bookmarks.filter(bookmark => bookmark.type === BookmarkType.COMMENT); + const postBookmarks = bookmarks.filter( + 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 (
diff --git a/app/src/pages/FeedPage.tsx b/app/src/pages/FeedPage.tsx index 32357ce..c95f7ca 100644 --- a/app/src/pages/FeedPage.tsx +++ b/app/src/pages/FeedPage.tsx @@ -20,15 +20,17 @@ const FeedPage: React.FC = () => { const { verificationStatus } = useAuth(); const [sortOption, setSortOption] = useState('relevance'); - - // Build sorted posts from content slices - const allPosts = useMemo(() => sortPosts([...content.posts], sortOption), [content.posts, sortOption]); - - // ✅ Get comment count from filtered organized data - const getCommentCount = (postId: string) => (content.commentsByPost[postId] || []).length; + const allPosts = useMemo( + () => sortPosts([...content.posts], sortOption), + [content.posts, sortOption] + ); // Loading skeleton - if (!content.posts.length && !content.comments.length && !content.cells.length) { + if ( + !content.posts.length && + !content.comments.length && + !content.cells.length + ) { return (
@@ -151,20 +153,13 @@ const FeedPage: React.FC = () => { {verificationStatus !== EVerificationStatus.ENS_ORDINAL_VERIFIED && (

- Connect your wallet to - start posting + Connect your wallet to start posting

)}
) : ( - allPosts.map(post => ( - - )) + allPosts.map(post => ) )}
diff --git a/app/src/pages/ProfilePage.tsx b/app/src/pages/ProfilePage.tsx index 66caad9..85f12f9 100644 --- a/app/src/pages/ProfilePage.tsx +++ b/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() {
{/* Show ENS name if available */} - {(currentUser.ensDetails?.ensName ) && ( -
- ENS:{' '} - {currentUser.ensDetails?.ensName} -
+ {currentUser.ensDetails?.ensName && ( +
ENS: {currentUser.ensDetails?.ensName}
)} {/* Show Ordinal details if available */} - {(currentUser.ordinalDetails ) && ( + {currentUser.ordinalDetails && (
Ordinal:{' '} {currentUser.ordinalDetails.ordinalDetails}
)} {/* Show fallback if neither ENS nor Ordinal */} - {!( - currentUser.ensDetails?.ensName - ) && - !( - currentUser.ordinalDetails?.ordinalDetails - ) &&
No ENS or Ordinal verification
} -
- {getVerificationIcon()} - - {getVerificationText()} - + {!currentUser.ensDetails?.ensName && + !currentUser.ordinalDetails?.ordinalDetails && ( +
No ENS or Ordinal verification
+ )} +
+ {getVerificationIcon()} + + {getVerificationText()} + +
-
{/* Wallet Section */}
@@ -469,7 +462,9 @@ export default function ProfilePage() { Delegation {/* Warning for expired delegation */} - {(!delegationInfo.isValid && delegationInfo.hasDelegation) && ( -
-
- - - Delegation expired. Renew to continue using your - browser key. - -
-
- )} + {!delegationInfo.isValid && delegationInfo.hasDelegation && ( +
+
+ + + Delegation expired. Renew to continue using your + browser key. + +
+
+ )}
diff --git a/app/src/providers/OpchanWithAppKit.tsx b/app/src/providers/OpchanWithAppKit.tsx index 2ffa63e..1b5d269 100644 --- a/app/src/providers/OpchanWithAppKit.tsx +++ b/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 = ({ 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 (eth.isConnected && eth.address) return { address: eth.address, walletType: 'ethereum' }; + if (btc.isConnected && btc.address) + 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(() => ({ - getAccount: () => getCurrent(), - onChange: (cb) => { - listenersRef.current.add(cb); - return () => { listenersRef.current.delete(cb); }; - }, - }), [getCurrent]); + const adapter = React.useMemo( + () => ({ + getAccount: () => getCurrent(), + onChange: cb => { + listenersRef.current.add(cb); + return () => { + 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 = ({ config, children }) => { ); }; - - diff --git a/app/src/utils/index.ts b/app/src/utils/index.ts index eedf536..2e4dbb5 100644 --- a/app/src/utils/index.ts +++ b/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'; \ No newline at end of file +export { urlLoads } from './urlLoads';