This page explains how to integrate Coinbase Wallet SDK as the default provider for your app using web3.js. You can follow a similar pattern if you are using ethers.js.

​
Setting up Coinbase Wallet SDK

Instructions are in TypeScript. The usage is the same in JavaScript, except for the occasional TypeScript type annotation such as string[] or as any.

​
Prerequisites

  • A Typescript project set up locally, created with yarn create react-app my-app --template typescript or similar
  • web3.js installed using npm install web3 or similar

​
Initializing

In your App.tsx file, add the following code to initialize Coinbase Wallet SDK and a Web3 object: 
// TypeScript
import CoinbaseWalletSDK from "@coinbase/wallet-sdk";
import Web3 from "web3";

const APP_NAME = "My Awesome App";
const APP_LOGO_URL = "https://example.com/logo.png";
const APP_SUPPORTED_CHAIN_IDS = [8453, 84532];

// Initialize Coinbase Wallet SDK
export const coinbaseWallet = new CoinbaseWalletSDK({
  appName: APP_NAME,
  appLogoUrl: APP_LOGO_URL,
  chainIds: APP_SUPPORTED_CHAIN_IDS,
});

// Initialize a Web3 Provider object
export const ethereum = coinbaseWallet.makeWeb3Provider();

// Initialize a Web3 object
export const web3 = new Web3(ethereum as any);
Coinbase Wallet SDK uses an rpcUrl provided by Coinbase Wallet clients regardless of the rpcUrl passed into makeWeb3Provider for whitelisted networks. Wallet SDK needs an rpcUrl to be provided by the app as a fallback. Next steps:

​
Troubleshooting