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';

Use TomoEVMKitProvider

Create a Project and Retrieve clientId

• Talk to us to create a developer account. Please provide a non-gmail business email address.

• Log in to the Tomo Developer Dashboard.

• Create a new project and copy the generated clientId.

• Use this clientId in your TomoEVMKitProvider.

Setup Provider

Use React, Wagmi and Viem

Use a clientId obtained from the https://dashboard.tomo.inc/. Your application will fetch application data from our backend with clientId

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;

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

Same as RainbowKit: https://www.rainbowkit.com/docs/theming#customizing-the-built-in-themes.

const App = () => {
  return (
    <TomoEVMKitProvider
      theme={darkTheme({
        accentColor: "blue",
        accentColorForeground: "white",
      })}
      {...etc}
    >
      {/* Your App */}
    </TomoEVMKitProvider>
  );
};

If you want to put the wallet list before social login, you can set the property socailsFirst to false.

Additional Reference

For more advanced usage, 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-lite', '@tomo-inc/shared-type'],
  ...
}

Additionally, manually install core-js-pure.

1. How to add chains?

For security reasons, Tomo must manually whitelist any new mainnet. You can send us a request, and we will schedule it according to your launch time. Before formally supporting the mainnet, you can use a customized chain to integrate the testnet and continue your development with extension wallets.