Changing to Sepolia Testnet

[kihiuFrank]

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

[DharaneeswaranR]

Made all these changes but getting this error:

contract call failure TypeError: Cannot read properties of undefined (reading 'call') at Object.mutationFn (index-dd0e7329.esm.js:1172:23) at Object.fn (mutation.ts:177:31) at run (retryer.ts:145:31) at createRetryer (retryer.ts:201:5) at executeMutation (mutation.ts:172:22) at Mutation.execute (mutation.ts:214:26) at async publishCampaign (index.jsx:18:20) at async CreateCampaign.jsx:33:9

How to fix it?

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

const StateContext = createContext();

export const StateContextProvider = ({ children }) => {
  const { contract } = useContract('0x3E8a3169507EB2a38f7242a17bfeA3276ABe96a9');
  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)
    } catch (error) {
      console.log("contract call failure", error)
    }
  }

  const getCampaigns = async () => {
    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()),
      image: campaign.image,
      pId: i
    }));

    return parsedCampaings;
  }

  const getUserCampaigns = async () => {
    const allCampaigns = await getCampaigns();

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

    return data;
  }

  const getDonations = async (pId) => {
    const donations = await contract.call('getDonators', [pId]);
    const numberOfDonations = donations[0].length;

    const parsedDonations = [];

    for(let i = 0; i < numberOfDonations; i++) {
      parsedDonations.push({
        donator: donations[0][i],
        donation: ethers.utils.formatEther(donations[1][i].toString())
      })
    }

    return parsedDonations;
  }

  return (
    <StateContext.Provider
      value={{ 
        address,
        contract,
        connect,
        createCampaign: publishCampaign,
        getCampaigns,
        getUserCampaigns,
        donate,
        getDonations
      }}
    >
      {children}
    </StateContext.Provider>
  )
}

export const useStateContext = () => useContext(StateContext);

[kihiuFrank]

@DharaneeswaranR share your repo.

[shivam5643]

Hello, i had changed the goerli to sepolia testnet but i am getting an issue (Could not resolve metadata for contract at 0x4eAf929253e7c455815EC57500F866845D220a30) .why i am getting this??

this my main.jsx 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 { StateContextProvider } from "./context"; import App from "./App"; import './index.css'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render( <ThirdwebProvider activeChain={Sepolia}

)

//this is my index.jsx 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';

const StateContext = createContext();

export const StateContextProvider = ({ children }) => { const { contract } = useContract('0x7c2db7D1218180763aB91E54821EFB464b996e39'); 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)
} catch (error) {
  console.log("contract call failure", error)
}

}

const getCampaigns = async () => { 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()),
  image: campaign.image,
  pId: i
}));

return parsedCampaings;

}

const getUserCampaigns = async () => { const allCampaigns = await getCampaigns();

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

return data;

}

const getDonations = async (pId) => { const donations = await contract.call('getDonars', [pId]); const numberOfDonations = donations[0].length;

const parsedDonations = [];

for(let i = 0; i < numberOfDonations; i++) {
  parsedDonations.push({
    donator: donations[0][i],
    donation: ethers.utils.formatEther(donations[1][i].toString())
  })
}

return parsedDonations;

}

return ( <StateContext.Provider value={{ address, contract, connect, createCampaign: publishCampaign, getCampaigns, getUserCampaigns, donate, getDonations }}

{children} </StateContext.Provider> ) }

export const useStateContext = () => useContext(StateContext);

[kihiuFrank]

Hello @shivam5643 First, you need to make sure your question is well formatted.

Secondly, I had handled this issue before. Check out this answer and upvote if helpful. https://stackoverflow.com/a/76622874

[shivam5643]

Sorry for my inconvenience for not well formatted. I had seen that answer previously on stack overflow and I do the same..but couldn't resolve my bug. Please help me.

On Fri, 8 Sept, 2023, 4:29 pm Frankline Kihiu, @.***> wrote:

Hello @shivam5643 https://github.com/shivam5643 First, you need to make sure your question is well formatted.

Secondly, I had handled this issue before. Check out this answer and upvote if helpful. https://stackoverflow.com/a/76622874

— Reply to this email directly, view it on GitHub https://github.com/adrianhajdin/project_crowdfunding/pull/65#issuecomment-1711482003, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXW2H24TVB7J3IYNWSIJLRDXZL3CLANCNFSM6AAAAAA3IFHKHM . You are receiving this because you were mentioned.Message ID: @.***>

[shivam5643]

This is my hardhat.config.js

solidity: {
    version: "0.8.17",
  defaultNetwork:'sepolia',
 networks:{
        hardhat:{},
        sepolia: {
          url: "https://sepolia.rpc.thirdweb.com",
          accounts: [`0x${process.env.PRIVATE_KEY}`],
    }

[shivam5643]

index.jsx

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

const StateContext = createContext();

export const StateContextProvider = ({ children }) => {
  const { contract } = useContract('0x7c2db7D1218180763aB91E54821EFB464b996e39');
  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)
    } catch (error) {
      console.log("contract call failure", error)
    }
  }

  const getCampaigns = async () => {
    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()),
      image: campaign.image,
      pId: i
    }));

    return parsedCampaings;
  }

  const getUserCampaigns = async () => {
    const allCampaigns = await getCampaigns();

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

    return data;
  }

  const getDonations = async (pId) => {
    const donations = await contract.call('getDonars', [pId]);
    const numberOfDonations = donations[0].length;

    const parsedDonations = [];

    for(let i = 0; i < numberOfDonations; i++) {
      parsedDonations.push({
        donator: donations[0][i],
        donation: ethers.utils.formatEther(donations[1][i].toString())
      })
    }

    return parsedDonations;
  }

  return (
    <StateContext.Provider
      value={{ 
        address,
        contract,
        connect,
        createCampaign: publishCampaign,
        getCampaigns,
        getUserCampaigns,
        donate,
        getDonations
      }}
    >
      {children}
    </StateContext.Provider>
  )
}

export const useStateContext = () => useContext(StateContext);

mains.jsx

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 { StateContextProvider } from "./context";
import App from "./App";
import './index.css'

 const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <ThirdwebProvider activeChain={Sepolia}

  >
    <Router>
      <StateContextProvider>
        <App />
      </StateContextProvider>
    </Router>
  </ThirdwebProvider>
)

[shivam5643]

when i am trying to create any campaign then after that it shows me this error.

contract call failure TypeError: Cannot read properties of undefined (reading 'call') at Object.mutationFn (useTransactions-3678a51f.browser.esm.js:2926:21) at Object.fn (mutation.ts:179:31) at run (retryer.ts:147:31) at createRetryer (retryer.ts:204:5) at executeMutation (mutation.ts:174:22) at Mutation.execute (mutation.ts:216:26) at async publishCampaign (index.jsx:18:20) at async CreateCampaign.jsx:32:9

what to do i am not getting that?

[kihiuFrank]

@shivam5643 The current error is different from the one above.

This time, it's because you need to polyfill the Node globals and modules to enable the web3 import to run in the browser.

First, Install the package as a dev dependency.

npm install --save-dev vite-plugin-node-polyfills

then,

Change your vite.config.js to look something like;

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { nodePolyfills } from "vite-plugin-node-polyfills";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), nodePolyfills()],
  define: {
    "process.env": {},
  },
});

[shivam5643]

Is my hardhat.config.js, main.jsx and index.jsx are fine?

On Fri, 8 Sept, 2023, 7:28 pm Frankline Kihiu, @.***> wrote:

@shivam5643 https://github.com/shivam5643 The current error is different from the one above.

This time, it's because you need to polyfill the Node globals and modules to enable the web3 import to run in the browser.

First, Install the package as a dev dependency.

npm install --save-dev vite-plugin-node-polyfills

then,

Change your vite.config.js to look something like;

import react from @.***/plugin-react";import { defineConfig } from "vite";import { nodePolyfills } from "vite-plugin-node-polyfills"; // https://vitejs.dev/config/export default defineConfig({ plugins: [react(), nodePolyfills()], define: { "process.env": {}, },});

— Reply to this email directly, view it on GitHub https://github.com/adrianhajdin/project_crowdfunding/pull/65#issuecomment-1711718548, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXW2H22OXSLF5YWCGEXKBDTXZMQARANCNFSM6AAAAAA3IFHKHM . You are receiving this because you were mentioned.Message ID: @.***>

[kihiuFrank]

Is my hardhat.config.js, main.jsx and index.jsx are fine? … On Fri, 8 Sept, 2023, 7:28 pm Frankline Kihiu, @.> wrote: @shivam5643 https://github.com/shivam5643 The current error is different from the one above. This time, it's because you need to polyfill the Node globals and modules to enable the web3 import to run in the browser. First, Install the package as a dev dependency. npm install --save-dev vite-plugin-node-polyfills then, Change your vite.config.js to look something like; import react from @./plugin-react";import { defineConfig } from "vite";import { nodePolyfills } from "vite-plugin-node-polyfills"; // https://vitejs.dev/config/export default defineConfig({ plugins: [react(), nodePolyfills()], define: { "process.env": {}, },}); — Reply to this email directly, view it on GitHub <#65 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXW2H22OXSLF5YWCGEXKBDTXZMQARANCNFSM6AAAAAA3IFHKHM . You are receiving this because you were mentioned.Message ID: @.***>

Did it work?

[shivam5643]

@kihiuFrank No it didn't work

[shivam5643]

This is the error which i still getting

[shivam5643]

Firstly.. while opening the project, I am getting the error of (couldn't resolve metadat.....) and second.. when I am creating a new campaign then I am getting this error

contract call failure TypeError: Cannot read properties of undefined (reading 'call') at Object.mutationFn (useTransactions-3678a51f.browser.esm.js:2926:21) at Object.fn (mutation.ts:179:31) at run (retryer.ts:147:31) at createRetryer (retryer.ts:204:5) at executeMutation (mutation.ts:174:22) at Mutation.execute (mutation.ts:216:26) at async publishCampaign (index.jsx:18:20) at async CreateCampaign.jsx:32:9

[kihiuFrank]

Drop your repo

[shivam5643]

This is my repo link. https://github.com/shivam5643/Blockchain_crowdfunding

Message ID: @.*** com>

[shivam5643]

Does you get any solution?

On Fri, 8 Sept, 2023, 9:19 pm shivam kumar, @.***> wrote:

This is my repo link. https://github.com/shivam5643/Blockchain_crowdfunding

Message ID: @.*** .com>

[kihiuFrank]

Will look at it today

[shivam5643]

Had you seen that??🤔

On Mon, 11 Sept, 2023, 1:28 pm Frankline Kihiu, @.***> wrote:

Will look at it today

— Reply to this email directly, view it on GitHub https://github.com/adrianhajdin/project_crowdfunding/pull/65#issuecomment-1713364544, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXW2H2Y3AAYMHTN5JS74O5LXZ3AEDANCNFSM6AAAAAA3IFHKHM . You are receiving this because you commented.Message ID: @.***>

[shivam5643]

Had you get any solution for this..? I'm stuck at this point.

On Tue, 12 Sept, 2023, 11:15 pm shivam kumar, @.***> wrote:

Had you seen that??🤔

On Mon, 11 Sept, 2023, 1:28 pm Frankline Kihiu, @.***> wrote:

Will look at it today

— Reply to this email directly, view it on GitHub https://github.com/adrianhajdin/project_crowdfunding/pull/65#issuecomment-1713364544, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXW2H2Y3AAYMHTN5JS74O5LXZ3AEDANCNFSM6AAAAAA3IFHKHM . You are receiving this because you commented.Message ID: @.***>

[kihiuFrank]

Hello @shivam5643 Please share your thirdweb dashboard link.

[kihiuFrank]

Hello @shivam5643 Please share your thirdweb dashboard link.

Or, you can test this for yourself. It's quite easy.

Get the contract abi (available on the dashboard/contracts/the contract /sources).

Also I have created a pull request on your project. Check it out. Let me know if it will work.

[kihiuFrank]

@shivam5643 For more info check the updated answer here: https://stackoverflow.com/a/76622874/10512717