Integra los componentes de ConfluxPortal en tu DApp usando React

ConfluxPortal es la versión de Metamask para la red de Conflux, te permite usar las cuentas de los usuarios como medio de autentificación así como mostrar balances, firmar mensajes, enviar CFX y tokens y otras funcionalidades de la red Conflux.

React es por mucho la librería más usada para el desarrollo de aplicaciones web, entender como puedes integrar react con ConfluxPortal va a permitirte crear DApps para tus usuarios tomando ventaja de la red Conflux; Transacciones rápidas y el patrocino de tarifas.

He creado un repositorio que puedes clonar y tomar lo que necesites en tu DApp. Lo mantendré actualizado y añadiendo nuevas funcionalidades, así que recomiendo guardar este post en tus favoritos.

Empecé a aprender sobre el desarrollo de DApps en la red de Conflux así que decidí por hacer y publicar soluciones, artículos, herramientas y ejemplos conforme voy aprendiendo. Espero con esto ayudar a los programadores que recién empiezan con el desarrollo en Conflux.

¡Así que empezamos!

Necesitas estos requerimientos en tu pc:

Ahora clona el repo y entra al directorio donde se descargó

$ git clone https://github.com/luiscrag/confluxportal-react.git
$ cd confluxportal-react

Instala las dependencias e inicia la DApp de React

$ yarn
$ yarn start

Ve a https://localhost:3000/

Una vez que hayas configurado tu cuenta en ConfluxPortal puedes cambiar la red a “Conflux Test Network” y obtener CFX gratis de prueba en el faucet dando click en “Deposit” y en “Get CFX”.

Los components donde reside la lógica de cada función los puedes ver en src/App.js dentro del directorio del repositorio.

Y cada componente individual lo puedes encontrar en src/components dentro del directorio.

En este ejemplo uso el proveedor de la API window.conflux, pero puedes user otro framework para usarlo como proveedor. Puedes ver más información de esto en la Referencia de la API y Proveedor.

Por el momento las funcionalidades son:

  • Obtener la versión de la Red “Tethys o Test”, también escuchar al cambio de red.

  • Verificar si ConfluxPortal se encuentra instalado.

  • Autorizar tu ConfluxPortal y obtener tu dirección.

  • Obtener el estado global.

  • Enviar CFX - Esto funcionará hasta que primero autorices tu cuenta de ConfluxPortal y obtengas una dirección CFX de donde enviar.

Añadiré más funcionalidades como el manejo de la transacción, despliegue de smart contracts en la red, estado del usuario y más.

Mantente informado y atento de este post ya que lo actualizaré cada vez que suba una nueva funcionalidad.

Siente la libertad de clonar el repositorio y empezar a colaborar.

1 Like