Tutorial - React Redux App + Solidity desde cero. Metamask-Ethers
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
Leave Tutorial - React Redux App + Solidity desde cero. Metamask-Ethers to:
Read more #programming posts
Best Posts From jfdesousa7
We have not curated any of jfdesousa7's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.
More Posts From jfdesousa7
- Today is selfie day 😌
- Strolling through "el Laguito" Park 🍃
- Probando la nueva actualizacion de NextJS 13
- Tennis day in the club (San Miguel / Maturin)
- My innocent puppy
- Aprende a subir tu aplicacion de NextJs a un Hosting Compartido (Cpanel)
- Severance - Everyone Should Watch the Absolute Best Show on Apple TV Plus
- Tutorial - React Redux App + Solidity desde cero. Metamask-Ethers
- Tutorial - Breve Introducción a Redux
- Parte 2 (Backend) - Aprende a crear una tienda virtual Blockchain aceptando ERC20 token
- Aprende a crear una tienda virtual Blockchain paso a paso (Acepta pagos con token ERC20)
- Aprende a usar el nuevo hook de React llamado useTransition y mejora el desempeño de tus aplicacione
- Aprende a usar la libreria ethers una alternativa a web3
- [Parte 2] Firma y verifica mensajes con React.js, Ethers y MetaMask
- Firma y verifica mensajes con React.js, Ethers y MetaMask - parte 1
- Propiedad en los contratos (Owner)
- Aprende Solidity creando una lista de tareas
- Aprende a interactuar con un contrato deployado en tu dapp con web3
- Aprende a integrar walletConenct en tus dApps
- Aprende a verificar tus contratos desde el formulario de la bscscan con la ayuda de Remix