Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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) #44

Open
BrysonHall opened this issue May 8, 2023 · 3 comments

Comments

@BrysonHall
Copy link

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)

@BrysonHall BrysonHall changed the title Image (async) (anonymous) @ inpage.js:1 u @ inpage.js:1 a @ inpage.js:1 (anonymous) @ inpage.js:1 r.sendSiteMetadata @ inpage.js:1 e @ inpage.js:1 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) 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) May 8, 2023
@jiewpassakorn
Copy link

Can you solve it?

@thelastdemon1337
Copy link

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?

@jiewpassakorn
Copy link

jiewpassakorn commented Jul 10, 2023 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants