Crea tu primera app web3 con Solidity y React

npm install –save-dev hardhat

npx hadhat

npx hardhat compile

npx hardhat test

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.0;
import "hardhat/console.sol";
contract WavePortal {
    uint256 totalWaves;
    constructor() {
        console.log("Yo yo, soy un contrato y soy inteligente");
    }
    function wave() public {
        totalWaves += 1;
        console.log("%s ha saludado!", msg.sender);
    }
    function getTotalWaves() public view returns (uint256) {
        console.log("Tenemos un total de %d saludos!", totalWaves);
        return totalWaves;
    }
}

const main = async () => {
  const [owner, randomPerson] = await hre.ethers.getSigners();
  const waveContractFactory = await hre.ethers.getContractFactory('WavePortal');
  const waveContract = await waveContractFactory.deploy();
  await waveContract.deployed();

  console.log('Contrato desplegado en:', waveContract.address);
  console.log('Contrato desplegado por:', owner.address);

  let waveCount;
  waveCount = await waveContract.getTotalWaves();

  let waveTxn = await waveContract.wave();
  await waveTxn.wait();

  waveCount = await waveContract.getTotalWaves();

  waveTxn = await waveContract.connect(randomPerson).wave();
  await waveTxn.wait();

  waveCount = await waveContract.getTotalWaves();
};

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

runMain();

npx hardhat node

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

  console.log('Desplegando contrato con la cuenta: ', deployer.address);
  console.log('Saldo de la cuenta: ', accountBalance.toString());
  const Token = await hre.ethers.getContractFactory('WavePortal');
  const portal = await Token.deploy();
  await portal.deployed();
  console.log('Dirección de WavePortal: ', portal.address);
};
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

require('@nomiclabs/hardhat-waffle');
module.exports = {
  solidity: '0.8.0',
  redes: {
    rinkeby: {
      url: 'TU_ALCHEMY_API_URL',
      cuentas: ['TU_KEY_PRIVADA_DE_RINCKEBY'],
    },
  },
};

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

import React, { useEffect, useState } from "react";
import './App.css';
const App = () => {
  /*
  * Una state variable que usamos para almacenar la cartera pública de nuesrto usuario.
  */
  const [currentAccount, setCurrentAccount] = useState("");

  const checkIfWalletIsConnected = async () => {
   /*
    * Primero nos aseguramos de que tenemos acceso a window.ethereum
    */
    try {
    const { ethereum } = window;
      if (!ethereum) {
        console.log("Asegúrate de que tienes Metamask!");
        return;
    } else {
        console.log("Tenemos el objeto ethereum", ethereum);
    }
    /*
    * Comprobar que estamos autorizados para acceder a la cartera del usuario
    */
    const accounts = await ethereum.request({ method: 'eth_accounts' });
    if (accounts.length !== 0) {
        const account = accounts[0];
        console.log("Cartera autorizada encontrada:", account);
        setCurrentAccount(account);
    } else {
        console.log("No se encontró ninguna cuenta autorizada")
      }
    } catch (error) {
    console.log(error);
    }
  }
  /**
  * Implementa tu método connectWallet aquí
  */
  const connectWallet = async () => {
    try {
    const { ethereum } = window;
    if (!ethereum) {
        alert("Descarga Metamask");
        return;
    }
    const accounts = await ethereum.request({ method: "eth_requestAccounts" });
    console.log("Conectado ", accounts[0]);
    setCurrentAccount(accounts[0]);
    } catch (error) {
    console.log(error)
    }
  }
 /*
  * Esto ejecuta nuestra función cuando se carga la página.
  */
  useEffect(() => {
    checkIfWalletIsConnected();
  }, []) 
  return (
    <div className="mainContainer">
    <div className="dataContainer">
        <div className="header">
        👋 Holaaa!
        </div>
        <div className="bio">
           ¡Soy Álvaro! He trabajado en realidad virtual y fintech. Bastante guay ¿no? ¡Conecta tu cartera de Ethereum y mándame un saludo!
        </div>
        <button className="waveButton" onClick={null}>
        Salúdame
        </button>
        {/*
        * Si no existe ninguna currentAccount renderiza este botón
        */}
        {!currentAccount && (
        <button className="waveButton" onClick={connectWallet}>
            Conecta tu cartera
        </button>
        )}
    </div>
    </div>
  );
}
export default App

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

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

        let count = await wavePortalContract.getTotalWaves();
        console.log("Recuperado el recuento total de saludos...", count.toNumber());
    } else {
        console.log("¡El objeto Ethereum no existe!");
    }
    } catch (error) {
    console.log(error)
    }
}

/**
   * ¡Crea aquí una variable que contenga la dirección del contrato desplegado!
   **/
  const contractAddress = "0xd5f08a0ae197482FA808cE84E00E97d940dBD26E";

import abi from './utils/WavePortal.json';

const contractABI = abi.abi;

const wave = async () => {
    try {
    const { ethereum } = window;
    if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const wavePortalContract = new ethers.Contract(contractAddress, contractABI, signer);
        let count = await wavePortalContract.getTotalWaves();
        console.log("Recuperado el recuento total de saludos...", count.toNumber());
        /*
        * Ejecutar el wave real de tu smart contract
        */
        const waveTxn = await wavePortalContract.wave(¨👋 ¨); // cambia esto por lo que quieras o ¡permite que los usuario escriban!
        console.log("Minando...", waveTxn.hash);
        await waveTxn.wait();
        console.log("Minado completado...", waveTxn.hash);
        count = await wavePortalContract.getTotalWaves();
        console.log("Recuperado el recuento total de saludos...", count.toNumber());
    } else {
        console.log("¡El objeto Ethereum no existe!");
    }
    } catch (error) {
        console.log(error)
    }
  }

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.0;
import "hardhat/console.sol";
contract WavePortal {
    uint256 totalWaves;
    /*
    * Un poco de magia, googlea lo que son los eventos en Solidity
    */
    event NewWave(address indexed from, uint256 timestamp, string message);
    /*
    * He creado un struct llamado Wave.
    * Un struct es básicamente un datatype que nos permite customizar lo que queremos guardar en él.
    */
    struct Wave {
        address waver; // La cartera del usuario que ha saludado.
        string message; // El mensaje que nos ha dejado.
        uint256 timestamp; // El timestamp del momento en el que nos han saludado.
    }
    /*
    * Declaro la variable waves que me permite guardar una lista de structs.
    * ¡Esto es lo que nos permite guardar todos los saludos que nos manden!
     */
    Wave[] waves;

    constructor() {
        console.log("SOY UN SMART CONTRACT. YAY.");
    }
    /*
    * Notarás que he cambiado un poco la función wave un poco
    * ahora requiere un string llamado _message. ¡Es el mensaje que
    * nos mandan del front!
    */
    function wave(string memory _message) public {
        totalWaves += 1;
        console.log("%s ha saludado!", msg.sender);

        /*
        * Aquí es donde guardamos realmente los datos de los saludos en la lista.
        */
        waves.push(Wave(msg.sender, _message, block.timestamp));

        /*
        * He añadido algunas cosillas aquí, ¡googléalo e intenta entender qué es!
        * Haznos saber lo que aprendes en #general-chill-chat
        */
        emit NewWave(msg.sender, block.timestamp, _message);
    }

    /*
    * he añadido la función getAllWaves que nos devuelve la lista de structs waves.
    * ¡Eso nos facilitará la recuperación de los saludos desde la web!
    */
    function getAllWaves() public view returns (Wave[] memory) {
        return waves;
    }

    function getTotalWaves() public view returns (uint256) {
        // Opcional: ¡Añade esta línea si quieres que el contrato imprima el valor!
        // También lo vamos a imprimir en run.js.
        console.log("Tenemos %d saludos en total!", totalWaves);
        return totalWaves;
    }
}

const [currentAccount, setCurrentAccount] = useState("");
  /*
   *Propiedad de estado para almacenar todos los saludos
   */
  const [allWaves, setAllWaves] = useState([]);
  const contractAddress ="0xd5f08a0ae197482FA808cE84E00E97d940dBD26E";
  /*
   * Crea un método que obtenga todos los saludos de tu contrato
   */
  const getAllWaves = async () => {
    try {
    const { ethereum } = window;
    if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const wavePortalContract = new ethers.Contract(contractAddress, contractABI, signer);

        /*
        * Llama al método getAllWaves desde tu Smart Contract
        */
        const waves = await wavePortalContract.getAllWaves();
        /*
        * Sólo necesitamos la dirección, el timestamp y el mensaje en nuestro UI, así que
        * elígelos
        */
        let wavesCleaned = [];
        waves.forEach(wave => {
        wavesCleaned.push({
            dirección: wave.waver,
            timestamp: new Date(wave.timestamp * 1000),
            mensaje: wave.mensaje
        });
        });
        /*
        * Almacena nuestros datos en React State
        */
        setAllWaves(wavesCleaned);
    } else {
        console.log("¡El objeto Ethereum no existe!")
    }
    } catch (error) {
    console.log(error);
    }
  }

return (
    <div className="mainContainer">
      <div className="dataContainer">
        <div className="header">
        👋 Holaaa!
        </div>

        <div className="bio">
          ¡Soy Álvaro! He trabajado en realidad virtual y fintech. Bastante guay ¿no? ¡Conecta tu cartera de Ethereum y mándame un saludo!
        </div>

        <button className="waveButton" onClick={wave}>
          Salúdame
        </button>

        {!currentAccount && (
          <button className="waveButton" onClick={connectWallet}>
            Conecta tu cartera
          </button>
        )}

        {allWaves.map((wave, index) => {
          return (
            <div key={index} style={{ backgroundColor: "OldLace", marginTop: "16px", padding: "8px" }}>
              <div>Dirección: {wave.address}</div>
              <div>Tiempo: {wave.timestamp.toString()}</div>
              <div>Mensaje: {wave.message}</div>
            </div>)
        })}
      </div>
    </div>
  );