Svelte Walletkit

atshelchin

WalletKit

A modern, lightweight Ethereum wallet connection library for Svelte applications with dual usage modes - as an NPM package for Svelte apps or as a standalone widget for any HTML page.

✨ Features

🎯 Dual Usage Modes: NPM package for Svelte apps AND standalone JavaScript for any HTML page
🚀 Lightweight: Built with viem instead of wagmi for significantly smaller bundle size
🌐 Advanced Network Management: RPC load balancing, custom networks, multi-chain support
💼 Extensive Wallet Support: MetaMask, WalletConnect, Coinbase Wallet, Safe, Ledger, and all EIP-6963 wallets
🔐 Security First: SIWE authentication, encrypted sessions, input validation
🎨 Full Customization: Complete theming system, i18n support, widget mode
📱 Mobile Optimized: Responsive design, mobile wallet deep linking
🔥 Developer Experience: Full TypeScript support, comprehensive docs, event-driven architecture

📦 Installation

NPM Package (Recommended for Svelte Apps)

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

<!-- Add to your HTML -->
<script src="https://unpkg.com/@shelchin/walletkit/dist/widget.umd.cjs"></script>

🚀 Quick Start

Svelte Application

<script>
    import { WalletKit } from '@shelchin/walletkit';
    import { onMount } from 'svelte';

    let walletKit;

    onMount(() => {
        walletKit = new WalletKit({
            projectId: 'your-walletconnect-project-id', // Get from https://cloud.walletconnect.com
            networks: [1, 137, 56], // Ethereum, Polygon, BSC
            theme: 'auto', // 'light', 'dark', or 'auto'
            locale: 'en' // 'en', 'zh', etc.
        });
    });

    async function connectWallet() {
        const account = await walletKit.connect();
        console.log('Connected:', account);
    }
</script>

<button on:click={connectWallet}> Connect Wallet </button>

<!DOCTYPE html>
<html>
    <head>
        <title>WalletKit Example</title>
    </head>
    <body>
        <!-- Your content -->

        <!-- Add WalletKit widget -->
        <script src="https://unpkg.com/@shelchin/walletkit/dist/widget.umd.cjs"></script>
        <script>
            // Initialize the widget
            WalletKitWidget.init({
                position: { side: 'right' }, // 'left' or 'right'
                theme: 'light',
                networks: [1, 137],
                projectId: 'your-walletconnect-project-id'
            });

            // Listen for wallet events
            WalletKitWidget.on('connect', (account) => {
                console.log('Wallet connected:', account);
            });

            WalletKitWidget.on('disconnect', () => {
                console.log('Wallet disconnected');
            });
        </script>
    </body>
</html>

🛠️ Configuration

WalletKit Options

interface WalletKitConfig {
    // Required
    projectId?: string; // WalletConnect project ID

    // Network Configuration
    networks?: number[]; // Chain IDs to support
    defaultNetwork?: number; // Default chain ID
    rpcUrls?: Record<number, string[]>; // Custom RPC URLs

    // UI Configuration
    theme?: 'light' | 'dark' | 'auto';
    locale?: 'en' | 'zh' | 'ja' | 'ko' | 'es' | 'fr';
    position?: { side: 'left' | 'right' };

    // Features
    enableAnalytics?: boolean;
    enableSIWE?: boolean; // Sign-In with Ethereum
    enableENS?: boolean; // ENS resolution

    // Callbacks
    onConnect?: (account: string) => void;
    onDisconnect?: () => void;
    onNetworkChange?: (chainId: number) => void;
}

📚 API Reference

Core Methods

// Connect wallet
const account = await walletKit.connect();

// Disconnect wallet
await walletKit.disconnect();

// Get current account
const account = walletKit.getAccount();

// Get current network
const chainId = walletKit.getChainId();

// Switch network
await walletKit.switchNetwork(137); // Switch to Polygon

// Sign message
const signature = await walletKit.signMessage('Hello World');

// Send transaction
const hash = await walletKit.sendTransaction({
    to: '0x...',
    value: '1000000000000000000', // 1 ETH in wei
    data: '0x'
});

// Show/hide widget
WalletKitWidget.show();
WalletKitWidget.hide();

// Update configuration
WalletKitWidget.updateConfig({ theme: 'dark' });

// Destroy widget
WalletKitWidget.destroy();

🎨 Theming

Using CSS Variables

:root {
    --walletkit-primary: #667eea;
    --walletkit-primary-hover: #5a67d8;
    --walletkit-background: #ffffff;
    --walletkit-text: #333333;
    --walletkit-border: #e2e8f0;
    --walletkit-radius: 8px;
    --walletkit-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Custom Theme Object

const customTheme = {
    colors: {
        primary: '#667eea',
        background: '#ffffff',
        text: '#333333',
        border: '#e2e8f0'
    },
    fonts: {
        body: 'Inter, sans-serif'
    },
    radii: {
        button: '8px',
        modal: '12px'
    }
};

walletKit.setTheme(customTheme);

🌍 Internationalization

Supports multiple languages out of the box:

// Change language
walletKit.setLocale('zh'); // Switch to Chinese

// Available locales
// 'en' - English (default)
// 'zh' - Chinese
// 'ja' - Japanese
// 'ko' - Korean
// 'es' - Spanish
// 'fr' - French

🔧 Development

Setup

# Clone the repository
git clone https://github.com/atshelchin/walletkit.git
cd walletkit

# Install dependencies
pnpm install

# Start development server
pnpm dev

Build

# Build library for NPM
pnpm build:lib

# Build standalone widget
pnpm build:widget

# Build documentation site
pnpm build:docs

# Build everything
pnpm build

Testing

# Run unit tests
pnpm test:unit

# Run E2E tests
pnpm test:e2e

# Run all tests
pnpm test

📋 Supported Wallets

Injected Wallets: MetaMask, Brave Wallet, Opera Wallet, etc.
WalletConnect: 300+ wallets via WalletConnect protocol
Coinbase Wallet: Including Smart Wallet support
Safe: Gnosis Safe multi-sig wallets
Ledger: Hardware wallet support
Trezor: Hardware wallet support
EIP-6963: Auto-detection of installed wallets

🌐 Supported Networks

Default support for:

Ethereum Mainnet
Polygon
Binance Smart Chain
Arbitrum
Optimism
Avalanche
And more...

Easy to add custom networks:

walletKit.addNetwork({
    chainId: 42161,
    name: 'Arbitrum One',
    rpcUrls: ['https://arb1.arbitrum.io/rpc'],
    nativeCurrency: {
        name: 'Ether',
        symbol: 'ETH',
        decimals: 18
    },
    blockExplorers: ['https://arbiscan.io']
});

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with Svelte and SvelteKit
Ethereum interactions powered by viem
Wallet connections via WalletConnect
UI components styled with Tailwind CSS

📞 Support

📧 Email: support@walletkit.io
💬 Discord: Join our community
🐦 Twitter: @walletkit
📖 Documentation: https://atshelchin.github.io/walletkit
🐛 Issues: GitHub Issues

Made with ❤️ by the WalletKit Team

Top categories