Wallet Components & Utilities · OnchainKit

Introduction to Wallet Components & Utilities

The WalletDropdownFundLink works just like the FundButton except that it’s inside your wallet dropdown menu.

If your user connects a Coinbase Smart Wallet, it provides an easy way to access the Coinbase Smart Wallet Fund flow. Users will be able to buy and receive crypto, or use their Coinbase balances onchain with Magic Spend.

If your user connects any other EOA wallet, it provides an easy way to access Coinbase Onramp where your users will also be able to buy crypto using a fiat payment method, or transfer existing crypto from their Coinbase account.

Coinbase Onramp Support

If you would like to provide non Coinbase Smart Wallet users with an easy way to access Coinbase Onramp, please make sure you go through the FundButton walkthrough to configure your Project ID. Otherwise only Coinbase Smart Wallet users will be able to use the WalletDropdownFundLink.

Usage

import {
  ConnectWallet,
  Wallet,
  WalletDropdown,
  WalletDropdownDisconnect,
  WalletDropdownFundLink, 
} from '@coinbase/onchainkit/wallet'; 
import {
  Address,
  Avatar,
  Name,
  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 />
            <Address />
            <EthBalance />
          </Identity>
          <WalletDropdownFundLink />
          <WalletDropdownDisconnect />
        </WalletDropdown>
      </Wallet>
    </div>
  );
}

Override text

You can override component text using the text prop.

<WalletDropdownFundLink text="Add crypto" />

Override icon

You can override the icon using the icon prop.

<WalletDropdownFundLink icon={<walletDropdownLinkCustomBaseIconSvg />} />

Customizing the popup size

You’re able to customize the size of the popup window using the popupSize prop. Valid values are sm, md, and lg.

<WalletDropdownFundLink popupSize="sm" />

Override default behavior

You can override default link behavior by using the openIn prop. Valid values are popup and tab.

<WalletDropdownFundLink openIn="tab" target="_blank" />

Override funding URL

You can override the default URL by using the fundingUrl prop.

<WalletDropdownFundLink fundingUrl={"https://base.org"} openIn="tab" target="_blank" />

Props

• WalletDropdownFundLinkReact