SpinDrop - On-Chain Spin-the-Wheel Giveaway Tool | Full Source Code

Deploy It. Brand It. Spin It.

SpinDrop is a complete, ready-to-deploy spin-the-wheel giveaway dApp for Web3 projects. Deploy it on BNB Smart Chain, Ethereum, Polygon, Arbitrum, Base, or any EVM chain. Your community connects their wallets, spins the wheel, and wins token prizes or custom rewards — all on-chain, all verifiable.

This is not a template. It's a finished product with two smart contracts, an animated SVG wheel, wallet integration via Reown AppKit, and a full admin panel. Deploy the contracts, upload the frontend, and you have a live giveaway tool.

Live Preview | Documentation

---

How It Works

1. Deploy contracts — Run one Hardhat command to deploy your ERC-20 token and SpinWheel game contract to any EVM chain.
2. Configure prizes — Set 2–12 wheel segments with custom labels, token amounts, probability weights, and custom messages.
3. Fund the prize pool — Deposit tokens via the admin panel. The contract handles payouts automatically.
4. Players spin — 1 free spin per day, or pay tokens for extra spins. The wheel animation plays while the smart contract picks a winner.
5. Prizes are auto-sent — Token prizes go straight to the winner's wallet. Custom prizes display a message (whitelist spot, merch code, role upgrade).
6. Manage from the admin panel — Deposit/withdraw tokens, change spin cost, pause the wheel, toggle VRF — all from the web UI.

---

Complete Feature Set

Smart Contracts

• ERC-20 token — Mintable, ownable, max supply cap (1 billion). Brand it with your own name and symbol.
• SpinWheel game contract — Configurable segments, weighted probabilities, free spin cooldown, paid spin cost, prize pool management, on-chain spin history.
• 43 passing tests — Full test suite covering spin logic, access control, VRF integration, edge cases, and error conditions.
• OpenZeppelin security — ReentrancyGuard, SafeERC20, Pausable, Ownable, input validation on all functions.
• Multi-chain deployment — Pre-configured for BSC, Ethereum, Polygon, Arbitrum, and Base. Works on any EVM chain.

Chainlink VRF (Optional)

• Provably fair randomness — Enable Chainlink VRF v2.5 (direct funding) for cryptographically verified spin results. Every outcome has an on-chain proof.
• Toggle on/off at runtime — Switch between instant on-chain randomness and Chainlink VRF from the admin panel. No redeployment needed.
• No npm dependency — VRF interfaces are defined inline. No @chainlink/contracts package required.
• Works without VRF — SpinDrop uses block.prevrandao by default. Upgrade to VRF when ready.
• LINK balance management — View LINK balance and withdraw LINK from the admin panel.

Frontend

• Animated SVG wheel — Smooth spin animation with dramatic slowdown easing, tick sounds, and glow effects on the winning segment.
• Prize reveal — Full-screen overlay with confetti burst, near-miss detection, and win streak tracking.
• Live activity feed — Real-time spin history showing recent wins and results from all players.
• Leaderboard — Top winners ranked by total winnings with wallet address truncation and rank badges.
• Achievement toasts — First spin, big wins, and win streak notifications with animated popups.
• Floating particles — Ambient particle effects on the game page for visual polish.
• Sound effects — Web Audio API synthesized tick, whoosh, win fanfare, and big win sounds. No audio files needed. Mute toggle included.
• Responsive design — Works on desktop, tablet, and mobile.
• Error boundary — Graceful error handling with a recovery UI. Never shows a blank screen.

Wallet Integration

• Reown AppKit — Integrated wallet connection supporting MetaMask, TrustWallet, Coinbase Wallet, WalletConnect, and more.

Admin Panel

• Prize pool management — Deposit and withdraw tokens with a single transaction.
• Spin cost control — Change the cost of paid spins on the fly.
• Pause/unpause — Emergency pause to halt all spins instantly.
• VRF controls — Enable/disable Chainlink VRF, view LINK balance, withdraw LINK tokens.
• Owner-only access — Admin panel is only visible when connected with the deployer wallet.

Documentation

• Built-in documentation page — Ships at /documentation.html with 16 sections covering installation, deployment, customization, security, VRF setup, and troubleshooting.
• Dark theme — Matches the app's visual style. Sidebar navigation with scroll-aware highlighting.
• Mobile-friendly — Responsive sidebar with toggle for mobile viewing.

---

What You Can Customize

• Token name, symbol, and supply — Brand the ERC-20 token to your project.
• Wheel segments — 2–12 segments with custom labels, prize types (token or custom), amounts, and probability weights.
• Prize types — Token rewards (auto-sent to wallet) or custom prizes (whitelist spots, merch codes, role upgrades).
• Spin cost and cooldown — Set your own economics. Free spin cooldown from 1 hour to 7 days.
• UI colors and branding — Gold/amber theme is fully editable via CSS custom properties. Change fonts, colors, backgrounds.
• Randomness source — Use instant on-chain randomness or enable Chainlink VRF for provably fair spins.
• Target network — Deploy on any EVM chain by changing one config line.

---

Who It's For

• Web3 projects looking for a community engagement tool. Run token giveaways, reward holders, drive wallet connections.
• NFT collections that want to gamify whitelist distribution. Replace spreadsheets with a spin-the-wheel experience.
• DeFi protocols seeking a fun way to distribute airdrops, bonus tokens, or promotional rewards.
• Crypto communities on Discord, Telegram, or Twitter that want a branded on-chain game for their members.
• Freelancers and agencies building Web3 products for clients. Deploy a branded giveaway tool in under an hour.

Built for

Token giveaways, whitelist distributions, community engagement, airdrop campaigns, promotional events, holder rewards. If you need an on-chain prize wheel with real smart contracts and real payouts, SpinDrop does it.

---

Tech Stack

• Smart Contracts — Solidity 0.8.20 + Hardhat + OpenZeppelin v5
• Randomness — Chainlink VRF v2.5 (optional, direct funding)
• Frontend — React 19 + TypeScript + Vite 7
• Styling — Tailwind CSS 4
• Wallet — Wagmi v3 + Reown AppKit
• Wheel — SVG with Web Audio API
• Hosting — Any static host (Vercel, Netlify, cPanel)
• Blockchain — Any EVM chain (BSC, Ethereum, Polygon, Arbitrum, Base)

---

Deployment Overview

1. Install dependencies — npm install in both contracts/ and frontend/.
2. Set your private key — Add your deployer wallet key to contracts/.env.
3. Deploy contracts — Run npx hardhat run scripts/deploy.js --network bscTestnet.
4. Update frontend — Paste your contract addresses into frontend/src/lib/contracts.ts.
5. Set Reown Project ID — Add your free Reown project ID to frontend/.env.
6. Build and deploy — npm run build and upload the dist/ folder to any static host.

Full step-by-step instructions with code examples included in the built-in documentation page.

---

Requirements

• Node.js 18+ and npm
• Native gas tokens for contract deployment (BNB, ETH, MATIC, etc.)
• A Reown Project ID (free at cloud.reown.com) for wallet connections
• A wallet with a private key for deploying contracts
• Any static hosting for the frontend (Vercel free tier works)
• LINK tokens (only if using Chainlink VRF) — available from faucets for testnets