Skip to content

<Wallet />

The Wallet components provide a comprehensive interface for users to connect their Smart Wallet, view their identity information, and manage their wallet connection. Before using them, ensure you've completed all Getting Started steps.

Components

The components are designed to work together hierarchically. For each component, ensure the following:

  • <Wallet /> - Serves as the main container for all wallet-related components.
  • <ConnectWallet /> - Handles the wallet connection process. Place child components inside to customize the connect button appearance.
  • <WalletDropdown /> - Contains additional wallet information and options. Place inside the <Wallet /> component.
  • <Identity /> - Displays user identity information. Place inside <WalletDropdown /> for a complete profile view.
  • <WalletDropdownLink /> - Creates a custom link within the dropdown. Use the icon prop to add an icon, and href to specify the destination.
  • <WalletDropdownDisconnect /> - Provides a disconnect option within the dropdown.

Additional components for customizing the wallet interface include:

  • <Avatar /> - Displays the user's avatar image.
  • <Name /> - Shows the user's name or ENS.
  • <Badge /> - Can be used to display additional user status or information.
  • <Address /> - Shows the user's wallet address.
  • <EthBalance /> - Displays the user's ETH balance.

The Wallet component automatically handles the wallet connection state and updates the UI accordingly. You need to wrap your application or relevant part of it with these components to provide a complete wallet interaction experience.

Usage

import { 
  ConnectWallet, 
  Wallet, 
  WalletDropdown, 
  WalletDropdownLink, 
  WalletDropdownDisconnect, 
} from '@coinbase/onchainkit/wallet'; 
import {
  Address,
  Avatar,
  Name,
  Badge,
  Identity,
  EthBalance,
} from '@coinbase/onchainkit/identity';
import { color } from '@coinbase/onchainkit/theme';
 
export function WalletComponents() {
  return (
    <div className="flex justify-end">
      <Wallet>
        <ConnectWallet>
          <Avatar className="h-6 w-6" />
          <Name />
        </ConnectWallet>
        <WalletDropdown>
          <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
            <Avatar />
            <Name>
              <Badge />
            </Name>
            <Address className={color.foregroundMuted} />
            <EthBalance />
          </Identity>
          <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
            Go to Wallet Dashboard
          </WalletDropdownLink>
          <WalletDropdownDisconnect />
        </WalletDropdown>
      </Wallet>
    </div>
  );
}

Override styles

You can override component styles using className.

// omitted for brevity
 
<Wallet>
  <ConnectWallet className='bg-blue-800'>
    <Avatar className="h-6 w-6" />
    <Name className='text-white' />
  </ConnectWallet>
  <WalletDropdown>
    <Identity 
      className="px-4 pt-3 pb-2 hover:bg-blue-200" 
      hasCopyAddressOnClick
    >
      <Avatar />
      <Name>
        <Badge />
      </Name>
      <Address />
      <EthBalance />
    </Identity>
    <WalletDropdownLink 
      className='hover:bg-blue-200' 
      icon="wallet" 
      href="https://wallet.coinbase.com"
    >
      Go to Wallet Dashboard
    </WalletDropdownLink>
    <WalletDropdownDisconnect className='hover:bg-blue-200' />
  </WalletDropdown>
</Wallet>

Required providers

If you are using any of the provided components, you will need to install and configure wagmi and wrap your app in <WagmiProvider>.

import { ReactNode } from 'react';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { baseSepolia } from 'wagmi/chains';
import { coinbaseWallet } from 'wagmi/connectors';
 
const wagmiConfig = createConfig({
  chains: [baseSepolia],
  connectors: [
    coinbaseWallet({
      appName: 'onchainkit',
    }),
  ],
  ssr: true,
  transports: {
    [baseSepolia.id]: http(),
  },
});
 
function App({ children }: { children: ReactNode }) {
  return <WagmiProvider config={wagmiConfig}>{children}</WagmiProvider>;
}

Use wallet aggregator

You can expand the wallet connection options by using the withWalletAggregator prop in the <ConnectWallet /> component. This will present users with a list of recommended and other wallets to choose from.

OnchainKit leverages RainbowKit to offer this feature. To use it correctly, follow these steps:

  1. Import the necessary components from RainbowKit.
  2. Create a list of recommended and other wallets.
  3. Use getDefaultConfig to configure the Wagmi provider.
  4. Wrap your app in the RainbowKit provider.
myApp.tsx
// omitted for brevity
 
<Wallet>
  <ConnectWallet withWalletAggregator>
    <Avatar className="h-6 w-6" />
    <Name />
  </ConnectWallet>
  <WalletDropdown>
    <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
      <Avatar />
      <Name>
        <Badge />
      </Name>
      <Address />
      <EthBalance />
    </Identity>
    <WalletDropdownLink 
      icon="wallet" 
      href="https://wallet.coinbase.com"
    >
      Go to Wallet Dashboard
    </WalletDropdownLink>
    <WalletDropdownDisconnect />
  </WalletDropdown>
</Wallet>

Props