mutation.ts:261 TypeError: Cannot read properties of undefined (reading 'length') at toUtf8Bytes (utf8.ts:210:29) at StringCoder.encode (string.ts:19:37) at array.ts:62:19 at Array.forEach (<anonymous>) at pack (array.ts:54:12) at TupleCoder.encode (tuple.ts:54:16) at AbiCoder.encode (abi-coder.ts:111:15) at Interface._encodeParams (interface.ts:323:31) at Interface.encodeFunctionData (interface.ts:378:18) at ContractWrapper.formatError (watchTransactions-b1ddcccb.browser.esm.js:2866:46)

Full error:

mutation.ts:261 TypeError: Cannot read properties of undefined (reading 'length')
    at toUtf8Bytes (utf8.ts:210:29)
    at StringCoder.encode (string.ts:19:37)
    at array.ts:62:19
    at Array.forEach (<anonymous>)
    at pack (array.ts:54:12)
    at TupleCoder.encode (tuple.ts:54:16)
    at AbiCoder.encode (abi-coder.ts:111:15)
    at Interface._encodeParams (interface.ts:323:31)
    at Interface.encodeFunctionData (interface.ts:378:18)
    at ContractWrapper.formatError (watchTransactions-b1ddcccb.browser.esm.js:2866:46)
execute @ mutation.ts:261
await in execute (async)
mutate @ mutationObserver.ts:136
publishCampaign @ index.jsx:18
(anonymous) @ CreateCampaign.jsx:33
img.onload @ index.js:20
load (async)
checkIfImage @ index.js:20
handleSubmit @ CreateCampaign.jsx:30
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
index.jsx:30 contract call failed  TypeError: Cannot read properties of undefined (reading 'length')
    at toUtf8Bytes (utf8.ts:210:29)
    at StringCoder.encode (string.ts:19:37)
    at array.ts:62:19
    at Array.forEach (<anonymous>)
    at pack (array.ts:54:12)
    at TupleCoder.encode (tuple.ts:54:16)
    at AbiCoder.encode (abi-coder.ts:111:15)
    at Interface._encodeParams (interface.ts:323:31)
    at Interface.encodeFunctionData (interface.ts:378:18)
    at ContractWrapper.formatError (watchTransactions-b1ddcccb.browser.esm.js:2866:46)

Index.jsx in Context

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("0x21C6842871B06b98dAbCecAa242e36E87aAbA678")
    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,
                    form.description,
                    form.target,
                    new Date(form.deadline).getTime(),
                    form.image,
                ],
            })
            console.log("contract call success ", data)
        } catch (error) {
            console.log("contract call failed ", 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)

This is my finished project : GitHub - jiewpassakorn/fairfund https://github.com/jiewpassakorn/fairfund : I hope it can help you You can see code at Index.jsx in Context for that issue.

On Sat, Jul 8, 2023 at 5:02 PM thelastdemon1337 @.***> wrote:

I tested this and the issue is that, contract variable that we're initializing using 'useContract' function is empty (undefined). The contract isn't getting initialized, so it can't perform any further actions. I'm facing the same issue, did you find any solution for this?

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

adrianhajdin / project_crowdfunding