or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

asset-utilities.mdconfiguration.mdevent-handling.mdindex.mdlegacy-api.mdprovider-interface.mdsdk-initialization.mdtype-utilities.md
tile.json

index.mddocs/

Coinbase Wallet SDK

Coinbase Wallet SDK is a TypeScript library that enables web applications to connect with Coinbase Wallet across multiple platforms. It supports Coinbase Smart Wallet, mobile applications (Android/iOS), and browser extensions (Chrome/Brave), providing a unified interface for Ethereum blockchain interactions, account management, and transaction signing.

Package Information

  • Package Name: @coinbase/wallet-sdk
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @coinbase/wallet-sdk

Core Imports

import { createCoinbaseWalletSDK } from "@coinbase/wallet-sdk";

For legacy usage:

import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";

CommonJS:

const { createCoinbaseWalletSDK } = require("@coinbase/wallet-sdk");

Basic Usage

import { createCoinbaseWalletSDK } from "@coinbase/wallet-sdk";

// Create SDK instance
const sdk = createCoinbaseWalletSDK({
  appName: "My Dapp",
  appLogoUrl: "https://example.com/logo.png",
  appChainIds: [1, 8453], // Ethereum mainnet and Base
  preference: {
    options: "all" // Support all wallet types
  }
});

// Get provider and connect
const provider = sdk.getProvider();
const accounts = await provider.request({ 
  method: "eth_requestAccounts" 
});

// Listen for events
provider.on("accountsChanged", (accounts) => {
  console.log("Accounts changed:", accounts);
});

provider.on("chainChanged", (chainId) => {
  console.log("Chain changed:", chainId);
});

// Send a transaction
const txHash = await provider.request({
  method: "eth_sendTransaction",
  params: [{
    from: accounts[0],
    to: "0x...",
    value: "0x38d7ea4c68000", // 0.001 ETH
    data: "0x"
  }]
});

Architecture

The Coinbase Wallet SDK is built around several key components:

  • SDK Creation: Modern functional approach with createCoinbaseWalletSDK (recommended) or legacy class-based CoinbaseWalletSDK
  • Provider Interface: EIP-1193 compatible provider for Web3 interactions
  • Multi-Platform Support: Automatic detection and connection to Smart Wallet, mobile apps, and browser extensions
  • Event System: EventEmitter-based notifications for account and chain changes
  • Type Safety: Full TypeScript support with comprehensive type definitions
  • Logo Utilities: Official Coinbase Wallet logos for UI integration

Capabilities

SDK Initialization

Modern approach for creating Coinbase Wallet SDK instances with support for Smart Wallet and traditional wallets.

function createCoinbaseWalletSDK(
  params: CreateCoinbaseWalletSDKOptions
): {
  getProvider: () => ProviderInterface;
};

type CreateCoinbaseWalletSDKOptions = Partial<AppMetadata> & {
  preference?: Preference;
};

SDK Initialization

Web3 Provider Interface

EIP-1193 compatible provider for Ethereum blockchain interactions including transaction signing, message signing, and account management.

interface ProviderInterface extends ProviderEventEmitter {
  request(args: RequestArguments): Promise<unknown>;
  disconnect(): Promise<void>;
  readonly isCoinbaseWallet: true;
}

interface RequestArguments {
  readonly method: string;
  readonly params?: readonly unknown[] | object;
}

Provider Interface

Configuration Types

Core configuration interfaces for app metadata and wallet connection preferences.

interface AppMetadata {
  /** Application name */
  appName: string;
  /** Application logo image URL; favicon is used if unspecified */
  appLogoUrl: string | null;
  /** Array of chainIds your dapp supports */
  appChainIds: number[];
}

type Preference = {
  /** The URL for the keys popup (default: https://keys.coinbase.com/connect) */
  keysUrl?: string;
  /** Connection options: 'all' | 'smartWalletOnly' | 'eoaOnly' */
  options: 'all' | 'smartWalletOnly' | 'eoaOnly';
  /** Smart Wallet attribution (optional) */
  attribution?: Attribution;
} & Record<string, unknown>;

type Attribution =
  | { auto: boolean; dataSuffix?: never; }
  | { auto?: never; dataSuffix: `0x${string}`; };

Configuration

Event Handling

EventEmitter-based system for handling wallet connection events, account changes, and chain switches.

type ProviderEventMap = {
  connect: ProviderConnectInfo;
  disconnect: ProviderRpcError;
  chainChanged: string; // hex string
  accountsChanged: string[];
};

interface ProviderConnectInfo {
  readonly chainId: string;
}

interface ProviderRpcError extends Error {
  message: string;
  code: number;
  data?: unknown;
}

Event Handling

Asset Utilities

Official Coinbase Wallet logos and branding assets for integration into your application's UI.

function walletLogo(type: LogoType, width: number): string;

type LogoType =
  | 'standard'
  | 'circle'
  | 'text'
  | 'textWithLogo'
  | 'textLight'
  | 'textWithLogoLight';

Asset Utilities

Direct Provider Creation

Alternative function for creating Coinbase Wallet providers directly without SDK initialization.

function createCoinbaseWalletProvider(
  options: CreateProviderOptions
): ProviderInterface;

type CreateProviderOptions = {
  /** Application metadata */
  metadata: AppMetadata;
  /** Wallet connection preferences */
  preference: Preference;
};

Type Utilities

Type system utilities providing opaque types for enhanced type safety and validation functions for blockchain data types.

type HexString = OpaqueType<'HexString', string>;
type AddressString = OpaqueType<'AddressString', string>;
type BigIntString = OpaqueType<'BigIntString', string>;
type IntNumber = OpaqueType<'IntNumber', number>;

function hexStringFromNumber(num: number): HexString;
function ensureAddressString(str: unknown): AddressString;
function ensureHexString(hex: unknown, includePrefix?: boolean): HexString;
function getFavicon(): string | null;

Type Utilities

Legacy API (Deprecated)

Legacy class-based SDK for backwards compatibility. New projects should use createCoinbaseWalletSDK.

/**
 * @deprecated Use createCoinbaseWalletSDK instead
 */
class CoinbaseWalletSDK {
  constructor(metadata: Readonly<CoinbaseWalletSDKOptions>);
  makeWeb3Provider(preference?: Preference): ProviderInterface;
  getCoinbaseWalletLogo(type: LogoType, width?: number): string;
}

type CoinbaseWalletSDKOptions = Partial<AppMetadata>;

Legacy API