Assuming you've web3.js file set up in your src folder, the only issue I see is you're calling an async function in useEffect which is always a bad idea.
Instead you can define a different async function and call that normally in useEffect. If you assign any state to it, it'll refresh the dom for you. I don't have enough information to provide better solution but I'm adding a similar code which I wrote and which worked
import { useState, useEffect } from 'react'; import './App.css'; import web3 from './web3'; import Lottery from './lottery'; function App() { const [manager, setManager] = useState(''); const [players, setPlayers] = useState([]); const [balance, setBalance] = useState('0'); const [value, setValue] = useState(''); const [message, setMessage] = useState(''); const [account, setAccount] = useState(''); async function setInitials(){ let address = await Lottery.methods.manager().call(); let playerList = await Lottery.methods.getPlayers().call(); let contractBalance = await web3.eth.getBalance(Lottery.options.address); let accounts = await web3.eth.getAccounts(); setAccount(accounts[0]); setManager(address); setPlayers(playerList); setBalance(web3.utils.fromWei(contractBalance, 'ether')); } const enterContract = async (e) => { try { e.preventDefault(); setMessage('Waiting for success of transaction...') let accounts = await web3.eth.getAccounts(); await Lottery.methods.enter().send({ from: accounts[0], value: web3.utils.toWei(value, 'ether') }) setMessage('Transaction successful !!!') setValue(''); setInitials(); } catch (error) { setMessage(`Transaction failed: ${error.message}`) } } const pickWInner = async () => { try { setMessage('Picking Winner'); let accounts = await web3.eth.getAccounts(); await Lottery.methods.pickWinner().send({ from: accounts[0] }) let winner = await Lottery.methods.getWinner().call(); setMessage(`Winner is ${winner}. Congratulations!!`) setInitials(); } catch (error) { setMessage(`Failed to pick winner: ${error.message}`) } } useEffect(() => { setInitials(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return ( <div className="App"> <h1>Lottery App</h1> <p>This contract is managed by: {manager}</p> <p>Number of players participated: {players.length}</p> { players.length > 0 ? <ul>List of players currently in Contract: {players.map((player, index) => { return <li key={index}>{player}</li> })} </ul> : <></> } <p>Total balance up for Grab: {balance} ether</p> <hr /> <form onSubmit={enterContract}> <h3>Want to try your luck?</h3> <p>Enter amouth of ether you want to put in</p> <input placeholder='Min 0.01 Ether' value={value} onChange={e => setValue(e.target.value)} /> <button type='Submit'>Enter</button> </form> { account === manager ? <> <hr /> <h2>Pick a Winner</h2> <button onClick={pickWInner}>Pick Winner</button> </> : <></> } <h1>{message}</h1> </div> ); } export default App;
