Construa e implante um aplicativo NFT Whitelist com React e Solidity

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

contract Whitelist {

    // Representa o número total de contas que queremos ter em nossa lista de permissões.
   // O valor disso será definido com o construtor quando implantarmos.

    uint  public maxWhitelistedAddresses;

    // Essa lógica cria um mapeamento de endereço para booleano
   // valor padrão é false. Ele será definido como verdadeiro quando um endereço se juntar.

    mapping(address => bool) public whitelistedAddresses;

    // Esta variável acompanhará o número de endereços na lista de permissões.
     // Aumentará até que o número máximo seja alcançado.

    uint public numAddressesWhitelisted;

    // Recebe uma entrada que definirá o valor de maxWhitelistAddress
    // Proprietário colocará o valor no momento da implantação
    constructor(uint _maxWhitelistedAddresses) {
        maxWhitelistedAddresses =  _maxWhitelistedAddresses;
    }


}

function addAddressToWhitelist() public {
// garante que o chamador da função ainda não faça parte da lista de permissões.
require(!whitelistedAddresses[msg.sender], "Sender has already been whitelisted");
// verifique se o número máximo de endereços na lista de permissões não foi atingido, caso contrário, lance um erro.
require(numAddressesWhitelisted < maxWhitelistedAddresses, "You cannot join now. Limit has been reached");
// Define o endereço dos chamadores como verdadeiro.
// Isso o torna um endereço legível na lista de permissões
whitelistedAddresses[msg.sender] = true;
// Isso aumentará o número de endereços na lista de permissões
numAddressesWhitelisted += 1;
}

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

contract Whitelist {

    // Representa o número total de contas que queremos ter em nossa lista de permissões.
    // O valor disso será definido com o construtor quando implantarmos.
    uint  public maxWhitelistedAddresses;

    // Essa lógica cria um mapeamento de endereço para boolean
    // valor padrão é false. Ele será definido como verdadeiro quando um endereço se juntar.
    mapping(address => bool) public whitelistedAddresses;

    // Esta variável acompanhará o número de endereços na lista de permissões.
    // Aumentará até que o número máximo seja alcançado.
    uint public numAddressesWhitelisted;

    // Recebe uma entrada que definirá o valor de maxWhitelistAddress
    // Proprietário colocará o valor no momento da implantação

    constructor(uint _maxWhitelistedAddresses) {
        maxWhitelistedAddresses =  _maxWhitelistedAddresses;
    } 

    function addAddressToWhitelist() public {
 // garante que o chamador da função ainda não faça parte da lista branca.

  require(!whitelistedAddresses[msg.sender], "Sender has already been whitelisted");

   // verifica se o número máximo de endereços permitidos não foi alcançado, caso contrário, gera um erro.
   require(numAddressesWhitelisted < maxWhitelistedAddresses, "You cannot join now. Limit has been reached");

   // Define o endereço dos chamadores como true.
   // Isso o torna um endereço legível na lista de permissões
   whitelistedAddresses[msg.sender] = true;

    // This will increase the number of whitelisted addresses
    numAddressesWhitelisted += 1;
  }

 }

const { ethers } = require("hardhat");

async function main() {
  /*
 Um ContractFactory em ethers.js é uma abstração usada para implantar novos contratos inteligentes,  então `ourContract` se refere a uma fábrica para instâncias do nosso contrato Whitelist.

  */
  const ourContract = await ethers.getContractFactory("Whitelist");

  // aqui implantamos o contrato
  const deployedContract = await ourContract.deploy(10);
  // 10 é o número máximo de endereços permitidos na lista de permissões, ou seja, nosso     construtor aguarda que termine de implantar

  await deployedContract.deployed();

  // imprime e registra o endereço do contrato implantado no console
  console.log(
    "Contract Address:",
    deployedContract.address
  );
}

// Chama a função main e catch se houver algum erro
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

require("@nomiclabs/hardhat-waffle");
require("dotenv").config({ path: ".env" });

const API_KEY = process.env.API_KEY;

const PRIVATE_KEY = process.env.PRIVATE_KEY;

module.exports = {
  solidity: "0.8.0",
  networks: {
    goerli: {
      url: API_KEY,
      accounts: [PRIVATE_KEY],
    },
  },
};

import { useState } from "react";


export default function Whitelist() {

// isso gerencia o estado do número de pessoas na lista de permissões
// valor inicial é definido como `null`
 const [numofWhitelisted, setNumofWhitelisted] = useState(null);

// isso gerencia o texto mostrado no botão quando conectado ou não.
// o valor inicial é definido em `Connect Wallet`
const [connectButtonText, setConnetButtonText] = useState("Connect Wallet");

// isso gerencia o estado da conta / endereço conectado
// valor inicial é definido como `null`
const [connectedAddress, setConnectedAddress] = useState(null);

  return (
    <div>
      <div>
        <div>
          <h1>Welcome to the Whitelist Tutorial!</h1>
          <div>


// quando este botão é clicado, o Metamask deve aparecer para o usuário se conectar
// após a conexão bem-sucedida, o estado do texto deve mudar.
            <button>
              {connectButtonText}
            </button>

// após a conexão bem-sucedida, o estado do texto deve mudar
// o endereço da conta conectada deve aparecer
            <p> Connected Address : {connectedAddress} </p>
          </div>


          <div>

// quando este botão é clicado, o estado deve ser atualizado e o número da lista de permissões deve mostrar

            <button>
              Get the number of whitelisted addresses
            </button>
            {numofWhitelisted} have already joined the Whitelist
          </div>


          <div>
// quando este botão é clicado, a Metamask deve aparecer para que uma transação seja assinada
// quando assinado, o usuário será adicionado à lista de permissões

            <button>
              {joinWhiteListText}
            </button>
          </div>
        </div>
      </div>

      <footer>Made by Alex Kumancev</footer>
    </div>
  );



}
olidity: "0.8.0",
  networks: {
    goerli: {
      url: API_KEY,
      accounts: [PRIVATE_KEY],
    },
  },
};

import { useState } from "react";
import { ethers } from "ethers";

// salve sua ABI em um arquivo json e importe aqui
import contract_abi from "./contract_abi.json";

export default function Whitelist() {

// endereço do contrato inteligente
const contractAddress = `0x90b989349A58a20415Cb3ff440b6244cF3737e12`;

// isso gerencia o estado do número de pessoas na lista de permissões
// valor inicial é definido como `null`
const [numofWhitelisted, setNumofWhitelisted] = useState(null);

// isso gerencia o texto mostrado no botão quando conectado ou não.
// o valor inicial é definido em `Connect Wallet`
const [connectButtonText, setConnetButtonText] = useState("Connect Wallet");

// isso gerencia o estado da conta / endereço conectado
// valor inicial é definido como `null`
const [connectedAddress, setConnectedAddress] = useState(null);

 // gestão do estado do provedor, signatário e contrato
  const [provider, setProvider] = useState(null);
  const [signer, setSigner] = useState(null);
  const [contract, setContract] = useState(null);


  return (
    <div>
      <div>
        <div>
          <h1>Welcome to the Whitelist Tutorial!</h1>
          <div>
            <button onClick={connectWalletHandler}>
              {connectButtonText}
            </button>

            <p> Connected Address : {connectedAddress} </p>
          </div>


          <div>
            <button onClick={getNumWhitelistHandler}>
              Get the number of whitelisted addresses
            </button>
            {numofWhitelisted} have already joined the Whitelist
          </div>


          <div>
            <button onClick={joinWhitelistHandler}>
              {joinWhiteListText}
            </button>
          </div>
        </div>
      </div>

      <footer>Made by Alex Kumancev</footer>
    </div>
  );

// a declação if-else verifica se o navegador possui Metamasks instaladas
// se instalado, ele se conectará à primeira conta/endereço

  const connectWalletHandler = () => {
    if (window.ethereum) {
      window.ethereum
        .request({ method: "eth_requestAccounts" })
        .then((result) => {

    // após a conexão, o estado de connectAddress e connectButtonText será atualizado
         setConnectedAddress(result[0]);
          setConnetButtonText("Wallet Connected!");
    // updateEthers iniciará o provedor, o signatário e a instância do contrato
          updateEthers();
        });
    } else {
      setConnectedAddress("Please Install Metamask Extension!");
    }
  };


    const updateEthers = async () => {

    // iniciar um provedor com ethers.js
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    setProvider(provider);

   // iniciar um signatário com ethers.js
    const signer = provider.getSigner();
    setSigner(signer);

   // iniciando uma nova instância de contrato com ethers.js
    const contract = new ethers.Contract(contractAddress, contract_abi, signer);

    setContract(contract);

    // registrará o provedor, o assinante e o contrato no console quando for bem-sucedido.
    console.log({provider, signer , contract})
  };

const getNumWhitelistHandler = async () => {
   // chama o uint público numAddressesWhitelisted de nosso contrato diretamente
    let number = await contract.numAddressesWhitelisted.length;
    setNumofWhitelisted(number);
  };
const joinWhitelistHandler = async () => {
  // chama a função addAddressToWhitelist em nosso contrato inteligente diretamente
    const tx = await contract.addAddressToWhitelist();
    await tx.wait();
setJoinWhiteListText("Succesfully Joined!");
    await getNumWhitelistHandler();
  };

import { useState } from "react";
import { ethers } from "ethers";
import "./styles.css";
import contract_abi from "./contract_abi.json";

export default function Whitelist() {
  const contractAddress = `0x90b989349A58a20415Cb3ff440b6244cF3737e12`;

  const [numofWhitelisted, setNumofWhitelisted] = useState(null);
  const [connectButtonText, setConnetButtonText] = useState("Connect Wallet");

  const [connectedAddress, setConnectedAddress] = useState(null);

  // gestão do estado do provedor, signatário e contrato
  const [provider, setProvider] = useState(null);
  const [signer, setSigner] = useState(null);
  const [contract, setContract] = useState(null);

  const connectWalletHandler = () => {
    if (window.ethereum) {
      window.ethereum
        .request({ method: "eth_requestAccounts" })
        .then((result) => {
          setConnectedAddress(result[0]);
          setConnetButtonText("Wallet Connected!");
          updateEthers();
        });
    } else {
      setConnectedAddress("Please Install Metamask Extension!");
    }
  };

  const updateEthers = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    setProvider(provider);
    console.log(provider.getCode(contractAddress));

    const signer = provider.getSigner();
    setSigner(signer);

    const contract = new ethers.Contract(contractAddress, contract_abi, signer);

    setContract(contract);
  };

  const getNumWhitelistHandler = async () => {
    let number = await contract.numAddressesWhitelisted.length;
    setNumofWhitelisted(number);
  };

  const joinWhitelistHandler = async () => {
    const tx = await contract.addAddressToWhitelist();
    await tx.wait();

    setJoinWhiteListText("Succesfully Joined!");
    await getNumWhitelistHandler();
  };

  return (
    <div>
      <div className="main">
        <div>
          <h1 className="title">Welcome to the Whitelist Tutorial!</h1>
          <div>
            <button onClick={connectWalletHandler}>

              {connectButtonText}
            </button>
            <p> Connected Address : {connectedAddress} </p>
          </div>
          <div className="description">
            <button onClick={getNumWhitelistHandler}>

              // Obter o número de endereços permitidos
            </button>
            {numofWhitelisted} have already joined the Whitelist
          </div>
          <div>
            <button onClick={joinWhitelistHandler}>

              {joinWhiteListText}
            </button>
          </div>
        </div>
      </div>

      <footer className="footer">Made by Alex Kumancev</footer>
    </div>
  );
}