InicioBilletera BitcoinCreación de una aplicación Web3 con el SDK de Coinbase Wallet

Creación de una aplicación Web3 con el SDK de Coinbase Wallet

Published on

En 1977, el aspirante a músico que había en mí necesitaba estudiar piano después de ver la película «La guerra de las galaxias». Tenía el objetivo de aprender a tocar el tema principal de la película del que todo el mundo hablaba, así que compré las partituras. Teníamos un piano en casa, que fue un regalo de mis abuelos.

El modelo de diez años de edad que había en mí se convirtió rápidamente en algo abrumador después de ver todas las notas de la página web:

Supuse que posiblemente debería empezar con algo más sencillo, así que empecé a rebuscar entre los papeles que había en el banco del piano. Entonces encontré esta plantilla de gráfico de conocimiento realmente genial que encaja completamente detrás de las teclas del piano. No pude encontrar una coincidencia precisa, sin embargo aquí es una instancia:

Esto fue un cambio de juego para mí. Volví a tirar toda la música contraria en el banco del piano y me puse a trabajar, estudiando métodos fáciles para tocar Star Wars. En poco tiempo, descubrí que podía tocar ese tema (y el piano) sin una sola lección.

Esto me hizo maravillar por qué no existen esas «plantillas» en todos los elementos de la vida.

El dilema de las nuevas tecnologías

Los nuevos lenguajes, plataformas, marcos y patrones de diseño comparten un requisito generalizado: la aceptación y adopción por parte de los desarrolladores. Por lo general, la mayoría comparten otro problema generalizado: curvas de estudio más pronunciadas de lo deseado.

Para mí, Web3 está actualmente en ese estado, a pesar de haber trabajado por medio de una instancia de Web3 en mi « Cómo pasar de desarrollador Full-Stack a pionero de la Web3 en 2022 «.

Los desarrolladores de vanguardia ya están haciendo grandes cosas con Web3, pero ¿qué pasa con el siguiente millón de desarrolladores -como yo- que quieren empezar sin sentirse abrumados y cabreados? ¿Cómo podemos encontrar un método para que se incorporen a Web3?

Necesitaba descubrir una plantilla de ayuda para el crecimiento de Web3, que descubrí después de empezar a explorar el SDKs de Coinbase .

El SDK/API de Coinbase

De acuerdo con la Wikipedia, Coinbase es una empresa estadounidense que cotiza en bolsa y que opera una plataforma de cambio de criptomonedas desde junio de 2012. Al igual que lo que he escrito con Marqeta Coinbase ofrece un grupo de interfaces de programación de utilidades (APIs) y kits de crecimiento de programas de software (SDKs) para que los constructores aprovechen al máximo quienes están fascinados por la construcción de propósitos dirigidos a las monedas digitales.

Uno de estos casos es el SDK de Coinbase Wallet .

Para esta publicación, necesitaba realizar las siguientes tareas:

  • Crear una sencilla utilidad Web3 utilizando React
  • Combinar la extensión del navegador de mis bolsillos con la Dapp
  • Permitir a los clientes hacer una donación utilizando el SDK de Coinbase Pockets

Hacer un software Web3 con el SDK de Coinbase Pockets

Para empezar, crearemos una utilidad React denominada coinbase-wallet-example utilizando la CLI de React:

npx create-react-app coinbase-wallet-example 

Después de crear la utilidad React, usé el siguiente comando para alterar en el listado coinbase-wallet-example:

cd coinbase-wallet-example 

Dado que las nuevas variantes de create-react-app no abrazan la ayuda de polyfills – un requisito obligatorio para hacer uso de web3.js correctamente – esto requiere un modelo más antiguo de react-scripts:

npm set up --save-exact  [email protected] 

Dado que vamos a construir una instancia de Web3, el marco de trabajo de web3 se puso en la utilización de npm (diferentes opciones podrían ser descubiertos aquí ):

npm set up web3 

A continuación, el SDK de Coinbase Pockets se puso en la utilización de npm (diferentes opciones podrían ser descubiertos aquí ):

npm set up @coinbase/wallet-sdk 

Utilizando el Infura suite de crecimiento de blockchain, he creado una nueva empresa denominadacoinbase-wallet-example:

Posteriormente, me cambié a la comunidad de Ropsten para echar un vistazo a las claves y URLs de la empresa:

Ahora, simplemente queremos incorporar el siguiente código para inicializar el SDK de Coinbase Pockets y un objeto 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 = 'https://ropsten.infura.io/v3/56f … d69'; const DEFAULT_CHAIN_ID = 3; // 1=Ethereum (mainnet), 3=Ropsten, 5=Gorli 

Contenida en eluseEffect()metodología de mi App, incluí el código obligatorio para inicializar los bolsillos de Coinbase y 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); 

En este caso tan sencillo, no se ha hecho uso de un contrato sensato, sino que se ha presentado una dirección de destino para enviar las donaciones:

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

Para reducir el peligro, el código puede actualizarse para establecer la DONATION_ADDRESS a la dirección relacionada con los bolsillos en uso.

DONATION_ADDRESS = account; 

Esto significa principalmente que el código enviará los fondos al remitente, dejando únicamente los cargos de la gasolina para ser tomado de los bolsillos del consumidor. La React Dapp permitirá a los clientes adjuntar sus carteras, a continuación, presentar una cantidad de donación (utilizando elementos WEI), a continuación, pulse el botón de Donar para enviar los fondos a la DONATION_ADDRESS.

El código de suministro completo de esta Dapp directa es famoso bajo:

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'; // Ought to match DEFAULT_CHAIN_ID above, however with main 0x let DONATION_ADDRESS = '0x7 ... c94'; // Goal donation tackle goes right here, simply as a easy instance 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 discovered. Please set up Coinbase Pockets extension or comparable.' ); web3.setProvider(walletSDKProvider.allow()); return; } console.log('Discovered the ethereum object:', window.ethereum); connectWallet(); }; const connectWallet = async () => { const accounts = await window.ethereum.request({ methodology: 'eth_requestAccounts', }); if (!accounts.size) { console.log('No licensed account discovered'); return; } if (accounts.size) { const account = accounts[0]; console.log('Discovered a licensed account:', account); setAccount(account); strive { await window.ethereum.request({ methodology: 'wallet_switchEthereumChain', params: [{ chainId: DEFAULT_ETHEREUM_CHAIN_ID }], }); console.log('Efficiently switched to Ropsten Community'); } catch (error) { console.error(error); } } setIsWalletConnected(true); }; const donate = async () => { if (!account || !window.ethereum) { console.log('Pockets will not be related'); return; } // For this straightforward instance, make the DONATION_ADDRESS the consumer's tackle (ship to themselves) DONATION_ADDRESS = account; const donationAmount = doc.querySelector('#donationAmount').worth; web3.eth.sendTransaction({ from: account, to: DONATION_ADDRESS, worth: donationAmount }, operate(err, transactionHash) { if (!err) { setResponseMessage(transactionHash + ' success'); console.log(transactionHash + " success"); } else { console.error(err); } }); }; return ( 
brand
) : ( )}

); } export default App;

Trabajar la Dapp basada en React es tan sencillo como utilizar el siguiente comando:

npm begin 

Aquí es una instancia.

Conclusión

Desde 2021, he estado intentando vivir según la siguiente afirmación de misión, que realmente creo que puede aplicarse a cualquier experto en TI:

«Centra tu tiempo en ofrecer opciones/rendimiento que amplíen el valor de tu propiedad mental. Aprovecha los marcos, las mercancías y los proveedores para todo lo demás».

– J. Vester

La plantilla de la carta de conocimiento a la que me referí en mi introducción resultó ser un nivel fundamental en mi vida. Esta joya oculta que estaba escondida dentro de nuestro banco de piano no sólo condujo a mi habilidad para tocar el tema de Star Wars, sino que seguramente catapultó mi habilidad para tocar música. Esa sencilla plantilla y la necesidad de estudiar acabaron allanando el camino para mi admisión en el Colegio de Música de Berklee y el poder participar en una serie de producciones musicales.

Las APIs y SDKs de Coinbase – o instrumentos para desarrolladores – sirven un objetivo análogo para los constructores desesperados por empezar en el creciente mundo de la Web3. Los constructores pueden abrazar estos módulos en sus propósitos y empezar rápidamente, sin ser frenado en los detalles.

En todos los casos, la plantilla de gráfico de conocimiento y los instrumentos para desarrolladores de Coinbase se adhieren a mi afirmación de la misión al permitir que la persona se mantenga enfocada en su objetivo principal, ya sea estudiar a tocar el piano por primera vez o hacer algo genial con Web3.

Si está dentro del código de suministro de esta publicación, lo encontrará en GitLab en la siguiente dirección:

https://gitlab.com/johnjvester/coinbase-wallet-example

¡Que tenga un muy buen día!


Además, reveló aquí .

L O A D I N E S
. . comentarios & ¡extra!

Enlace a la fuente

Latest articles

El creador de mercado Flowdesk se unirá a la red Pyth para mejorar el acceso a los datos de la cadena de bloques

Le rogamos que diga que nuestro política de privacidad , condiciones de uso...

OmniaVerse lanza Apex Blockchain con tasas de gas cero

OmniaVerse es una startup de Internet 3 que ha estado entregando a un...

El volumen de Bitcoin y la libra esterlina alcanzan un récord mientras la moneda británica se tambalea

LONDRES, 28 de septiembre (Reuters) - Los volúmenes de compra y venta entre...

El mercado se mueve: El Bitcoin vuelve a cambiar de rumbo y se acerca a la media móvil de 20 días – Yahoo Eurosport...

Worth MotionEl Bitcoin y el ether cotizaron con mayor intensidad el martes, invirtiendo...

Más como esto

El creador de mercado Flowdesk se unirá a la red Pyth para mejorar el acceso a los datos de la cadena de bloques

Le rogamos que diga que nuestro política de privacidad , condiciones de uso...

OmniaVerse lanza Apex Blockchain con tasas de gas cero

OmniaVerse es una startup de Internet 3 que ha estado entregando a un...

El volumen de Bitcoin y la libra esterlina alcanzan un récord mientras la moneda británica se tambalea

LONDRES, 28 de septiembre (Reuters) - Los volúmenes de compra y venta entre...