Explorer l’API Coinbase à partir d’un point de départ Web2 | de John Vester | sept. 2022

Vous ne savez pas par où commencer avec Web3 ? Commencez à utiliser les outils de développement Coinbase

En 1977, le musicien en herbe en moi a voulu apprendre le piano après avoir vu le film « Star Wars ». J’avais pour objectif d’apprendre à jouer le thème principal du film dont tout le monde parlait, alors j’ai acheté la partition. Nous avions un piano à la maison, un cadeau de mes grands-parents.

La version de 10 ans de moi a rapidement été submergée lorsque j’ai vu toutes les notes sur la page :

J’ai pensé que je pourrais commencer par quelque chose de plus facile, alors j’ai commencé à parcourir les papiers sur le banc du piano. Ensuite, j’ai découvert ce modèle de tableau de notes sympa qui s’intègre parfaitement derrière les touches du piano. Je n’ai pas trouvé de correspondance exacte, mais ici est un exemple :

Cela a changé la donne pour moi. J’ai jeté toutes les autres musiques sur le banc du piano et je me suis mis au travail, apprenant à jouer à Star Wars. En peu de temps, j’ai appris à jouer cette chanson (et le piano) sans une seule leçon.

Cela m’a fait me demander pourquoi de tels «modèles» n’existent pas dans tous les aspects de la vie.

Les nouveaux langages, plates-formes, frameworks et modèles de conception partagent tous une exigence commune : l’acceptation et l’adoption par les développeurs. Le plus souvent, la plupart partagent un autre défi commun : des courbes d’apprentissage plus abruptes que souhaité.

Pour moi, Web3 est actuellement dans cet état, malgré avoir travaillé sur un exemple Web3 dans ma publication « Moving From Full-Stack Developer To Web3 Pioneer ».

Les développeurs de pointe font déjà de grandes choses avec Web3. Mais qu’en est-il du prochain million de développeurs – comme moi – qui veulent se lancer sans se sentir dépassés et frustrés ? Comment pouvons-nous trouver un moyen de les intégrer avec Web3 ?

Je voulais trouver un modèle d’aide pour le développement Web3, que j’ai trouvé lorsque j’ai commencé à explorer le SDK Coinbase.

Selon Wikipédia, Coinbase est une société américaine cotée en bourse qui exploite une plate-forme d’échange de crypto-monnaie depuis juin 2012. Similaire à ce que j’ai écrit avec MarquetaCoinbase fournit une collection d’interfaces de programmation d’applications (API) et de kits de développement logiciel (SDK) à utiliser par les développeurs qui souhaitent créer des applications axées sur les monnaies numériques.

Un tel exemple est le SDK de portefeuille Coinbase.

Pour cette publication, je voulais accomplir les tâches suivantes :

• Créer une application Web3 simple avec React
• Intégrer l’extension de navigateur de mon portefeuille avec la Dapp
• Autoriser les utilisateurs à faire un don à l’aide du SDK Coinbase Wallet

Pour commencer, nous pouvons créer une application React appelée coinbase-wallet-example à l’aide de la CLI React :

npx create-react-app coinbase-wallet-example

Après avoir créé l’application React, j’ai utilisé la commande suivante pour accéder au répertoire coinbase-wallet-example :

cd coinbase-wallet-example

Étant donné que les nouvelles versions de create-react-app n’incluent plus la prise en charge des polyfills – une condition nécessaire pour utiliser web3.js correctement – cela nécessite une ancienne version de react-scripts :

npm install --save-exact react-scripts@4.0.3

Puisque nous allons construire un exemple Web3, le framework web3 a été installé en utilisant npm (d’autres options peuvent être trouvées ici):

npm install web3

Ensuite, le SDK Coinbase Wallet a été installé à l’aide de npm (d’autres options peuvent être trouvées ici):

npm install @coinbase/wallet-sdk

En utilisant le Gros suite de développement blockchain, j’ai créé un nouveau projet appelé coinbase-wallet-example:

Ensuite, je suis passé au réseau de test Ropsten et j’ai noté les clés et les URL du projet :

Maintenant, il nous suffit d’inclure le code suivant pour initialiser le SDK Coinbase Wallet et un objet Web3 :

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 = ' … d69';
const DEFAULT_CHAIN_ID = 3; // 1=Ethereum (mainnet), 3=Ropsten, 5=Gorli

À l’intérieur de useEffect() méthode de mon application, j’ai inclus le code nécessaire pour initialiser le portefeuille Coinbase et Web3 :

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);

Pour cet exemple très simple, nous n’utiliserons pas un contrat intelligent, mais fournirons à la place une adresse cible pour envoyer des dons :

const DONATION_ADDRESS = '0x7 ... c94';

Pour réduire les risques, le code sera mis à jour pour définir le DONATION_ADDRESS à l’adresse connectée du portefeuille utilisé.

DONATION_ADDRESS = account;

Cela signifie que le code enverra des fonds à l’expéditeur, ne laissant que les frais d’essence à prélever sur le portefeuille de l’utilisateur. Le React Dapp permettra aux utilisateurs de connecter leurs portefeuilles, puis de fournir un montant de don (en utilisant des unités WEI), puis d’appuyer sur le bouton Faire un don pour envoyer des fonds au DONATION_ADDRESS.

Le code source complet de ce simple Dapp est indiqué ci-dessous :