Liquid glass

.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:
+
+<feature_description>
+$ARGUMENTS
+</feature_description>
+
+Based on this description, create a GitHub issue following the structure outlined above. Your response should be formatted as follows:
+
+<github_issue>
+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]
+</github_issue>
+
+Ensure that your response contains only the content within the <github_issue> tags, ready to be copied and pasted directly into a GitHub issue.

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.

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",

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<TopEightActivityProps> = ({ user, isConnectedUs
 
   const { t } = useTranslation()
   const isClient = useIsClient()
+  const { getGlassClass } = useGlassTheme()
   const headerRight = {
     'top 8': (
       <button
@@ -94,7 +96,12 @@ const TopEightActivity: React.FC<TopEightActivityProps> = ({ user, isConnectedUs
         {accountAddress ? (
           <FeedCard activityAddress={accountAddress} cardSize='lg:w-[360px] xl:w-[602px]' />
         ) : (
-          <p className='bg-neutral rounded-sm py-8 text-center text-xl font-semibold italic lg:w-[360px] xl:w-[602px]'>
+          <p
+            className={cn(
+              getGlassClass('liquid-glass-card', 'bg-neutral'),
+              'rounded-sm py-8 text-center text-xl font-semibold italic lg:w-[360px] xl:w-[602px]'
+            )}
+          >
             {t('no activity')}
           </p>
         )}
@@ -104,11 +111,22 @@ const TopEightActivity: React.FC<TopEightActivityProps> = ({ user, isConnectedUs
 
   return (
     <div className='flex flex-col gap-4'>
-      <div className='bg-neutral shadow-medium -top-0.5 z-20 flex w-full items-center justify-between gap-4 rounded-sm p-2 lg:sticky'>
-        <div className='bg-grey relative flex w-full items-center rounded-sm sm:w-64 lg:w-full xl:w-64'>
+      <div
+        className={cn(
+          getGlassClass('liquid-glass-card', 'bg-neutral shadow-medium'),
+          '-top-0.5 z-20 flex w-full items-center justify-between gap-4 rounded-sm p-2 lg:sticky'
+        )}
+      >
+        <div
+          className={cn(
+            getGlassClass('liquid-glass-subtle', 'bg-grey'),
+            'relative flex w-full items-center rounded-sm sm:w-64 lg:w-full xl:w-64'
+          )}
+        >
           <div
             className={cn(
-              'bg-text/10 absolute h-full w-1/2 rounded-sm transition-all duration-200',
+              'absolute h-full w-1/2 rounded-sm transition-all duration-200',
+              getGlassClass('liquid-glass-button', 'bg-text/10'),
               activeTab === 'top 8' ? 'left-0' : 'left-1/2'
             )}
           />