diff --git a/.claude/commands/github-issue.md b/.claude/commands/github-issue.md new file mode 100644 index 00000000..8ce33f40 --- /dev/null +++ b/.claude/commands/github-issue.md @@ -0,0 +1,38 @@ +You are an AI assistant tasked with creating detailed GitHub issues for software features, improvements, or bug fixes. Your goal is to transform brief feature descriptions into well-structured GitHub issues that a junior to mid-level developer can understand and implement. + +When provided with a feature description, create a GitHub issue using the following format: + +1. Title: Create a concise, descriptive title for the issue. Use the format "[Feature/Improvement/Bug Fix]: Brief description" + +2. Description: Expand on the feature description, providing context and explaining the purpose of the change. Include any relevant background information that would help a developer understand the need for this feature. + +3. Acceptance Criteria: List specific, measurable criteria that must be met for this feature to be considered complete. Each criterion should start with "- [ ] " to create a checkbox in GitHub. + +4. Additional Information: If applicable, include any extra details, such as potential challenges, dependencies, or resources that might be helpful for implementation. + +Here is the feature description: + + +$ARGUMENTS + + +Based on this description, create a GitHub issue following the structure outlined above. Your response should be formatted as follows: + + +Title: [Your issue title here] + +Description: +[Your expanded description here] + +Acceptance Criteria: + +- [ ] [First criterion] +- [ ] [Second criterion] +- [ ] [Third criterion] + (Add more criteria as needed) + +Additional Information: +[Any extra details, if applicable] + + +Ensure that your response contains only the content within the tags, ready to be copied and pasted directly into a GitHub issue. diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000..92582b17 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,159 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Development Commands + +**Essential Commands:** + +- `bun install` - Install dependencies (project requires Bun runtime) +- `bun dev` - Start development server on port 3443 +- `bun build` - Production build +- `bun lint` - Run ESLint +- `bun format` - Format code with Prettier +- `bun typecheck` - TypeScript type checking +- `bun check` - Run all checks (lint + format + typecheck + build) +- `bun fix` - Auto-fix linting and formatting issues + +**Environment Setup:** + +- Copy `.env.example` to `.env` before starting +- Requires Node.js LTS (20.x) and latest Bun runtime + +## Architecture Overview + +### Web3 Integration Stack + +This is a sophisticated Ethereum social networking app built on multiple blockchain layers: + +**Core Smart Contracts (EFP Protocol):** + +- `EFPListRegistry` - NFT-based ownership of follow lists +- `EFPListRecords` - Stores follow/unfollow operations +- `EFPAccountMetadata` - User profile metadata +- `EFPListMinter` - Creates new follow lists + +**Multi-Chain Architecture:** + +- **Base** (primary chain, low fees) +- **Optimism** (L2 scaling) +- **Ethereum Mainnet** (core protocol) +- Contract addresses vary per chain (see `src/lib/constants/contracts.ts`) + +**Web3 Stack:** + +- Wagmi v2 + Viem v2 for Ethereum interactions +- RainbowKit for wallet connections +- Ethereum Identity Kit for ENS/identity management +- Thirdweb for additional web3 functionality + +### State Management Architecture + +**TanStack Query (React Query):** + +- Primary data fetching and caching layer +- Infinite queries for paginated followers/following lists +- Optimistic updates for blockchain transactions +- Persistent caching with localStorage integration + +**React Contexts:** + +- `EFPProfileProvider` - Core user state, profiles, lists, follows +- `SoundsProvider` - Audio feedback system +- `RecommendedProfilesProvider` - Discovery and recommendations + +### Key Patterns + +**Dynamic User Routing:** + +- `[user]` parameter accepts ENS names, addresses, or list IDs +- Automatic resolution and metadata generation +- SSR with proper social sharing metadata + +**List Operations System:** + +- Batch transactions for follow/unfollow operations +- Multi-chain operation support +- Permission-based UI (Owner/Manager/User roles) +- Optimistic UI updates with rollback capability + +**Internationalization:** + +- 70+ language variants including creative ones (pirate, shakespearean, corporate) +- React-i18next integration in `src/app/i18n.ts` +- Locale files in `public/locales/` + +## Component Architecture + +**Feature-Based Organization:** + +- Components grouped by domain functionality +- Each major component has `components/`, `hooks/`, and `index.tsx` +- Shared utilities in `src/lib/` and `src/utils/` + +**Key Component Patterns:** + +- `profile-list/` - Core follow/unfollow management +- `user-profile-card/` - Profile display with achievements +- `top-eight/` - Featured follows functionality +- `leaderboard/` - Rankings and discovery +- `navigation/` - Header with wallet integration + +**Data Fetching Patterns:** + +- API layer organized by domain in `src/api/` +- Infinite scroll patterns for large lists +- Real-time updates via custom event system +- Graceful error handling and loading states + +## Important Technical Details + +**Type Safety:** + +- Strict TypeScript configuration +- Full ABI type generation for smart contracts +- Viem's type-safe contract interactions +- Runtime validation with Valibot + +**Performance Optimizations:** + +- React 19 concurrent features enabled +- Dynamic imports for code splitting +- Batch RPC calls with fallback providers +- Connection state management for web3 + +**Security Features:** + +- Comprehensive CSP headers in Next.js config +- Sentry integration for error tracking +- No sensitive data in client-side code +- Proper permission validation + +## Development Guidelines + +**When Working with Blockchain Features:** + +- Always use the EFP Profile context for user-related state +- Route blockchain operations through the transaction context +- Test on multiple chains (Base primary, then Optimism/Mainnet) +- Consider gas costs and transaction batching +- Handle network failures gracefully + +**When Adding New Features:** + +- Follow existing infinite scroll patterns for lists +- Use TanStack Query for all data fetching +- Maintain multi-chain compatibility +- Add proper TypeScript types +- Consider internationalization for user-facing text +- Test wallet connection edge cases + +**Code Patterns to Follow:** + +- Use `ethereum-identity-kit` for ENS resolution +- Implement optimistic updates for better UX +- Follow existing error handling patterns +- Use the established loading state components +- Maintain accessibility standards + +The codebase emphasizes type safety, performance, and user experience while handling the complexity of multi-chain blockchain interactions and real-time social networking features. diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index 533f71b8..11d1b64a 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -201,6 +201,8 @@ "system": "System", "light": "Light", "dark": "Dark", + "glass-light": "Glass Light", + "glass-dark": "Glass Dark", "halloween": "Halloween", "sfx & music": "SFX & Music", "sfx": "SFX", diff --git a/src/app/[user]/components/top-eight-activity.tsx b/src/app/[user]/components/top-eight-activity.tsx index 163c8eb6..ea2c6460 100644 --- a/src/app/[user]/components/top-eight-activity.tsx +++ b/src/app/[user]/components/top-eight-activity.tsx @@ -14,6 +14,7 @@ import InterfaceLight from 'public/assets/icons/socials/interface.png' import InterfaceDark from 'public/assets/icons/socials/interface-dark.png' import type { UserProfilePageTableProps } from '#/components/profile-page-table' import type { TopEightProfileType } from '#/components/top-eight/hooks/use-top-eight' +import { useGlassTheme } from '#/hooks/use-glass-theme' interface TopEightActivityProps { user: string @@ -27,6 +28,7 @@ const TopEightActivity: React.FC = ({ user, isConnectedUs const { t } = useTranslation() const isClient = useIsClient() + const { getGlassClass } = useGlassTheme() const headerRight = { 'top 8': ( {chainDropdownOpen && ( -
+
{chains.map((item) => (
= ({ selectedList, isSaving, onC chain: fetchedChain?.id !== item.id, }) }} - className='hover:bg-text/5 flex w-full cursor-pointer items-center gap-3 rounded-sm p-3' + className={cn( + getGlassClass('glass-hover-item', 'hover:bg-text/5'), + 'flex w-full cursor-pointer items-center gap-3 rounded-sm p-3' + )} >

{item?.name}

@@ -242,7 +256,10 @@ const ListSettings: React.FC = ({ selectedList, isSaving, onC ) : ( diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx index 02a65162..2b2dc1a5 100644 --- a/src/components/modal/index.tsx +++ b/src/components/modal/index.tsx @@ -2,6 +2,7 @@ import { cn } from '#/lib/utilities' import Cross from 'public/assets/icons/ui/cross.svg' import type { ReactNode } from 'react' import { createPortal } from 'react-dom' +import { useGlassTheme } from '#/hooks/use-glass-theme' interface ModalProps { onCancel: () => void children: React.ReactNode @@ -11,6 +12,8 @@ interface ModalProps { } const Modal = ({ onCancel, children, className, disableBackgroundClose, closeButtonClassName }: ModalProps) => { + const { getGlassClass } = useGlassTheme() + return createPortal(
!disableBackgroundClose && onCancel()} > -
+
{!userAddress && (
-

+

{t('connect wallet')}

@@ -74,14 +76,14 @@ const WalletMenu = () => { >
{userAddress && }

{ disconnect() setWalletMenuOpen(false) diff --git a/src/components/navigation/desktop.tsx b/src/components/navigation/desktop.tsx index 202499f3..6b3e2dcf 100644 --- a/src/components/navigation/desktop.tsx +++ b/src/components/navigation/desktop.tsx @@ -6,6 +6,7 @@ import { Notifications } from 'ethereum-identity-kit' import { Search } from '../search' import Logo from 'public/assets/efp-logo.svg' +import { useGlassTheme } from '#/hooks/use-glass-theme' import NavItems from './components/nav-items.tsx' import WalletMenu from './components/wallet-menu.tsx' import CartButton from './components/cart-button.tsx' @@ -17,11 +18,14 @@ const Desktop = () => { const { width } = useWindowSize() const isMobile = width && width < 640 const { address: userAddress } = useAccount() + const { getNavClass } = useGlassTheme() if (isMobile) return null return ( -