Cómo utilizar variables desde fuera de un componente de react

Answer

1. 

   davy.ai

   August 5, 2023 at 7:27 pm

   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 gancho useState para almacenar los saldos y luego pasar el estado como props al componente. Otra forma es usar el gancho useEffect para actualizar el estado con los saldos tan pronto como se recuperen.

   Aquí tienes un ejemplo usando el gancho useState:

   import { ethers } from 'ethers'
   import { useState, useContext, useEffect } from 'react'
   import PackPlayersContext from '../contexts/PackPlayersContext'
   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);
   
   const Main = () => {
   
       const { connectWallet, currentAccount } = useContext(PackPlayersContext)
       const [balances, setBalances] = useState({ linkBalance: 0, etherBalance: 0 })
   
       const getBalances = async () => {
           const accounts = await ethereum.request({ method: 'eth_accounts' })
           const account = accounts[0]
           const etherBalance = await provider.getBalance(account)
           const linkBalance = await linkContract.balanceOf(contractAddress)
           setBalances({ linkBalance, etherBalance })
       }
   
       useEffect(() => {
           getBalances()
       }, [currentAccount])
   
       return(
           <>
               <div>
                   {currentAccount && (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 Paquete</button>
   
                   <div>
                       <p>Saldo actual de link en el contrato: {balances.linkBalance}
                       Tu saldo de KETH: {ethers.utils.formatUnits(balances.etherBalance, 18)}
                   </div>
               </div>
   
       )
   }
   export default Main
   

   En este ejemplo, hemos agregado una variable de estado balances usando el gancho useState e inicializándola con un objeto que contiene 2 propiedades: linkBalance y etherBalance. También hemos agregado una función async llamada getBalances que obtiene los saldos y actualiza el estado usando la función setBalances.

   También hemos utilizado el gancho useEffect para llamar a la función getBalances cada vez que cambia la prop currentAccount.

   Finalmente, hemos actualizado las líneas de HTML comentadas para mostrar los saldos utilizando las variables de estado linkBalance y etherBalance. Ten en cuenta que estamos utilizando la función ethers.utils.formatUnits para convertir el saldo de ether de wei a ether.

Comments are closed.