smart contract undefined in thirdweb with react

Question

0

My application was working properly but now it is not working properly made a crowdfunding platform

this is my context file

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

const StateContext = createContext();

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

    //line 12: storing the address of current wallet
    const address = useAddress();
    console.log(address);
    const connect = useMetamask();

    const publishCampaign = async (form) => {

        try {
            const data = await createCampaign([
                address, //owner
                form.title,
                form.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 parsedCampaigns = 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 parsedCampaigns;
    }

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

this is 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 desiredChainId={ChainId.Mumbai} activeChain ={ChainId.Mumbai}>
        <Router>
            <StateContextProvider>

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

error coming is

This

the contract seems to be working fine on thirdweb but when i fetch it with useContract it is undefined, previously everything was working fine

Answer 1

A few things to try here, first off what versions are you currently running? If you can update everything to the latest version. Also important to note that beginning August 1st of this year, API Keys will be required to access all thirdweb infrastructure, here is a good link to read more on that. https://blog.thirdweb.com/changelog/api-keys-to-access-thirdweb-infra/?utm_source=dc