Installation
Copy npm install @tomo-inc/tomo-evm-kit
or
Copy pnpm i @tomo-inc/tomo-evm-kit
Import Styles
Copy 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/ .
Copy 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
Create a new project and copy the generated `clientId`.
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:
Copy 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:
Copy 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.
FAQ
Copy /** @type {import('next').NextConfig} */
module.exports = {
...
transpilePackages: ['@tomo-inc/tomo-evm-kit', '@tomo-wallet/uikit'],
...
}
Additionally, manually install core-js-pure
.