tessl/npm-coinbase--wallet-sdk
TypeScript SDK for connecting web applications to Coinbase Wallet with support for Smart Wallet, mobile wallet, and browser extension connections
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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-basedCoinbaseWalletSDK - 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;
};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;
}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}`; };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;
}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';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;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>;