Desplegando un Smart Contract en el Protocolo Fuel: Mi primera experiencia

Introducción

En este artículo, compartiré mi primera experiencia desplegando un smart contract en el protocolo Fuel. Fuel es un protocolo blockchain descentralizado que ofrece transacciones de alta velocidad y bajo costo. Te guiaré a través del proceso de configuración de la red de prueba, la escritura y el despliegue del smart contract, y la creación de una interfaz front-end para interactuar con el contrato.

Utilizando la guía proporcionada para el despliegue de un contrato en el protocolo Fuel, logré configurar exitosamente la red de prueba y desplegar mi propio smart contract. El video que me ayudó en este proceso se puede encontrar en el siguiente enlace: https://youtu.be/S6Fln4SreeQ. Recomiendo encarecidamente ver el video para obtener instrucciones detalladas y explicaciones sobre cómo configurar la red de prueba y desplegar un contrato en el protocolo Fuel.

Parte 1: Despliegue del Contrato

Aquí se presenta el desglose del código fuente en secciones, junto con descripciones para cada parte:

Esta línea simplemente significa el inicio del código del contrato y sirve como una declaración de que estamos definiendo un contrato.

En esta sección, definimos la estructura de almacenamiento de nuestro contrato inteligente. La variable counter se declara como un entero sin signo de 64 bits (u64) e inicializada con el valor 0. Esta variable se utilizará para almacenar el valor del contador.

Aquí, definimos la ABI (Interfaz Binaria de Aplicación) para nuestro contrato. Esta especifica las funciones que pueden ser llamadas externamente para interactuar con el contrato. La interfaz Counter incluye dos funciones:

1. increment(): Esta función está anotada con #[storage(read, write)], lo que indica que lee y escribe en el almacenamiento. No requiere ningún parámetro de entrada. Esta función será responsable de incrementar el valor de la variable counter.
2. count() -> u64: Esta función está anotada con #[storage(read)], lo que indica que solo lee desde el almacenamiento. No toma ningún parámetro. Recupera el valor actual de la variable counter y lo devuelve como un número entero sin signo de 64 bits.

En esta sección, asociamos la interfaz Counter con el contrato principal Contract. Esto permite que el contrato implemente las funciones especificadas en la interfaz.

• La función count() recupera el valor actual de la variable counter desde el almacenamiento utilizando el método try_read(). Si el valor no está disponible (por ejemplo, si no se ha establecido anteriormente), utilizamos unwrap_or(0) para establecerlo como 0 por defecto. Esta función tiene la finalidad de leer el valor de la variable counter.

• La función increment() primero recupera el valor actual de la variable counter desde el almacenamiento utilizando el método try_read(). Luego, se le suma 1 al valor recuperado y se almacena en una variable llamada incremented. Finalmente, se escribe el valor actualizado de vuelta en la variable counter utilizando el método write(), incrementando efectivamente el valor.

En resumen, este smart contract proporciona la funcionalidad para rastrear e incrementar un valor de contador. La función increment() aumenta el contador en 1, mientras que la función count() recupera el valor actual del contador. Al desglosar el código en estas secciones, podemos ver claramente la declaración de almacenamiento, la definición de la ABI y la implementación de las funciones del contrato.

Parte 2: Construyendo la Interfaz Frontend

En esta sección, proporcionaré una descripción general del código front-end que desarrollé para acompañar mi smart contract. Utilizando React, una popular biblioteca de JavaScript para construir interfaces de usuario, creé una interfaz amigable para el usuario que permite a los usuarios interactuar con mi smart contract. Para conectarme a la blockchain y manejar transacciones, integré el SDK de Fuel Wallet en mi código front-end.

El propósito del front-end es proporcionar una experiencia fluida e intuitiva para los usuarios. Pueden conectar fácilmente sus billeteras, ver el valor actual del contador almacenado en el smart contract e incrementar el contador invocando la función correspondiente. Al desarrollar este frontend, mi objetivo fue facilitar a los usuarios la interacción con mi smart contract y beneficiarse de sus funcionalidades.

A lo largo de las siguientes secciones, desglosaré las diferentes partes del código front-end y explicaré cómo cada sección contribuye a la funcionalidad general de la aplicación.

Declaraciones de Importación

En esta parte, se importaron los módulos y dependencias necesarios para la aplicación front-end. Aquí hay un desglose de las importaciones:

• React se importa de la biblioteca React para permitir la creación de componentes de React.
• useEffect y useState se importan de React para utilizar los hooks correspondientes para gestionar los efectos secundarios y el estado en los componentes funcionales.
• @fuel-wallet/sdk se importa para acceder al SDK de la Cartera Fuel, que proporciona conectividad blockchain.
• "./App.css" se importa para incluir el archivo CSS para dar estilo a la aplicación.
• { CounterContractAbi__factory } se importa desde el archivo "./contracts". Esta importación es responsable de generar la fábrica de contratos que se utilizará para interactuar con el contrato inteligente.

ID del Contrato

En esta parte, declaré una variable constante CONTRACT_ID que representa la dirección del contrato desplegado en la red de prueba de Fuel. Esta dirección se utilizará para conectarse al contrato e interactuar con sus funciones.

Componente App

Aquí, he definido el componente funcional principal App(), que representa la aplicación front-end. Utiliza el gancho useState para definir varias variables de estado:

• connected es un estado booleano que mantiene el control del estado de conexión con la billetera de Fuel. Se inicializa como false.
• account es un estado de cadena que almacena la dirección de la cuenta seleccionada actualmente. Inicialmente es una cadena vacía.
• counter es un estado numérico que contiene el valor actual del contador del contrato inteligente. Se inicializa en 0.
• loaded es un estado booleano utilizado como indicador para indicar si la aplicación ha terminado de cargar. Se inicializa como false.

useEffect

En esta parte, utilicé el gancho useEffect para realizar ciertas acciones cuando el componente se crea o cuando el estado connected cambia. Esto es lo que hace:

• Dentro de la función useEffect, utilicé setTimeout para introducir un pequeño retraso de 200 milisegundos.
• Después del retraso, llamo a la función checkConnection(), que verifica si la billetera de Fuel está conectada.
• Una vez que ha pasado el retraso y se ha verificado la conexión, establezco el estado loaded en true.
• Si el estado connected cambia, lo que indica una conexión exitosa, llamo a la función getCount() para obtener el valor actual del contador del contrato inteligente.

Esto asegura que se verifique la conexión y se obtenga el valor del contador cuando se crea el componente y cada vez que el estado connected cambie.

Conclusión

En conclusión, estoy orgulloso de haber desarrollado con éxito la interfaz front-end para mi proyecto de smart contract. Al aprovechar React e integrar el SDK de Fuel Wallet, he creado una interfaz amigable para los usuarios que les permite interactuar sin problemas con las funcionalidades de mi smart contract.

El frontend permite a los usuarios conectar sus billeteras, ver el valor actual del contador almacenado en el smart contract e incrementar el contador según sea necesario. Proporciona una experiencia simple e intuitiva, lo que facilita a los usuarios participar con mi smart contract.

Estoy emocionado de compartir mi proyecto con otros e invito a explorar el código y la documentación en mi repositorio de GitHub: https://github.com/PaulZhemanov/fuel-counter-contract. No dudes en proporcionar cualquier comentario o sugerencia de mejora.

Este artículo fue escrito por Paul y traducido por Juan José Gouvêa. Puedes encontrar el original aquí.