Logo
DocsConnect Wallet

Connect Wallet

Avatar 1Avatar 2Avatar 3Avatar 4

A component for connecting cryptocurrency wallets in Web3 applications.

Implementation

1

Install the following dependencies:

pnpm add 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.

wagmiWrapper.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.

Usage

import { ConnectWallet } from "@/components/ui/connect-wallet"
import { useWeb3React } from "@web3-react/core"

Examples

Basic Usage

With Connected State

With Dialog

API Reference

ConnectWallet

A component for connecting cryptocurrency wallets.

Properties

PropertyTypeDefaultDescription
onConnect() => void-A callback function that is called when the wallet is successfully connected.
classNamestring-Additional CSS classes to apply to the component.