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';
Use TomoEVMKitProvider
Create a Project and Retrieve clientId
Talk to us to create a developer account. Please provide a non-gmail business email address.
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
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;
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;
Customize Theme
Same as RainbowKit: https://www.rainbowkit.com/docs/theming#customizing-the-built-in-themes .
Copy 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
Copy /** @type {import('next').NextConfig} */
module.exports = {
...
transpilePackages: ['@tomo-inc/tomo-evm-kit', '@tomo-wallet/uikit'],
...
}
Additionally, manually install core-js-pure
.
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.