From monskills
How to integrate wallet connection into a Next.js app on Monad using RainbowKit with Wagmi and viem.
npx claudepluginhub therealharpaljadeja/monskills --plugin monskillsThis skill uses the workspace's default tool permissions.
Integrate wallet connection into a Next.js frontend using [RainbowKit](https://rainbowkit.com/docs/installation) with Wagmi and viem.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides MCP server integration in Claude Code plugins via .mcp.json or plugin.json configs for stdio, SSE, HTTP types, enabling external services as tools.
Integrate wallet connection into a Next.js frontend using RainbowKit with Wagmi and viem.
The Next.js project might be in the web directory of the entire project, depending on which directory the user is running claude on it might vary.
Monad is natively supported by Wagmi — import monad and monadTestnet from wagmi/chains.
If the user has provided the project ID then store it as NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID environment variable, if not then when the task is complete warn the user that WalletConnect will not work and lay out the steps on how to make it work.
npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
config/index.ts:
import { getDefaultConfig } from '@rainbow-me/rainbowkit'
import { monad, monadTestnet } from 'wagmi/chains'
import { http } from 'wagmi'
const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
export const config = getDefaultConfig({
appName: 'My App',
projectId,
chains: [monad, monadTestnet],
transports: {
[monad.id]: http('https://rpc.monad.xyz'),
[monadTestnet.id]: http('https://testnet-rpc.monad.xyz'),
},
ssr: true,
})
providers.tsx:
'use client'
import '@rainbow-me/rainbowkit/styles.css'
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from '@/config'
import type { ReactNode } from 'react'
const queryClient = new QueryClient()
export default function Providers({ children }: { children: ReactNode }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
{children}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
)
}
app/layout.tsx:
import Providers from '@/providers'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
)
}
Add --webpack flag in package.json:
{
"scripts": {
"dev": "next dev --webpack",
"build": "next build --webpack"
}
}
import { ConnectButton } from '@rainbow-me/rainbowkit'
export default function Header() {
return <ConnectButton />
}
import { useReadContract } from 'wagmi'
const contractAddress = '0x...'
const abi = [/* contract ABI */]
function App() {
const { data } = useReadContract({
abi,
address: contractAddress,
functionName: 'totalSupply',
})
return <div>Total Supply: {data?.toString()}</div>
}
Full RainbowKit docs: https://rainbowkit.com/docs/installation