Construir um dApp Mini Buymeacoffee Usando Solidity + Contrato Inteligente Ethereum + ReactJs + TailwindCSS

mkdir mini-buymeacoffee-be
cd mini-buymeacoffee-be
npm init -y
npm install --save-dev hardhat

npx hardhat

npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

npx hardhat test

// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract CoffeePortal {

    constructor() payable {
        console.log("Yee! Contrato Inteligente");
    }
}

const main = async () => {

// Isto irá realmente compilar nosso contrato e gerar os arquivos necessários que precisamos para trabalhar com nosso contrato sob o diretório de documentos..
  const coffeeContractFactory = await hre.ethers.getContractFactory('CoffeePortal');
  const coffeeContract = await coffeeContractFactory.deploy();

  await coffeeContract.deployed(); // Vamos esperar até que nosso contrato seja oficialmente implantado em nossa blockchain local! Nosso constructor funciona quando nós realmente o implantamos.

 console.log("Contrato Coffee implantado para:", coffeeContract.endereço);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

npx hardhat run scripts/run.js

const main = async () => {
  const [deployer] = await hre.ethers.getSigners();
  const accountBalance = await deployer.getBalance();

  console.log("Implantação de contratos com conta: ", implantador.endereço);
  console.log("Saldo da conta: ", accountBalance.toString());

  const Token = await hre.ethers.getContractFactory("CoffeePortal");
  const portal = await Token.deploy();
  await portal.deployed();

  console.log("endereço CoffeePortal: ", endereço.portal);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.error(error);
    process.exit(1);
  }
};

runMain();

npx hardhat run scripts/deploy.js --network localhost

contracts/CoffeePortal.sol

// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract CoffeePortal {
    uint256 totalCoffee;

    address payable public owner; 

    /*
     * Um pouco de magia, Google que eventos estão em Solidity!
     */
    event NovoCafe(
        address indexed from,
        uint256 timestamp,
        string message,
        string name
    );

    constructor() payable {
        console.log("Yee! Contrato Inteligente");

        // usuário que está chamando este endereço de função
        owner = payable(msg.sender);
    }

    /*
     * Eu criei aqui uma estrutura chamada Coffee.
     * Uma estrutura é basicamente um datatype personalizado onde podemos personalizar o que queremos manter dentro dela.
     */
    struct Coffee {
        address giver; // O endereço do usuário que me compra um café.
        string message; // A mensagem que o usuário enviou.
        string name; // O nome do usuário que me compra um café.
        uint256 timestamp; // O carimbo da hora em que o usuário me compra um café.
    }

    /*
     * Eu declaro a variável café que me permite armazenar uma série de estruturas.
     * Isto é o que me permite segurar todo o café que alguém me envia!
     */
    Coffee[] coffee;

    /*
     * Eu adicionei uma função getAllCoffee que retornará o array struct, coffee, para nós.
     * Isso facilitará a recuperação do café em nosso site!
     */
    function getAllCoffee() public view returns (Coffee[] memory) {
        return coffee;
    }

    // Obter todo o café comprado
    function getTotalCoffee() public view returns (uint256) {
        // Opcional: Adicione esta linha caso queira ver o contrato imprimir o valor!
        // Também o imprimiremos em run.js.
        console.log("Temos %d total de café recebido ", totalCoffee);
        return totalCoffee;
    }

    /*
     * Você vai notar que eu mudei um pouco a função buyCoffee também aqui e
     * agora requer uma string chamado _message. Esta é a mensagem de nosso usuário
     * nos envia pelo front-end!
     */
    function buyCoffee(
        string memory _message,
        string memory _name,
        uint256 _payAmount
    ) public payable {
        uint256 cost = 0.001 ether;
        require(_payAmount <= cost, "Insuficiente Ether fornecido");

        totalCoffee += 1;
        console.log("%s acabou de enviar um café!", msg.sender);

        /*
         * É aqui que eu realmente armazeno os dados do café na matriz.
         */
        coffee.push(Coffee(msg.sender, _message, _name, block.timestamp));

        (bool success, ) = owner.call{value: _payAmount}("");
        require(success, "Falha ao enviar dinheiro");

        emit NewCoffee(msg.sender, block.timestamp, _message, _name);
    }
}

const main = async () => {
  const coffeeContractFactory = await hre.ethers.getContractFactory(
    "CoffeePortal"
  );
  const coffeeContract = await coffeeContractFactory.deploy({
    value: hre.ethers.utils.parseEther("0.1"),
  });
  await coffeeContract.deployed();
  console.log("Contrato Coffee implantado para:", coffeeContract.address);

  /*
   * Obter saldo do contrato
   */
  let contractBalance = await hre.ethers.provider.getBalance(
    coffeeContract.address
  );
  console.log(
    "Saldo do contrato:",
    hre.ethers.utils.formatEther(contractBalance)
  );

  /*
   * Vamos tentar comprar um café
   */
  const coffeeTxn = await coffeeContract.buyCoffee(
    "Isto é café #1",
    "idris",
    ethers.utils.parseEther("0.001")
  );
  await coffeeTxn.wait();

  /*
   * Obtenha o saldo do contrato para ver o que aconteceu!
   */
  contractBalance = await hre.ethers.provider.getBalance(
    coffeeContract.address
  );
  console.log(
    "Saldo do contrato:",
    hre.ethers.utils.formatEther(contractBalance)
  );

  let allCoffee = await coffeeContract.getAllCoffee();
  console.log(allCoffee);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

const main = async () => {
  const [deployer] = await hre.ethers.getSigners();
  const accountBalance = await deployer.getBalance();

  console.log("Implantação de contratos com conta: ", deployer.address);
  console.log("Saldo da conta: ", accountBalance.toString());

  const Token = await hre.ethers.getContractFactory("CoffeePortal");
  const portal = await Token.deploy({
    value: hre.ethers.utils.parseEther("0.1"),
  });
  await portal.deployed();

  console.log("Endereço CoffeePortal: ", endereço.portal);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.error(error);
    process.exit(1);
  }
};

runMain();

require("@nomiclabs/hardhat-waffle");
require("dotenv").config();

// Esta é uma tarefa de exemplo do Hardhat. Para aprender a criar o seu acesse https://hardhat.org/guides/create-task.html
task("contas", "Imprime a lista de contas", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();

  for (const account of accounts) {
    console.log(endereço.conta);
  }
});

// Você precisa exportar um objeto para configurar sua configuração
// Acesse https://hardhat.org/config/ para saber mais

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
module.exports = {
  solidity: "0.8.4",
  networks: {
    rinkeby: {
      url: process.env.STAGING_ALCHEMY_KEY,
      accounts: [process.env.PRIVATE_KEY],
    },
  },
};

npm install -D dotenv

touch .env

STAGING_ALCHEMY_KEY= // Adicione aqui a chave que copiamos do painel de controle da Alchemy
PRIVATE_KEY= // Adicione aqui sua chave privada de conta

npx hardhat run scripts/deploy.js --network rinkeby

cd <project name> 
npm install ethers react-toastify

npm run dev

import React, { useEffect, useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import { ethers } from "ethers";
import "react-toastify/dist/ReactToastify.css";

import Head from "next/head";


export default function Home() {
  /**
   * Crie uma variável aqui que contenha o endereço do contrato após a implantação!
   */
  const contractAddress = "";

  /**
   * Crie uma variável aqui que faça referência ao conteúdo abi!
   */
  const contractABI = abi.abi;

  /*
   * Apenas uma variável de estado que usamos para armazenar a carteira pública do nosso usuário.
   */
  const [currentAccount, setCurrentAccount] = useState("");

  const [message, setMessage] = useState("");

  const [name, setName] = useState("");

  /*
   * Todas as propriedades do estado para armazenar todo o café
   */
  const [allCoffee, setAllCoffee] = useState([]);

  const checkIfWalletIsConnected = async () => {
    try {
      const { ethereum } = window;

      /*
       * Verificar se estamos autorizados a acessar a carteira do usuário
       */
      const accounts = await ethereum.request({ method: "eth_accounts" });

      if (accounts.length !== 0) {
        const account = accounts[0];
        setCurrentAccount(account);
        toast.success("🦄 A carteira está conectada", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
        });
      } else {
        toast.warn("Certifique-se de ter a MetaMask conectada", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
        });
      }
    } catch (error) {
      toast.error(`${error.message}`, {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
      });
    }
  };

  /**
   * Implemente seu método connectWallet aqui
   */
  const connectWallet = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        toast.warn("Certifique-se de ter a MetaMask conectada", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
        });
        return;
      }

      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };

  const buyCoffee = async () => {
    try {
      const { ethereum } = window;

      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const coffeePortalContract = new ethers.Contract(
          contractAddress,
          contractABI,
          signer
        );

        let count = await coffeePortalContract.getTotalCoffee();
        console.log("Contagem total de café recuperado...", count.toNumber());

        /*
         * Execute o coffee real do seu contrato inteligente
         */
        const coffeeTxn = await coffeePortalContract.buyCoffee(
          message ? message : "Desfrute do seu café",
          name ? name : "Anonimo",
          ethers.utils.parseEther("0.001"),
          {
            gasLimit: 300000,
          }
        );
        console.log("Minerando...", coffeeTxn.hash);

        toast.info("Envio de fundo para café...", {
          position: "top-left",
          autoClose: 18050,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
        });
        await coffeeTxn.wait();

        console.log("Minerado -- ", coffeeTxn.hash);

        count = await coffeePortalContract.getTotalCoffee();

        console.log("Contagem total de café recuperado...", count.toNumber());

        setMessage("");
        setName("");

        toast.success("Café comprado!", {
          position: "top-left",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
        });
      } else {
        console.log("Objeto Ethereum não existe!");
      }
    } catch (error) {
      toast.error(`${error.message}`, {
        position: "top-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
      });
    }
  };

  /*
   * Crie um método que obtenha todo o café de seu contrato
   */
  const getAllCoffee = async () => {
    try {
      const { ethereum } = window;
      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const coffeePortalContract = new ethers.Contract(
          contractAddress,
          contractABI,
          signer
        );

        /*
         * Chame o método getAllCoffee do seu contrato inteligente
         */
        const coffees = await coffeePortalContract.getAllCoffee();

        /*
         * Só precisamos de endereço, carimbo de data/hora, nome e mensagem em nossa interface, então vamos
         * escolher esses
         */
        const coffeeCleaned = coffees.map((coffee) => {
          return {
            address: coffee.giver,
            timestamp: new Date(coffee.timestamp * 1000),
            message: coffee.message,
            name: coffee.name,
          };
        });

        /*
         * Armazenar nossos dados em React State
         */
        setAllCoffee(coffeeCleaned);
      } else {
        console.log("Objeto Ethereum não existe!");
      }
    } catch (error) {
      console.log(error);
    }
  };

  /*
   * Isso executa nossa função quando a página é carregada.
   */
  useEffect(() => {
    let coffeePortalContract;
    getAllCoffee();
    checkIfWalletIsConnected();

    const onNewCoffee = (de, carimbo de data/hora, mensagem, nome) => {
      console.log("Novocafé", de, carimbo da hora, mensagem, nome);
      setAllCoffee((prevState) => [
        ...prevState,
        {
          address: from,
          timestamp: new Date(timestamp * 1000),
          message: message,
          name: name,
        },
      ]);
    };

    if (window.ethereum) {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();

      coffeePortalContract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );
      coffeePortalContract.on("NovoCafe", emNovoCafe);
    }

    return () => {
      if (coffeePortalContract) {
        coffeePortalContract.off("NovoCafe", emNovoCafe);
      }
    };
  }, []);

  const handleOnMessageChange = (event) => {
    const { value } = event.target;
    setMessage(value);
  };
  const handleOnNameChange = (event) => {
    const { value } = event.target;
    setName(value);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <Head>
        <title>Mini me compre um café</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center">
        <h1 className="text-6xl font-bold text-blue-600 mb-6">
          Me compre um café
        </h1>
        {/*
         * Se houver currentAccount renderize este formulário, senão renderize um botão para conectar a carteira
         */}

        {currentAccount ? (
          <div className="w-full max-w-xs sticky top-3 z-50 ">
            <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
              <div className="mb-4">
                <label
                  className="block text-gray-700 text-sm font-bold mb-2"
                  htmlFor="name"
                >
                  Name
                </label>
                <input
                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  id="name"
                  type="text"
                  placeholder="Name"
                  onChange={handleOnNameChange}
                  required
                />
              </div>

              <div className="mb-4">
                <label
                  className="block text-gray-700 text-sm font-bold mb-2"
                  htmlFor="message"
                >
                  Envie uma mensagem ao criador
                </label>

                <textarea
                  className="form-textarea mt-1 block w-full shadow appearance-none py-2 px-3 border rounded text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  rows="3"
                  placeholder="Message"
                  id="message"
                  onChange={handleOnMessageChange}
                  required
                ></textarea>
              </div>

              <div className="flex items-left justify-between">
                <button
                  className="bg-blue-500 hover:bg-blue-700 text-center text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                  type="button"
                  onClick={buyCoffee}
                >
                  Support $5
                </button>
              </div>
            </form>
          </div>
        ) : (
          <button
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-full mt-3"
            onClick={connectWallet}
          >
            Conecte sua carteira
          </button>
        )}

        {allCoffee.map((coffee, index) => {
          return (
            <div className="border-l-2 mt-10" key={index}>
              <div className="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-blue-800 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
                {/* <!-- Não seguir a linha vertical esquerda --> */}
                <div className="w-5 h-5 bg-blue-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>

                {/* <!-- Linha que liga a caixa com a linha vertical --> */}
                <div className="w-10 h-1 bg-green-300 absolute -left-10 z-0"></div>

                {/* <!-- Conteúdo que aparece na caixa --> */}
                <div className="flex-auto">
                  <h1 className="text-md">Supporter: {coffee.name}</h1>
                  <h1 className="text-md">Message: {coffee.message}</h1>
                  <h3>Address: {coffee.address}</h3>
                  <h1 className="text-md font-bold">
                    TimeStamp: {coffee.timestamp.toString()}
                  </h1>
                </div>
              </div>
            </div>
          );
        })}
      </main>
      <ToastContainer
        position="top-right"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
    </div>
  );
}

mkdir utils
touch CoffeePortal.json

// ...

import Head from "next/head";

// Importar abi
import abi from "../utils/CoffeePortal.json";

export default function Home() {
  /**
   * Crie aqui uma variável que possua o endereço do contrato depois de você implantar!
   */
  const contractAddress = "";  // Adicione aqui o endereço do contrato

   // ...
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      [...]
    </div>
  );
}