Conectando React con Celo usando ContractKit

Curso de Introducción a Celo con Solidity

Contenido del curso

Introducción

Entendiendo la EVM

Herramientas de Solidity

Retiros y control de permisos

Interactuando con la Blockchain de Celo

Interactuando con Smart Contracts

Sigue practicando

21
Qué hacer al terminar el curso de Celo
00:37 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:34

Conectando React con Celo usando ContractKit

Curso de Introducción a Celo con Solidity

Clase 16 de 21

Clase 16 / 21

Recursos

Conectar una interfaz gráfica con un contrato inteligente en Celo requiere una librería que traduzca los clics del usuario en transacciones reales sobre la blockchain. Aquí entra ContractKit.js, la librería nativa del ecosistema Celo, pensada para que desarrolladores frontend puedan integrar React, Angular o Vue con la red sin fricciones.

¿Qué librerías existen para conectar una dApp con Celo?

Cuando construyes una aplicación descentralizada sobre tecnología Ethereum, tienes tres caminos principales para comunicarte con la blockchain.

Web3.js: librería desarrollada nativamente por la Fundación Ethereum, históricamente la más usada.
Ethers.js: alternativa moderna que ha ganado adeptos por su diseño más limpio.
ContractKit.js: librería nativa de Celo, compatible con Web3 y Ethers, con ventajas adicionales del ecosistema [02:00].

Si trabajas dentro de Celo, ContractKit es la opción recomendada porque ya viene afinada para sus particularidades, como el Celo Gold Token o la conexión con Forno.

¿Qué es ContractKit.js? Es la librería oficial de Celo para conectar aplicaciones web con la blockchain. Te permite consultar saldos, firmar transacciones e interactuar con contratos inteligentes desde tu frontend.

¿Cómo se configura un provider en Celo?

Antes de escribir lógica de negocio, debes resolver tres pasos básicos para que tu aplicación hable con la red.

Elegir el provider: decides si te conectas a través de tu propio nodo o usas un servicio como Forno, equivalente a Infura en Ethereum.
Configurar el provider: aplicas los ajustes específicos que pide la librería para establecer la conexión.
Escribir el código: implementas las funciones que consultan o modifican el estado de la blockchain [02:55].

Forno resulta especialmente útil cuando no tienes infraestructura propia, porque te da una API lista para apuntar a la testnet Alfajores o a mainnet.

¿Cómo consultar el saldo de una wallet desde React?

Dentro de un componente de React, la consulta de saldo se apoya en una conexión directa a Alfajores mediante Forno. Primero creas el provider hacia la testnet, luego levantas la conectividad con la cuenta que tienes en tu computador y, finalmente, le pides al ContractKit que devuelva el saldo de una billetera específica [04:30].

La instrucción clave usa await porque las operaciones contra la blockchain son asincrónicas: tardan en responder. Por eso la función se declara como async, lo que le indica al código que espere la respuesta antes de seguir con la siguiente línea.

En la interfaz, un botón llamado Ver saldo dispara este flujo. Tras un par de segundos, la red responde y aparece el saldo en pantalla, por ejemplo 3.96 unidades, que luego puedes convertir a la denominación correcta y mostrar al usuario en un alert o en la consola [07:50].

¿Cómo transferir Celo desde el navegador del usuario?

El segundo método del componente, transferirFondosHandler, cambia la estrategia de conexión. En lugar de conectarse directo a Forno, usa el provider de Celo que el navegador inyecta cuando el usuario tiene instalada la wallet Celo [05:40].

Al ejecutarse, el navegador abre la wallet, pide autorización para vincularse con el sitio y, si todo sale bien, queda lista para firmar transacciones. El código entonces le pide al ContractKit una referencia al Gold Token, que es la criptomoneda nativa Celo Gold, y dispara una transferencia de 1 Celo desde la wallet del usuario hacia la billetera destino.

Un detalle de sintaxis: la función de conversión menciona ether como unidad, pero es solo por la definición heredada de la billetera, no porque estés enviando ether real.

¿Para qué sirve el Gold Token en Celo? Es la representación del Celo nativo dentro de los contratos. Lo usas cuando necesitas transferir o consultar balances de la moneda principal de la red.

¿Qué pasa después de confirmar una transacción?

Cuando el usuario presiona confirmar en la wallet, la transacción se envía a la red y queda esperando ser minada. El tiempo de confirmación es variable y depende de la saturación de la red, tu velocidad de conexión y otros factores [10:15].

Una vez confirmada, el ContractKit devuelve un comprobante con datos útiles que puedes mostrar al usuario o guardar en base de datos.

Hash del bloque donde quedó incluida la transacción.
Número del bloque.
Gas consumido.
Hash de la transacción, que funciona como recibo único.

Con esa información puedes construir una experiencia más pulida: agregar un reloj de espera, mostrar mensajes de estado mientras la red confirma, o redirigir al usuario a una pantalla de éxito.

¿Funciona lo mismo en Angular o Vue?

Sí. El principio de los tres pasos (provider, configuración, código) se mantiene idéntico sin importar el framework de frontend que elijas. Las variaciones entre React, Angular y Vue son muy menores y se reducen a cómo cada uno maneja el estado y los efectos.

Lo siguiente que vale la pena explorar es cómo conectar estas mismas operaciones desde una wallet móvil, porque mucha gente prefiere guardar sus criptos en el celular antes que en un plugin tipo MetaMask o en la Celo Wallet del navegador.

¿Ya intentaste conectar tu primer componente de React con Alfajores? Cuéntame en los comentarios qué provider elegiste y cómo te fue con la primera transacción.

Introducción

Primer contrato en Solidity sobre Celo

Qué hace diferente a Celo de otras blockchains

Entendiendo la EVM

Herramientas esenciales para desarrollar en Celo

Qué es la EVM y cómo funciona Solidity

Qué son las transacciones en Celo

Herramientas de Solidity

Estructura de un smart contract en Solidity

Loops y condicionales en Solidity

address en Solidity y msg.sender

El atributo payable en Solidity

Retiros y control de permisos

Modificadores en Solidity para código limpio

Herencia en Solidity con OpenZeppelin

Scaffolding de un contrato de escrow en Celo

Modificadores y ownable en contratos escrow

Interactuando con la Blockchain de Celo

Deploy de smart contracts en Alfajores con Remix

Desplegar contratos con Hardhat en Alfajores

Interactuando con Smart Contracts

Conectando React con Celo usando ContractKit

Conectar Valora a contratos inteligentes con Wallet Connect

Despliegue de Contratos Inteligentes en Testnet Alfajores con Remix

Liberación arbitral con Celo ContractKit

Firma de transacciones con WalletConnect y Valora

Sigue practicando

Qué hacer al terminar el curso de Celo

Conectando React con Celo usando ContractKit

Progreso del curso

Introducción

Entendiendo la EVM

Herramientas de Solidity

Retiros y control de permisos

Interactuando con la Blockchain de Celo

Interactuando con Smart Contracts

Sigue practicando

Recursos

Recursos