WalletDropdownFundLink

Component that provides funding link functionality in wallet dropdown

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

type WalletDropdownFundLinkProps = {
  className?: string; // Optional className override for the element
  icon?: ReactNode; // Optional icon override
  openIn?: 'popup' | 'tab'; // Whether to open the funding flow in a tab or a popup window
  popupSize?: 'sm' | 'md' | 'lg'; // Size of popup window (only works for custom funding links or Coinbase Smart Wallet)
  rel?: string; // Specifies the relationship between the current document and the linked document
  target?: string; // Where to open the target if openIn is set to tab
  text?: string; // Optional text override
  fundingUrl?: string; // Optional funding URL override
};