👻 Ghost Circle - Whitelist Website

First ZK-Privacy Rollup on Sui Network

Live Demo | Documentation | Discord

🌟 Overview

Ghost Circle is the first Zero-Knowledge Privacy Rollup built on the Sui blockchain. This is the official whitelist registration website where early supporters can secure their spot for exclusive benefits and early access.

✨ Features

• 🔐 Sui Wallet Integration - Connect with any Sui-compatible wallet
• 📊 Real-time Task Tracking - Interactive status tracker for social tasks
• 📈 Live User Count - Real-time statistics from Supabase database (updates every 30s)
• 🎨 Cyberpunk UI - Stunning neon-themed design with animations
• 💾 Supabase Backend - Secure and scalable data storage
• 📱 Fully Responsive - Works perfectly on all devices
• ⚡ Lightning Fast - Built with Next.js 14 and optimized for performance

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• A Supabase account (free tier works)
• Sui wallet for testing

Installation

# Clone the repository
git clone https://github.com/yourusername/ghost-circle-whitelist.git
cd ghost-circle-whitelist

# Install dependencies
npm install

# Copy environment variables
cp .env.local.example .env.local

# Edit .env.local and add your Supabase credentials
# NEXT_PUBLIC_SUPABASE_URL=your_url
# SUPABASE_SERVICE_KEY=your_key

# Run development server
npm run dev

Visit http://localhost:3000 to see the website.

📦 Project Structure

ghost-circle-whitelist/
├── app/
│   ├── api/
│   │   └── whitelist/
│   │       └── route.ts          # API endpoint for submissions
│   ├── globals.css               # Global styles with Cyberpunk theme
│   ├── layout.tsx                # Root layout with providers
│   ├── page.tsx                  # Main landing page
│   └── providers.tsx             # Sui dApp Kit & React Query setup
├── components/
│   ├── AuditProgress.tsx         # Project audit progress bar
│   ├── HeroSection.tsx           # Hero section with project intro
│   └── StatusTracker.tsx         # Main whitelist task tracker
├── .env.local.example            # Environment variables template
├── next.config.js                # Next.js configuration
├── package.json                  # Dependencies
├── tailwind.config.js            # Tailwind with custom theme
└── tsconfig.json                 # TypeScript configuration

🗄️ Database Setup (Supabase)

1. Create a Supabase Project

Go to supabase.com and create a new project.

2. Create the whitelist Table

Run this SQL in the Supabase SQL editor:

CREATE TABLE whitelist (
  id BIGSERIAL PRIMARY KEY,
  wallet_address TEXT UNIQUE NOT NULL,
  twitter_followed BOOLEAN DEFAULT FALSE,
  discord_joined BOOLEAN DEFAULT FALSE,
  status TEXT DEFAULT 'pending',
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create index for faster lookups
CREATE INDEX idx_wallet_address ON whitelist(wallet_address);

-- Enable Row Level Security (optional but recommended)
ALTER TABLE whitelist ENABLE ROW LEVEL SECURITY;

-- Create policy to allow inserts
CREATE POLICY "Allow public inserts" ON whitelist
  FOR INSERT WITH CHECK (true);

-- Create policy to allow public selects
CREATE POLICY "Allow public selects" ON whitelist
  FOR SELECT USING (true);

3. Get Your API Keys

• Go to Project Settings → API
• Copy the URL to NEXT_PUBLIC_SUPABASE_URL
• Copy the service_role key to SUPABASE_SERVICE_KEY

📚 Detailed Setup Guide: See docs/SETUP_REAL_STATS.md for complete instructions on enabling real-time user count.

🎨 Customization

Update Social Media Links

Edit components/StatusTracker.tsx:

const handleTwitter = () => {
  window.open('https://x.com/YOUR_HANDLE', '_blank')
}

const handleDiscord = () => {
  window.open('https://discord.gg/YOUR_INVITE', '_blank')
}

Adjust Theme Colors

Edit tailwind.config.js:

colors: {
  'cyber-purple': '#8B5CF6',  // Change to your brand color
  'cyber-violet': '#A855F7',
  // ... add more colors
}

Update Project Information

Edit components/HeroSection.tsx to customize the hero text, features, and messaging.

🚢 Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Go to vercel.com
3. Import your repository
4. Add environment variables in Vercel dashboard
5. Deploy!

Build for Production

npm run build
npm start

🔧 Advanced Features

Add Twitter API Verification

To verify that users actually followed your account:

1. Apply for Twitter Developer account
2. Create an app and get API keys
3. Implement OAuth flow in the API route
4. Check follower status via Twitter API

Add Discord OAuth

To verify Discord server membership:

1. Create Discord application
2. Set up OAuth2 redirect URLs
3. Implement Discord OAuth flow
4. Check server membership via Discord API

📊 Analytics (Optional)

Add analytics to track conversions:

npm install @vercel/analytics

In app/layout.tsx:

import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request.

📄 License

MIT License - feel free to use this for your own projects!

🔗 Links

• Twitter: @ghost_onsui
• Discord: Join our community
• Website: ghostcircle.io

💬 Support

If you have questions or need help:

• Join our Discord server
• Open an issue on GitHub
• Contact us on Twitter

---

Built with ❤️ for the Ghost Circle community

Made with Next.js, Sui dApp Kit, and Supabase