Skip to main content

Claude/ChatGPT Prompt for Web3 Wallet Integration in a Frontend App

Implement Web3 wallet connection with multi-wallet support, network switching, transaction signing, real-time events, and error handling.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt
Implement Web3 wallet integration for a React with TypeScript application that interacts with an ERC-20 token and a staking vault contract on Ethereum mainnet and Arbitrum. Users will approve tokens, stake/unstake, and claim rewards. Build: 1) Wallet connection using wagmi + viem with RainbowKit supporting MetaMask, WalletConnect, Coinbase Wallet, Rainbow — implement a connect button with wallet selection modal, auto-reconnect on page load, and disconnect functionality. Store connection state in React context with wagmi hooks. 2) Network management: detect current chain, prompt switching to Ethereum mainnet (chainId: 1) if on wrong network using wallet_switchEthereumChain, and handle chain selector dropdown that updates provider and contract addresses for multi-chain support. Display network indicator with chain name and icon. 3) Transaction flow for approve ERC-20 → stake tokens (2-step transaction flow) — prepare transaction, estimate gas with 20% buffer, display confirmation modal showing: action description, estimated gas cost in ETH and USD, and recipient address. Handle user rejection, insufficient funds, and timeout gracefully. 4) Read contract data using viem publicClient.readContract with wagmi useContractRead — fetch user balance, staked amount, pending rewards, total TVL, APY with automatic refresh every 15 seconds and manual refresh button. Use multicall for user balances across all supported tokens to reduce RPC calls. 5) Event listening: subscribe to Staked, Withdrawn, RewardsClaimed filtered by connected user address and update UI in real-time when relevant events fire, with toast notifications for transaction confirmed, rewards available to claim. 6) Error handling: map common wallet errors (user rejected, insufficient funds, nonce too low, gas estimation failed, contract revert) to user-friendly messages, implement transaction status tracking (pending → confirmed/failed) with 2 confirmation wait. 7) Mobile support: detect mobile browsers, deep-link to MetaMask Mobile, Trust Wallet, Rainbow wallet apps, and handle WalletConnect for desktop-to-mobile connection.

What this prompt does

This prompt specifies a complete Web3 wallet integration for a [frontend_framework] app, the layer where dapps most often lose users to confusing errors. You define the [smart_contracts], [target_chains], and [user_actions], and it builds connection via [wallet_library] supporting [wallet_list], network management, a transaction flow for [primary_transaction], contract reads, event listening, error handling, and mobile support.

The structure works because wallet UX is a sequence of edge cases. It handles network switching to [primary_chain], gas estimation with a [gas_buffer] buffer, confirmation modals, and graceful handling of rejection and insufficient funds. By also specifying contract reads via [read_method] refreshing every [refresh_interval], event subscriptions for [contract_events], mapping of [common_errors] to friendly messages, and deep-linking to [mobile_wallets], the whole connect-to-confirm path is designed up front rather than patched after launch. Connection state lives in [state_management], and a [multi_chain_strategy] keeps the provider and contract addresses correct as users move between [target_chains].

When to use it

  • You are building a dapp frontend and want the wallet flow specified before coding
  • You need multi-wallet support across [wallet_list] with auto-reconnect
  • You want network detection and switching to [primary_chain] handled cleanly
  • You need a two-step transaction flow like approve-then-stake done right
  • You want [common_errors] mapped to messages users can actually act on
  • You need live contract reads that refresh and update the UI automatically
  • You need mobile support with deep-linking and WalletConnect

Example output

Expect an implementation spec for [frontend_framework]: a connect button with a wallet-selection modal using [wallet_library], auto-reconnect and disconnect logic, a network indicator with switching via wallet_switchEthereumChain, a transaction flow for [primary_transaction] with gas estimation plus [gas_buffer] and a confirmation modal showing cost in ETH and USD, contract reads via [read_method] refreshing every [refresh_interval] with multicall for [batch_reads], event subscriptions for [contract_events] with toast notifications for [user_notifications], an error map for [common_errors], and mobile deep-linking to [mobile_wallets]. Transaction status tracking from pending through a [block_confirmations] wait is included so users always know where their action stands.

Pro tips

  • Name your real [smart_contracts] and [target_chains] so the contract-address switching logic matches your deployment
  • Use a maintained [wallet_library] like wagmi + viem; rolling your own provider handling is where subtle reconnect bugs live
  • Map every entry in [common_errors] to a human message — "user rejected" and "insufficient funds" should never surface as raw RPC text
  • Add the [gas_buffer] to estimates so transactions do not fail at the wallet on a tight estimate
  • Use multicall for [batch_reads] to cut RPC calls; firing one request per value will rate-limit you fast
  • Test the two-step [primary_transaction] flow carefully; approve-then-stake is where users get stuck mid-sequence
  • Verify mobile deep-linking to each of the [mobile_wallets] on a real device, since desktop emulation hides the WalletConnect handoff issues

Frequently Asked Questions

Which wallet library does it assume?
The default `[wallet_library]` is wagmi + viem with RainbowKit, supporting `[wallet_list]` such as MetaMask, WalletConnect, Coinbase Wallet, and Rainbow. You can substitute another library; the connection, network, and transaction patterns translate, though the specific hooks and APIs will differ.
Does it handle users on the wrong network?
Yes. Network management detects the current chain and prompts switching to `[primary_chain]` using `wallet_switchEthereumChain`, with a visible network indicator. It also supports a `[multi_chain_strategy]` so the app can update provider and contract addresses across `[target_chains]`.
How are transaction errors handled?
It maps `[common_errors]` such as user rejection, insufficient funds, and gas estimation failure to friendly messages, and tracks status from pending through confirmed or failed with a `[block_confirmations]` wait. The goal is that users never see raw RPC error strings.
Does it support mobile wallets?
Yes. It detects mobile browsers, deep-links to `[mobile_wallets]` apps, and uses WalletConnect for desktop-to-mobile connections. Test this on real devices, since mobile wallet handoff behavior is hard to verify accurately in a desktop browser.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in Blockchain & Web3 Development Prompts

Engr Mejba Ahmed

Engr Mejba Ahmed

AI assistant · trained on my work

👋

Hey there!

Quick Actions

WhatsApp Direct line to me

Chat on WhatsApp

+880 1723 741224 · Replies within the hour on working days

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

mejba.13@gmail.com

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support