Setup
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.
Setting up Coinbase Wallet SDK
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
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 dapp as a fallback.
Next steps:
- Switching or Adding EVM Chains
- Getting Ethereum Accounts
- Integrating Coinbase Wallet with Web3-React
Troubleshooting
I run into the following error: Module not found: Error: Can't resolve <'assert'/'url/'/...>
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.