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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Legacy API (Deprecated)

Name: tessl/npm-coinbase--wallet-sdk
Author: tessl

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

Capabilities

CoinbaseWalletSDK Class (Deprecated)

Legacy class-based SDK initialization and provider creation.

/**
 * @deprecated CoinbaseWalletSDK is deprecated and will likely be removed in a future major version release.
 * It's recommended to use `createCoinbaseWalletSDK` instead.
 */
class CoinbaseWalletSDK {
  /**
   * Initialize legacy SDK instance
   * @param metadata - App metadata configuration (partial)
   */
  constructor(metadata: Readonly<CoinbaseWalletSDKOptions>);
  
  /**
   * Create Web3 provider instance
   * @param preference - Optional wallet connection preferences (default: { options: 'all' })
   * @returns Provider interface for Web3 interactions
   */
  makeWeb3Provider(preference?: Preference): ProviderInterface;
  
  /**
   * Get official Coinbase Wallet logo SVG
   * @param type - Logo type variant
   * @param width - Logo width in pixels (default: 240)
   * @returns SVG data URI string
   */
  getCoinbaseWalletLogo(type: LogoType, width?: number): string;
}

type CoinbaseWalletSDKOptions = Partial<AppMetadata>;

Usage Examples:

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

// Basic legacy initialization
const sdk = new CoinbaseWalletSDK({
  appName: "Legacy Dapp",
  appLogoUrl: "https://example.com/logo.png",
  appChainIds: [1, 8453]
});

// Create provider with default preferences
const provider = sdk.makeWeb3Provider();

// Create provider with specific preferences
const smartWalletProvider = sdk.makeWeb3Provider({
  options: "smartWalletOnly",
  attribution: {
    auto: true
  }
});

// Get logo assets
const standardLogo = sdk.getCoinbaseWalletLogo("standard", 200);
const circleLogo = sdk.getCoinbaseWalletLogo("circle");

Legacy Provider Methods

Deprecated methods on the provider interface maintained for backwards compatibility.

/**
 * @deprecated Use provider.request({ method: "eth_requestAccounts" }) instead
 */
async enable(): Promise<string[]>;

Usage Examples:

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

const sdk = new CoinbaseWalletSDK({
  appName: "Legacy Provider App"
});
const provider = sdk.makeWeb3Provider();

// Deprecated enable method (DO NOT USE)
try {
  const accounts = await provider.enable();
  console.log("Connected accounts:", accounts);
} catch (error) {
  console.error("Connection failed:", error);
}

// Modern equivalent (RECOMMENDED)
try {
  const accounts = await provider.request({
    method: "eth_requestAccounts"
  });
  console.log("Connected accounts:", accounts);
} catch (error) {
  console.error("Connection failed:", error);
}

Migration Guide

From Legacy SDK to Modern SDK

Replace class-based initialization with functional approach:

// OLD (Deprecated)
import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";

const sdk = new CoinbaseWalletSDK({
  appName: "My Dapp",
  appLogoUrl: "https://example.com/logo.png",
  appChainIds: [1, 8453]
});

const provider = sdk.makeWeb3Provider({
  options: "all"
});

// NEW (Recommended)
import { createCoinbaseWalletSDK } from "@coinbase/wallet-sdk";

const sdk = createCoinbaseWalletSDK({
  appName: "My Dapp",
  appLogoUrl: "https://example.com/logo.png",
  appChainIds: [1, 8453],
  preference: {
    options: "all"
  }
});

const provider = sdk.getProvider();

From enable() to request()

Replace deprecated enable method with standard EIP-1193 request:

// OLD (Deprecated)
const accounts = await provider.enable();

// NEW (Standard)
const accounts = await provider.request({
  method: "eth_requestAccounts"
});

Logo Access Migration

Logo access patterns remain the same, but consider using direct imports:

// Legacy SDK method (still works)
const logo = sdk.getCoinbaseWalletLogo("standard", 200);

// Direct import approach (if available)
import { walletLogo } from "@coinbase/wallet-sdk/assets";
const logo = walletLogo("standard", 200);

Legacy Configuration Options

CoinbaseWalletSDKOptions

Legacy configuration interface for class-based SDK.

type CoinbaseWalletSDKOptions = Partial<AppMetadata>;

// Equivalent to:
type CoinbaseWalletSDKOptions = {
  appName?: string;
  appLogoUrl?: string | null;
  appChainIds?: number[];
};

Default Values:

appName: "Dapp"
appLogoUrl: Current page favicon
appChainIds: [] (empty array)

Usage Examples:

// Minimal configuration
const minimalSdk = new CoinbaseWalletSDK({
  appName: "Simple Dapp"
});

// Full configuration
const fullSdk = new CoinbaseWalletSDK({
  appName: "Advanced Dapp",
  appLogoUrl: "https://myapp.com/icon.png",
  appChainIds: [1, 137, 8453, 42161]
});

// Empty configuration (uses all defaults)
const defaultSdk = new CoinbaseWalletSDK({});

Legacy Provider Creation

makeWeb3Provider Method

Legacy method for creating provider instances with optional preferences.

/**
 * Create Web3 provider instance
 * @param preference - Optional wallet connection preferences
 * @returns Provider interface for Web3 interactions
 */
makeWeb3Provider(preference?: Preference): ProviderInterface;

Usage Examples:

const sdk = new CoinbaseWalletSDK({
  appName: "Provider Creation Example"
});

// Default provider (all wallet types)
const defaultProvider = sdk.makeWeb3Provider();

// Smart Wallet only
const smartWalletProvider = sdk.makeWeb3Provider({
  options: "smartWalletOnly"
});

// EOA only with custom keys URL
const eoaProvider = sdk.makeWeb3Provider({
  options: "eoaOnly",
  keysUrl: "https://keys-dev.coinbase.com/connect"
});

// Provider with attribution
const attributedProvider = sdk.makeWeb3Provider({
  options: "smartWalletOnly",
  attribution: {
    dataSuffix: "0x1234567890abcdef1234567890abcdef"
  }
});

Compatibility Notes

Backwards Compatibility

The legacy API maintains full backwards compatibility:

All existing method signatures work unchanged
Event handling patterns remain the same
Provider interface is identical
Logo generation functions are unchanged

Future Deprecation

The legacy CoinbaseWalletSDK class:

Current Status: Deprecated but functional
Future: May be removed in a future major version
Recommendation: Migrate to createCoinbaseWalletSDK for new development
Support: Bug fixes and security updates will continue

Migration Timeline

Suggested migration approach:

Phase 1: Update new code to use createCoinbaseWalletSDK
Phase 2: Gradually migrate existing legacy usage
Phase 3: Complete migration before major version updates

Troubleshooting Legacy Issues

Common Legacy Patterns

// Issue: Accessing provider methods directly after construction
const sdk = new CoinbaseWalletSDK({ appName: "App" });
const provider = sdk.makeWeb3Provider();

// Problem: Calling deprecated methods
await provider.enable(); // Shows deprecation warning

// Solution: Use modern request method
await provider.request({ method: "eth_requestAccounts" });

Error Handling

Legacy error patterns remain unchanged:

try {
  const provider = sdk.makeWeb3Provider();
  const accounts = await provider.request({
    method: "eth_requestAccounts"
  });
} catch (error) {
  if (error.code === 4001) {
    console.log("User rejected connection");
  } else {
    console.error("Connection failed:", error);
  }
}