0

I cant configure out why it tells me contract is not defined whenever I call the handleClick function.

Heres the code:

import React, {
  createContext,
  useContext,
  useEffect,
  useRef,
  useState,
} from "react";
import { ethers } from "ethers";
import Web3Modal from "web3modal";
import { useNavigate } from "react-router-dom";

import { ABI, ADDRESS } from "../contract";
console.log("ABI from contract");
console.log(ABI);
console.log("address from contract");
console.log(ADDRESS);
console.log("Web3Modal import");
console.log(Web3Modal);


const GlobalContext = createContext();


export const GlobalContextProvider = ({ children }) => {
  const [walletAddress, setWalletAddress] = useState("");
  const [provider, setProvider] = useState("");
  const [contract, setContract] = useState("");
  const [showAlert, setShowAlert] = useState({
    status: false,
    type: "info",
    message: "",
  });


// Set the wallet address to the state
  const updateCurrentWalletAddress = async () => {
    const accounts = await window?.ethereum?.request({
      method: "eth_requestAccounts",
    });


if (accounts) setWalletAddress(accounts[0]);



};


useEffect(() => {
    updateCurrentWalletAddress();


window?.ethereum?.on("accountsChanged", updateCurrentWalletAddress);



}, []);


//* Set the smart contract and provider to the state
  useEffect(() => {
    const setSmartContractAndProvider = async () => {
      const web3Modal = new Web3Modal();
      console.log("web3Modal");
      console.log(web3Modal);
      // ERROR HERE
      const connection = await web3Modal.connect();
      console.log("connection");
      console.log(connection);
      const newProvider = new ethers.providers.Web3Provider(connection);
      const signer = newProvider.getSigner();
      const newContract = new ethers.Contract(ADDRESS, ABI, signer);


  setProvider(newProvider);
  setContract(newContract);
};

setSmartContractAndProvider();



}, []);


useEffect(() => {
    if (showAlert?.status) {
      const timer = setTimeout(() => {
        setShowAlert({
          status: false,
          type: "info",
          message: "",
        });
      }, [5000]);


  return () => clearTimeout(timer);
}



}, [showAlert]);


return (
    <GlobalContext.Provider
      value={{
        contract,
        walletAddress,
        showAlert,
        setShowAlert,
      }}
    >
      {children}
    </GlobalContext.Provider>
  );
};


export const useGlobalContext = () => useContext(GlobalContext);

enter image description here

Im logged in onto the Core.app wallet and Im using the Avalanche testnet, it asks me for login onto the wallet once I open the app, and then the wallet asks me for login, I successfully login and then it doesnt do anything, it doesnt ask me for accept or reject.

enter image description here

Miguel Garcia
  • 1
  • 1

1 Answers1

0

I just came across your question while dealing with the same issue.

After some debugging, I found that the error is related to the implementation itself. I got it working as expected with the following tweaks:

  1. Comment out the calls to updateCurrentWalletAddress();
  2. Call the updateCurrentWalletAddress() function inside the "//* Set the smart contract" section;
...
  useEffect(() => {
    // updateCurrentWalletAddress();  // <- HERE

// window?.ethereum?.on(&quot;accountsChanged&quot;, updateCurrentWalletAddress);  // &lt;- HERE



}, []);


//* Set the smart contract and provider to the state
  useEffect(() => {
    const setSmartContractAndProvider = async () => {
      const web3Modal = new Web3Modal();
      console.log("web3Modal");
      console.log(web3Modal);
      // ERROR HERE
      const connection = await web3Modal.connect();
      console.log("connection");
      console.log(connection);
      const newProvider = new ethers.providers.Web3Provider(connection);
      const signer = newProvider.getSigner();
      const newContract = new ethers.Contract(ADDRESS, ABI, signer);


  setProvider(newProvider);
  setContract(newContract);

  updateCurrentWalletAddress();  // &lt;- HERE
  window?.ethereum?.on(&quot;accountsChanged&quot;, updateCurrentWalletAddress);  // &lt;- HERE
};

setSmartContractAndProvider();



}, []);
...
PhGeek
  • 1
  • 1