Tutorial - React Redux App + Solidity desde cero. Metamask-Ethers

in Geek Zone2 months ago

▶️ Watch on 3Speak


Saludos, en el día de hoy crearemos una app donde usaremos Redux en una aplicación real, en esta ocasión leeremos data desde Ethereum, crearemos un contrato inteligente usando Solidity como lenguaje de programación, además de otras librerías como ethers para la conexión con la web3, usaremos React como librería para el frontend y el core de este tutorial es la de usar Redux para gestionar los estados generales de nuestra aplicación.

App.js

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { connect } from "./redux/ethereum/ethereumActionsCreator";
import { fetchData } from "./redux/data/dataActionsCreator";

const App = () => {
const dispatch = useDispatch();
const { ethereum, data } = useSelector((state) => state);
const [value, setValue] = useState("");

const handleButton = async () => {
const txResult = await ethereum.contract.setValor(value);
await txResult.wait();
dispatch(fetchData());
setValue("");
};

return (


{ethereum.error ? ethereum.error : null}
{ethereum.account === undefined ? (
<>

Debes conectarte con metamask


<button onClick={() => dispatch(connect())}>Conectar
</>
) : (
<>

Hola address: {ethereum.account}


Valor: {data.valor}

      <div>
        <input
          text="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
        <button onClick={handleButton}>Asignar valor</button>
      </div>
    </>
  )}
</div>

);
};

export default App;


▶️ 3Speak

Sort:  

Dear @jfdesousa7, we need your help!

The Hivebuzz proposal already got important support from the community. However, it lost its funding a few days ago and only needs a few more HP to get funded again.

May we ask you to support it so our team can continue its work this year?
You can do it on Peakd, ecency, Hive.blog or using HiveSigner.
https://peakd.com/me/proposals/199

Your support would be really helpful and you could make a difference.
Thank you!