Claude/ChatGPT Prompt to Connect a Next.js Frontend to a Smart Contract

What this prompt does

This prompt sets the AI up as a senior web3 frontend engineer and asks for working code that connects a Next.js 15 App Router frontend to a deployed smart contract. The stack is fixed and modern — RainbowKit for wallet connect, wagmi for hooks, viem under the hood — and the deliverables target the parts that usually break: typed read hooks, write transactions with optimistic UI that rolls back on revert, readable error toasts, a transaction-history panel, and proper loading and disconnected states.

The three placeholders adapt it to your contract. [network] sets the chain you're targeting (the default Sepolia is a testnet), [contract] describes the contract type so the model knows which view and write functions to generate hooks for, and [wallets] lists which connectors to enable in RainbowKit. The emphasis on honest rollback and translated chain errors is what separates a dApp that feels broken from one that feels like a normal app.

When to use it

• You're wiring a Next.js 15 App Router frontend to a contract and want wagmi/viem/RainbowKit set up correctly.
• You need typed read hooks for a contract's view functions instead of hand-rolling ABI calls.
• You want write transactions with optimistic UI that rolls back cleanly when a tx reverts.
• Your dApp shows a spinner forever on reverts and you need real error handling.
• You want a transaction-history panel built from recent on-chain events.
• You need polished loading and disconnected states so the UI never looks broken.

Example output

Expect React component code plus reusable hook examples ready to drop into an App Router project. You'll get a wallet-connect setup with RainbowKit and wagmi providers, typed read hooks for the contract's view functions, write-transaction hooks with optimistic updates and rollback, and an error-toast layer that maps rejected, insufficient gas, and reverted into plain language. There's a transaction-history panel reading recent events, plus loading and disconnected UI states. The code is structured as components and hooks rather than one monolithic file.

Pro tips

• Describe [contract] specifically — "an ERC-721 minting contract" lets the model generate the right read and write hooks; "a contract" leaves it guessing.
• Keep [network] on a testnet like Sepolia while iterating, then switch to mainnet only after the revert and rejected paths are solid.
• Handle the reverted and rejected cases first; the happy path is the easy ten percent of this work and the error states are where UX falls apart.
• List real connectors in [wallets] — MetaMask, Coinbase Wallet, WalletConnect cover most users, and naming them configures RainbowKit correctly.
• Test the optimistic rollback by deliberately triggering a revert; a rollback that doesn't fire leaves your UI showing state that never happened.
• The transaction-history panel reads recent events directly; for heavy history you'll eventually want an indexer, but this is fine for an MVP.