0

I am trying to develop NFT minting website. So in my App.js I have a button called connectWallet.

const connectWallet = async () => {
  if (typeof window.ethereum !== 'undefined') {
    var web3 = new Web3(window.ethereum);
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    setWalletAddress(accounts[0]);
    setContract(new web3.eth.Contract(ABI, ADDRESS));
    console.log(walletAddress)
    console.log(contract)
  }
};

When I try to connect the button on the home page, the only problem is I have to click twice to get the wallet. And I have to use the walletAddress which I sent via props.

<Route
  path='/mint-now'
  element={(
    <MintNow
      walletAddress={walletAddress}
      contract={contract}
   />
  )}
/>

Here is the basic MintNow page:

const MintNow = ({ walletAddress, contract }) => {
  const mint = async () => {
    if (window.ethereum) {
      var _mintAmount = Number(document.querySelector("[name=amount]").value);
      var mintRate = Number(await contract.methods.cost().call());
      var totalAmount = mintRate * _mintAmount;
      contract.methods.mint(walletAddress, _mintAmount).send({ from: walletAddress, value: String(totalAmount) })
    }
  }
  return (
    <>
      <input type='number' name='amount' defaultValue='1' min='1' max='100' />
              <button onClick={mint}>Mint</button>
    </>
  );
}

export default MintNow;

The second problem is in this page, as soon as I render the page, I get an error like this:Uncaught ReferenceError: process is not defined at 4043 (:2:13168)

My functions are quite basic for both minting and connecting the wallet. So I really wonder the reason.

TylerH
  • 20,799
  • 66
  • 75
  • 101
breking bed
  • 135
  • 2
  • 14
  • Are you asking about the `walletAddress` and `contract` state that you are logging in the `connectWallet` function? React state updates aren't instantaneous. – Drew Reese Jun 16 '22 at 17:02
  • but both of them have a click event so I expect them to be instantaneous – breking bed Jun 16 '22 at 17:05
  • Why? React state updates are typically batched and deferred. They are processed between render cycles. You can't enqueue a state update and expect it to already be updated on the very next line of code, or even in the scope of the function, or anywhere in the component during the same render cycle. – Drew Reese Jun 16 '22 at 17:08

0 Answers0