0

I cant get my contract instance using web3 . I am making todo app using web3 . I cant get my contract instance in js file . I am new to web3 development and everyday I am trying my best improve my self .

This is my todolistApp.js file

import React, { useEffect, useState } from "react";

import { ethers } from "ethers";
import Web3 from "web3";

// internal imports

import { toDoListABI, toDoListAddress } from "./constants";

const fetchContract = (signerorProvider) =>
  new ethers.Contract(toDoListAddress, toDoListABI, signerorProvider);
export const ToDoListContext = React.createContext();
export const ToDoListProvider = ({ children }) => {
  const [cuurentAccount, setCurrentAccount] = useState("");
  const [error, setError] = useState("");
  const [allToDoList, setAllToDoList] = useState([]);
  const [myList, setMyList] = useState([]);
  const [allAdress, setAllAddress] = useState([]);
  const [provider, setProvider] = useState(null);

  //connecting metamask
  const ifwalletisconnected = async () => {
    if (!window.ethereum) return setError("Please install metamask");
    const account = await window.ethereum.request({ method: "eth_accounts" });
    //console.log(account[0]);
    if (account.length) {
      setCurrentAccount(account[0]);
      console.log(account[0]);
      // console.log("Heloo");
    } else {
      setError("Please install metamask &connect and reload");
    }
  };

  //connect wallet
  //Requesting user to connect their wallet
  const connectwallet = async () => {
    if (!window.ethereum) return setError("Please install metamask");
    const account = await window.ethereum.request({
      method: "eth_requestAccounts",
    });

    setCurrentAccount(account[0]);
  };
  //connecting with smar contract
  const connectContract = async () => {
   // console.log(toDoListABI, toDoListAddress);

    window.web3 = await new Web3(window.ethereum);
    window.contract = await new web3.eth.Contract(toDoListABI, toDoListAddress);

    console.log(window.contract);
  };
  // Interacting with smart contract

  const toDolist = async (message) => {
    try {
      // coonecting with smart contract
      // Here setting up the stage
      // One kind of like the making connection with the DBMS in MYSQL
      //   const web3Modal = new Web3Modal();

      //   const connection = await web3Modal.connect();

      //   const provider = new ethers.providers.Web3Provider(connection);

      //   const signer = provider.getSigner();

      //   const contract = await fetchContract(signer);

      //   const createList =await contract.createList(message);
      //   createList.wait();

      window.addEventListener("load", async () => {
        if (window.ethereum) {
          const provider = new ethers.providers.Web3Provider(window.ethereum);
          console.log(provider);
          // Rest of your code
        } else {
          console.error(
            "No Ethereum provider found. Please install MetaMask or another compatible wallet."
          );
        }
      });

      // const provider = new ethers.providers.Web3Provider(window.ethereum);

      const signer = await provider.getSigner();
      const contract = new ethers.Contract(
        toDoListABI,
        toDoListAddress,
        signer
      );

      console.log(contract);
    } catch (error) {
      setError("Something wrong with creating list ");
    }
  };

  const getToDoList = async () => {
    try {
    } catch (error) {
      setError("Something wrong ");
    }
  };

  return (
    <ToDoListContext.Provider
      value={{
        ifwalletisconnected,
        toDolist,
        connectwallet,
        getToDoList,
        connectContract,
      }}
    >
      {children}
    </ToDoListContext.Provider>
  );
};

const ToDolistApp = () => {
  return <div></div>;
};

export default ToDolistApp;

Here in this code I am using this function to make connection with my smart contract

  const connectContract = async () => {
   // console.log(toDoListABI, toDoListAddress);

    window.web3 = await new Web3(window.ethereum);
    window.contract = await new web3.eth.Contract(toDoListABI, toDoListAddress);

    console.log(window.contract);
  };

I cant see my contract instance on console

this is my package.json file

{
  "name": "todo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "ethers": "^6.8.0",
    "next": "13.5.6",
    "react": "^18",
    "react-dom": "^18",
    "web3": "^4.2.0",
    "web3modal": "^1.9.12"
  },
  "devDependencies": {
    "@nomicfoundation/hardhat-toolbox": "^3.0.0",
    "hardhat": "^2.18.2"
  }
}

Also I get this error

Server Error Error: Directory import 'D:\todo\node_modules\web3-eth-abi\lib\esm\coders\base' is not supported resolving ES modules imported from D:\todo\node_modules\web3-eth-abi\lib\esm\coders\encode.js

This error happened while generating the page. Any console logs will be displayed in the terminal window.

I tried to unistall and install again my web3

I have been stuck with this problem for hours . I am new to web3 ,I dont know where I am going wrong

1 Answer 1

0

I think there might be a problem with a import statement.
In your todolistApp.js file, there is an import statement.

import { toDoListABI, toDoListAddress } from "./constants";

I think, it should be "./constants.js" (or likes "./constants/index.js"). This means that you should secify file name and add file extension ".js".

From MDN documents, a module-name parameter of import statement has been introduced as follows;

The module to import from. The evaluation of the specifier is host-specified. This is often a relative or absolute URL to the .js file containing the module. In Node, extension-less imports often refer to packages in node_modules. Certain bundlers may permit importing files without extensions; check your environment. Only single quoted and double quoted Strings are allowed.

references:
import - JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Modules: ECMAScript modules | Node.js v21.1.0 documentation
https://nodejs.org/api/esm.html#esm_mandatory_file_extensions

2
  • Thanks for your answer ,but it is not the actual problem
    – Shorna
    Oct 25, 2023 at 17:48
  • I'm sorry I couldn't help you. Oct 26, 2023 at 9:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.