CODEWITHSUNDEEP
next.jsblockchainsmartcontractsthirdweb
Wahab Afridayy
Wahab Afridayy

Reputation: 13

I am getting error when fetching nfts from a marketplace contract

Unhandled Runtime Error

TypeError: contract?.getAddress is not a function

Call Stack

useActiveListings

webpack-internal:///./node_modules/@thirdweb-dev/react-core/dist/useTransactions-07d3933d.browser.esm.js (3764:37)

I am using the Next.js framework to develop my web application and I am following a tutorial on YouTube. Unfortunately, I encountered an error (mentioned above) while trying to replicate the steps shown in the video.

App.jsx

import { ThirdwebProvider, ChainId } from "@thirdweb-dev/react";
import "../styles/globals.css";
const chainId = ChainId.Mumbai;
function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebProvider
      activeChain={chainId}
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

index.jsx

"use-client";

import {
  ConnectWallet,
  useActiveListings,
  useContract,
} from "@thirdweb-dev/react";
import styles from "../styles/Home.module.css";

export default function Home() {
  const contract = useContract(
    "0x74f9073F15D0aa5A9dCF3396df4230f7E453DEaa",
    "marketplace-v3"
  );

  console.log(contract);

  const { data, isLoading } = useActiveListings(contract);
  // console.log(data);

  return (
    <main className={styles.main}>
      <h1 className={styles.title}>Welcome to Thirdweb!</h1>
      <ConnectWallet />
    </main>
  );
}

error snapshot

Upvotes: 0

Views: 114

Answers (1)

Isaiah
Isaiah

Reputation: 41

Had a similiar Issue, but i think web3 upgraded to marketplace-v3, now when you create a marketplace you get the marketplace-v3 bby default

And to query this try using the usevaliddirectlistings(contract) hook instead of the useActiveListings(contract)

More information can bbe found here

https://portal.thirdweb.com/react/react.usevaliddirectlistings

Upvotes: 0

Related Questions