Quick Start

Installation

npm install @tomo-inc/tomo-evm-kit

or

pnpm i @tomo-inc/tomo-evm-kit

Import Styles

import '@tomo-inc/tomo-evm-kit/styles.css';

Set Up TomoEVMKitProvider

Replace RainbowKit with TomoEVMKitProvider. Use a `clientId` obtained from the https://dashboard.tomo.inc/.

import { getDefaultConfig, TomoEVMKitProvider } from '@tomo-inc/tomo-evm-kit';
import { WagmiProvider } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum, base } from 'wagmi/chains';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

const config = getDefaultConfig({
  clientId: 'XXXXXXXXXXXXXXXXXXXXXXX', // Replace with your clientId
  appName: 'My TomoEVMKit App',
  projectId: 'YOUR_PROJECT_ID', // Note: Every dApp that relies on WalletConnect now needs to obtain a projectId from WalletConnect Cloud.
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server-side rendering (SSR)
});

const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <TomoEVMKitProvider>
          {/* Your App */}
        </TomoEVMKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

export default App;

Create a Project and Retrieve clientId

1. Talk to us to create an developer account.

2. Log in to the Tomo Developer Dashboard.

3. Create a new project and copy the generated `clientId`.

4. Use this `clientId` in your TomoEVMKitProvider.

Add Wallets

TomoEVMKit integrates multiple wallets, including MetaMask, WalletConnect, and more. Add wallets during configuration using the following example:

import { metaMaskWallet, rainbowWallet, walletConnectWallet } from '@rainbow-me/rainbowkit/wallets';

const config = getDefaultConfig({
  clientId: 'XXXXXXXXXXXXXXXXXXXXXXX', // Replace with your clientId
  appName: 'My TomoEVMKit App',
  projectId: 'YOUR_PROJECT_ID', // Note: Every dApp that relies on WalletConnect now needs to obtain a projectId from WalletConnect Cloud.
  …
  wallets: [metaMaskWallet, rainbowWallet, walletConnectWallet],
});

Displaying the Modal

To display the Modal for wallet connection, you can use the hooks provided by TomoEVMKit. These hooks are based on RainbowKit’s modal system.

Example Code:

import { useConnectModal } from '@tomo-inc/tomo-evm-kit';

const ConnectButton = () => {
  const { openConnectModal } = useConnectModal();

  return (
    <button onClick={openConnectModal}>
      Connect Wallet
    </button>
  );
};

export default ConnectButton;

Additional Reference

For more advanced usage of the Modal system, you can refer to the RainbowKit Documentation. The behavior and integration are similar, making it easy to adapt.