> For the complete documentation index, see [llms.txt](https://docs.tomo.inc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tomo.inc/tomo-sdk/tomoevmkit/quick-start.md).

# Quick Start

## Installation

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

or

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

## Import Styles

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

## Use TomoEVMKitProvider

### Create a Project and Retrieve clientId

* [Talk to us](https://docs.google.com/forms/d/e/1FAIpQLSfqMQH80c9Py0V1rNDgfXqL8kNXKn66WMCgtczNLriruJicjw/viewform) to create a developer account. Please provide a non-gmail business email address.
* Log in to the [Tomo Developer Dashboard](https://dashboard.tomo.inc/).
* 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`

```tsx
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:

```tsx
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:

```tsx
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>.

```tsx
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.

<figure><img src="/files/ntosRIByXb178RZOLJmf" alt="" width="375"><figcaption></figcaption></figure>

### Additional Reference

For more advanced usage, refer to the [RainbowKit Documentation](https://www.rainbowkit.com/docs/modal-hooks). The behavior and integration are similar, making it easy to adapt.

#### FAQ

1. How to use with Next.js?

```typescript
/** @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`.

2. 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.