Bridge Web2 to Web3: Building Your First dApp with Next.js and Ethers.js

// SPDX-License-Identifier: MIT pragma solidity ^0.8.0; contract Todo {    struct Task {        uint id;        string content;        bool completed;    }    Task[] public tasks;    uint public taskCount;    event TaskCreated(uint id, string content, bool completed);    event TaskCompleted(uint id, bool completed);    constructor() {        taskCount = 0; // Initialize taskCount    }    function createTask(string memory _content) public {        taskCount++;        tasks.push(Task(taskCount, _content, false));        emit TaskCreated(taskCount, _content, false);    }    function toggleCompleted(uint _id) public {        // Basic validation        require(_id > 0 && _id <= taskCount, "Invalid task ID.");        Task storage task = tasks[_id - 1]; // Array is 0-indexed        task.completed = !task.completed;        emit TaskCompleted(_id, task.completed);    }}

npx hardhat compile

// lib/constants.tsimport TodoArtifact from '../artifacts/contracts/Todo.sol/Todo.json';export const TODO_CONTRACT_ADDRESS = "0x...YourDeployedContractAddress..."; // Replace with your deployed contract address export const TODO_CONTRACT_ABI = TodoArtifact.abi;

// context/Web3Context.tsximport React, { createContext, useState, useEffect, useContext } from 'react';import { ethers } from 'ethers';interface Web3ContextType {  provider: ethers.BrowserProvider | null;  signer: ethers.Signer | null;  account: string | null;  connectWallet: () => Promise<void>;  disconnectWallet: () => void;  chainId: number | null;}const Web3Context = createContext<Web3ContextType | undefined>(undefined);export const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) => {  const [provider, setProvider] = useState<(null);  const [signer, setSigner] = useState<(null);  const [account, setAccount] = useState<string | null>(null);  const [chainId, setChainId] = useState<number | null>(null);  const connectWallet = async () => {    if (window.ethereum) {      try {        const browserProvider = new ethers.BrowserProvider(window.ethereum);        setProvider(browserProvider);        const accounts = await browserProvider.send("eth_requestAccounts", []);        setAccount(accounts[0]);        const connectedSigner = await browserProvider.getSigner();        setSigner(connectedSigner);        const network = await browserProvider.getNetwork();        setChainId(Number(network.chainId));        // Handle account and network changes        window.ethereum.on('accountsChanged', (newAccounts: string[]) => {          setAccount(newAccounts[0] || null);          if (!newAccounts.length) {            disconnectWallet();          }        });        window.ethereum.on('chainChanged', (newChainId: string) => {          setChainId(Number(parseInt(newChainId, 16)));          // Potentially re-initialize provider/signer if needed based on logic        });      } catch (error) {        console.error("Error connecting to wallet:", error);        alert("Failed to connect wallet. Please ensure MetaMask is installed and unlocked.");      }    } else {      alert("MetaMask is not installed. Please install it to use this dApp.");    }  };  const disconnectWallet = () => {    setAccount(null);    setSigner(null);    setProvider(null);    setChainId(null);    // Optional: Remove event listeners if they were attached in a way that needs explicit removal  };  // Auto-connect if already connected (optional, but good UX)  useEffect(() => {    if (window.ethereum && window.ethereum.selectedAddress) {      connectWallet();    }  }, []);  const value = { provider, signer, account, connectWallet, disconnectWallet, chainId };  return <Web3Context.Provider value={value}>{children}</Web3Context.Provider>;};export const useWeb3 = () => {  const context = useContext(Web3Context);  if (context === undefined) {    throw new Error('useWeb3 must be used within a Web3Provider');  }  return context;};

// pages/_app.tsximport type { AppProps } from 'next/app';import { Web3Provider } from '../context/Web3Context';function MyApp({ Component, pageProps }: AppProps) {  return (    <Web3Provider>      <Component {...pageProps} />    </Web3Provider>  );}export default MyApp;

// components/TodoList.tsximport React, { useState, useEffect, useCallback } from 'react';import { useWeb3 } from '../context/Web3Context';import { ethers } from 'ethers';import { TODO_CONTRACT_ADDRESS, TODO_CONTRACT_ABI } from '../lib/constants';interface Task {  id: number;  content: string;  completed: boolean;}const TodoList: React.FC = () => {  const { provider, signer, account, connectWallet } = useWeb3();  const [todoContract, setTodoContract] = useState<(null);  const [tasks, setTasks] = useState<Task[]>([]);  const [newTaskContent, setNewTaskContent] = useState<string>('');  const [loading, setLoading] = useState<boolean>(false);  const [error, setError] = useState<string | null>(null);  // Initialize contract when provider/signer is available  useEffect(() => {    if (provider && signer) {      try {        const contract = new ethers.Contract(TODO_CONTRACT_ADDRESS, TODO_CONTRACT_ABI, signer);        setTodoContract(contract);      } catch (err) {        console.error("Error initializing contract:", err);        setError("Failed to load contract. Check address and ABI.");      }    } else {      setTodoContract(null);      setTasks([]);    }  }, [provider, signer]);  // Fetch tasks  const fetchTasks = useCallback(async () => {    if (todoContract) {      setLoading(true);      setError(null);      try {        const count = await todoContract.taskCount();        const fetchedTasks: Task[] = [];        for (let i = 1; i <= Number(count); i++) {          const task = await todoContract.tasks(i - 1); // Access array directly          fetchedTasks.push({            id: Number(task.id),            content: task.content,            completed: task.completed,          });        }        setTasks(fetchedTasks);      } catch (err) {        console.error("Error fetching tasks:", err);        setError("Failed to fetch tasks from contract.");      } finally {        setLoading(false);      }    }  }, [todoContract]);  // Add new task  const handleAddTask = async (e: React.FormEvent) => {    e.preventDefault();    if (!todoContract || !newTaskContent.trim() || !signer) {      setError("Please connect your wallet and enter a task.");      return;    }    setLoading(true);    setError(null);    try {      const tx = await todoContract.createTask(newTaskContent);      await tx.wait(); // Wait for the transaction to be mined      setNewTaskContent('');      await fetchTasks(); // Refresh tasks    } catch (err: any) {      console.error("Error adding task:", err);      setError(err.reason || "Failed to add task.");    } finally {      setLoading(false);    }  };  // Toggle task completion  const handleToggleCompleted = async (id: number) => {    if (!todoContract || !signer) {      setError("Please connect your wallet.");      return;    }    setLoading(true);    setError(null);    try {      const tx = await todoContract.toggleCompleted(id);      await tx.wait();      await fetchTasks(); // Refresh tasks    } catch (err: any) {      console.error("Error toggling task:", err);      setError(err.reason || "Failed to toggle task status.");    } finally {      setLoading(false);    }  };  // Fetch tasks on component mount and when contract is ready  useEffect(() => {    if (todoContract) {      fetchTasks();    }  }, [todoContract, fetchTasks]);  return (    <div>      <h1>Decentralized To-Do List</h1>      <div>        {account ? (          <p>Connected: <strong>{account.substring(0, 6)}...{account.substring(account.length - 4)}</strong></p>        ) : (          <button onClick={connectWallet}>Connect Wallet</button>        )}      </div>      {error && <p style={{ color: 'red' }}>Error: {error}</p>}      {loading && <p>Loading...</p>}      {account && (        <form onSubmit={handleAddTask}>          <input            type="text"            value={newTaskContent}            onChange={(e) => setNewTaskContent(e.target.value)}            placeholder="Add new task"            disabled={loading}          />          <button type="submit" disabled={loading}>Add Task</button>        </form>      )}      <h2>Tasks</h2>      {tasks.length === 0 && !loading && <p>No tasks found. Add one!</p>}      <ul>        {tasks.map((task) => (          <li key={task.id}>            <input              type="checkbox"              checked={task.completed}              onChange={() => handleToggleCompleted(task.id)}              disabled={loading || !account}            />            <span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>              {task.content}            </span>          </li>        ))}      </ul>    </div>  );};export default TodoList;

// pages/index.tsx (for Pages Router) or app/page.tsx (for App Router)import TodoList from '../components/TodoList';export default function Home() {  return (    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>      <TodoList />    </div>  );}

npm run dev