Using EVM
With RainbowKit
Rainbowkit is a Rainbow-maintained wallet connect library useable with MetaMask and TAILWIND.
Support TAILWIND in 5 minutes
1
2
Download TAILWIND wallet adapter
yarn add @tailwindzone/connect-rainbowkit
3
Import and setup TAILWIND wallet adapter
import { defineChain } from "viem";
import { tailwindWallet } from "@tailwindzone/connect-rainbowkit"
export const seimainnet = defineChain({
id: 1329,
name: 'Sei Mainnet',
nativeCurrency: { name: 'Sei', symbol: 'SEI', decimals: 18 },
rpcUrls: {
default: {
http: ['https://evm-rpc.sei-apis.com'],
},
},
})
const config = getDefaultConfig({
appName: 'RainbowKit App',
projectId: 'YOUR_PROJECT_ID',
chains: [seimainnet],
wallets: [{
groupName: 'Popular',
wallets: [
tailwindWallet,
metaMaskWallet
]
}],
ssr: true,
});
4
Since Rainbowkit uses Wagmi, we set up a Provider with config above.
import { WagmiProvider } from "viem";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const client = new QueryClient();
// in _app.tsx if using Next.js,
// or your root component if using another framework
function MyApp({ Component, pageProps }: AppProps) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={client}>
<RainbowKitProvider>
{ /* Your app goes here */ }
<Component {...pageProps} />
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
5
Connect Modal from RainbowKit's `ConnectButton` should now show TAILWIND!
import { ConnectButton } from "@rainbow-me/rainbowkit";
function App() {
return (
<>
{ /* Click me! */ }
<ConnectButton />
</>
);
}
6
Done!
You just supported a universal USDC gas wallet. Prepare to get more users!