Changed exports from default to named

frontend/pages/_app.tsx

@@ -1,10 +1,10 @@
-import type { AppProps } from 'next/app';
-import 'styles/globals.css';
-import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
-import 'react-toastify/dist/ReactToastify.css';
+import type { AppProps } from "next/app";
+import "styles/globals.css";
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import "react-toastify/dist/ReactToastify.css";
 
-import Web3Provider from 'src/context/Web3Context';
-import Layout from 'src/context/Layout';
+import { Web3Provider } from "src/context/Web3Context";
+import Layout from "src/context/Layout";
 
 function MyApp({ Component, pageProps }: AppProps) {
 	return (

frontend/src/context/Layout.tsx

@@ -1,4 +1,4 @@
-import NavBar from "./NavBar/NavBar";
+import { NavBar } from "./NavBar/NavBar";
 import Head from "next/head";
 import Image from "next/image";
 

frontend/src/context/NavBar/MetaMask.tsx

@@ -13,7 +13,7 @@ export interface Web3 {
 	setWeb3?: Dispatch<SetStateAction<Web3>>;
 }
 
-const MetaMask = () => {
+export const MetaMask = () => {
 	const { account, setWeb3 } = useContext(Web3Context);
 
 	async function enableEth() {
@@ -96,5 +96,3 @@ const MetaMask = () => {
 		</div>
 	);
 };
-
-export default MetaMask;

frontend/src/context/NavBar/NavBar.tsx

@@ -2,10 +2,10 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 import { ToastContainer } from "react-toastify";
-import MetaMask from "./MetaMask";
-import DarkModeToggle from "src/helpers/DarkModeToggle";
+import { MetaMask } from "./MetaMask";
+import { DarkModeToggle } from "src/helpers/DarkModeToggle";
 
-const NavBar = () => {
+export const NavBar = () => {
 	const { asPath: path } = useRouter();
 
 	return (
@@ -32,5 +32,3 @@ const NavBar = () => {
 		</>
 	);
 };
-
-export default NavBar;

frontend/src/context/Web3Context.tsx

@@ -1,11 +1,11 @@
-import { createContext, useState, useEffect } from "react";
 import type { Web3 } from "./NavBar/MetaMask";
+import { createContext, useState, useEffect } from "react";
 
 declare let window: any;
 
 export const Web3Context = createContext<Web3>(null!);
 
-const Web3ProviderComponent: React.FC = ({ children }) => {
+export const Web3Provider: React.FC = ({ children }) => {
 	const [{ contract, provider, account }, setWeb3] = useState<Web3>({} as Web3);
 
 	// Listens for network changes to reload the page
@@ -52,5 +52,3 @@ const Web3ProviderComponent: React.FC = ({ children }) => {
 		</Web3Context.Provider>
 	);
 };
-
-export default Web3ProviderComponent;

frontend/src/helpers/DarkModeToggle.tsx

@@ -1,19 +1,17 @@
-import { useState } from 'react';
-import { DarkModeSwitch } from 'react-toggle-dark-mode';
+import { useState } from "react";
+import { DarkModeSwitch } from "react-toggle-dark-mode";
 
-const DarkModeToggle = () => {
+export const DarkModeToggle = () => {
 	const [isDarkMode, setDarkMode] = useState(false);
 
 	const toggleDarkMode = (checked: boolean) => {
 		setDarkMode(checked);
 		isDarkMode
-			? document.documentElement.classList.remove('dark')
-			: document.documentElement.classList.add('dark');
+			? document.documentElement.classList.remove("dark")
+			: document.documentElement.classList.add("dark");
 	};
 
 	return (
 		<DarkModeSwitch checked={isDarkMode} onChange={toggleDarkMode} size={35} />
 	);
 };
-
-export default DarkModeToggle;

frontend/src/helpers/Loading.tsx

@@ -1,14 +1,12 @@
-import Loader from 'react-loader-spinner';
+import Loader from "react-loader-spinner";
 
 interface Props {
 	isLoading: boolean;
 }
 
-const Loading = ({ isLoading }: Props) =>
+export const Loading = ({ isLoading }: Props) =>
 	isLoading ? (
 		<div className="flex justify-center">
 			<Loader type="TailSpin" color="#009900" height={100} width={100} />
 		</div>
 	) : null;
-
-export default Loading;

frontend/src/hooks/useAxios.tsx

@@ -10,7 +10,7 @@ type RequestMethods = "GET" | "POST" | "PUT" | "DELETE";
  * @param {object} headers The request headers
  * @returns The result, isLoading, and setIsLoading
  */
-const useAxios = (
+export const useAxios = (
 	method: RequestMethods,
 	url: string,
 	config: AxiosRequestConfig = {},
@@ -50,5 +50,3 @@ const useAxios = (
 
 	return [result, isLoading, setIsLoading] as const;
 };
-
-export default useAxios;

hardhat/contracts/TodoList.sol

@@ -13,8 +13,6 @@ contract TodoList {
 	mapping(uint => Task) public tasks;
 
 	event TaskCreated(uint id, string content, bool completed);
-	event TaskCompleted(uint id);
-	event TaskRemoved(uint id);
 
 	constructor(string memory _content) {
 		createTask(_content);
@@ -28,12 +26,10 @@ contract TodoList {
 
 	function completeTask(uint _taskId) public {
 		tasks[_taskId].completed = true;
-		emit TaskCompleted(_taskId);
 	}
 
 	function removeTask(uint _taskId) public {
 		delete tasks[_taskId];
 		taskCount--;
-		emit TaskRemoved(_taskId);
 	}
 }

hardhat/scripts/deploy.ts

@@ -8,7 +8,7 @@ import hre from "hardhat";
 async function main() {
 	// We get the contract to deploy
 	const TodoList = await hre.ethers.getContractFactory("TodoList");
-	const todoList = await TodoList.deploy("Hello, Hardhat!");
+	const todoList = await TodoList.deploy("Hello, Builders!");
 
 	await todoList.deployed();
 

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "create-ether-dapp",
 	"description": "A template for building Full-Stack Blockchain Dapps using Next.js (React), TypeScript, Tailwind CSS, Hardhat, Solidity, and many more!",
-	"version": "1.1.49",
+	"version": "1.1.5",
 	"author": "Adrian Delgado",
 	"license": "MIT",
 	"bin": "./bin/index.js",