Usar eventos para conectar contratos inteligentes con una aplicación web

Eventos para interactuar con aplicaciones web descentralizadas

En nuestro Solidity, los contratos inteligentes podemos desencadenar eventos para comunicar que algo sucedió en la cadena de bloques. Las aplicaciones web o cualquier tipo de front-end (como una aplicación móvil) pueden escuchar estos eventos y tomar medidas cuando ocurren.

Si has utilizado un intercambio descentralizado (o DEX) como SushiSwap o PancakeSwap, o cualquier otra aplicación web3, probablemente haya visto eventos en acción en los botones de carga y mensajes emergentes cuando se confirman las transacciones. Por lo general, estos son eventos desencadenados por la aplicación del contrato inteligente.

Cómo agregar eventos a un contrato inteligente

Lo primero que debemos hacer es declarar el evento con la palabra clave Event. Los eventos pueden enviar varios parámetros, por lo que debemos incluirlos en la definición del evento (¡no olvide incluir la definición del tipo!). La siguiente definición de evento solo tendrá una variable booleana como carga útil:

event ShoppingLotteryEvent(bool winner);

Para activar un evento de nuestro contrato inteligente, usaremos la palabra clave emit seguida del nombre del evento y la carga útil que enviará. Es muy similar a llamar a una función:

emit ShoppingLotteryEvent(true);

Capture eventos de Sodility en la web

Para interactuar con nuestro contrato inteligente desde el front-end, necesitaremos la dirección del contrato y el abi. Una vez que hayamos inicializado nuestra instancia de contrato (en este ejemplo, estoy usando ethers.js), podemos usar el método on() para manejar los eventos.

// Contract information
const winnerNumber = require('/artifacts/solidity/contracts/LuckyNumber.sol/LuckyNumber.json');
const contractAddress = '0xabc12345fecad67343434....';

const provider = new ethers.providers.Web3Provider(window.ethereum);

// Contract instance
const contract = new ethers.Contract(
  contractAddress,
  winnerNumber.abi,
  provider
);

console.log('contract :>> ', contract);
// handle event from contract
contract.on('ShoppingLotteryEvent', function (result) {
  console.log(`Result is ${result}`);
});

El método on() recibe el nombre del evento y una función de devolución de llamada con toda la carga útil enviada desde el evento. En el ejemplo anterior, solo lo imprimimos en la consola, pero podemos usar este evento para mostrar un mensaje emergente, una notificación o lo que necesitemos en nuestra aplicación web.