Wallet Connect SDK

A lightweight React SDK to integrate crypto wallet connection into your app. It ships with a configurable wallet list modal and basic account actions. The current focus is EVM, built on top of @tomo-inc/wallet-adaptor-base, and supports custom wallets and chain configuration.

Quick Start

// App.tsx — wrap your app with provider (comments in English)
import React from "react";
import { WalletConnectProvider } from "@tomo-inc/wlfi-wallet-connect-kit";

export default function App() {
  return (
    <WalletConnectProvider>
      <YourApp />
    </WalletConnectProvider>
  );
}

Open modal, connect and disconnect

import React from "react";
import { useWalletConnect } from "@tomo-inc/wlfi-wallet-connect-kit";

export function ConnectButton() {
  const { openModal, isConnected, disconnect } = useWalletConnect();

  return (
    <button onClick={() => (isConnected ? disconnect() : openModal())}>
      {isConnected ? "Disconnect" : "Connect Wallet"}
    </button>
  );
}

Read account and sign

import React from "react";
import { useAccount } from "@tomo-inc/wlfi-wallet-connect-kit";

export function AccountInfo() {
  const { address, chainId, signMessage, signInWithWallet } = useAccount();

  const onSignMessage = async () => {
    // Message signing for verification
    const sig = await signMessage?.({ message: "Hello Tomo" });
    console.log("signature:", sig);
  };

  const onSignin = async () => {
    // SIW (sign-in with wallet) to get a token
    const token = await signInWithWallet();
    console.log("token:", token);
  };

  return (
    <div>
      <div>Address: {address}</div>
      <div>ChainId: {chainId}</div>
      <button onClick={onSignMessage}>Sign Message</button>
      <button onClick={onSignin}>Sign In With Wallet</button>
    </div>
  );
}

Optional: custom wallets and chains

import React from "react";
import {
  WalletConnectProvider,
  type Chain,
} from "@tomo-inc/wlfi-wallet-connect-kit";

const config = {
  // Custom wallet connectors (merge with defaults)
  connectors: [
    {
      id: "my-wallet",
      name: "My Wallet",
      namespace: "my.wallet",
      icon: "https://example.com/icon.png",
      iconBackground: "#000",
      downloadUrls: { chrome: "https://example.com/install" },
    },
  ],
  // Supported chains by chain type (compatible with viem/Chain for EVM)
  chains: {
    evm: [
      {
        id: 1,
        name: "Ethereum",
        nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
        rpcUrls: { default: { http: ["https://eth.merkle.io"] } },
        blockExplorers: {
          default: { name: "Etherscan", url: "https://etherscan.io" },
        },
      } as Chain,
    ],
    // aptos: [...],
    // solana: [...],
  },
  // Optional: WalletConnect protocol configuration
  // walletConnectConfig: { ... },

  // Optional: Embedded wallet configuration for social login
  embeddedWalletConfig: {
    apiKey: "your-api-key",
    // ... other embedded wallet settings
  },

  // Optional: Product type for UI theme (default: "tomo")
  prodType: "mydoge", // or "tomo"
};

export function AppWithConfig() {
  return (
    <WalletConnectProvider config={config}>
      <YourApp />
    </WalletConnectProvider>
  );
}

Exports

• WalletConnectProvider - Main provider component with optional config prop
• useWalletConnect - Hook for modal control and connection state: { isOpenModal, openModal, closeModal, isConnected, isConnecting, error, connect, disconnect }
• useAccount - Hook for account info and actions: { address, balance, chainType, chainId, currentWallet, currentProvider, switchChain, signMessage, signInWithWallet }
• Types: WalletConnectKitConfig, Chain, WalletProvider, UseAccount, UseWalletConnect, ChainType, ModalView
• Views: MyDogeSocialLoginView - Custom MyDoge-styled social login view with Twitter, Google login and email support

WalletConnectProvider Config

The config prop accepts:

• connectors?: WalletConfig[] - Custom wallet connectors to merge with defaults
• chains?: Partial<Record<ChainType, EvmChain[] | any[]>> - Supported chains by chain type (e.g., { evm: [...], aptos: [...], solana: [...] })
• walletConnectConfig?: WalletConnectProtocolConfig - WalletConnect protocol configuration
• embeddedWalletConfig?: InitConfig - Embedded wallet configuration for social login features (API key, OAuth settings, etc.)
• prodType?: ProdTypeEnum - Product type to determine UI theme ("tomo" or "mydoge"). Controls which social login view is displayed by default

Note: When prodType is set to "mydoge", the SDK will automatically use the MyDoge-styled UI theme for social login features. Set it to "tomo" or leave it unset for the default Tomo theme.

For more comprehensive examples, see EXAMPLE.md in the same directory.