Creating a Web3 Application with the Coinbase Wallet SDK

Back in 1977, the aspiring musician in me wanted to learn piano after seeing the movie “Star Wars.” I had a goal to learn how to play the main theme of the movie everyone was talking about, so I bought the sheet music. We had a piano in the house, which was a gift from my grandparents.

The 10-year-old version of me quickly became overwhelmed when I saw all the notes on the page:

I thought maybe I should start with something easier, so I started sifting through the papers inside the piano bench. Then I discovered this really cool note chart template that fits perfectly behind the keys on the piano. I could not find an exact match, but here is an example:

This was a game-changer for me. I tossed all the other music back into the piano bench and got to work, learning how to play Star Wars. Within a short time, I learned to play that song (and piano) without a single lesson.

This made me wonder why such “templates” do not exist in all aspects of life.

The Catch-22 For New Tech

New languages, platforms, frameworks, and design patterns all share one common requirement—developer acceptance and adoption. More often than not, most share another common challenge: steeper-than-desired learning curves.

To me, Web3 is currently in that state, despite having worked through a Web3 example in my “How to Transition from Full-Stack Developer to Web3 Pioneer in 2022” publication.

Bleeding-edge devs are already doing great things with Web3. But what about the next million devs—like me—who want to get started without feeling overwhelmed and frustrated? How can we find a way to onboard them with Web3?

I wanted to find a helper template for Web3 development, which I found when I started exploring the Coinbase SDKs.

The Coinbase SDK/APIs

According to Wikipedia, Coinbase is an American publicly traded company that has operated a cryptocurrency exchange platform since June 2012. Similar to what I have written about with Marqeta, Coinbase provides a collection of application programming interfaces (APIs) and software development kits (SDKs) for developers to utilize who are interested in building applications focused on digital currencies.

One such example is the Coinbase Wallet SDK.

For this publication, I wanted to accomplish the following tasks:

Create a simple Web3 application using React
Integrate my wallet browser extension with the Dapp
Allow users to make a donation using the Coinbase Wallet SDK

Creating a Web3 Application with the Coinbase Wallet SDK

To get started, we can create a React application called coinbase-wallet-example using the React CLI:

npx create-react-app coinbase-wallet-example

After creating the React application, I used the following command to change into the coinbase-wallet-example directory:

cd coinbase-wallet-example

Since newer versions of create-react-app no longer include polyfills support – a necessary requirement to use web3.js properly – this requires an older version of react-scripts:

npm install --save-exact [email protected]

Since we will build a Web3 example, the web3 framework was installed using npm (other options can be found here):

npm install web3

Next, the Coinbase Wallet SDK was installed using npm (other options can be found here):

npm install @coinbase/wallet-sdk

Using the Infura blockchain development suite, I created a new project called coinbase-wallet-example:

Next, I switched to the Ropsten test network and noted the project’s keys and URLs:

Now, we just need to include the following code to initialize the Coinbase Wallet SDK and a Web3 object:

import CoinbaseWalletSDK from '@coinbase/wallet-sdk' import Web3 from 'web3';  const APP_NAME = 'coinbase-wallet-example'; const APP_LOGO_URL = './coinbase-logo.png'; const DEFAULT_ETH_JSONRPC_URL = 'https://ropsten.infura.io/v3/56f … d69'; const DEFAULT_CHAIN_ID = 3; // 1=Ethereum (mainnet), 3=Ropsten, 5=Gorli

Inside the useEffect() method of my App, I included the necessary code to initialize the Coinbase wallet and…