Web-Based Wallet

A secure, decentralized cryptocurrency wallet built with Next.js, featuring seed phrase generation and multiple wallet management.

Features

Wallet Creation (Seed Phrase)

• 🔐 Secure Seed Phrase Generation - Generate BIP39-compliant 12-word seed phrases
• 💼 Multiple Wallets - Create unlimited wallets from a single seed phrase
• 🔑 Unique Key Pairs - Each wallet has unique ED25519 public/private key pairs
• 🔒 Privacy First - All data stored locally in sessionStorage

Airdrop Feature (New!) ⭐

• 💰 Solana Airdrop - Request test SOL on devnet and testnet
• 🔗 Wallet Connection - Connect any Solana wallet by address (no private key needed)
• � Network Switching - Switch between Solana devnet and testnet
• 📊 Balance Display - Real-time wallet balance with manual refresh
• 🔍 Explorer Integration - View wallets and transactions on Solana Explorer

General

• �🌓 Dark/Light Mode - Beautiful theme toggle with system preference support
• 📱 Mobile Responsive - Fully optimized for all device sizes

Tech Stack

• Framework: Next.js 15.5.6 with React 19
• UI: shadcn/ui + Tailwind CSS v4
• Blockchain: Solana Web3.js for wallet connection and airdrops
• Cryptography: BIP39, BIP44 derivation, ED25519 (tweetnacl)
• Theme: next-themes
• TypeScript: Full type safety

Getting Started

Prerequisites

• Node.js 18+ installed
• npm, yarn, or pnpm

Installation

# Clone the repository
git clone <your-repo-url>
cd web-based-wallet

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view the application.

Build for Production

# Create optimized production build
npm run build

# Start production server
npm start

Deployment to Vercel

Option 1: Deploy via Vercel CLI

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Option 2: Deploy via GitHub

1. Push your code to GitHub
2. Go to vercel.com
3. Import your repository
4. Vercel will auto-detect Next.js and deploy

Option 3: Deploy Button

Project Structure

├── src/
│   ├── app/
│   │   ├── page.tsx              # Home page with two options
│   │   ├── seed-phrase/
│   │   │   └── page.tsx          # Seed phrase generation/import
│   │   ├── airdrop/              # NEW: Airdrop feature
│   │   │   └── page.tsx          # Wallet connection & airdrop
│   │   ├── layout.tsx            # Root layout with theme provider
│   │   ├── globals.css           # Global styles
│   │   └── icon.svg              # Custom favicon
│   ├── components/
│   │   ├── ui/                   # shadcn/ui components
│   │   ├── SeedPhraseDisplay.tsx # Seed phrase component
│   │   ├── WalletCard.tsx        # Wallet display component
│   │   ├── theme-provider.tsx    # Theme context provider
│   │   └── theme-toggle.tsx      # Theme switcher component
│   └── lib/
│       ├── utils.ts              # Utility functions
│       ├── wallet.ts             # Core wallet cryptography
│       └── airdrop.ts            # NEW: Solana airdrop utilities
├── public/                       # Static assets
├── package.json                  # Dependencies
├── next.config.ts                # Next.js configuration
├── tsconfig.json                 # TypeScript configuration
└── vercel.json                   # Vercel deployment config

Security Notes

⚠️ Important Security Considerations:

• This is a demo wallet for educational purposes
• Never use for production with real funds without proper security audit
• Seed phrases are stored in sessionStorage (cleared on browser close)
• Private keys are hidden by default with bullet masking
• No server-side storage - all cryptography happens client-side

Features in Detail

Seed Phrase Management

• Generate secure 12-word BIP39 mnemonics
• Import existing seed phrases
• Validate seed phrase format
• Hide/show seed words with bullet masking

Wallet Generation

• BIP44 derivation path: m/44'/501'/accountIndex'/0' (501 is Solana's coin type)
• ED25519 key pair generation
• Unique wallet IDs using SHA-256
• Public/private key display with copy functionality

Airdrop Feature (Separate Page)

• Connect Wallet: Enter any Solana wallet address (Base58 format)
• No Private Key Required: Safe connection using public address only
• Network Selection: Toggle between Solana devnet and testnet
• Balance Checking: Real-time balance display with refresh button
• Airdrop Requests: Request 1 SOL from Solana faucet
• Transaction Tracking: View transaction signatures and status
• Explorer Links: Direct links to Solana Explorer for addresses and transactions
• Error Handling: Clear error messages and status updates

User Interface

• Clean, modern design with shadcn/ui
• Responsive layouts for mobile, tablet, desktop
• Dark/light theme with custom toggle animation
• Accessibility-focused components
• Consistent design across both features

Scripts

npm run dev      # Start development server (with Turbopack)
npm run build    # Create production build
npm start        # Start production server
npm run lint     # Run ESLint

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

MIT

Contributing

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

---

Built with ❤️ using Next.js and shadcn/ui

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.