smart contract undefined in thirdweb

Question

I am using thirdweb-dev/react to communicate with smart contract but the issue is it is giving me the contract undefined in my code with this error. could not resolve metadata for contract at 0xE4ffC734cfa5f3E33f9Da662D0e562155Ad37c6C

Code for linking with thirdweb

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

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

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

code of main.js

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 { StateContextProvider } from './context';
import App from './App';
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <ThirdwebProvider activeChainId="Goerli">
        <Router>
            <StateContextProvider>
            <App />
            </StateContextProvider>
        </Router>
    </ThirdwebProvider>
)

score 0 · Answer 1 · answered Apr 28 '23 at 12:31

Can you try to recreate a new project with the latest version of the SDK? The main.js file should look something like this:

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 { StateContextProvider } from './context';
import App from './App';
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <ThirdwebProvider activeChain="goerli">
        <Router>
            <StateContextProvider>
            <App />
            </StateContextProvider>
        </Router>
    </ThirdwebProvider>
)

We now use activeChain instead of activeChainId in the latest version of the SDK.

smart contract undefined in thirdweb

1 Answers1