Multilanguage Web Crypto Wallet

The application includes comprehensive multi-chain network reference documentation to guide developers on correct asset and network parameter usage for API requests.

Features

• Multi-Chain Support: Native coins (BTC, ETH, BNB, SOL, TRX, XRP) and multi-network tokens (USDT, USDC)
• Wallet Operations: Deposit, withdrawal, and internal transfer functionality
• Network-Aware UI: Dynamic network selection for multi-network tokens
• QR Code Generation: Built-in QR code support for address sharing
• Real-Time Updates: Socket.io integration for live balance and transaction updates
• Responsive Design: Tailwind CSS styling with mobile-first approach
• Error Boundaries: Page-level error handling with auto-recovery from extension conflicts
• PWA Ready: Manifest configuration for standalone app installation
• TypeScript Support: Full type safety with TypeScript configuration

Tech Stack

• Framework: Next.js 14.2.21
• Language: TypeScript 5.7.2
• Styling: Tailwind CSS 3.4.17 + PostCSS
• UI Components: Lucide React (icons), Recharts (charts)
• Real-Time: Socket.io Client 4.8.3
• QR Codes: qrcode.react 4.2.0
• Utilities: clsx, tailwind-merge
• Runtime: React 18.3.1

Setup/Usage

Installation

npm install
# or
yarn install

Development

npm run dev

Starts the development server at http://localhost:3000

Production Build

npm run build
npm start

Linting

npm run lint

Configuration

Next.js Config (next.config.js)

• TypeScript build errors ignored (set to strict mode as needed)
• ESLint warnings ignored during builds
• Remote image optimization enabled for images.pexels.com

Environment Setup

Demo credentials for testing:

• Email: demo@example.com
• Password: demo1234
• User: Demo User

Multi-Chain Network Reference

Native Coins (Single Network)

Multi-Network Tokens

API Request Examples

Withdrawal (Native Coin)

POST /api/wallet/withdraw
{
  "asset": "eth",
  "network": "eth",
  "amount": "0.5",
  "address": "0x742d35Cc6634C0532925a3b844Bc9e7595f5bA12",
  "withdrawal_password": "123456"
}

Withdrawal (Token)

POST /api/wallet/withdraw
{
  "asset": "usdt",
  "network": "trc20",
  "amount": "50",
  "address": "TExampleTrxAddressHere",
  "withdrawal_password": "123456"
}

Withdrawal Preview

GET /api/wallet/withdraw/preview?asset=trx&network=trx&amount=100

Internal Transfer

POST /api/wallet/internal-transfer
{
  "asset": "usdt",
  "network": "bep20",
  "amount": "100",
  "to_user_id": "12345"
}

Common Implementation Mistakes

❌ Using token network for native coins

{ "asset": "trx", "network": "trc20" }  // Wrong!

✅ Correct

{ "asset": "trx", "network": "trx" }

❌ Using native network for tokens

{ "asset": "usdt", "network": "trx" }  // Wrong!

✅ Correct

{ "asset": "usdt", "network": "trc20" }

❌ Using "bnb" as network

{ "asset": "bnb", "network": "bnb" }  // Wrong!

✅ Correct

{ "asset": "bnb", "network": "bsc" }

Frontend Implementation Checklist

• Hardcode network for native coins (no user selection)
• Show network selector for multi-network tokens (USDT/USDC)
• Validate asset + network combinations before API calls
• Display correct network name in confirmation screens
• Show appropriate address format hints based on network
• Handle Socket.io connection for real-time updates
• Implement error boundaries for graceful error handling

Project Structure

src/
├── app/
│   ├── error.tsx          # Page-level error boundary
│   └── ...                # Page components
├── components/            # Reusable UI components
├── hooks/                 # Custom React hooks
└── utils/                 # Utility functions
public/
├── manifest.json          # PWA manifest
└── icons/                 # App icons (192x512)

Notes

• Backend includes automatic network normalization for safety, but frontend should always send correct values
• Extension conflicts may cause DOM errors; error boundary includes auto-recovery
• TypeScript strict mode can be enabled by modifying next.config.js
• Remote images are optimized via Next.js Image component