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[]
oras 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:
- Switching or Adding EVM Chains
- Getting Ethereum Accounts
- Integrating Coinbase Wallet with Web3-React
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.
Updated 17 days ago