Muchos usuarios de criptomonedas prefieren gestionar sus activos desde el teléfono móvil en lugar de depender de extensiones de navegador. Conectar una billetera móvil como Valora con un contrato inteligente desplegado en la red Celo es posible gracias a Wallet Connect, una herramienta que actúa como puente entre la aplicación web y la wallet del usuario. A continuación se explica paso a paso cómo lograr esa integración dentro de un proyecto React.
¿Por qué los usuarios eligen billeteras móviles sobre los plugins de navegador?
Billeteras como Metamask o la Celo Wallet funcionan como plugins dentro del navegador, pero para muchos resulta más natural y cómodo tener sus criptomonedas almacenadas directamente en su teléfono móvil [0:10]. Valora es la billetera móvil que ofrece el ecosistema Celo y permite a los usuarios interactuar con contratos inteligentes, efectuar pagos y mover sus activos sin necesidad de abrir un navegador de escritorio.
El reto técnico consiste en ofrecer a esos usuarios una forma de autorizar transacciones desde su dispositivo móvil mientras la lógica del contrato se ejecuta en la aplicación web. Aquí es donde entra el Contract Kit junto con Wallet Connect [0:38].
¿Cómo se instala y configura Wallet Connect en un proyecto React?
El proceso comienza con la instalación del paquete Wallet Connect siguiendo las instrucciones del repositorio del curso. Es posible que se necesiten pequeños ajustes dependiendo de la versión de Node o del sistema operativo [1:05].
Una vez instalado, se deben completar tres pasos clave:
- Importar el Wallet Connect provider dentro del archivo React que gestiona la conexión [1:18].
- Configurar el proveedor para que apunte a la red correcta, ya sea a través de Forno o la testnet Alfajores, según lo que tenga seleccionado la wallet del usuario [1:35].
- Llamar a
provider.enable(), que genera un código QR en pantalla para que el usuario lo escanee con su billetera móvil [1:50].
Este código QR es la pieza central de la comunicación: al escanearlo, el usuario autoriza la conexión entre la aplicación web y su billetera.
¿Qué sucede después de escanear el código QR?
Cuando el usuario escanea el QR desde su wallet móvil, se establece un canal seguro. A partir de ese momento, la aplicación puede solicitar transacciones que el usuario deberá aprobar desde su teléfono [2:00]. En el ejemplo de la clase, se ejecuta una transferencia de Celo Gold hacia una dirección predefinida, similar a enviar una propina (tip).
La diferencia fundamental respecto al flujo con plugins de navegador es que los fondos salen de la billetera móvil del usuario, no de una extensión instalada en el escritorio [2:12].
¿Cómo se prueba la integración sin gastar criptomonedas reales?
Para evitar costos durante el desarrollo, se utiliza la wallet Alfajores, que es idéntica a Valora pero opera sobre la red de pruebas (testnet) de Celo [2:42]. Los saldos que aparecen son criptomonedas de prueba sin valor real.
El flujo completo de prueba es el siguiente:
- Se presiona el botón de conexión en la interfaz web y aparece el código QR [2:30].
- Se abre el lector QR dentro de la wallet Alfajores en el teléfono [2:55].
- La aplicación solicita permiso para conectarse; el usuario selecciona permitir [3:07].
- Se muestra la transacción pendiente y el usuario la confirma con su PIN [3:15].
- La transacción se procesa y queda registrada en el historial de actividad de la billetera [3:25].
¿Qué valor aporta Wallet Connect al desarrollo en Celo?
Con esta integración se logra transferir valor desde código React hacia una billetera móvil pasando por Wallet Connect [3:42]. Esto abre la puerta a que cualquier aplicación descentralizada (dApp) construida sobre Celo pueda atender al amplio segmento de usuarios que prefieren operar desde sus teléfonos.
Dominar esta conexión es una habilidad reutilizable en múltiples proyectos dentro del ecosistema Celo, ya que la mayoría de las dApps necesitarán ofrecer soporte para billeteras móviles [3:55].
Si ya lograste completar la transferencia de prueba, estás listo para aplicar este mismo patrón en tu propio proyecto. ¿Qué caso de uso te gustaría implementar primero con Wallet Connect? Comparte tu experiencia en los comentarios.
