Getting error for publishCampaign - `Object.mutationFn`

[A-Pradeep]

Hi, facing issue at publishCampaign logic.

import React, { useContext, createContext } from "react";
import {
  useAddress,
  useMetamask,
  useContract,
  useContractWrite,
} from "@thirdweb-dev/react";
import { ethers } from "ethers";

const StateContext = createContext();
export const StateContextProvider = ({ children }) => {
  const { contract } = useContract(
    "0xxxxxxxxxxxxx"
  );
  const { mutateAsync: createCampaign } = useContractWrite(
    contract,
    "createCampaign"
  );

  const address = useAddress();
  const connect = useMetamask();

  const publishCampaign = async (form) => {
    try {
      const data = await createCampaign([
        address,
        form.title,
        form.description,
        form.target,
        new Date(form.deadline).getTime(),
        form.image,
      ]);
      console.log("Contract Call success", data);
    } catch (error) {
      console.log("Contract Call failure");
    }
  };

Using the above logic,

Passing value as below

{
    "name": "PS",
    "title": "Help Earth",
    "description": "Help Earth",
    "target": {
        "type": "BigNumber",
        "hex": "0x016345785d8a0000"
    },
    "deadline": 1677110400000,
    "image": "https://cdn.pixabay.com/photo/2023/01/31/05/59/zebra-7757193_1280.jpg"
}

Not sure about the way target value is passing. But getting error as

react_devtools_backend.js:2655 TypeError: Cannot read properties of undefined (reading 'call')
    at Object.mutationFn (index-aed60ee9.esm.js:1177:21)
    at Object.fn (mutation.ts:177:31)
    at run (retryer.ts:145:31)
    at createRetryer (retryer.ts:202:5)
    at executeMutation (mutation.ts:172:22)
    at Mutation.execute (mutation.ts:214:26)
    at async publishCampaign (index.jsx:26:20)
    at async CreateCampaign.jsx:32:9

Contract Call failure

Trying to solve but not able to understand the main issue. If anyone face same issue / solved, kindly let me know how to solve.

[skiran017]

can you also paste smart contract code to createCamapigns, as well as frontend code to getCampaigns

[A-Pradeep]

Hi @skiran017 Thanks for replying.

Here is the following solidity code for creating Campaign

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.9;

contract CrowdFunding {
    struct Campaign {
        address owner;
        string title;
        string description;
        uint256 target;
        uint256 deadline;
        uint256 amountCollected;
        string image;
        address[] donators;
        uint256[] donations;
    }
    mapping(uint256 => Campaign) public campaigns;
    uint256 public numberOfCampaigns = 0;

    // Create campaign
    function createCampaign(
        address _owner,
        string memory _title,
        string memory _description,
        uint256 _target,
        uint256 _deadline,
        string memory _image
    ) public returns (uint256) {
        Campaign storage campaign = campaigns[numberOfCampaigns];

        // Check
        require(
            campaign.deadline < block.timestamp,
            "Deadline should be future date."
        );

        campaign.owner = _owner;
        campaign.title = _title;
        campaign.description = _description;
        campaign.target = _target;
        campaign.deadline = _deadline;
        campaign.image = _image;
        campaign.amountCollected = 0;

        numberOfCampaigns++;

        return numberOfCampaigns - 1;
    }

Since the campaign itself is not creating, so I've not yet started for getting the campaigns.

Kindly, Let me know if anything I have missed or made a mistake.

[skiran017]

@A-Pradeep Smart contract code looks good, can you paste in the functions from context, the complete index.jsx what you have so far would be helpful

[skiran017]

you can try to replace your code with this

export const StateContextProvider = ({ children }) => {
  const { contract } = useContract('//your contract address');
  const { mutateAsync: createCampaign } = useContractWrite(contract, 'createCampaign');

  const address = useAddress();
  const connect = useMetamask();

  const publishCampaign = async (form) => {
    try {
      const data = await createCampaign([
        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;
  }

// other functions..
  .....
  }

[A-Pradeep]

@skiran017 I'm facing issue when creating the campaign itself, not for fetching the campaigns.

reference https://youtu.be/BDCT6TYLYdI As soon he clicks, metamask pop-up, but for me getting error as mentioned in this thread.

[skiran017]

i am sure the error is in the client side, as we can see the publishCampaign failed and it logged the error from catch block, if you have the code pushed to github, do share the link i can take a look:))

[A-Pradeep]

@skiran017 Even I hope its on the client side, Sure ill arrange a repo for this. If you have tried this workflow, can you tell me what data needs to be passed to the publishCampaign function.

Im passing something like this,

{
    "name": "PS",
    "title": "Help Earth",
    "description": "Help Earth",
    "target": {
        "type": "BigNumber",
        "hex": "0x016345785d8a0000"
    },
    "deadline": 1677110400000,
    "image": "https://cdn.pixabay.com/photo/2023/01/31/05/59/zebra-7757193_1280.jpg"
}

somewhere Im not sure the format of target data is passing. So is this above data/value Is valid or needs to be changed ?

[promise-dash]

Facing the same problem @skiran017 replaced my code with yours but still has the same issue.

[promise-dash]

Hi @A-Pradeep have you solved the issue....if yes then please share the solution.

[A-Pradeep]

@promise-dash Hey, tried everything and couldn't solve the issue.

[A-Pradeep]

@promise-dash Even you are facing exact same issue / error. Or related to this ?

[promise-dash]

@promise-dash Even you are facing exact same issue / error. Or related to this ?

Yes, it's been 3 days now I have been trying to solve it, but no progress.

[A-Pradeep]

@promise-dash Same here. 😅 But others are not facing this issue. Not sure, whether the issue on the contract side or the client side.

[Gola-k]

does anyone found the solution to this problem, I am also facing the same issue

[Gola-k]

@A-Pradeep did you find the solution

[promise-dash]

@A-Pradeep finally it worked, I think there was a problem in the deployment process. Cuz I deployed the same contract once again on third-web and this time it worked.😃

[promise-dash]

Does anyone have any idea how to get more Goerli ETH cuz Goerli Faucet is just giving 0.02/day and it's not enough to test the app. @A-Pradeep @skiran017 @Gola-k

[Gola-k]

Does anyone have any idea how to get more Goerli ETH cuz Goerli Faucet is just giving 0.02/day and it's not enough to test the app. @A-Pradeep @skiran017 @Gola-k

I used to take 0.2 eth everyday.

[Gola-k]

@A-Pradeep finally it worked, I think there was a problem in the deployment process. Cuz I deployed the same contract once again on third-web and this time it worked.smiley

@A-Pradeep @promise-dash I am facing a major deadline and I am still stuck on my above mentioned error, after so many talks I believe there is no problem in my code and it's some problem in mutation or I don't know what it is should I start again by updating node and other libraries, can you help me by sharing your repository link or code of index.js and creating campaign

[Gola-k]

There is always this problem of createCampaign required 6 argument but I have provided 0. I have reviewed my code many times but can't find anything even the values of all the arguments of the function are available on the console log

[A-Pradeep]

@A-Pradeep finally it worked, I think there was a problem in the deployment process. Cuz I deployed the same contract once again on third-web and this time it worked.😃

Hey @promise-dash happy that it worked for you ! Even, I've tried and still facing same issue. But once published the contract to ThirdWeb, I noticed for me it was showing Goerli (ETH) rather than Goerli (GOR) as showing in the YouTube video. So, when you deployed, you saw same as in video or the other one which I mentioned.

[A-Pradeep]

@Gola-k can you create a new issue, as it would be easy to share code and discuss related to that rather than discussing in this thread. Once issue opened, ping me if possible and I'll try to look at it asap.

[Gola-k]

@Gola-k can you create a new issue, as it would be easy to share code and discuss related to that rather than discussing in this thread. Once issue opened, ping me if possible and I'll try to look at it asap.

I will surely do that tomorrow morning.

[Ahmedd3ly]

@A-Pradeep @Gola-k

I was facing the same arguments issue and found the solution by randomly reading through third web documentation here https://portal.thirdweb.com/react/react.usecontractwrite.

All you need to do is add "{args: [arg1, arg] }" when calling your function. so it would be something like:

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

}

Hope this helps.

[Gola-k]

Thanks @Ahmedd3ly this solution worked ☺️

[Gola-k]

can you please help me solve this error @Ahmedd3ly @A-Pradeep https://github.com/adrianhajdin/project_crowdfunding/issues/31#issue-1657785342

[A-Pradeep]

@Ahmedd3ly Thanks for your time and code snippet. But still no luck for me, as im facing same issue even now. Even tried some scratch but no use. Seems like the issue doesn't want to go not matter what 😅

[A-Pradeep]

can you please help me solve this error @Ahmedd3ly @A-Pradeep #31 (comment)

Looking into it...

[A-Pradeep]

Finally solved the issue. changed the desiredChainID to ``

`` If anyone thinks this is not the correct way, kindly let me know. Also, Thanks to @Ahmedd3ly for code snippet. which solved the issue I got encountered as soon the above issue is solved.

[Gola-k]

@A-Pradeep @promise-dash @Ahmedd3ly @skiran017 @Gola-k Please look into this https://github.com/adrianhajdin/project_crowdfunding/issues/31#issuecomment-1500175613