Ejecución de Aplicaciones Descentralizadas con Metamask

Mi resultado del Reto
Función en solidity

function setCounter(uint _setValue) public {
        counter = _setValue;
   }

Función en el Js en el HTML

async function setCounter(setCounter) {
await contract.setCounter(document.getElementById("setCounter").value);
 }

Mi contrato desplegado en la tesnet etherscan
😃

Si les sale en la consola de que ethers no detecta la red de “sepolia”, pueden hacer caso omiso de esa línea de código y les quedaría algo así

      const provider = new ethers.providers.Web3Provider(
        window.ethereum
      );

Mi reto:

https://github.com/neocarvajal/prework-dev-blockchain

Contrato: Goerli Ether Scan

setCounter in Counter.sol:

 function setCounter(uint _count) public returns(uint) {
        return counter = _count;
    }

setCounter in src/index.html

document.getElementById("submit").addEventListener('click', function(event){
            event.preventDefault();
            let count = document.getElementById('count').value;
            setCounter(count);
        });

        async function setCounter(count) {
            const counter = await contract.setCounter(count);
        } 

quede muy insatisfecho con la sección de hardhat, simplemente no funciona el método getCounter.
En las clases nunca se ejecuto primero el test, si lo hubieran hecho se darían cuenta a que me refiero. Y al configurar remix con la cuenta de sepolia en metamask, y darle la dirección del contrato, desde ahí se puede ejecutar sin problema aparentemente, pero la variable counter no se modifica quizás por el tipo de storage que se esta usando para ejecutar el contador.

Aun no entiendo muy bien como funciona eso de las firmas con metamask, por que en incremet o setcounter, pide una aprobacion pero para getcounter no, aparte es lentisimo, no se si asi sea todo en la web 3 o solo es asi por lo que estamos en red de pruebas

Solución al reto en la red de sepolia:

Counter.sol :

// SPDX-License-Identifier: MIT
pragma solidity >= 0.8.7;

contract Counter {
    uint counter;

    constructor(uint _counter){
        counter = _counter;
    }

    function getCounter() public view returns(uint){
        return counter;
    }

    function increment() public {
        counter = counter + 1;
    }

    function setCounter(uint _counter) public {
        counter = _counter;
    }
}

HTML:

<div>
        <div>
            <label for="counter-view">Counter</label>
            <input disabled type="text" id="counter-view" name="counter-view"/>
        </div>
        <div>
            <label for="set-counter">Set Counter</label>
            <input  type="text" id="set-counter" name="set-counter"/>
        </div>
        <button onclick="increment()">Increment</button>
        <button onclick="getCounter()">Get Counter</button>
        <button onclick="setCounter()">Set Counter</button>
    </div>


    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"
        type="application/javascript">
    </script>

    <script>
        const CONTRACT_ABI = [
    {
      "inputs": [
        {
          "internalType": "uint256",
          "name": "_counter",
          "type": "uint256"
        }
      ],
      "stateMutability": "nonpayable",
      "type": "constructor"
    },
    {
      "inputs": [],
      "name": "getCounter",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "increment",
      "outputs": [],
      "stateMutability": "nonpayable",
      "type": "function"
    },
    {
      "inputs": [
        {
          "internalType": "uint256",
          "name": "_counter",
          "type": "uint256"
        }
      ],
      "name": "setCounter",
      "outputs": [],
      "stateMutability": "nonpayable",
      "type": "function"
    }
  ];
        const CONTRACT_ADDRESS = "0xfBcd941B4597D2885994EA5Cfc0e38FC7e29bC1E";
        let signer;
        let contract;

        const provider = new ethers.providers.Web3Provider(
            window.ethereum,
            "any"
        );

        provider.send('eth_requestAccounts', [])
            .then(() => {
                provider.listAccounts()
                    .then((accounts) => {
                        signer = provider.getSigner(accounts[0]);
                        contract = new ethers.Contract(
                            CONTRACT_ADDRESS, 
                            CONTRACT_ABI, 
                            signer);
                        console.log(contract);
                    });
            });
        
        async function increment() {
            await contract.increment();
        }

        async function getCounter() {
            const counter = await contract.getCounter();
            document.getElementById("counter-view").value = counter;
        }

        async function setCounter() {
            const counter = document.getElementById("set-counter").value;
            await contract.setCounter(parseInt(counter));
        }
    </script>

Muy buenas las explicaciones de Alfredo. Gracias!

Mi proceso.

//Agregué la nueva función en el contrato
function setCounter(uint _value) public{
    counter = _value;
  }

//Compilé y desplegué un nuevo contrato
//npx hardhat compile

//Modifiqué el archivo 
//hardhat.config.js

//En el script del html cambié const CONTRACT_ADDRESS por el nuevo valor de abi en Counter.json. 
//También agregué la función
 async function setCounter() {
            const countervalue = await document.getElementById("setcounter").value
            await contract.setCounter(countervalue)
        }


//Desplegué el contrato
//npx hardhat run scripts/deploy.js --network sepolia

Es bastante pesado el tema de hardhat y estaría bueno desglosarlo y explicar un poco a profundidad cada parte.

Pero para los fines de este curso, que es un abrebocas a este mundo, funciona bastante bien!

La documentación es mi pastor, nada me faltará!

Reto cumplido:

.

CONTRACT_ADDRESS = ‘0x7B12A7aebd013b23a9A19f532CF3A35D5DC9FB1E’

.

.
Aquí e código

.

// Configuración e botones
  <div>
    <form>
      <label for="set-counter">Enter a value to set counter: </label>
      <input id="set-counter" type="text" />
      <button onclick="setCounter()" type="button" >Set counter</button>
    </form>
    <button onclick="increment()" type="button" >Increment</button>
    <button onclick="getCounter()" type="button" >Get Counter</button>
    <input disable type="text" id="counter" />
  </div>

//...
// Función set counter
    async function setCounter(valueCounter = document.getElementById("set-counter").value) {
      await contract.setCounter(valueCounter);
    }

Los precios de gas de goerli en está época son muy altos

No olvides que antes de probar tu aplicación tengas conectada tu Wallet de Metamask a la red con la que vas a probarla y que tengas algo de saldo en tu cuenta para pagar el gas, obviamente si es una Testnet puedes obtener algunos tokens de las faucets correspondientes, en el caso que lances tu dapp en la Mainnet de Ethereum, tendrás que utilizar Ethers con valor real.

Mi dirección de contrato: 0x76E7940E94095d5b96562aB69424D2dcc9db2134

Mi funcion en index,html

        async function setCounter(number) {
            number = Number(number);
            number? await contract.setCounter(number): await contract.setCounter(0);
        }

Mi sección de HTML

    <div>
        <label>ser counter value</label>
        <input type="text" id="setCounter">
        <button onclick="setCounter(document.getElementById('setCounter').value)">Setear</button>
    </div>

Mi función en Solidity

    function setCounter(uint _setValue) public {
        counter = _setValue;
    }