Skip to content

smartvin/OurWallet

Repository files navigation

MultiWallet - Component Testing Repository

A component testing repository for wallet connection functionality used in LINE mini dApps on the KAIA blockchain.

🚀 Quick Start

Prerequisites

  • Node.js: Version 20+ (recommended) or 18+ (minimum)
  • npm: Version 10+
  • Git

Installation

  1. Clone the repository

    git clone <repository-url>
    cd MultiWallet
  2. Install dependencies

    npm install
  3. Verify installation

    npm test
    npm run lint

🧪 Testing the UI

Development Server

Start the development server:

npm run dev

The server will start on http://localhost:3001/wallet.html (or next available port).

Browser Testing

Prerequisites for Wallet Testing

To test wallet connections, you'll need:

  1. KAIA Wallet (Kaikas)

  2. OKX Wallet

Testing the Modal

  1. Navigate to the wallet section in the application
  2. Click "Connect Wallet" to open the modal
  3. Test each wallet option:
    • KAIA Wallet: Should detect Kaikas extension
    • OKX Wallet: Should detect OKX extension
    • Google/LINE: Social login functionality (if implemented)

Expected Behaviors

  • Wallet Detected: Modal shows connection options
  • Wallet Not Detected: Error message appears
  • Connection Success: Modal closes, wallet connected
  • Connection Failed: Error message with details
  • Network Switching: Automatically switch to KAIA network

🏗️ Architecture

Core Components

src/wallet/
├── types.ts              # TypeScript interfaces
├── WalletConnector.ts    # Core wallet connection logic
├── WalletModal.tsx       # React UI component
├── WalletModal.module.scss  # Component styling
└── WalletConnector.test.ts  # Unit tests

Supported Wallets

Wallet Status Protocol
KAIA Wallet (Kaikas) ✅ Ready KAIA ethers extension
OKX Wallet ✅ Ready Standard Web3
Google OAuth 🔄 Existing Social login
LINE Login 🔄 Existing Social login
Bitget Wallet ⏳ Planned Phase 2

🧪 Testing

Unit Tests

npm test                    # Run all tests
npm test WalletConnector   # Run specific test

Linting

npm run lint               # Check code style

Build

npm run build              # TypeScript compilation

🔧 Configuration

Environment Variables

Create .env file (if needed):

# Example configuration
NODE_ENV=development

Network Configuration

The app is configured for:

  • KAIA Mainnet: Chain ID 8217
  • KAIA Testnet: Chain ID 1001 (for development)

🎯 Development Strategy

This repository follows a depth-first implementation approach:

  1. Phase 1: KAIA + OKX wallet integration (complete)
  2. Phase 2: Add Bitget wallet support
  3. Phase 3: Enhanced error handling and UX

📝 Key Features

  • Silverlynx Normal Form (SNF): Minimal, complete implementation
  • Adapter Pattern: Single interface for multiple wallets
  • Error Handling: Comprehensive error states and messages
  • TypeScript: Full type safety
  • Responsive Design: Mobile-friendly UI
  • Test Coverage: Unit tests for core functionality

🔍 Debugging

Common Issues

  1. "Wallet not detected"

    • Ensure browser extension is installed and enabled
    • Refresh the page and try again
  2. "Connection failed"

    • Check wallet is unlocked
    • Verify network settings
    • Check browser console for detailed errors
  3. Node version warnings

    • NestJS v11 requires Node 20+
    • Install latest Node.js for best compatibility

Debug Mode

Enable detailed logging:

NODE_ENV=development npm run dev

Check browser console for wallet connection logs.

🤝 Contributing

  1. Follow existing code patterns
  2. Run tests before committing: npm test
  3. Ensure linting passes: npm run lint
  4. Write tests for new wallet integrations

📚 Documentation


Status: Phase 1 Complete - Ready for browser testing Last Updated: 2025-06-29

About

Backend web3 wallet for a user-friendly web3 experience

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published