Setting the file. One moment.
Subchapter 4.30
references/migrations/onchainkit/wallet.mdMarkdown10 KBView on GitHub
Replace OnchainKit’s Wallet, ConnectWallet, WalletDropdown, WalletModal, and Connected components with a standalone WalletConnect component built on wagmi hooks.
OnchainKit provides several wallet components:
<Wallet /> – container that manages open/closed state<ConnectWallet /> – button that triggers connection (renders as “Connect Wallet” when disconnected)<WalletDropdown /> – dropdown with identity info and actions<WalletModal /> – modal with multiple wallet options (Base Account, Coinbase, MetaMask, Phantom, etc.)<Connected /> – conditional renderer based on wallet connection stateThe replacement WalletConnect component combines all of this into one component.
Create app/components/WalletConnect.tsx (or wherever components live in the project):
"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { useAccount, useConnect, useDisconnect } from "wagmi";
import {
baseAccount,
coinbaseWallet,
metaMask,
} from "wagmi/connectors";
function truncateAddress(address: string): string {
return `${address.slice(
Copy the component code above into the project’s components directory.
Find all files importing from @coinbase/onchainkit/wallet or using Connected from @coinbase/onchainkit:
Before:
import { Wallet } from "@coinbase/onchainkit/wallet";
// or
import { ConnectWallet, Wallet, WalletDropdown, WalletDropdownDisconnect } from "@coinbase/onchainkit/wallet";
// or
import { Connected } from "@coinbase/onchainkit";After:
import { WalletConnect } from "./components/WalletConnect";Simple <Wallet />:
// Before
<Wallet />
// After
<WalletConnect />Composed wallet with children:
// Before
<Wallet>
<ConnectWallet>
<Avatar className="h-6 w-6" />
<Name />
</ConnectWallet>
<WalletDropdown>
<Identity hasCopyAddressOnClick>
<Avatar />
<Name />
<Address />
</Identity>
<WalletDropdownDisconnect />
</WalletDropdown>
</Wallet>
// After
<WalletConnect appName="My App" /><Connected /> conditional rendering:
// Before
import { Connected } from "@coinbase/onchainkit";
<Connected fallback={<p>Please connect</p>}>
<p>You are connected</p>
</Connected>
// After -- use wagmi's useAccount directly
import { useAccount } from "wagmi";
const { isConnected } = useAccount();
{isConnected ? <p>You are connected</p> : <p>Please connect</p>}If the page uses useMiniKit or other MiniKit hooks, remove them:
// Remove these
import { useMiniKit } from "@coinbase/onchainkit/minikit";
const { setMiniAppReady, isMiniAppReady } = useMiniKit();
useEffect(() => {
if (!isMiniAppReady) setMiniAppReady();
}, [setMiniAppReady, isMiniAppReady]);Run npm run build and confirm no errors.
Pass the appName prop to WalletConnect:
<WalletConnect appName="My DApp" />Add entries to the walletOptions array in the WalletModal component. Use injected({ target: 'walletName' }) from wagmi/connectors for browser extension wallets.
The component uses Tailwind utility classes. Modify the className strings to match the project’s design system. All styling is inline via Tailwind – no external CSS files needed.
If the project doesn’t use Tailwind, convert the Tailwind classes to inline styles or CSS modules. The key visual elements are:
dark: variantsThe component is being rendered outside the provider tree. Ensure WagmiProvider wraps the entire app in the layout or root provider.
This can happen if the connection is async and the component unmounts. The current implementation calls onClose() synchronously after connect(). If you need to wait for the connection, use the onSuccess callback from useConnect.
Ensure wagmi version is >= 2.16. The baseAccount connector was added in recent wagmi versions. Check with:
npm ls wagmi