Three ways to integrate Coinbase Wallet

Coinbase Wallet is a self-custody crypto wallet that works with all EVM-compatible layer one and layer two networks and is available to developers as a browser extension or a mobile app on Android and iOS. 

In 2019, Coinbase introduced WalletLink, empowering developers with the ability to use their dapps on any desktop, expanding Coinbase Wallet’s usage beyond mobile devices. 

WalletLink was rebranded as Coinbase Wallet SDK earlier this year, but it remains available for any dapp developer and wallet as an open source and secure bridge to integrate your Coinbase Wallet, which supports the following features for developers: 

• Multiple platforms and access points (iOS, Android, and desktop, and you can onboard new users who don’t yet have a wallet)

• Support for all layer 1 and layer 2 networks (Ethereum, Arbitrum, Avalanche C-Chain, BNB Chain, Gnosis Chain, Fantom Opera, Optimism, Polygon, xDai) and can automatically detect assets held in the user’s wallet on our whitelisted networks

• NFTs (Near-instant indexing for Etheruem NFTs, ERC-721 & ERC-1155 support, and NFT gallery and transfers directly in extension)

• Developer mode (See a unified balance on whitelisted testnet networks)

• Connect to localhost networks

In addition to Coinbase Wallet SDK, developers have two other ways to integrate their Coinbase Wallet: either through an injected provider or through wallet aggregator libraries. 

What follows is an explanation of these three approaches you can use to integrate your Coinbase Wallet to your dapp – and why we think Coinbase Wallet SDK and wallet aggregator libraries offer the most seamless integration for developers.

Injected provider

An injected provider is a JavaScript Ethereum provider that a browser injects into your browser window at window.ethereum. With an injected provider, developers are able to request users' Ethereum accounts, read on-chain data, and have the user sign messages and transactions, without having to use the Coinbase Wallet SDK.

Why use an injected provider

The main benefits to integrating your Coinbase Wallet using this method is that there are no dependencies to install and it’s somewhat easier to implement since you don’t need to initialize your provider object.

How do you get users’ Ethereum accounts with an injected provider? 

Again, there is nothing to initialize or install when using an injected provider. Just follow these steps:

ethereum.request({ method: 'eth_requestAccounts' }).then(response => console.log(response))

What if you’re using multiple injected providers?

If a user has multiple wallet browser extensions installed that inject ethereum providers –

E.g. MetaMask (the original injected provider) and Coinbase Wallet, Coinbase Wallet's injected provider will construct a "multiprovider" array at window.ethereum.providers, which contains the injected provider from each wallet. Coinbase Wallet will be identified by the isCoinbaseWallet property.

Read our doc on Handling Multiple Injected Extensions to learn more.

Coinbase SDK Wallet

Coinbase Wallet SDK is open source and our repository can be found here.

The SDK Wallet provides developers with some important added features:

• If the Coinbase Wallet extension isn't installed, calling ethereum.request({ method: 'eth_requestAccounts' })will start a built-in onboarding flow.

• On mobile, calling ethereum.request({ method: 'eth_requestAccounts' })will automatically deep-link to your dapp in the Coinbase Wallet native app.

How do you get users’ Ethereum accounts with Wallet SDK?

Follow these steps to integrate Coinbase Wallet using Coinbase Wallet SDK:

• Install SDK

In your terminal use the following commands to install the SDK:

npm install @coinbase/wallet-sdk

• Initialize provider object

In a javascript app copy and paste the following code to initialize the provider:

import CoinbaseWalletSDK from'@coinbase/wallet-sdk'

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

exportconst coinbaseWallet = newCoinbaseWalletSDK({

  appName: APP_NAME,

  appLogoUrl: APP_LOGO_URL,

  darkMode: false

})

// Initialize a Web3 Provider object

exportconst ethereum = coinbaseWallet.makeWeb3Provider(DEFAULT_ETH_JSONRPC_URL, DEFAULT_CHAIN_ID)

In your javascript app use the following code to get the user accounts:

ethereum.request({ method: 'eth_requestAccounts' }).then(response => console.log(response))

Wallet aggregator libraries

One final way to integrate Coinbase Wallet is with a wallet aggregator library (aka third-party library). The four main libraries are web3modal, web3-react, web3-onboard, and wagmi.

• Why use a wallet aggregator library? 

There are many wallet aggregator libraries that make it easier to integrate multiple wallets, giving your users options. Some libraries even include a built-in UI for users to pick which wallet they want to connect with.

These libraries are built around the Coinbase SDK Wallet, which is why we recommend them over a vanilla SDK implementation since they offer the same functionalities; they are easy to use; and they allow dapps to integrate multiple wallets. 

Because the code to get accounts varies based on the library, it’s always best to go to the library’s docs for the most up to date version.

Conclusion

While developers have multiple ways to integrate the self-custody Coinbase Wallet to their dapp, the open source Coinbase Wallet SDK provides you with the most seamless way to elevate your dapp – whether it's related to DeFi, NFTs or DAOs. By using Wallet SDK, devs can open their dapp to the Coinbase ecosystem of over 73 million users across 85 countries – regardless if these users have a Wallet extension installed or not.

Coinbase Wallet is a self-custody wallet providing software services subject to Coinbase Wallet Terms of Service and Privacy Policy. Coinbase Wallet is distinct from Coinbase.com, and private keys for Coinbase Wallet are stored directly by the user and not by Coinbase. Fees may apply. You do not need a Coinbase.com account to use Coinbase Wallet.