Web3 Wallet Integration: Connect, Transact, and Manage Multi-Chain Assets

Web3 wallet integration is the gateway to decentralized applications.

Setting Up Wallet Connection

'use client'
import '@rainbow-me/rainbowkit/styles.css'
import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { WagmiProvider } from 'wagmi'
import { mainnet, polygon, arbitrum, base } from 'wagmi/chains'

const config = getDefaultConfig({
  appName: 'My dApp',
  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
  chains: [mainnet, polygon, arbitrum, base],
})

export function Web3Provider({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <RainbowKitProvider>{children}</RainbowKitProvider>
    </WagmiProvider>
  )
}

Transaction Management

import { useSendTransaction, useWaitForTransactionReceipt } from 'wagmi'

export function SendETH({ to, amount }: { to: `0x${string}`; amount: bigint }) {
  const { data: hash, sendTransaction, isPending } = useSendTransaction()
  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash })
  return (
    <button onClick={() => sendTransaction({ to, value: amount })} disabled={isPending || isConfirming}>
      {isPending ? 'Confirming...' : 'Send'}
    </button>
  )
}

Multi-Chain and Wallet-Based Auth

Detect and switch between networks. Implement Sign-In with Ethereum (SIWE) for authentication.

The Bottom Line

The Web3 Auth Kit from BreafIO provides wallet connection, SIWE auth, and multi-chain support. The Dapp Starter Kit includes full integration. The NFT Marketplace Pro and DeFi Dashboard use wallet connection. The Token Launchpad and DAO Governance App require wallet auth.