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 blockiesui@latest
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

Create our hook for connecting to the wallet.

useWallet.tsx
import { useAccount, useConnect, useDisconnect } from "wagmi";

export function useWallet() {
  const { address, isConnected } = useAccount();
  const { disconnect } = useDisconnect();
  const { connectors, connect, isPending, isError, isSuccess } = useConnect();

  const truncateAddress = (addr: string) => {
    return addr.slice(0, 6) + "..." + addr.slice(-4);
  };

  return {
    address,
    isConnected,
    disconnect,
    truncateAddress,
    connectors,
    connect,
    isPending,
    isError,
    isSuccess,
  };
}
7

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>
);
}
8

Update the import paths to match your project setup.

Project Structure

Recommended project structure for your components: