Como construir uma plataforma de caridade descentralizada com Next.js, TypeScript e Solidity

O que você irá construir, veja a demonstração ao vivo na rede de testes Bitfinity e no repositório git .

Introdução

Bem-vindo a este guia abrangente onde construiremos uma plataforma de caridade descentralizada Web3 usando Next.js, Solidity e TypeScript. Ao final deste tutorial, você terá uma compreensão clara de:

• Construindo interfaces dinâmicas com Next.js
• Elaborando contratos inteligentes Ethereum com Solidity
• Incorporando verificação de tipo estático usando TypeScript
• Implantando e interagindo com seus contratos inteligentes
• Compreender os fundamentos das plataformas de caridade baseadas em blockchain

Como bônus por participar deste tutorial, você pode facilmente ganhar uma cópia de nosso prestigiado livro sobre como se tornar um desenvolvedor de solidez requisitado. Esta oferta é gratuita para as primeiras 300 pessoas . Para obter instruções sobre como ganhar, assista ao pequeno vídeo abaixo.

Pré-requisitos

Você precisará das seguintes ferramentas instaladas para construir comigo:

• Node.js
• Fio
• Git Bash
• MetaMask
• Próximo.js
• Solidez
• Kit de ferramentas Redux
• CSS do vento favorável

Para configurar o MetaMask para este tutorial, assista ao vídeo instrutivo abaixo:

Depois de concluir a configuração, você estará qualificado para receber uma cópia gratuita de nosso livro. Para reivindicar seu livro, preencha o formulário para enviar sua prova de trabalho .

Assista aos vídeos instrutivos a seguir para receber até 3 meses de cursos premium gratuitos em

Academia de Mentores Dapp, incluindo:

• Curso Fullstack de cunhagem NFT
• Curso Fullstack NFT Marketplace
• Curso Blockchain Fullstack
• etc.

Comece sua jornada com Bitfinity hoje. Experimente um processo de desenvolvimento rápido, simples e descomplicado ao criar seu primeiro dApp de rastreamento de doações de caridade. Implante seus contratos inteligentes na rede Bitfinity e cause um impacto positivo.

Dito isso, vamos pular para o tutorial e configurar nosso projeto.

Configurar

Começaremos clonando um repositório frontend preparado e configurando as variáveis de ambiente. Execute os seguintes comandos:

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

A seguir, crie um arquivo .env na raiz do projeto e inclua as seguintes chaves:

 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

Substitua <YOUR_ALCHEMY_PROJECT_ID> e <WALLET_CONNECT_PROJECT_ID> pelos seus respectivos IDs de projeto.

YOUR_ALCHEMY_PROJECT_ID : Obtenha a chave aqui WALLET_CONNECT_PROJECT_ID : Obtenha a chave aqui

Finalmente, execute yarn dev para iniciar o projeto.

Nosso frontend para este projeto é sólido e pronto para alguma integração de contrato inteligente, mas precisaremos do Reduxify nosso aplicativo para permitir um espaço de dados compartilhado.

Construindo a Loja Redux

A imagem acima representa a estrutura da nossa loja Redux, será simples já que não estamos criando um projeto muito complexo.

Configuraremos o Redux para gerenciar o estado global de nosso aplicativo. Siga esses passos:

1. Crie uma pasta store na raiz do projeto.
2. Dentro store , crie duas pastas: actions e states .
3. Dentro states , crie um arquivo globalStates.ts .

4. Dentro actions , crie um arquivo globalActions.ts .

5. Crie um arquivo globalSlices.ts dentro da pasta store .

6. Crie um arquivo index.ts dentro da pasta store .

7. Atualize o arquivo pages/_app.ts com o provedor Redux.

Nosso aplicativo foi empacotado com o kit de ferramentas Redux e revisitaremos o Redux ao integrar o backend com o frontend.

Desenvolvimento de Contrato Inteligente

A seguir, desenvolveremos o contrato inteligente para nossa plataforma:

1. Crie uma pasta contracts na raiz do projeto.
2. Dentro de contracts , crie um arquivo DappFund.sol e adicione o código do contrato abaixo.

O contrato DappFund facilitará a criação, atualização e doação para instituições de caridade, bem como funções administrativas como alteração do imposto de caridade e proibição de uma instituição de caridade.

Aqui está uma análise função por função:

1. constructor() : esta função define o imposto de caridade inicial quando o contrato é implantado. É executado apenas uma vez durante a implantação do contrato.
2. createCharity() : Esta função permite aos usuários criar uma nova instituição de caridade. Requer vários parâmetros como nome, descrição, imagem, perfil e valor da instituição de caridade. Ele verifica se esses parâmetros são válidos e, em seguida, cria um novo CharityStruct e o adiciona ao mapeamento de charities .
3. updateCharity() : Esta função permite que o proprietário de uma instituição de caridade atualize seus detalhes. Ele verifica se a instituição de caridade existe e se o remetente é o proprietário da instituição de caridade antes de atualizar os detalhes da instituição de caridade.
4. deleteCharity() : Esta função permite que o proprietário de uma instituição de caridade marque-a como excluída. Ele verifica se a instituição de caridade existe e se o remetente é o proprietário da instituição de caridade antes de marcá-la como excluída.
5. toggleBan() : Esta função permite ao proprietário do contrato banir ou cancelar o banimento de uma instituição de caridade. Ele verifica se a instituição de caridade existe antes de alterar seu status de banido.
6. donate() : Esta função permite aos usuários doar para uma instituição de caridade. Ele verifica se a instituição de caridade existe, não está banida e ainda não atingiu sua meta de arrecadação de fundos. Em seguida, ele aumenta a contagem total de doações, cria um novo SupportStruct e o adiciona ao mapeamento supportersOf . Ele também atualiza o valor arrecadado e a contagem de doações da instituição de caridade.
7. changeTax() : Esta função permite que o proprietário do contrato altere o imposto de caridade. Verifica se o novo percentual do imposto é válido antes de atualizar o imposto.
8. getCharity() : Esta função permite que qualquer pessoa obtenha os detalhes de uma instituição de caridade. Ele retorna o CharityStruct associado ao ID fornecido.
9. getCharities() : Esta função permite que qualquer pessoa obtenha os detalhes de todas as instituições de caridade ativas. Ele retorna uma matriz de objetos CharityStruct .
10. getMyCharities() : Esta função permite ao usuário obter os detalhes de todas as suas instituições de caridade ativas. Ele retorna uma matriz de objetos CharityStruct .
11. getSupports() : Esta função permite que qualquer pessoa obtenha os detalhes de todos os apoiadores de uma instituição de caridade específica. Ele retorna uma matriz de objetos SupportStruct .
12. payTo() : Esta função interna é usada para transferir fundos. Ele envia a quantidade especificada de Ether para o endereço fornecido.
13. currentTime() : Esta função interna retorna o tempo atual em segundos desde a época Unix. É usado para registrar a data e hora de doações e criações de caridade.

Implantação e propagação de contrato

Agora, vamos implantar nosso contrato inteligente e preenchê-lo com alguns dados fictícios:

1. Crie uma pasta scripts na raiz do projeto.
2. Dentro scripts , crie um arquivo deploy.js e um seed.js e adicione os seguintes códigos.

Implantar script

Script Semente

3. Execute os seguintes comandos para implantar o contrato e propagá-lo com dados:

    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

Se você fez isso corretamente, deverá ver uma saída semelhante a esta abaixo:

Neste ponto podemos iniciar a integração do nosso contrato inteligente ao nosso frontend.

Integração de front-end

Primeiro, crie uma pasta services na raiz do projeto e, dentro dela, crie um arquivo blockchain.tsx . Este arquivo conterá funções para interagir com nosso contrato inteligente.

O código fornecido é uma implementação TypeScript do nosso serviço blockchain para interagir com nosso contrato inteligente. Este serviço permite que os usuários realizem ações em nossa plataforma de caridade, incluindo criar e atualizar instituições de caridade, fazer doações e muito mais.

Aqui está uma análise função por função:

1. getEthereumContracts() : esta função obtém as instâncias do contrato Ethereum com as quais o serviço irá interagir. Ele verifica se o usuário possui uma conta Ethereum conectada e a utiliza para interagir com o contrato, caso contrário, utiliza uma carteira criada aleatoriamente.
2. getAdmin() : Esta função retorna o proprietário do contrato.
3. getCharities() , getMyCharities() , getCharity() : Essas funções buscam todas as instituições de caridade, as instituições de caridade criadas pelo usuário atual e uma instituição de caridade específica por seu ID, respectivamente.
4. getSupporters() : Esta função busca os apoiadores de uma instituição de caridade específica por seu ID.
5. createCharity() , updateCharity() : Essas funções permitem que um usuário crie uma nova instituição de caridade ou atualize uma instituição de caridade existente, respectivamente.
6. makeDonation() : Esta função permite que um usuário faça uma doação para uma instituição de caridade específica.
7. deleteCharity() : Esta função permite que o proprietário de uma instituição de caridade a exclua.
8. banCharity() : Esta função permite ao proprietário do contrato banir uma instituição de caridade.
9. structuredCharities() , structuredSupporters() : Estas são funções auxiliares que estruturam os dados retornados do contrato em um formato mais utilizável.

Atualize o arquivo provider.tsx dentro services para incluir a rede bitfinity usando os códigos a seguir.

Página interagindo com contrato inteligente

A seguir, vincularemos as funções do serviço blockchain às suas respectivas interfaces no frontend:

Nº 1: Exibindo todas as pages/index.tsx para obter dados da função getCharities() .

Observe como o Redux é usado para armazenar dados do blockchain antes de serem exibidos na tela.

Nº 2: Exibindo as instituições de caridade do usuário Atualize pages/projects.tsx para usar o gancho useEffect() para obter as instituições de caridade do usuário atual.

Observe o uso do gancho useEffect() para recuperar as instituições de caridade do usuário atual e como o Redux é usado para manipular e exibir dados do blockchain em vários componentes. Este será um padrão repetido nas páginas e componentes.

Nº 3: Criando novas instituições de caridade Atualize pages/donations/create.tsx para usar a função createCharity() para envio de formulários.

Nº 4: Exibindo pages/donations/[id].tsx de atualização de caridade única para usar as funções getServerSideProps() , getCharity() e getSupporters() para recuperar instituições de caridade e apoiadores por ID.

Nº 5: Editando instituições de caridade existentes Atualize pages/donations/edit/[id].tsx para usar a função getCharity() para recuperar caridade por ID e preencher os campos do formulário.

Você viu como a função getCharity() foi usada para recuperar caridade por Id e também como foi usada para preencher os campos do formulário?

Componentes com Contrato Inteligente

Assim como fizemos nas páginas acima, vamos atualizar os seguintes componentes para interagir com o contrato inteligente:

Nº 1: Tratamento do banimento de caridade Atualize components/Ban.tsx para usar a função handleBanning() para chamar a função banCharity() .

Nº 2: Tratamento de exclusão de caridade Atualize o arquivo components/Delete.tsx para usar as funções handleDelete() e deleteCharity() para executar um procedimento de exclusão de caridade.

Nº 3: Fazendo doações para instituições de caridade Atualize o arquivo components/Donor.tsx para usar a função handleSubmit() para enviar o pagamento ao contrato inteligente usando a função makeDonation() .

Outros componentes

Aqui estão os demais componentes que você também deve atualizar devido à integração do Redux neles.

O componente NavBtn Revise e atualize o componente que permite aos usuários navegar, excluir e editar informações de caridade. Utilize Redux para acionar o modal de exclusão ao clicar.

O Componente de Pagamento Revisar e atualizar a implementação do Redux para acionar os modais de doação, apoiadores e banimento ao clicar em seus respectivos botões.

O Componente de Suporte Revise e atualize a implementação do Redux para fechar o modal de apoiadores quando o botão Fechar for clicado.

Ao implementar essas atualizações, todos os componentes e páginas ficam agora conectados ao contrato inteligente, marcando a conclusão do projeto.

Se o seu servidor Nextjs ficou inativo durante todo esse tempo, você pode ativá-lo novamente executando yarn dev .

Para aprender mais, recomendamos assistir ao vídeo completo desta construção em nosso canal no YouTube .

Conclusão

Neste tutorial, construímos uma plataforma de caridade descentralizada usando Next.js, Solidity e TypeScript. Configuramos o ambiente de desenvolvimento, construímos a loja Redux e implantamos o contrato inteligente no blockchain. Ao integrar o contrato inteligente ao frontend, criamos uma experiência de usuário perfeita.

Ao longo do tutorial, você adquiriu habilidades valiosas na construção de aplicativos Web3, na elaboração de contratos inteligentes e na incorporação de verificação de tipo estático.

Agora você está pronto para criar sua própria plataforma de caridade descentralizada. Boa codificação e libere sua inovação no mundo da Web3!