AFA WEB3TOOL - Integrated Web3 Dashboard

The main gateway to the AFA ecosystem. An all-in-one Web3 platform designed for airdrop hunters and community members.

🌐 Live Demo | 🐛 Report Bug

---

✨ Key Features

💎 Core Ecosystem

• AFA Identity (SBT): On-chain identity system using Soul-Bound Tokens (ERC-721) on OP Sepolia.
• Membership Tiers: Upgradeable NFT mechanics to unlock premium dashboard features.
• Wallet Connect: Integrated with Wagmi & Web3Modal for seamless multi-wallet support.

📱 User Experience (New)

• Progressive Web App (PWA): Installable on Android & iOS. Looks and feels like a native app.
• Offline Support: Automatic network detection with smart notifications when connection is lost/restored.
• Multi-language: Native support for English and Indonesian.
• Themes: Customizable Dark/Light mode for visual comfort.

🛡️ Security & Auth

• Flexible Login: Support for Email/Password, Web3 Wallet, and Telegram Auth.
• Account Linking: Unified profile connecting Web2 (Email/Telegram) and Web3 (Wallet) identities.

🛠️ Tech Stack

Frontend

• Framework: React (Vite)
• Styling: Tailwind CSS + FontAwesome
• Web3: Wagmi + Ethers.js + Web3Modal
• PWA: Web Manifest & Service Workers

Backend & Infrastructure

• Core: Supabase (Auth, Database, Realtime)
• Compute: Supabase Edge Functions (Deno)
• Hosting: Vercel

Smart Contracts

• Network: Optimism Sepolia
• Standard: ERC-721 (Soul-Bound)
• Language: Solidity

🚀 Getting Started

1. Clone the repository

   git clone [https://github.com/bayyubenjamin/afa_web3tool.git](https://github.com/bayyubenjamin/afa_web3tool.git)
   cd afa_web3tool

2. Install dependencies

   npm install
   # or
   yarn install

3. Setup Environment Variables Create a .env file based on your Supabase and WalletConnect credentials.

4. Run Development Server

   npm run dev

🏗️ Project Structure

/
├── android/              # Native Android wrapper (Capacitor)
├── supabase/             # Edge Functions & Database types
├── public/               # Static assets & Manifest
├── src/
│   ├── components/       # UI Components
│   ├── contracts/        # ABI & Contract Addresses
│   ├── hooks/            # Custom React Hooks
│   ├── services/         # API & Supabase logic
│   └── wagmiConfig.js    # Web3 Configuration
└── vercel.json           # Deployment Headers & Rules