Initializing Coinbase Wallet SDK

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

Initializing Coinbase Wallet SDK and a Wallet SDK-powered Web3 object

An Infura API key is used as a fallback rpcUrl. See the Infura documentation on how to get an Infura API Key.

🚧
The code snippets have been updated to reflect the rebranding of Coinbase Wallet SDK from its previous name of WalletLink.

📘
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
Coinbase Wallet SDK installed using npm install @coinbase/wallet-sdk 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 DEFAULT_ETH_JSONRPC_URL = 'https://mainnet.infura.io/v3/<YOUR_INFURA_API_KEY>'
const DEFAULT_CHAIN_ID = 1

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

// Initialize a Web3 Provider object
export const ethereum = coinbaseWallet.makeWeb3Provider(DEFAULT_ETH_JSONRPC_URL, DEFAULT_CHAIN_ID)

// 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 dapp as a fallback.

Next steps:

Troubleshooting

📘
I run into the following error: Module not found: Error: Can't resolve <'assert'/'url/'/...>
Due to the removal of default polyfills in webpack5, you must install the following utilities:
yarn add assert
yarn add url
yarn add os-browserify
yarn add https-browserify
yarn add stream-http
yarn add stream-browserify
yarn add crypto-browserify
Then, add the following code snippet to your webpack.config.js:
resolve: {
  fallback: {
    fs: false,
    'util': require.resolve('assert/'),
    'url': require.resolve('url/'),
    'os': require.resolve("os-browserify/browser"),
    'https': require.resolve("https-browserify"),
    'http': require.resolve("stream-http"),
    'stream': require.resolve("stream-browserify"),
    'crypto': require.resolve("crypto-browserify")
  },
}


If you are using an application built on `create-react-app` locally, you must run `npm run eject` to be able to customize your webpack configuration.