WalletKit

English | 简体中文

✨ Features

• 🚀 Lightweight - Built with Viem instead of Wagmi, core library < 50KB gzipped
• 🌍 Multi-Chain Support - Seamless network switching with RPC load balancing
• 🔐 Extensive Wallet Support - MetaMask, WalletConnect, Coinbase, Safe, Ledger, and EIP-6963 auto-detection
• 🎨 Fully Customizable - Complete theming system with dark mode support
• 🌐 i18n Ready - Built-in internationalization support
• 📱 Mobile Optimized - Responsive design with touch-friendly interactions
• 🔧 Framework Agnostic - Use as NPM package or standalone script
• 🛡️ Type Safe - Full TypeScript support with comprehensive type definitions

📦 Installation

NPM Package (for Svelte apps)

npm install @shelchin/walletkit
# or
pnpm add @shelchin/walletkit
# or
yarn add @shelchin/walletkit

Standalone Script (for any website)

<script src="https://unpkg.com/@shelchin/walletkit/dist/standalone.js"></script>

🚀 Quick Start

Svelte Component

<script>
    import { WalletKit, WalletButton } from '@shelchin/walletkit';

    const config = {
        projectId: 'YOUR_WALLETCONNECT_PROJECT_ID', // Required for WalletConnect
        networks: [1, 137, 42161], // Ethereum, Polygon, Arbitrum
        theme: 'auto', // 'light' | 'dark' | 'auto'
        locale: 'en' // 'en' | 'zh'
    };
</script>

<WalletKit {config}>
    <WalletButton />
</WalletKit>

Standalone Usage

<div id="wallet-container"></div>

<script src="https://unpkg.com/@shelchin/walletkit/dist/standalone.js"></script>
<script>
    WalletKit.init({
        containerId: 'wallet-container',
        projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
        theme: 'dark',
        networks: [1, 137, 42161]
    });
</script>

🛠️ Advanced Configuration

Complete Configuration Options

interface WalletKitConfig {
    // WalletConnect Project ID (required for WalletConnect)
    projectId?: string;

    // Supported networks (chain IDs)
    networks?: number[];

    // Custom RPC endpoints
    rpcUrls?: Record<number, string[]>;

    // Theme configuration
    theme?: 'light' | 'dark' | 'auto' | ThemeConfig;

    // Localization
    locale?: 'en' | 'zh' | LocaleConfig;

    // Wallet options
    wallets?: {
        includeDefault?: boolean;
        custom?: WalletConfig[];
    };

    // Features
    features?: {
        ensResolution?: boolean;
        siwe?: boolean; // Sign-In with Ethereum
        analytics?: boolean;
    };

    // Custom modal options
    modal?: {
        disableBackdropClick?: boolean;
        showRecentTransactions?: boolean;
    };
}

Custom Theme

const customTheme = {
    colors: {
        primary: '#6366f1',
        background: '#ffffff',
        text: '#111827',
        border: '#e5e7eb'
    },
    radius: {
        button: '0.75rem',
        modal: '1.5rem'
    },
    fonts: {
        base: 'Inter, system-ui, sans-serif'
    }
};

WalletKit.init({
    theme: customTheme
});

Custom Networks

const customNetworks = {
    networks: [1, 137, 42161, 56], // Include BSC
    rpcUrls: {
        1: ['https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY'],
        137: ['https://polygon-rpc.com'],
        42161: ['https://arb1.arbitrum.io/rpc'],
        56: ['https://bsc-dataseed.binance.org']
    }
};

📱 Mobile Support

WalletKit is fully optimized for mobile devices with:

• Touch-friendly interface
• Bottom sheet modals on mobile
• QR code scanning for WalletConnect
• Deep linking support
• Responsive design

🎨 Theming

Built-in Themes

• Light - Clean and modern light theme
• Dark - Eye-friendly dark theme
• Auto - Follows system preferences

Custom Theming

import { createTheme } from '@shelchin/walletkit';

const myTheme = createTheme({
    primary: '#8b5cf6',
    secondary: '#ec4899',
    borderRadius: 'lg',
    fontFamily: 'Roboto, sans-serif'
});

🌍 Internationalization

Supported Languages

• English (en)
• 简体中文 (zh)

Custom Translations

const customLocale = {
    connect: 'Connect Wallet',
    disconnect: 'Disconnect',
    switchNetwork: 'Switch Network',
    copyAddress: 'Copy Address'
    // ... more translations
};

WalletKit.init({
    locale: customLocale
});

🔌 API Reference

Core Methods

// Initialize WalletKit
WalletKit.init(config: WalletKitConfig): void

// Connect wallet
WalletKit.connect(): Promise<WalletConnection>

// Disconnect wallet
WalletKit.disconnect(): Promise<void>

// Get current account
WalletKit.getAccount(): Address | null

// Switch network
WalletKit.switchNetwork(chainId: number): Promise<void>

// Sign message
WalletKit.signMessage(message: string): Promise<string>

// Send transaction
WalletKit.sendTransaction(tx: TransactionRequest): Promise<string>

Event Listeners

// Account change
WalletKit.onAccountChange((account) => {
    console.log('Account changed:', account);
});

// Network change
WalletKit.onChainChange((chainId) => {
    console.log('Network changed:', chainId);
});

// Connection status
WalletKit.onConnectionChange((connected) => {
    console.log('Connection status:', connected);
});

Svelte Stores

import { account, chainId, connected, connecting } from '@shelchin/walletkit';

// Use in Svelte components
$: currentAccount = $account;
$: currentChain = $chainId;
$: isConnected = $connected;

🏗️ Architecture

WalletKit follows Clean Architecture principles:

src/
├── lib/
│   ├── domain/          # Business logic & types
│   ├── application/     # Use cases & services
│   ├── infrastructure/  # External integrations
│   └── presentation/    # UI components
├── standalone/          # Standalone build entry
└── routes/             # Demo pages

🧪 Development

Setup

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Build library
pnpm build

# Lint & format
pnpm lint
pnpm format

Testing

# Unit tests
pnpm test:unit

# E2E tests
pnpm test:e2e

# Type checking
pnpm check

📄 License

MIT © 2025 WalletKit

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

🔗 Links

• NPM Package
• GitHub Repository
• Live Demo

💖 Sponsors

Special thanks to all our sponsors and contributors!

---