DocsConnect Wallet
Connect Wallet



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
Property | Type | Default | Description |
---|---|---|---|
onConnect | () => void | - | A callback function that is called when the wallet is successfully connected. |
className | string | - | Additional CSS classes to apply to the component. |