La guía completa para el desarrollo de Ethereum

Por Nader Dabit, 9 de abril de 2021, actualizado el 18 de enero de 2022. Traducción por Lorena Fabris

#solidity #ethereum #dapps #react

Construyendo dApps Full Stack con React, Ethers.js, Solidity, y Hardhat

En este tutorial, aprenderás una pila de tecnología web3 que te permitirá construir aplicaciones full stack en docenas de redes blockchain incluyendo Ethereum, Polygon, Avalanche, Celo, y muchas otras aprovechando la Máquina Virtual Ethereum (EVM).

El código de este proyecto se encuentra aquí. El curso de video para este tutorial se encuentra aquí. También puedes consultar Defining the web3 stack.

Recientemente me uní a Edge & Node como Ingeniero de Relaciones con los Desarrolladores y he estado profundizando en el desarrollo de contratos inteligentes con Ethereum. Me he establecido en lo que creo que es la mejor pila para construir aplicaciones de pila completa (full stack dApps) con Solidity:

▶︎ Client Framework — React

▶︎ Entorno de desarrollo de Ethereum — Hardhat

▶︎ Biblioteca de cliente web de Ethereum — Ethers.js

▶︎ Capa de la API — El Protocolo The Graph.

El problema con el que me encontré mientras aprendía esto fue que mientras había una documentación bastante buena para cada una de estas cosas individualmente, no había nada realmente sobre cómo poner todas estas cosas juntas y entender cómo funcionaban entre sí. Hay algunas plantillas muy buenas como scaffold-eth (que también incluye Ethers, Hardhat, y The Graph), pero puede ser demasiado para la gente que acaba de empezar.

Quería una guía completa que me mostrara cómo construir aplicaciones de pila completa (Full Stack Dapps) de Ethereum utilizando los recursos, bibliotecas y herramientas más actuales.

Las cosas que me interesaban eran las siguientes:

1.- Cómo crear, desplegar y probar los contratos inteligentes de Ethereum en la red local, de prueba (testnet) y principal (mainnet)

2.- Cómo cambiar entre entornos/redes locales, de prueba y de producción

3.- Cómo conectarse e interactuar con los contratos usando varios entornos desde un front end como React, Vue, Svelte, o Angular

Después de pasar algún tiempo averiguando todo esto y ponerme en marcha con la pila con la que me sentía realmente feliz, pensé que sería bueno escribir cómo construir y probar una aplicación completa de Ethereum utilizando esta pila no sólo para otras personas que puedan estar interesadas en esta pila, sino también para mí mismo para futuras referencias. Esta es esa referencia.

Las piezas

Vamos a repasar las principales piezas que vamos a utilizar y cómo encajan en la pila.

1. Entorno de desarrollo de Ethereum

Cuando construyas contratos inteligentes, necesitarás una forma de desplegar tus contratos, ejecutar pruebas y depurar el código de Solidity sin tener que lidiar con entornos reales.

También necesitarás una forma de compilar tu código Solidity en código que pueda ser ejecutado en una aplicación del lado del cliente — en nuestro caso, una aplicación React. Aprenderemos más sobre cómo funciona esto un poco más tarde.

Hardhat es un entorno de desarrollo de Ethereum y un marco diseñado para el desarrollo de pila completa y es el marco que voy a utilizar para este tutorial.

Otras herramientas similares en el ecosistema son Ganache, Truffle, y Foundry.

2. Biblioteca Web del Cliente de Ethereum

En nuestra aplicación React, necesitaremos una forma de interactuar con los contratos inteligentes que se han desplegado. Necesitaremos una forma de leer los datos así como de enviar nuevas transacciones.

ethers.js pretende ser una librería completa y compacta para interactuar con la Blockchain de Ethereum y su ecosistema desde aplicaciones JavaScript del lado del cliente como React, Vue, Angular o Svelte. Es la librería que utilizaremos.

Otra opción muy popular en el ecosistema es web3.js

3. Metamask

Metamask ayuda a gestionar la cuenta y a conectar al usuario actual con la blockchain. MetaMask permite a los usuarios gestionar sus cuentas y claves de varias maneras diferentes mientras las aísla del contexto del sitio.

Una vez que un usuario ha conectado su billetera MetaMask, tu como desarrollador puedes interactuar con la API de Ethereum disponible a nivel mundial (window.ethereum) que identifica a los usuarios de navegadores compatibles con web3 (como los usuarios de MetaMask), y cada vez que solicites la firma de una transacción, MetaMask preguntará al usuario de la manera más comprensible posible.

4. React

React es una librería JavaScript de front-end para la construcción de aplicaciones web, interfaces de usuario y componentes UI. Es mantenida por Facebook y muchos desarrolladores individuales y empresas.

React y su gran ecosistema de metaframeworks como Next.js, Gatsby, Redwood, Blitz.js, y otros permiten todo tipo de objetivos de despliegue, incluyendo SPAs tradicionales, generadores de sitios estáticos, renderización del lado del servidor, y una combinación de los tres. React sigue dominando aparentemente el espacio del front-end y creo que seguirá haciéndolo al menos en el futuro próximo.

5. The Graph

Para la mayoría de las aplicaciones construidas en blockchains como Ethereum, es difícil y requiere mucho tiempo leer los datos directamente de la cadena, por lo que se solía ver a la gente y a las empresas construyendo su propio servidor de indexación centralizado y sirviendo las solicitudes de la API desde estos servidores. Esto requiere muchos recursos de ingeniería y hardware y rompe las propiedades de seguridad necesarias para la descentralización.

The Graph es un protocolo de indexación para consultar datos de blockchain que permite la creación de aplicaciones totalmente descentralizadas y resuelve este problema, exponiendo una rica capa de consulta GraphQL que las aplicaciones pueden consumir. En esta guía no vamos a construir un subgrafo para nuestra aplicación, pero lo haremos en un futuro tutorial.

Para aprender a construir APIs de blockchain usando The Graph, revisa Building GraphQL APIs on Ethereum.

Qué vamos a construir

En este tutorial, construiremos, desplegaremos y conectaremos un par de contratos inteligentes básicos:

1.- Un contrato para crear y actualizar un mensaje en la blockchain de Ethereum

2.- Un contrato para la acuñación de tokens, permitiendo luego al propietario del contrato enviar tokens a otros y leer los saldos de los tokens, y para que los propietarios de los nuevos tokens también los envíen a otros.

También construiremos un front end de React que permitirá a un usuario:

1.- Leer el Greeting del contrato desplegado en la blockchain

2.- Actualizar el greeting

3.- Enviar los tokens recién acuñados desde su dirección a otra dirección

4.- Una vez que alguien ha recibido tokens, permitirle enviar también sus tokens a otra persona

5.- Leer el saldo de tokens del contrato desplegado en la blockchain

Requisitos previos

1.- Node.js instalado en tu máquina local

2.- Extensión MetaMask en Chrome instalada en tu navegador

No necesitas poseer ningún Ethereum para esta guía ya que usaremos Ether falso / de prueba en una red de prueba para todo el tutorial.

Cómo empezar

Para empezar, crearemos una nueva aplicación React:

npx create-react-app react-dapp

A continuación, cambia al nuevo directorio e instala ethers.jsy hardhat usando NPM o Yarn:

npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers

Instalar y configurar un entorno de desarrollo de Ethereum

A continuación, inicializa un nuevo Entorno de Desarrollo de Ethereum con Hardhat:

npx hardhat

? What do you want to do? Create a sample project
? Hardhat project root: <Choose default path>

Ahora deberías ver los siguientes artifacts creados para ti en tu directorio raíz:

hardhat.config.js — La totalidad de tu configuración de Hardhat (es decir, tu configuración, plugins y tareas personalizadas) está contenida en este archivo.

scripts — Una carpeta que contiene un script llamado sample-script.js que desplegará tu contrato inteligente cuando se ejecute

test — Una carpeta que contiene un script de prueba de ejemplo

contracts — Una carpeta que contiene un ejemplo de contrato inteligente Solidity

Debido a un problema de configuración de MetaMask, necesitamos actualizar el ID de la cadena en nuestra configuración de HardHat para que sea 1337. También necesitamos actualizar la ubicación de los artifacts de nuestros contratos compilados para que estén en el directorio src de nuestra aplicación React.

Para hacer estas actualizaciones, abre hardhat.config.js y actualiza el e module.exports para que se vea así:

module.exports = {
  solidity: "0.8.4",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    hardhat: {
      chainId: 1337
    }
  }
};

Nuestro contrato inteligente

A continuación, echemos un vistazo al contrato de ejemplo que se nos da en contracts/Greeter.sol:

//SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "hardhat/console.sol";


contract Greeter {
  string greeting;

  constructor(string memory _greeting) {
    console.log("Deploying a Greeter with greeting:", _greeting);
    greeting = _greeting;
  }

  function greet() public view returns (string memory) {
    return greeting;
  }

  function setGreeting(string memory _greeting) public {
    console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
    greeting = _greeting;
  }
}

Este es un contrato inteligente muy básico. Cuando se despliega, establece una variable de Greeting y expone una función (greet) que puede ser llamada para devolver el greeting.

También expone una función que permite al usuario actualizar el greeting (setGreeting). Cuando se despliegue en la blockchain de Ethereum, estos métodos estarán disponibles para que el usuario interactúe con ellos.

Leer y escribir en la blockchain de Ethereum

Hay dos tipos de maneras de interactuar con un contrato inteligente, la lectura o la escritura / transacciones. En nuestro contrato, greet puede ser considerado lectura, y setGreeting puede ser considerado escritura / transacción.

Al escribir o inicializar una transacción, tienes que pagar para que la transacción se escriba en la blockchain. Para que esto funcione, tienes que pagar gas, que es la tarifa, o el precio, requerido para llevar a cabo con éxito una transacción y ejecutar un contrato en la blockchain de Ethereum.

Mientras sólo estés leyendo de la blockchain y no cambies o actualices nada, no necesitas llevar a cabo una transacción y no habrá gas o coste para hacerlo. La función a la que llamas la realiza entonces sólo el nodo al que estás conectado, por lo que no necesitas pagar ningún gas y la lectura es gratuita.

Desde nuestra app React, la forma en la que interactuaremos con el contrato inteligente es utilizando una combinación de la libreríaethers.js, la dirección del contrato y la ABI que se creará a partir del contrato mediante hardhat.

¿Qué es una ABI? ABI significa interfaz binaria de aplicación. Puedes pensar en ella como la interfaz entre tu aplicación del lado del cliente y la blockchain de Ethereum donde se despliega el contrato inteligente con el que vas a interactuar.

Las ABIs suelen ser compiladas a partir de contratos inteligentes Solidity por un marco de desarrollo como HardHat. También puedes encontrar a menudo las ABIs de un smart contract en Etherscan

Compilar la ABI

Ahora que hemos repasado el contrato inteligente básico y sabemos qué son las ABI, vamos a compilar una ABI para nuestro proyecto.

Para ello, ve a la línea de comandos y ejecuta el siguiente comando:

npx hardhat compile

Ahora, deberías ver una nueva carpeta llamada artifacts en el directorio src. El archivo artifacts/contracts/Greeter.json contiene la ABI como una de las propiedades. Cuando necesitemos utilizar la ABI, podemos importarla desde nuestro archivo JavaScript:

import Greeter from './artifacts/contracts/Greeter.sol/Greeter.json'

A continuación, podemos hacer referencia a la ABI de la siguiente manera:

console.log("Greeter ABI: ", Greeter.abi)

Ten en cuenta que Ethers.js también permite ABIs legibles para humanos, pero no entraremos en esto durante este tutorial.

Desplegar y usar una red local / blockchain

A continuación, vamos a desplegar nuestro contrato inteligente en una blockchain local para que podamos probarlo.

Para desplegar en la red local, primero hay que iniciar el nodo de prueba local. Para ello, abre el CLI y ejecuta el siguiente comando:

npx hardhat node

Cuando ejecutamos este comando, deberías ver una lista de direcciones y claves privadas.

Se trata de 20 cuentas y direcciones de prueba creadas para nosotros que podemos utilizar para desplegar y probar nuestros contratos inteligentes. Cada cuenta también está cargada con 10.000 Ether falsos. En un momento, vamos a aprender a importar la cuenta de prueba en MetaMask para que podamos utilizarla.

A continuación, tenemos que desplegar el contrato a la red de prueba. Primero actualiza el nombre de scripts/sample-script.js a scripts/deploy.js.

Ahora podemos ejecutar el script de despliegue y dar una bandera a la CLI que nos gustaría desplegar a nuestra red local:

npx hardhat run scripts/deploy.js --network localhost

Una vez ejecutado este script, el contrato inteligente debería desplegarse en la red local de pruebas y deberíamos poder empezar a interactuar con él.

Cuando el contrato se desplegó, utilizó la primera cuenta que se creó cuando iniciamos la red local.

Si miras la salida del CLI, deberías poder ver algo como esto

Greeter deployed to: 0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0

Esta dirección es la que usaremos en nuestra aplicación cliente para hablar con el contrato inteligente. Mantén esta dirección disponible ya que necesitaremos usarla cuando nos conectemos a él desde la aplicación cliente.

Para enviar transacciones al contrato inteligente, necesitaremos conectar nuestra wallet MetaMask utilizando una de las cuentas creadas cuando ejecutamos el npx hardhat node. In. En la lista de contratos que el CLI saca, deberías ver tanto un número de Cuenta como una Clave Privada:

➜  react-dapp git:(main) npx hardhat node
Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

Accounts
========
Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

...

Podemos importar esta cuenta a MetaMask para empezar a utilizar algunos de los falsos Eth disponibles allí.

Para ello, primero abre MetaMask y habilita las test networks (redes de prueba):

A continuación, actualiza la red para que sea Localhost 8545:

A continuación, en MetaMask haz clic en Import Account en el menú de cuentas:

Copia y pega una de las Claves Privadas (private keys) que has sacado la CLI y haz clic en Import. Una vez importada la cuenta, deberías ver el Eth en la cuenta:

Ahora que tenemos un contrato inteligente desplegado y una cuenta lista para usar, podemos empezar a interactuar con ella desde la aplicación React.

Conectar el cliente React

En este tutorial no nos vamos a preocupar de construir una bonita interfaz de usuario con CSS y todo eso, nos centramos al 100% en la funcionalidad principal para ponerte en marcha. A partir de ahí, puedes tomarla y hacerla lucir bien si quieres.

Dicho esto, vamos a repasar los dos objetivos que queremos de nuestra aplicación React:

1.- Obtener el valor actual del greeting del contrato inteligente

2.- Permitir que un usuario actualice el valor del greeting

Entendidas estas cosas, ¿cómo logramos esto? Aquí están las cosas que tenemos que hacer para que esto suceda:

1.- Crear un campo de input y algún estado local para gestionar el valor del input (para actualizar el reeting)

2.- Permitir que la aplicación se conecte a la cuenta MetaMask del usuario para firmar transacciones

3.- Crear funciones para leer y escribir en el contrato inteligente

Para hacer esto, abre src/App.js y actualízalo con el siguiente código, estableciendo el valor de greeterAddress a la dirección de tu contrato inteligente.:

import './App.css';
import { useState } from 'react';
import { ethers } from 'ethers'
import Greeter from './artifacts/contracts/Greeter.sol/Greeter.json'

// Update with the contract address logged out to the CLI when it was deployed 
const greeterAddress = "your-contract-address"

function App() {
  // store greeting in local state
  const [greeting, setGreetingValue] = useState()

  // request access to the user's MetaMask account
  async function requestAccount() {
    await window.ethereum.request({ method: 'eth_requestAccounts' });
  }

  // call the smart contract, read the current greeting value
  async function fetchGreeting() {
    if (typeof window.ethereum !== 'undefined') {
      const provider = new ethers.providers.Web3Provider(window.ethereum)
      const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)
      try {
        const data = await contract.greet()
        console.log('data: ', data)
      } catch (err) {
        console.log("Error: ", err)
      }
    }    
  }

  // call the smart contract, send an update
  async function setGreeting() {
    if (!greeting) return
    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner()
      const contract = new ethers.Contract(greeterAddress, Greeter.abi, signer)
      const transaction = await contract.setGreeting(greeting)
      await transaction.wait()
      fetchGreeting()
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={fetchGreeting}>Fetch Greeting</button>
        <button onClick={setGreeting}>Set Greeting</button>
        <input onChange={e => setGreetingValue(e.target.value)} placeholder="Set greeting" />
      </header>
    </div>
  );
}

export default App;

Para probarlo, inicia el servidor React:

npm start

Cuando la aplicación se cargue, deberías poder obtener el greeting actual y registrarlo en la consola. También deberías poder actualizar el greeting firmando el contrato con tu wallet MetaMask y gastando el Ether falso.

Desplegar y usar una red de prueba en vivo

Existen varias redes de prueba de Ethereum como Ropsten, Rinkeby, o Kovan en las que también podemos desplegar para tener una versión públicamente accesible de nuestro contrato sin tener que desplegarlo en mainnet. En este tutorial desplegaremos en la red de prueba Ropsten.

Para empezar, primero actualiza tu wallet MetaMask para conectarte a la red Ropsten.

A continuación, envíate un poco de Ether de prueba para utilizarlo durante el resto de este tutorial visitando esta faucet de prueba.

Podemos obtener acceso a Ropsten (o a cualquiera de las otras redes de prueba) registrándonos en un servicio como Infura o Alchemy (yo estoy usando Infura para este tutorial).

Una vez que hayas creado la aplicación en Infura o Alchemy, se te dará un endpoint que se parece a esto

https://ropsten.infura.io/v3/your-project-id

Asegúrate de establecer la lista de direcciones de Ethereum en la configuración de la aplicación de Infura o Alchemy para incluir la dirección de wallet de la cuenta desde la que vas a desplegar.

Para desplegar en la red de prueba necesitamos actualizar la configuración de nuestro hardhat con alguna información adicional de la red. Una de las cosas que necesitamos establecer es la clave privada de la wallet desde el que vamos a desplegar.

Para obtener la clave privada, puedes exportarla desde MetaMask.

Sugiero no codificar este valor en tu aplicación, sino establecerlo como una variable de entorno.

A continuación, añadir una propiedad de networks con la siguiente configuración:

module.exports = {
  defaultNetwork: "hardhat",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    hardhat: {},
    ropsten: {
      url: "https://ropsten.infura.io/v3/your-project-id",
      accounts: [`0x${your-private-key}`]
    }
  },
  solidity: "0.8.4",
};

Para desplegar, ejecuta el siguiente script:

npx hardhat run scripts/deploy.js --network ropsten

Una vez desplegado el contrato, deberías poder empezar a interactuar con él. Ahora deberías ser capaz de ver el contrato en vivo en Etherscan Ropsten Testnet Explorer

Mintear tokens

Uno de los casos de uso más comunes de los contratos inteligentes es la creación de tokens, veamos cómo podemos hacerlo. Ya que sabemos un poco más sobre cómo funciona todo esto, iremos un poco más rápido.

En el directorio principal de contrats crea un nuevo archivo llamado Token.sol.

A continuación, actualiza Token.sol con el siguiente contrato inteligente:

//SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "hardhat/console.sol";
contract Token {
  string public name = "Nader Dabit Token";
  string public symbol = "NDT";
  uint public totalSupply = 1000000;
  mapping(address => uint) balances;
  constructor() {
    balances[msg.sender] = totalSupply;
  }
  function transfer(address to, uint amount) external {
    require(balances[msg.sender] >= amount, "Not enough tokens");
    balances[msg.sender] -= amount;
    balances[to] += amount;
  }
  function balanceOf(address account) external view returns (uint) {
    return balances[account];
  }
}

Ten en cuenta que este contrato de tokens es sólo para fines de demostración y no es compatible con ERC20. Aquí cubriremos los tokens ERC20

Este contrato creará un nuevo token llamado “Nader Dabit Token” y establecerá el suministro a 1000000.

A continuación, compila este contrato:

npx hardhat compile

Ahora, actualiza el script desplegado en scripts/deploy.js para incluir este nuevo contrato Token:

const hre = require("hardhat");

async function main() {
  const [deployer] = await hre.ethers.getSigners();

  console.log(
    "Deploying contracts with the account:",
    deployer.address
  );

  const Greeter = await hre.ethers.getContractFactory("Greeter");
  const greeter = await Greeter.deploy("Hello, World!");

  const Token = await hre.ethers.getContractFactory("Token");
  const token = await Token.deploy();

  await greeter.deployed();
  await token.deployed();

  console.log("Greeter deployed to:", greeter.address);
  console.log("Token deployed to:", token.address);
}

main()
  .then(() => process.exit(0))
  .catch(error => {
    console.error(error);
    process.exit(1);
  });

Ahora, podemos desplegar este nuevo contrato en la red local o Ropsten:

npx hardhat run scripts/deploy.js --network localhost

Una vez desplegado el contrato, puedes empezar a enviar estos tokens a otras direcciones.

Para ello, vamos a actualizar el código del cliente que necesitaremos para que esto funcione:

import './App.css';
import { useState } from 'react';
import { ethers } from 'ethers'
import Greeter from './artifacts/contracts/Greeter.sol/Greeter.json'
import Token from './artifacts/contracts/Token.sol/Token.json'

const greeterAddress = "your-contract-address"
const tokenAddress = "your-contract-address"

function App() {
  const [greeting, setGreetingValue] = useState()
  const [userAccount, setUserAccount] = useState()
  const [amount, setAmount] = useState()

  async function requestAccount() {
    await window.ethereum.request({ method: 'eth_requestAccounts' });
  }

  async function fetchGreeting() {
    if (typeof window.ethereum !== 'undefined') {
      const provider = new ethers.providers.Web3Provider(window.ethereum)
      console.log({ provider })
      const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)
      try {
        const data = await contract.greet()
        console.log('data: ', data)
      } catch (err) {
        console.log("Error: ", err)
      }
    }    
  }

  async function getBalance() {
    if (typeof window.ethereum !== 'undefined') {
      const [account] = await window.ethereum.request({ method: 'eth_requestAccounts' })
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const contract = new ethers.Contract(tokenAddress, Token.abi, provider)
      const balance = await contract.balanceOf(account);
      console.log("Balance: ", balance.toString());
    }
  }

  async function setGreeting() {
    if (!greeting) return
    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      console.log({ provider })
      const signer = provider.getSigner()
      const contract = new ethers.Contract(greeterAddress, Greeter.abi, signer)
      const transaction = await contract.setGreeting(greeting)
      await transaction.wait()
      fetchGreeting()
    }
  }

  async function sendCoins() {
    if (typeof window.ethereum !== 'undefined') {
      await requestAccount()
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(tokenAddress, Token.abi, signer);
      const transation = await contract.transfer(userAccount, amount);
      await transation.wait();
      console.log(`${amount} Coins successfully sent to ${userAccount}`);
    }
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={fetchGreeting}>Fetch Greeting</button>
        <button onClick={setGreeting}>Set Greeting</button>
        <input onChange={e => setGreetingValue(e.target.value)} placeholder="Set greeting" />

        <br />
        <button onClick={getBalance}>Get Balance</button>
        <button onClick={sendCoins}>Send Coins</button>
        <input onChange={e => setUserAccount(e.target.value)} placeholder="Account ID" />
        <input onChange={e => setAmount(e.target.value)} placeholder="Amount" />
      </header>
    </div>
  );
}

export default App;

A continuación, ejecuta la aplicación:

npm start

Deberíamos poder hacer clic en Get Balance y ver que tenemos 1.000.000 de monedas en nuestra cuenta registrada en la consola.

También deberíamos poder verlas en MetaMask haciendo clic en import tokens:

A continuación, hacemos click en Custom Token e introducimos la dirección del contrato de tokens y a continuación Add Custom Token. (si se te pregunta por los decimales del token, elige 0) Ahora los tokens deberían estar disponibles en tu wallet:

A continuación, vamos a intentar enviar esas monedas a otra dirección.

Para ello, copia la dirección de otra cuenta y envíalas a esa dirección utilizando la interfaz de usuario actualizada de React. Cuando compruebes la cantidad de tokens, debería ser igual a la cantidad original menos la cantidad que enviaste a la dirección.

Token ERC20

El estándar de tokens ERC20 define un conjunto de reglas que se aplican a todos los tokens ERC20 que les permiten interactuar fácilmente entre sí. ERC20 hace que sea realmente fácil para alguien mintear sus propios tokens que tendrán interoperabilidad con otros en la blockchain de Ethereum.

Veamos cómo podemos construir nuestro propio token utilizando el estándar ERC20.

Primero, instala la librería de contratos inteligentes OpenZepplin donde importaremos el Token ERC20base:

npm install @openzeppelin/contracts

A continuación, crearemos nuestro token extendiendo (o heredando) el contrato ERC20:

//SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract NDToken is ERC20 {
    constructor(string memory name, string memory symbol) ERC20(name, symbol) {
        _mint(msg.sender, 100000 * (10 ** 18));
    }
}

El constructor permite establecer el nombre y el símbolo del token, y la función _mint permite acuñar los tokens y establecer la cantidad.

Por defecto, ERC20 establece el número de decimales en 18, así que en nuestra función _mint multiplicamos 100.000 por 10 a la 18 potencia para mintear (acuñar) un total de 100.000 tokens, cada uno con 18 decimales (de forma similar a como 1 Eth se compone de 10 a la 18 wei.

Para desplegar, necesitamos pasar los valores del constructor ((name y symbol), así que podríamos hacer algo como esto en nuestro script de despliegue:

const NDToken = await hre.ethers.getContractFactory("NDToken");
const ndToken = await NDToken.deploy("Nader Dabit Token", "NDT");

Al extender el token ERC20 original, tu token heredará todas las funciones y funcionalidades siguientes:

function name() public view returns (string)
function symbol() public view returns (string)
function decimals() public view returns (uint8)
function totalSupply() public view returns (uint256)
function balanceOf(address _owner) public view returns (uint256 balance)
function transfer(address _to, uint256 _value) public returns (bool success)
function transferFrom(address _from, address _to, uint256 _value) public returns (bool success)
function approve(address _spender, uint256 _value) public returns (bool success)
function allowance(address _owner, address _spender) public view returns (uint256 remaining)

Una vez desplegado, puedes utilizar cualquiera de estas funciones para interactuar con el nuevo contrato inteligente. Para otro ejemplo de un token ERC20, echa un vistazo a [Solidity por ejemplo)(https://solidity-by-example.org/app/erc20/)

Conclusión

Ok, hemos cubierto mucho aquí, pero para mí esto es una especie de pan y mantequilla / núcleo de empezar con esta pila y es una especie de lo que quería tener no sólo como alguien que estaba aprendiendo todas estas cosas, sino también en el futuro si alguna vez necesito hacer referencia a cualquier cosa que pueda necesitar en el futuro. Espero que hayas aprendido mucho.

Si quieres dar soporte a múltiples wallet además de MetaMask, echa un vistazo a Web3Modal que hace que sea fácil implementar el soporte para múltiples proveedores en tu aplicación con una configuración bastante simple y personalizable.

En mis futuros tutoriales y guías me sumergiré en el desarrollo de contratos inteligentes más complejos y también en cómo desplegarlos como subgrafos para exponer una API GraphQL sobre ellos e implementar cosas como la paginación y la búsqueda de texto completo.

También me adentraré en cómo utilizar tecnologías como IPFS y bases de datos Web3 para almacenar datos de forma descentralizada.

Si tienes alguna pregunta o sugerencia para futuros tutoriales, deja algunos comentarios aquí y házmelo saber.