Changing to Sepolia Testnet

README.md

@@ -1,4 +1,19 @@
 # Build and Deploy a Web3 Crowdfunding Platform (Kickstarter) As Your First Blockchain Application
+
 ![Crowdfunding](https://i.ibb.co/k6pj0Qt/htum-6.png)
 
 ### Launch your development career with project-based coaching on [JS Mastery Pro](https://www.jsmastery.pro).
+
+# My Notes
+
+This project was very helpful to me in my smart contract journey and it's a pleasure contributing to it.
+
+I will start with changing the network from Goerli to sepolia testnet as Goerli now requires you to have real ETH to use it.
+
+### Steps for changing to Sepolia Testnet
+
+- Update the hardhat.config.js file and deploy - `npx thirdweb deploy`
+- Copy the contract address on thirdweb and update it on `client/context/index.js`
+- Update `main.jsx`.
+
+See more on how to set-up [here](https://thirdweb.com/sepolia)

client/package.json

@@ -9,8 +9,8 @@
     "deploy": "yarn build && npx thirdweb@latest upload dist"
   },
   "dependencies": {
-    "@thirdweb-dev/react": "^3",
-    "@thirdweb-dev/sdk": "^3",
+    "@thirdweb-dev/react": "^3.14.28",
+    "@thirdweb-dev/sdk": "^3.10.47",
     "ethers": "^5.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

client/src/context/index.jsx

@@ -1,101 +1,116 @@
-import React, { useContext, createContext } from 'react';
+import React, { useContext, createContext } from "react";
 
-import { useAddress, useContract, useMetamask, useContractWrite } from '@thirdweb-dev/react';
-import { ethers } from 'ethers';
-import { EditionMetadataWithOwnerOutputSchema } from '@thirdweb-dev/sdk';
+import {
+  useAddress,
+  useContract,
+  useMetamask,
+  useContractWrite,
+} from "@thirdweb-dev/react";
+import { ethers } from "ethers";
+import { EditionMetadataWithOwnerOutputSchema } from "@thirdweb-dev/sdk";
 
 const StateContext = createContext();
 
 export const StateContextProvider = ({ children }) => {
-  const { contract } = useContract('0xf59A1f8251864e1c5a6bD64020e3569be27e6AA9');
-  const { mutateAsync: createCampaign } = useContractWrite(contract, 'createCampaign');
+  const { contract } = useContract(
+    "0xea3cdD8E915f1C4B51785918A9765C99ccA4621a"
+  );
+  const { mutateAsync: createCampaign } = useContractWrite(
+    contract,
+    "createCampaign"
+  );
 
   const address = useAddress();
   const connect = useMetamask();
 
   const publishCampaign = async (form) => {
     try {
       const data = await createCampaign({
-				args: [
-					address, // owner
-					form.title, // title
-					form.description, // description
-					form.target,
-					new Date(form.deadline).getTime(), // deadline,
-					form.image,
-				],
-			});
-
-      console.log("contract call success", data)
+        args: [
+          address, // owner
+          form.title, // title
+          form.description, // description
+          form.target,
+          new Date(form.deadline).getTime(), // deadline,
+          form.image,
+        ],
+      });
+
+      console.log("contract call success", data);
     } catch (error) {
-      console.log("contract call failure", error)
+      console.log("contract call failure", error);
     }
-  }
+  };
 
   const getCampaigns = async () => {
-    const campaigns = await contract.call('getCampaigns');
+    const campaigns = await contract.call("getCampaigns");
 
     const parsedCampaings = campaigns.map((campaign, i) => ({
       owner: campaign.owner,
       title: campaign.title,
       description: campaign.description,
       target: ethers.utils.formatEther(campaign.target.toString()),
       deadline: campaign.deadline.toNumber(),
-      amountCollected: ethers.utils.formatEther(campaign.amountCollected.toString()),
+      amountCollected: ethers.utils.formatEther(
+        campaign.amountCollected.toString()
+      ),
       image: campaign.image,
-      pId: i
+      pId: i,
     }));
 
     return parsedCampaings;
-  }
+  };
 
   const getUserCampaigns = async () => {
     const allCampaigns = await getCampaigns();
 
-    const filteredCampaigns = allCampaigns.filter((campaign) => campaign.owner === address);
+    const filteredCampaigns = allCampaigns.filter(
+      (campaign) => campaign.owner === address
+    );
 
     return filteredCampaigns;
-  }
+  };
 
   const donate = async (pId, amount) => {
-    const data = await contract.call('donateToCampaign', [pId], { value: ethers.utils.parseEther(amount)});
+    const data = await contract.call("donateToCampaign", [pId], {
+      value: ethers.utils.parseEther(amount),
+    });
 
     return data;
-  }
+  };
 
   const getDonations = async (pId) => {
-    const donations = await contract.call('getDonators', [pId]);
+    const donations = await contract.call("getDonators", [pId]);
     const numberOfDonations = donations[0].length;
 
     const parsedDonations = [];
 
-    for(let i = 0; i < numberOfDonations; i++) {
+    for (let i = 0; i < numberOfDonations; i++) {
       parsedDonations.push({
         donator: donations[0][i],
-        donation: ethers.utils.formatEther(donations[1][i].toString())
-      })
+        donation: ethers.utils.formatEther(donations[1][i].toString()),
+      });
     }
 
     return parsedDonations;
-  }
-
+  };
 
   return (
     <StateContext.Provider
-      value={{ 
+      value={{
         address,
         contract,
         connect,
         createCampaign: publishCampaign,
         getCampaigns,
         getUserCampaigns,
         donate,
-        getDonations
+        getDonations,
       }}
     >
       {children}
     </StateContext.Provider>
-  )
-}
+  );
+};
 
-export const useStateContext = () => useContext(StateContext);
+export const useStateContext = () => useContext(StateContext);

client/src/main.jsx

@@ -1,20 +1,25 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { ChainId, ThirdwebProvider } from '@thirdweb-dev/react';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter as Router } from "react-router-dom";
+// import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
+import { Sepolia } from "@thirdweb-dev/chains";
+import { ThirdwebProvider } from "@thirdweb-dev/react";
 
-import { StateContextProvider } from './context';
-import App from './App';
-import './index.css';
+import { StateContextProvider } from "./context";
+import App from "./App";
+import "./index.css";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 
 root.render(
-  <ThirdwebProvider desiredChainId={ChainId.Goerli}> 
+  <ThirdwebProvider
+    activeChain={Sepolia}
+    clientId="2eeae8e874f0c66c7fa1ead710d316ee"
+  >
     <Router>
       <StateContextProvider>
         <App />
       </StateContextProvider>
     </Router>
-  </ThirdwebProvider> 
-)
+  </ThirdwebProvider>
+);