0

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 To Do App web3

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

0

Your Answer

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