@wangjinbao/wallet-connect

A React + TypeScript wallet connection library supporting MetaMask, OKX Wallet, Phantom, and Coinbase Wallet.

Features

• 🔌 Easy wallet connection with multiple wallet support
• 🔄 Automatic chain switching (bidirectional sync)
• 🎨 Beautiful UI components with TailwindCSS
• 📱 Responsive and accessible
• 🔒 Type-safe with TypeScript
• 🎯 Based on MetaMask JSON-RPC API standard (EIP-1193)
• 💾 Auto-reconnect on page refresh

Supported Wallets

• MetaMask
• OKX Wallet
• Phantom (EVM)
• Coinbase Wallet

Installation

npm install @wangjinbao/wallet-connect

Quick Start

1. Import Styles

Import the component styles in your app's entry point:

import "@wangjinbao/wallet-connect/styles.css";

2. Wrap Your App with WalletProvider

import { WalletProvider, mainnet, sepolia } from "@wangjinbao/wallet-connect";

function App() {
  return (
    <WalletProvider
      config={{
        chains: [mainnet, sepolia],
        autoConnect: true,
      }}
    >
      <YourApp />
    </WalletProvider>
  );
}

3. Use the ConnectButton Component

import { ConnectButton } from "@wangjinbao/wallet-connect";

function YourApp() {
  return (
    <div>
      <ConnectButton />
    </div>
  );
}

4. Access Wallet State

import { useWallet } from "@wangjinbao/wallet-connect";

function MyComponent() {
  const { state, switchChain } = useWallet();

  return (
    <div>
      {state.isConnected ? (
        <div>
          <p>Connected to: {state.wallet?.name}</p>
          <p>Account: {state.account}</p>
          <p>Chain ID: {state.chainId}</p>
        </div>
      ) : (
        <p>Not connected</p>
      )}
    </div>
  );
}

API Reference

WalletProvider

The main provider component that manages wallet state.

Props:

• config.chains - Array of supported chains
• config.autoConnect - Enable auto-reconnect (default: true)
• config.appName - Your app name (optional)

ConnectButton

Pre-built button component with wallet selection modal and chain switcher.

useWallet Hook

Hook to access wallet context.

Returns:

{
  state: {
    isConnected: boolean;
    account: string | null;
    chainId: string | null;
    wallet: WalletInfo | null;
  };
  connect: (walletId: string) => Promise<void>;
  disconnect: () => Promise<void>;
  switchChain: (chainId: string) => Promise<void>;
  availableWallets: WalletInfo[];
  supportedChains: Chain[];
}

Custom Chain Configuration

import { Chain } from "@wangjinbao/wallet-connect";

const myCustomChain: Chain = {
  chainId: "0x89", // Polygon
  chainName: "Polygon Mainnet",
  nativeCurrency: {
    name: "MATIC",
    symbol: "MATIC",
    decimals: 18,
  },
  rpcUrls: ["https://polygon-rpc.com"],
  blockExplorerUrls: ["https://polygonscan.com"],
};

Advanced Usage

Direct Wallet Access

import { MetaMaskWallet } from "@wangjinbao/wallet-connect";

const wallet = new MetaMaskWallet();

if (wallet.isInstalled()) {
  const accounts = await wallet.connect();
  const chainId = await wallet.getChainId();
}

Custom Styling

The library uses TailwindCSS for styling. All classes are prefixed with wangjinbao- to avoid conflicts. You can override styles by targeting these classes in your CSS.

TypeScript

This library is written in TypeScript and includes type definitions. All types are exported for your use:

import type {
  Chain,
  WalletInfo,
  WalletState,
  WalletContextValue,
  EthereumProvider,
} from "@wangjinbao/wallet-connect";

License

MIT