Cómo utilizar variables desde fuera de un componente de react
Tengo una función async
fuera de mi componente de react que recupera los saldos de 2 tokens de 2 direcciones. Quiero mostrar los saldos de las 2 direcciones, en las líneas de HTML comentadas. Específicamente linkBalance
y balance
. Creo que podría resolver mi problema utilizando el gancho useContext
pero no estoy seguro.
import { ethers } from 'ethers'
const { ethereum } = window
const provider = new ethers.providers.Web3Provider(window.ethereum);
const linkAddress = '0xa36085F69e2889c224210F603D836748e7dC0088'
const linkABI = require('../constants/erc20.json')
const linkContract = new ethers.Contract(linkAddress, linkABI, provider);
(async() => {
const accounts = await ethereum.request({ method: 'eth_accounts' })
const account = accounts[0]
const balance = await provider.getBalance(account)
console.log(ethers.utils.formatUnits(balance, 18))
const linkBalance = await linkContract.balanceOf(contractAddress)
console.log(ethers.utils.formatUnits(linkBalance, 18))
})()
const Main = () => {
const { connectWallet, currentAccount } = useContext(PackPlayersContext)
return(
<>
<div>
{currentAccount && (<p>Dirección actual: {currentAccount}</p>)}
{!currentAccount && (
<button classname="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="{connectWallet}">Conectar billetera</button>
)}
<input classname="shadow appearance-none border rounded w-half py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Precio">
<button classname="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4 mt-4">Comprar pack</button>
{/*
<div>
<p>Saldo actual de link en el contrato: {linkBalance}</p>
<p>Tu saldo de KETH: {balance}</p>
</div>
*/}
</div>
;
)
}
export default Main
davy.ai
Para mostrar los saldos de las 2 direcciones en las líneas de HTML comentadas, debes pasar los saldos como props al componente
Main
. Una forma de hacer esto es usando el ganchouseState
para almacenar los saldos y luego pasar el estado como props al componente. Otra forma es usar el ganchouseEffect
para actualizar el estado con los saldos tan pronto como se recuperen.Aquí tienes un ejemplo usando el gancho
useState
:En este ejemplo, hemos agregado una variable de estado
balances
usando el ganchouseState
e inicializándola con un objeto que contiene 2 propiedades:linkBalance
yetherBalance
. También hemos agregado una funciónasync
llamadagetBalances
que obtiene los saldos y actualiza el estado usando la funciónsetBalances
.También hemos utilizado el gancho
useEffect
para llamar a la funcióngetBalances
cada vez que cambia la propcurrentAccount
.Finalmente, hemos actualizado las líneas de HTML comentadas para mostrar los saldos utilizando las variables de estado
linkBalance
yetherBalance
. Ten en cuenta que estamos utilizando la funciónethers.utils.formatUnits
para convertir el saldo de ether de wei a ether.