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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tomo.inc/tomo-sdk/tomoevmkit/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.