useContract returns undefined

[account4sO8sF3]

Initializing a contract through the useContract hook almost always results in undefined.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ThirdwebProvider } from "@thirdweb-dev/react";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ThirdwebProvider
    >
        <App />
    </ThirdwebProvider>
  </React.StrictMode>
);

reportWebVitals();

App.js

import Home from "./pages/Home";

function App() {
  return (
   <Home></Home>
  );
}

export default App;

Home.js

import React from 'react';
import { ConnectWallet, ChainId, useContract, useContractWrite } from "@thirdweb-dev/react";
import myABI from "./myABI.json";


function Home() {
    const { contract } = useContract("0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", myABI);

    console.log(contract);
    console.log(myABI);

    return (
        <>
            <ConnectWallet accentColor="#f213a4" colorMode="dark" />

            <h1>Thirdweb</h1>
        </>
    );
}

export default Home;

myABI.json

[{"constant":false,"inputs":[{"name":"newImplementation","type":"address"}],"name":"upgradeTo","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"newImplementation","type":"address"},{"name":"data","type":"bytes"}],"name":"upgradeToAndCall","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":true,"inputs":[],"name":"implementation","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newAdmin","type":"address"}],"name":"changeAdmin","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"admin","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[{"name":"_implementation","type":"address"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"payable":true,"stateMutability":"payable","type":"fallback"},{"anonymous":false,"inputs":[{"indexed":false,"name":"previousAdmin","type":"address"},{"indexed":false,"name":"newAdmin","type":"address"}],"name":"AdminChanged","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"implementation","type":"address"}],"name":"Upgraded","type":"event"}]

I am connected using the ConnectWallet button, and the network is the same as the one the contract is on (mainnet, the contract is the address of the USDC token).

Tried it with different ABIs and contract addresses, as well as without any ABI, just the address. Why does this happen? Does the hook work ONLY for contracts deployed using the Thirdweb Dashboard, or what's the case here?

[nachoiacovino]

hello @account4sO8sF3 , are you on the latest version of both the TypeScript and React SDK?

also not 100% sure but it might be that we haven't made a release yet to be able to pass ABI as second parameter of useContract, in that case, you would need to install @thirdweb-dev/react@nightly and @thirdweb-dev/sdk@nightly for the time being.

Hope that helps!

[account4sO8sF3]

Hi Nacho, thanks for the help! Seems like it does not work, tried both 3.2.1 and 3.2.2-nightly-25a4773. Also tried without the ABI argument, I assume I need to specify the ABI if the contract is not deployed through the dashboard, right? Also worth mentioning that this is a clean project created to test this weird behavior, no extra deps or pages. Appreciate your time.

…

On Tue, Oct 11, 2022 at 3:30 PM Nacho Iacovino ***@***.***> wrote: hello @account4sO8sF3 <https://github.com/account4sO8sF3> , are you on the latest version of both the TypeScript and React SDK? also not 100% sure but it might be that we haven't made a release yet to be able to pass ABI as second parameter of useContract, in that case, you would need to install @***@***.*** and @***@***.*** for the time being. Hope that helps! — Reply to this email directly, view it on GitHub <#288 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUPKFVSB3WGQQH3GPLXMXH3WCVMURANCNFSM6AAAAAARCHFJKA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[nachoiacovino]

Hey @account4sO8sF3 I just tested in the nightly version of the SDK and I'm getting the contract back, one thing I did notice is that you're getting the ABI incorrectly, because USDC it's actually a proxy contract you need to get it from the implementation contract, you can see how in this video: https://www.youtube.com/watch?v=gChC3Wiz1Cw

Tell me if by changing the ABI it works correctly or you still get undefined back because I wasn't able to replicate that, otherwise I can share a repo with my working version.

[account4sO8sF3]

Please share a repo or the exact ABI you are using for the address, would help a lot! Also, how can the library know if the ABI is correct or not? In ethers or web3 it just takes the ABI and fails on the transaction part, not the contract initialization part. Thanks for your answers!

…

On Tue, Oct 11, 2022 at 3:57 PM Nacho Iacovino ***@***.***> wrote: Hey @account4sO8sF3 <https://github.com/account4sO8sF3> I just tested in the nightly version of the SDK and I'm getting the contract back, one thing I did notice is that you're getting the ABI incorrectly, because USDC it's actually a proxy contract you need to get it from the implementation contract, you can see how in this video: https://www.youtube.com/watch?v=gChC3Wiz1Cw Tell me if by changing the ABI it works correctly or you still get undefined back because I wasn't able to replicate that, otherwise I can share a repo with my working version. — Reply to this email directly, view it on GitHub <#288 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUPKFVXKOLCQKXFR6USLTMTWCVP45ANCNFSM6AAAAAARCHFJKA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[nachoiacovino]

here's the repo, tell me if this helps @account4sO8sF3 https://github.com/nachoiacovino/useContract-USDC

[account4sO8sF3]

Very helpful, seems like I was missing desiredChainId in index.js!