Kage

Kage is a modern, multi-chain wallet generator web app built with Next.js. It allows users to generate, view, and manage wallets for multiple blockchains (currently Solana and Ethereum) with a focus on security, usability, and a beautiful, responsive UI.

---

Features

• Multi-chain support: Generate wallets for Solana and Ethereum.
• Mnemonic-based wallet generation: Securely generate and restore wallets using BIP39 mnemonics.
• Local-first: All wallet data is stored in your browser's local storage for privacy and security.
• Modern UI: Built with shadcn/ui, framer-motion, and custom theming.
• Dark mode: Seamless light/dark theme switching.
• User-friendly: Copy keys, view/hide private keys, and manage multiple wallets easily.

---

Architecture Overview

1. Wallet Generation Logic

The core wallet logic is implemented in lib/wallet.ts:

• Mnemonic Generation: Uses bip39 to generate and validate BIP39 mnemonics.
• Seed Derivation: Converts the mnemonic to a seed using mnemonicToSeedSync.
• HD Wallet Paths: Supports BIP44 derivation paths for Solana (m/44'/501'/0'/<account>') and Ethereum (m/44'/60'/0'/<account>').
• Key Derivation:
  • Solana: Uses ed25519-hd-key and tweetnacl to derive the keypair, then encodes the private key with bs58.
  • Ethereum: Uses ethers.js to create a wallet from the derived private key.
• Wallet Object: Each wallet contains a public key/address, private key, mnemonic, and derivation path.

Example:

const wallet = generateWalletFromMnemonic('501', mnemonic, 0); // Solana
const wallet = generateWalletFromMnemonic('60', mnemonic, 0);  // Ethereum

2. UI & State Management

• Main Page: app/page.tsx renders the Navbar and WalletGenerator components.
• WalletGenerator: components/wallet-generator.tsx manages wallet state, mnemonic input, and user actions (generate, add, delete, clear wallets). Uses React state and localStorage for persistence.
• Chain Selection: components/chain-selector.tsx lets users pick Solana or Ethereum before generating wallets.
• Mnemonic Display: components/mnemonic-display.tsx shows the recovery phrase in a secure, user-friendly way.
• Wallet Cards: components/wallet-card.tsx display each wallet's public/private keys, with options to copy, show/hide, or delete.
• UI Library: Uses shadcn/ui for consistent, accessible components (buttons, dialogs, inputs, etc.).
• Animations & Feedback: Uses framer-motion for smooth transitions and sonner for toast notifications.

3. Styling & Theming

• Tailwind CSS: Utility-first styling with custom theme variables in app/globals.css.
• Dark Mode: Theme toggling via components/theme-provider.tsx and next-themes.
• Responsive Design: Layout adapts to all screen sizes.

---

Project Structure

kage/
├── app/
│   ├── globals.css         # Tailwind & global styles
│   ├── layout.tsx          # App layout & theme provider
│   └── page.tsx            # Main page (Navbar + WalletGenerator)
├── components/
│   ├── chain-selector.tsx  # Blockchain selection UI
│   ├── wallet-generator.tsx# Main wallet logic & UI
│   ├── wallet-card.tsx     # Individual wallet display
│   ├── mnemonic-display.tsx# Recovery phrase display
│   ├── ...                 # Other UI components
├── lib/
│   ├── wallet.ts           # Wallet generation logic
│   └── utils.ts            # Utility functions
├── public/                 # Static assets (SVGs, etc.)
├── package.json            # Dependencies & scripts
└── README.md               # This file

---

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open http://localhost:3000 in your browser.

---

Design Inspiration

This project was inspired by the clean, modern design and UX of Kosh Wallet.

---

License

MIT