\
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:

\
 ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-cha3zat.jpeg)

\
\
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](https://a.co/d/477bjX6) is an example:

\
 ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-89b3zyx.jpeg)

\
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](https://hackernoon.com/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](https://www.coinbase.com/products).

\
## The Coinbase SDK/APIs

According to Wikipedia, [Coinbase](https://en.wikipedia.org/wiki/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](https://www.marqeta.com/), 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](https://docs.cloud.coinbase.com/wallet-sdk/docs).

\
 ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-wed3zbd.png)

\
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:

\
```javascript
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:

\
```javascript
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:

\
```javascript
npm install --save-exact react-scripts@4.0.3
```

\
Since we will build a Web3 example, the web3 framework was installed using npm (other options can be found [here](https://github.com/ChainSafe/web3.js)):

\
```javascript
npm install web3
```

\
Next, the Coinbase Wallet SDK was installed using npm (other options can be found [here](https://docs.cloud.coinbase.com/wallet-sdk/docs/installing)):

\
```javascript
npm install @coinbase/wallet-sdk
```

\
Using the [Infura](https://infura.io/) blockchain development suite, I created a new project called `coinbase-wallet-example`:

\
 ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-swe3zl3.png)

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

\
 ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-l9f3z08.png)

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

\
```javascript
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 Web3:

\
```javascript
   const coinbaseWallet = new CoinbaseWalletSDK({
      appName: APP_NAME,
      appLogoUrl: APP_LOGO_URL,
    });

    const walletSDKProvider = coinbaseWallet.makeWeb3Provider(
        DEFAULT_ETH_JSONRPC_URL,
        DEFAULT_CHAIN_ID
    );

   const web3 = new Web3(walletSDKProvider);
```

\
For this very simple example, we won’t leverage a smart contract but instead provide a target address to send donations:

\
```javascript
const DONATION_ADDRESS = '0x7 ... c94';
```

\
To reduce risk, the code will be updated to set the DONATION_ADDRESS to the connected address for the wallet in use.

\
```javascript
DONATION_ADDRESS = account;
```

\
This basically means the code will send funds to the sender,  leaving only the gas fees to be taken from the user’s wallet. The React Dapp will allow users to connect their wallets, then provide a donation amount (using WEI units), then push the Donate button to send funds to the DONATION_ADDRESS.

\
The full source code of this simple Dapp is noted below:

\
```javascript
import React, { useEffect, useState } from 'react';
import './App.css';
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
const DEFAULT_ETHEREUM_CHAIN_ID = '0x3'; // Should match DEFAULT_CHAIN_ID above, but with leading 0x

let DONATION_ADDRESS = '0x7 ... c94'; // Target donation address goes here, just as a simple example

const App = () => {
  const [isWalletConnected, setIsWalletConnected] = useState(false);
  const [account, setAccount] = useState();
  const [walletSDKProvider, setWalletSDKProvider] = useState();
  const [web3, setWeb3] = useState();
  const [responseMessage, setResponseMessage] = useState();

  useEffect(() => {
    const coinbaseWallet = new CoinbaseWalletSDK({
      appName: APP_NAME,
      appLogoUrl: APP_LOGO_URL,
    });

    const walletSDKProvider = coinbaseWallet.makeWeb3Provider(
        DEFAULT_ETH_JSONRPC_URL,
        DEFAULT_CHAIN_ID
    );

    setWalletSDKProvider(walletSDKProvider);

    const web3 = new Web3(walletSDKProvider);
    setWeb3(web3);
  }, []);

  const checkIfWalletIsConnected = () => {
    if (!window.ethereum) {
      console.log(
          'No ethereum object found. Please install Coinbase Wallet extension or similar.'
      );

      web3.setProvider(walletSDKProvider.enable());

      return;
    }

    console.log('Found the ethereum object:', window.ethereum);

    connectWallet();
  };

  const connectWallet = async () => {
    const accounts = await window.ethereum.request({
      method: 'eth_requestAccounts',
    });

    if (!accounts.length) {
      console.log('No authorized account found');
      return;
    }

    if (accounts.length) {
      const account = accounts[0];
      console.log('Found an authorized account:', account);
      setAccount(account);

      try {
        await window.ethereum.request({
          method: 'wallet_switchEthereumChain',
          params: [{ chainId: DEFAULT_ETHEREUM_CHAIN_ID }],
        });
        console.log('Successfully switched to Ropsten Network');
      } catch (error) {
        console.error(error);
      }
    }

    setIsWalletConnected(true);
  };

  const donate = async () => {
    if (!account || !window.ethereum) {
      console.log('Wallet is not connected');
      return;
    }

    // For this simple example, make the DONATION_ADDRESS the user's address (send to themselves)
    DONATION_ADDRESS = account;

    const donationAmount = document.querySelector('#donationAmount').value;

    web3.eth.sendTransaction({
      from: account,
      to: DONATION_ADDRESS,
      value: donationAmount
    }, function(err, transactionHash) {
      if (!err) {
        setResponseMessage(transactionHash + ' success');
        console.log(transactionHash + " success");
      } else {
        console.error(err);
      }
    });
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={APP_LOGO_URL} className="App-logo" alt="logo" />
        {isWalletConnected ? (
            <>
              <h4>Donate some funds to yourself</h4>
              <p>Connected Account: {account}</p>
              <div>
                <input
                    type="number"
                    id="donationAmount"
                    defaultValue={1.00}
                />
                <label htmlFor="donationAmount">WEI</label>
                <button onClick={donate} id="donate" type="button">
                  Donate
                </button>
              </div>
            </>
        ) : (
            <button onClick={checkIfWalletIsConnected} id="connect" type="button">
              Connect Wallet
            </button>
        )}
        <p>{responseMessage}</p>
      </header>
    </div>
  );
}

export default App;
```

\
Running the React-based Dapp is as easy as using the following command:

\
```javascript
npm start
```

\
[Here](https://i.imgur.com/XUASVHX.gif) is an example.

\
## Conclusion

Since 2021, I have been trying to live by the following mission statement, which I feel can apply to any IT professional:

\
> “Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.”
>
> \
> \- J. Vester

\
The note chart template that I referenced in my introduction turned out to be a pivotal point in my life. This hidden gem that was stashed inside our piano bench not only led to my ability to play the Star Wars theme, but it catapulted my ability to play music. That simple template and a desire to learn ultimately paved the way for my admission into the [Berklee College of Music](https://college.berklee.edu/) and the ability to participate in several musical productions.

\
The Coinbase APIs and SDKs – or developer tools – serve a similar purpose for developers eager to get started in the emerging Web3 world. Developers can include these modules into their applications and get started quickly, without getting bogged down in the details.

In both cases, the note chart template and Coinbase developer tools adhere to my mission statement by allowing the individual to remain focused on their primary objective – either learning to play the piano for the first time or doing something cool with Web3.

\
If you are interested in the source code for this publication, you can find it on GitLab at the following address:

\
<https://gitlab.com/johnjvester/coinbase-wallet-example>

\
Have a really great day!

\

---

Also published [here](https://dzone.com/articles/exploring-the-coinbase-api-from-a-web2-starting-po).

Coinbase

Dapp

fees

Target

2022 - HackerNoon Contributor of the Year - Cloud Computing

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Salesforce

2022 - Hackernoons Tech Storyteller of the Year

I ♥ writing code. Find me on GitLab.

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Hackernoons Tech Storyteller of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Cloud Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

Too Long; Didn't Read

Build JavaScript blockchain apps easily with Lisk

Creating a Web3 Application with the Coinbase Wallet SDK

Creating a Web3 Application with the Coinbase Wallet SDK

Too Long; Didn't Read

Companies Mentioned

@johnjvester

RELATED STORIES