Logo

Installation

Web3

How to install dependencies and structure your web3 app.Simple. Fast.

Wagmi
Viem
Tanstack Query

Implementation

1

Install the following dependencies:

npm install wagmi viem@2.x @tanstack/react-query
Wagmi is a React hook for Ethereum.Viem is a TypeScript interface for Ethereum that performs blockchain operations.TanStack Query is an async state manager that handles requests, caching, and more.TypeScript is optional, but highly recommended. Learn more about TypeScript support.
2

Create Config File

Create and export a new Wagmi config using createConfig.
3

Copy and paste the following code into your project.

config.ts
import { http, createConfig } from 'wagmi'
import { mainnet, sepolia, polygon, hedera, base } from 'wagmi/chains'

export const config = createConfig({
chains: [mainnet, polygon, sepolia, hedera, base],
transports: {
  [mainnet.id]: http(),
  [polygon.id]: http(),
  [sepolia.id]: http(),
  [hedera.id]: http(),
  [base.id]: http(),
},
})
4

Create Config File

Create and export the provider file using WagmiProvider.
5

Copy and paste the following code into your project.

wrapped-provider.tsx
"use client";

import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "./config";

// Create a client
const queryClient = new QueryClient();

export function WagmiWrapper({ children }: { children: React.ReactNode }) {
return (
  <WagmiProvider config={config}>
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  </WagmiProvider>
);
}
6

Wrap your application in the provider.

Layout.tsx
import { WagmiWrapper } from "~/web3/ETH/EthereumProvider";

export default async function RootLayout({children}:{children: React.ReactNode}) {

return (
  <html>
      <body className="overflow-x-hidden bg-[#F0F0F0] dark:bg-zinc-950">
        <WagmiWrapper>
         {children}
       </WagmiWrapper>
     </body>
  </html>
);
}
7

Update the import paths to match your project setup.

Project Structure

Recommended project structure for your components:

 ├ src/
 │  ├ components/
 │        ├── ui/
 │           ├── button.tsx    
 │           ├── card.tsx
 │           └── input.tsx
 │  ├  web3/
 │       ├── providers/
 │       │   ├── wrapped-provider.tsx
 │       │   ├── config.ts
 │       ├   connect-wallet.tsx
 │       ├   nft-grid.tsx
 │       └── transaction-history.tsx