I cant log out my contract in a project

Smart Contracts
1

I am building web3 Todo app . I am building it using Next Js . I am trying to console log out my contract on console . So I have just build my smart contract . Now trying to make connection with my smart contract using web3 modal .I am new to web3 development and trying my best to improve myself everyday.

Here is my project github link (https://github.com/1804049Shorna/todo))

The main here is This is TodoApp.js file

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

import Web3Modal from 'web3modal';

import { ethers } from "ethers";

// 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([]);

    //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]);
     }

     // Interacting with smart contract
     
     const  toDolist= async()=>{
       // console.log("Heloo");
       
       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);
            
         console.log(contract);
           
        } catch(error){
            setError("Something wrong with creating list ")
        }

     }

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

}

const ToDolistApp =()=>{

    return (
        <div></div>
    )
}

export default ToDolistApp;

In this code section

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);

This section works fine till connection but after that if I want to console log anything I dont get anything on console

Here some of my file
Index.js

import React,{useState,useEffect,useContext} from "react";
import {Mdverified} from 'react';


//internal import 

import { ToDoListContext } from "@/context/ToDolistApp";


const Home=()=>{
   const{ifwalletisconnected,toDolist}=useContext(ToDoListContext);
   toDolist();
    useEffect (()=>{
        
        ifwalletisconnected();
        toDolist();
     },[])


  return (
    <div>Home</div>
  )
}

export default Home;

Here is App.js file

import '@/styles/globals.css'

//internal impot 
import {ToDoListProvider} from '../context/ToDolistApp';

const MyApp = ({ Component, pageProps }) => (

  <ToDoListProvider>
    <div> 
      <Component {...pageProps} />;
      </div>
    
  </ToDoListProvider>
  
);

export default MyApp;

I have been stuck with this problem for couple days ,tried many solutions ,still cant figure out where I am going wrong

2

For starters, what do you get if you console.log("test") here?

1 Like
3

I get nothing on my console ,for this

4

So this description is incorrect:

Please check exactly how far execution goes here (it obviously doesn't reach the last line, for example).

You can do this, for example, by adding a console.log statement after every line.

5

I can console log out till connection,but for provider I see nothing on my console ,I tried different solution for provider still got nothing on my console

6

So put that line inside a try clause, and print the error-message inside a catch clause.

7

I did try that , still cant get anything for contract

8

Not "for contract", for the first line which you have detected as a line which you cannot print after!

P.S.: It appears that your problem is not a lack of web3 experience, but a lack of JavaScript experience.

9

I got your point
I was wondering if am not using the web3modal right , I tried different option to connect with smart contract , and I cant make the connection right with my smart contract

May be I couldn't make my problem statement clear ,sorry for that

10

In short, find the FIRST line which you cannot console.log after, put that line inside a try/catch clause and print the error-message (or simply put that entire code-section inside a try/catch clause and print the error-message).