Coinbase Wallet

Prompt users to connect Coinbase Wallet to your app

Usage

import { CoinbaseWallet } from "@thirdweb-dev/wallets";

const wallet = new CoinbaseWallet();

wallet.connect();

Configuration

Optionally, provide a configuration object when instantiating the CoinbaseWallet class.

clientId (recommended)

Provide clientId to use the thirdweb RPCs for given chains

You can create a client ID for your application from thirdweb dashboard.

chains (optional)

Provide an array of chains you want to support.

Must be an array of Chain objects, from the @thirdweb-dev/chains package.

Defaults to our default chains.

import { CoinbaseWallet } from "@thirdweb-dev/wallets";
import { Ethereum, Polygon } from "@thirdweb-dev/chains";

const wallet = new CoinbaseWallet(
  {
    chains: [Ethereum, Polygon],
  },
);

dappMetadata (optional)

Information about your app that the wallet will display when your app tries to connect to it.

Must be an object containing name, url and optionally description and logoUrl properties.

import { CoinbaseWallet } from "@thirdweb-dev/wallets";

const walletWithOptions = new CoinbaseWallet({
  dappMetadata: {
    name: "thirdweb powered dApp",
    url: "https://thirdweb.com",
    description: "thirdweb powered dApp", // optional
    logoUrl: "https://thirdweb.com/favicon.ico", // optional
  },
});

headlessMode (optional)

This only applies when coinbase extension wallet is NOT installed on user's browser.

By default headlessMode is set to false - which means that when user does not have coinbase wallet extension installed, a QR Code scan modal will open when calling the connect method to allow the user to connect to their coinbase mobile app by scanning the QR code.

If headlessMode is set to true and coinbase wallet extension is not installed, the wallet will NOT open a QR Code scan modal - This is useful if you want to create a custom QR Code modal.

you can use the getQrUrl method to get the QR Code url and create your own QR Code Modal

Must be a boolean.

import { CoinbaseWallet } from "@thirdweb-dev/wallets";

const wallet = new CoinbaseWallet(
  {
    headlessMode: true,
  },
);

walletStorage (optional)

wallet needs to store data in persistent storage. By default it uses localStorage but if you want to use a different storage, you can provide your own storage using the walletStorage option.

Must be an object conforming to the AsyncStorage interface:

export interface AsyncStorage {
  getItem(key: string): Promise<string | null>;
  setItem(key: string, value: string): Promise<void>;
  removeItem(key: string): Promise<void>;
}

Example:

import { CoinbaseWallet } from "@thirdweb-dev/wallets";

const wallet = new CoinbaseWallet(
  {
    walletStorage: {
      getItem: (key) => {
        // Implement your own storage logic here
      },
      removeItem: (key) => {
        // Implement your own storage logic here
      },
      setItem: (key, value) => {
        // Implement your own storage logic here
      },
    },
  },
);

Methods

Inherits all the public methods from the AbstractClientWallet class.