`<WalletDropdownFundLink />`

The WalletDropdownFundLink provides an easy way for to access the Fund flow for a Coinbase Smart Wallet.

Your users will be able to easily onboard and add funds right from your OnchainKit Wallet component without leaving your app!

Users can buy and receive crypto, or use their Coinbase balances onchain with Magic Spend.

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={baseIcon} />

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" />

Props

WalletDropdownFundLinkReact