Cómo construir una plataforma benéfica descentralizada con Next.js, TypeScript y Solidity

Lo que creará, vea la demostración en vivo en Bitfinity test network y el repositorio de git .

Introducción

Bienvenido a esta guía completa donde crearemos una plataforma benéfica descentralizada Web3 utilizando Next.js, Solidity y TypeScript. Al final de este tutorial, tendrá una comprensión clara de:

• Construyendo interfaces dinámicas con Next.js
• Elaboración de contratos inteligentes de Ethereum con Solidity
• Incorporación de verificación de tipos estáticos usando TypeScript
• Implementar e interactuar con sus contratos inteligentes
• Comprender los fundamentos de las plataformas benéficas basadas en blockchain

Como beneficio adicional por participar en este tutorial, puede ganar fácilmente una copia de nuestro prestigioso libro sobre cómo convertirse en un desarrollador de solidez en demanda. Esta oferta es gratuita para las primeras 300 personas . Para obtener instrucciones sobre cómo ganar, mire el breve vídeo a continuación.

Requisitos previos

Necesitará las siguientes herramientas instaladas para construir conmigo:

• Nodo.js
• Hilo
• Git bash
• MetaMáscara
• Siguiente.js
• Solidez
• Kit de herramientas Redux
• CSS de viento de cola

Para configurar MetaMask para este tutorial, mire el video instructivo a continuación:

Una vez que haya completado la configuración, será elegible para recibir una copia gratuita de nuestro libro. Para reclamar su libro, complete el formulario para enviar su prueba de trabajo .

Mire los siguientes videos instructivos para recibir hasta 3 meses de cursos premium gratuitos en

Academia de Mentores Dapp, que incluye:

• Curso completo de acuñación de NFT
• Curso completo del mercado NFT
• Curso completo de blockchain
• etc.

Comience su viaje con Bitfinity hoy. Experimente un proceso de desarrollo rápido, simple y sin complicaciones mientras crea su primera dApp de seguimiento de donaciones benéficas. Implemente sus contratos inteligentes en la red Bitfinity y genere un impacto positivo.

Dicho esto, pasemos al tutorial y configuremos nuestro proyecto.

Configuración

Comenzaremos clonando un repositorio frontend preparado y configurando las variables de entorno. Ejecute los siguientes comandos:

 git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain

A continuación, cree un archivo .env en la raíz del proyecto e incluya las siguientes claves:

 NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret

Reemplace <YOUR_ALCHEMY_PROJECT_ID> y <WALLET_CONNECT_PROJECT_ID> con sus respectivos ID de proyecto.

YOUR_ALCHEMY_PROJECT_ID : Obtenga la clave aquí WALLET_CONNECT_PROJECT_ID : Obtenga la clave aquí

Finalmente, ejecute yarn dev para iniciar el proyecto.

Nuestra interfaz para este proyecto es sólida y está lista para alguna integración de contratos inteligentes, pero necesitaremos Reduxify nuestra aplicación para habilitar un espacio de datos compartido.

Construyendo la tienda Redux

La imagen de arriba representa la estructura de nuestra tienda Redux, será simple ya que no estamos creando ningún proyecto demasiado complejo.

Configuraremos Redux para administrar el estado global de nuestra aplicación. Sigue estos pasos:

1. Cree una carpeta store en la raíz del proyecto.
2. Dentro de store , crea dos carpetas: actions y states .
3. Dentro de states , cree un archivo globalStates.ts .

4. Dentro actions , cree un archivo globalActions.ts .

5. Cree un archivo globalSlices.ts dentro de la carpeta de la store .

6. Cree un archivo index.ts dentro de la carpeta store .

7. Actualice el archivo pages/_app.ts con el proveedor de Redux.

Nuestra aplicación ha sido empaquetada con el kit de herramientas de Redux y volveremos a visitar Redux cuando integremos el backend con el frontend.

Desarrollo de contratos inteligentes

A continuación, desarrollaremos el contrato inteligente para nuestra plataforma:

1. Cree una carpeta contracts en la raíz del proyecto.
2. Dentro de contracts , cree un archivo DappFund.sol y agregue el código del contrato a continuación.

El contrato DappFund facilitará la creación, actualización y donación a organizaciones benéficas, así como funciones administrativas como cambiar el impuesto a las organizaciones benéficas y prohibir una organización benéfica.

Aquí hay un desglose función por función:

1. constructor() : esta función establece el impuesto benéfico inicial cuando se implementa el contrato. Se ejecuta solo una vez durante la implementación del contrato.
2. createCharity() : esta función permite a los usuarios crear una nueva organización benéfica. Requiere varios parámetros como el nombre, descripción, imagen, perfil y monto de la organización benéfica. Comprueba que estos parámetros sean válidos y luego crea un nuevo CharityStruct y lo agrega al mapeo de charities .
3. updateCharity() : esta función permite al propietario de una organización benéfica actualizar sus detalles. Comprueba que la organización benéfica existe y que el remitente es el propietario de la organización benéfica antes de actualizar los detalles de la organización benéfica.
4. deleteCharity() : esta función permite al propietario de una organización benéfica marcarla como eliminada. Comprueba que la organización benéfica existe y que el remitente es el propietario de la misma antes de marcarla como eliminada.
5. toggleBan() : esta función permite al propietario del contrato prohibir o cancelar la prohibición de una organización benéfica. Comprueba que la organización benéfica existe antes de cambiar su estado prohibido.
6. donate() : esta función permite a los usuarios donar a una organización benéfica. Comprueba que la organización benéfica existe, que no está prohibida y que aún no ha alcanzado su objetivo de recaudación de fondos. Luego incrementa el recuento total de donaciones, crea una nueva SupportStruct y la agrega al mapeo supportersOf . También actualiza el monto recaudado y el recuento de donaciones de la organización benéfica.
7. changeTax() : esta función permite al propietario del contrato cambiar el impuesto de caridad. Comprueba que el nuevo porcentaje de impuesto sea válido antes de actualizar el impuesto.
8. getCharity() : esta función permite que cualquiera obtenga los detalles de una organización benéfica. Devuelve el CharityStruct asociado con el ID proporcionado.
9. getCharities() : esta función permite que cualquiera obtenga los detalles de todas las organizaciones benéficas activas. Devuelve una matriz de objetos CharityStruct .
10. getMyCharities() : esta función permite al usuario obtener los detalles de todas sus organizaciones benéficas activas. Devuelve una matriz de objetos CharityStruct .
11. getSupports() : esta función permite que cualquiera obtenga los detalles de todos los partidarios de una organización benéfica específica. Devuelve una matriz de objetos SupportStruct .
12. payTo() : esta función interna se utiliza para transferir fondos. Envía la cantidad especificada de Ether a la dirección indicada.
13. currentTime() : esta función interna devuelve la hora actual en segundos desde la época de Unix. Se utiliza para marcar la hora de donaciones y creaciones benéficas.

Implementación y siembra de contratos

Ahora, implementemos nuestro contrato inteligente y rellenémoslo con algunos datos ficticios:

1. Cree una carpeta scripts en la raíz del proyecto.
2. Dentro de scripts , cree un archivo deploy.js y un archivo seed.js y agregue los siguientes códigos.

Implementar secuencia de comandos

Guión de semillas

3. Ejecute los siguientes comandos para implementar el contrato y inicializarlo con datos:

    yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2

Si lo hizo correctamente, debería ver un resultado similar al siguiente:

En este punto podemos comenzar la integración de nuestro contrato inteligente a nuestra interfaz.

Integración frontal

Primero, cree una carpeta services en la raíz del proyecto y, dentro de ella, cree un archivo blockchain.tsx . Este archivo contendrá funciones para interactuar con nuestro contrato inteligente.

El código proporcionado es una implementación TypeScript de nuestro servicio blockchain para interactuar con nuestro contrato inteligente. Este servicio permite a los usuarios realizar acciones en nuestra plataforma benéfica, incluida la creación y actualización de organizaciones benéficas, la realización de donaciones y más.

Aquí hay un desglose función por función:

1. getEthereumContracts() : esta función obtiene las instancias de contrato de Ethereum con las que interactuará el servicio. Comprueba si el usuario tiene una cuenta Ethereum conectada y la usa para interactuar con el contrato; de lo contrario, utiliza una billetera creada aleatoriamente.
2. getAdmin() : esta función devuelve el propietario del contrato.
3. getCharities() , getMyCharities() , getCharity() : estas funciones recuperan todas las organizaciones benéficas, las creadas por el usuario actual y una organización benéfica específica por su ID, respectivamente.
4. getSupporters() : esta función busca los seguidores de una organización benéfica específica por su ID.
5. createCharity() , updateCharity() : estas funciones permiten a un usuario crear una nueva organización benéfica o actualizar una existente, respectivamente.
6. makeDonation() : esta función permite a un usuario hacer una donación a una organización benéfica específica.
7. deleteCharity() : esta función permite al propietario de una organización benéfica eliminarla.
8. banCharity() : esta función permite al propietario del contrato prohibir una organización benéfica.
9. structuredCharities() , structuredSupporters() : estas son funciones auxiliares que estructuran los datos devueltos del contrato en un formato más utilizable.

Actualice el archivo provider.tsx dentro de services para incluir la red bitfinity usando los siguientes códigos.

Página que interactúa con el contrato inteligente

A continuación, vincularemos las funciones del servicio blockchain a sus respectivas interfaces en el frontend:

No 1: Mostrar todas pages/index.tsx para obtener datos de la función getCharities() .

Observe cómo se utiliza Redux para almacenar datos de blockchain antes de que se muestren en la pantalla.

No 2: Mostrar pages/projects.tsx de actualización de organizaciones benéficas del usuario para usar el enlace useEffect() para obtener las organizaciones benéficas del usuario actual.

Tenga en cuenta el uso del gancho useEffect() para recuperar las organizaciones benéficas del usuario actual y cómo se usa Redux para manejar y mostrar datos de la cadena de bloques en múltiples componentes. Este será un patrón repetido en todas las páginas y componentes.

No 3: Creación de nuevas organizaciones benéficas Actualice pages/donations/create.tsx para usar la función createCharity() para el envío de formularios.

No 4: Mostrar pages/donations/[id].tsx de actualización de organización benéfica única para usar las funciones getServerSideProps() , getCharity() y getSupporters() para recuperar organizaciones benéficas y patrocinadores por ID.

No 5: Editar organizaciones benéficas existentes Actualice pages/donations/edit/[id].tsx para usar la función getCharity() para recuperar organizaciones benéficas por ID y completar los campos del formulario.

¿Viste cómo se usó la función getCharity() para recuperar organizaciones benéficas por ID y también cómo se usó para completar los campos del formulario?

Componentes con contrato inteligente

Como hicimos con las páginas anteriores, actualicemos los siguientes componentes para interactuar con el contrato inteligente:

No 1: Manejo de la prohibición de organizaciones benéficas Actualice components/Ban.tsx para usar la función handleBanning() para llamar a la función banCharity() .

No 2: Manejo de la eliminación de organizaciones benéficas Actualice components/Delete.tsx para usar las funciones handleDelete() y deleteCharity() para ejecutar un procedimiento de eliminación de organizaciones benéficas.

No 3: Hacer donaciones a organizaciones benéficas Actualice el archivo components/Donor.tsx para usar la función handleSubmit() para enviar el pago al contrato inteligente usando la función makeDonation() .

Otros componentes

Aquí están el resto de los componentes que también debes actualizar debido a la integración de Redux en ellos.

El componente NavBtn Revisa y actualiza el componente que permite a los usuarios navegar, eliminar y editar información de organizaciones benéficas. Utilice Redux para activar el modo de eliminación al hacer clic.

El componente de pago revisa y actualiza la implementación de Redux para activar los modos de donación, simpatizantes y prohibición al hacer clic en sus respectivos botones.

El componente de soporte revisa y actualiza la implementación de Redux para cerrar el modal de soporte cuando se hace clic en el botón cerrar.

Al implementar estas actualizaciones, todos los componentes y páginas ahora están conectados al contrato inteligente, lo que marca la finalización del proyecto.

Si su servidor Nextjs estuvo inactivo todo este tiempo, puede reactivarlo ejecutando yarn dev .

Para obtener más información, recomendamos ver el vídeo completo de esta compilación en nuestro canal de YouTube .

Conclusión

En este tutorial, hemos creado una plataforma benéfica descentralizada utilizando Next.js, Solidity y TypeScript. Configuramos el entorno de desarrollo, construimos la tienda Redux e implementamos el contrato inteligente en la cadena de bloques. Al integrar el contrato inteligente con la interfaz, creamos una experiencia de usuario perfecta.

A lo largo del tutorial, adquirió valiosas habilidades en la creación de aplicaciones Web3, la elaboración de contratos inteligentes y la incorporación de verificación de tipos estáticos.

Ahora está listo para crear su propia plataforma benéfica descentralizada. ¡Feliz codificación y libera tu innovación en el mundo de Web3!