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 '@tomo-inc/tomo-evm-kit/wallets';

const config = getDefaultConfig({
  clientId: 'XXXXXXXXXXXXXXXXXXXXXXX', // Replace with your clientId
  appName: 'My TomoEVMKit App',
  projectId: 'YOUR_PROJECT_ID', // Note: Every dApp relying on WalletConnect needs a projectId from WalletConnect Cloud.
  // Additional configuration options can be added here
  wallets: [
    {
      groupName: 'Popular',
      wallets: [
        metaMaskWallet, 
        rainbowWallet, 
        walletConnectWallet, // Add other wallets if needed
      ],
    },
  ],
});

export default config;

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;

Customize Theme

Tomo supports two themes in the modal, which can be configured through TomoEVMKitProvider. Currently, we support two modes: "light" and "dark," with customer accent color settings taking strings as inputs ("blue" or "0x66ccff").

 <TomoEVMKitProvider
      ...
      theme={{
        mode: "dark",
        customerThemeSetting: darkTheme({
          accentColor: "blue",
          accentColorForeground: "white",
        }),
      }},
    >

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.

FAQ

1. How to use with Next.js?

/** @type {import('next').NextConfig} */
module.exports = {
  ...
  transpilePackages: ['@tomo-inc/tomo-evm-kit', '@tomo-wallet/uikit'],
  ...
}

Additionally, manually install core-js-pure.