Ethereum - lesson 2 | HackIndia Skills

Ethereum - lesson 2 | HackIndia Skills | HackIndia

Your to-do

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.

Open a terminal in your projects folder.
Run the Wagmi starter command for a new app.
Choose the React option if the prompt asks.
Open the generated project in VS Code.
Start the dev server and check the app loads.

0 of 5 done

npm create wagmi@latest

Example

Manual 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-query

Example

Create 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(),
  },
})

Example

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>,
)

Tip

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.

Set Up Wagmi React

One setup rule

What you install

Start the app

Manual install

Create Wagmi config

Wrap the app

Common wrong setup

Use AI carefully

Do this now

Quick check