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!