One setup rule
Wagmi is the React Hooks library you will use for Ethereum. In a React app, it needs two providers at the top: WagmiProvider for wallet and chain state, and QueryClientProvider for async caching.
Do not follow old Wagmi v1 tutorials. In the current stack, TanStack Query is a dependency you install and configure yourself.
What you install
For this track, use Wagmi 3, Viem 2, and TanStack Query. The current versions in the brief are wagmi 3.7.7 and viem 2.56.8.
Wagmi recommends starting new projects with create-wagmi. If you already have a React app, install the packages manually.
Start the app
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
npm create wagmi@latestManual install
Use this only if you already created a React app, such as with Vite. This installs the three pieces this track needs.
npm install wagmi [email protected] @tanstack/react-queryCreate Wagmi config
Keep config in its own file. It makes later lessons easier when you add network checks, contract reads, and transaction waits.
This example configures mainnet and Sepolia. The http transport is keyed by each chain ID.
// src/wagmi.ts
import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
export const config = createConfig({
chains: [mainnet, sepolia],
transports: {
[mainnet.id]: http(),
[sepolia.id]: http(),
},
})Wrap the app
Your hooks will not work unless the providers wrap your components. Put this near the root, usually in main.tsx or main.jsx.
The QueryClient should be created outside the component render path, so it is not recreated on every render.
// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './wagmi'
import App from './App'
const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</WagmiProvider>
</React.StrictMode>,
)Common wrong setup
A common mistake is copying an older tutorial that hides TanStack Query or uses Wagmi v1 patterns. That will break the project brief for this track.
Another mistake is adding only mainnet. You need a testnet for hackathon demos, so include Sepolia from the start.
Use AI carefully
You can ask ChatGPT or Gemini to check your setup. Paste your package.json, wagmi config, and main file.
Check that the answer keeps Wagmi 3 style, imports WagmiProvider from wagmi, uses QueryClientProvider, and includes Sepolia. Reject answers that suggest eth_sign or old Wagmi v1 APIs.
Prompt:
Check this React Wagmi setup for a Wagmi 3 + Viem 2 dapp. Tell me if the providers, config, chains, and imports are correct. Do not rewrite it to Wagmi v1.Do this now
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done