EZ ENS Referrer

This is a referral platform for the Ethereum Name Service (ENS) - think of it like a rewards program for sharing Web3 naming services with friends.

What it does: Share & Earn: Users create referral links to invite others to use ENS (Ethereum naming service like "yourname.eth") Get Rewarded: When people you refer successfully sign up, you earn points and unlock special NFT rewards Mint NFTs: As you hit referral milestones (1, 5, 10, 20, 50 referrals), you can mint unique ENS subname NFTs like "alice.gold.ezens.eth" Community Building: Create themed subdomain communities (like "gaming.yourname.eth") for targeted referrals

Technologies Used Frontend Stack React 18.3.1 - Core UI framework TypeScript - Type safety and development experience Vite 5.4.19 - Build tool and development server Tailwind CSS 3.4.17 - Utility-first CSS framework React Router DOM 6.30.1 - Client-side routing UI Component Library Radix UI - Comprehensive set of accessible UI primitives: Dialog, Dropdown, Tabs, Accordion, Toast, and 20+ other components Shadcn/ui - Pre-built components using Radix UI and Tailwind Lucide React - Icon library Recharts - Data visualization charts Blockchain & Web3 Integration Dynamic Labs SDK - Wallet connection and authentication @dynamic-labs/sdk-react-core - Core SDK @dynamic-labs/ethereum - Ethereum wallet connectors @dynamic-labs/wagmi-connector - Wagmi integration Wagmi 2.16.3 - React hooks for Ethereum Viem 2.33.3 - TypeScript interface for Ethereum Backend & Database Supabase - Backend-as-a-Service platform providing: PostgreSQL database Real-time subscriptions Authentication Edge Functions (Deno runtime) @tanstack/react-query - Server state management and caching Form Handling & Validation React Hook Form 7.61.1 - Form state management Zod 3.25.76 - Schema validation @hookform/resolvers - Validation resolvers State Management Zustand 5.0.7 - Lightweight state management How ENS is Used The application has sophisticated ENS (Ethereum Name Service) integration that serves multiple purposes:

1. ENS Detection & Verification Location: src/hooks/useENSDetection.ts + supabase/functions/check-ens-domain/index.ts

Reverse Resolution: Automatically detects if a connected wallet address has an associated ENS domain Forward Verification: Validates that the ENS domain actually resolves back to the wallet address Real-time Updates: Updates user profiles with ENS names when detected Technical Implementation:

Uses Ethereum mainnet RPC calls to the ENS Reverse Registrar (0x3671aE578E63FdF66ad4F3E12CC0c0d71Ac7510C) Implements custom name hashing for ENS resolution Validates bidirectional resolution (address → ENS → address) 2. ENS Subdomain Communities Location: src/components/ENSSubdomainReferralPanel.tsx

Community Creation: Users with ENS domains can create referral communities linked to their subdomains Referral Management: Generate and manage referral codes for specific ENS subdomains Analytics: Track community growth, referrals, and member engagement Features:

Create communities like gaming.ezens.eth Generate unique referral codes for each community Track community statistics and member activity Manage landing pages and descriptions 3. ENS-Based NFT Minting Location: src/components/SubnameMinting.tsx + src/hooks/useSmartContract.ts

Tiered System: Different ENS subname NFT tiers based on referral milestones Smart Contract Integration: Mints .ezens.eth subname NFTs on Base network Personalization: Users can customize their subname prefix Minting Tiers:

Starter (5 referrals): [custom].starter.ezens.eth Growth (15 referrals): [custom].growth.ezens.eth Pro (50 referrals): [custom].pro.ezens.eth Elite (100 referrals): [custom].elite.ezens.eth 4. Database Schema for ENS Data The Supabase database includes:

Profiles Table:

display_name - Stores ENS domain when detected wallet_address - Links to ENS resolution Subnames Table:

subname - Stores the full ENS subname referral_count - Tracks milestone progress nft_token_id - Links to minted NFT contract_address - Smart contract reference 5. ENS Visual Branding Location: src/components/ENSLogo.tsx