Connect Wallet

Editor

<ConnectWallet
  theme="dark"
  btnTitle="Connect Wallet"
/>

Preview

Web3 Button

Editor

<Web3Button
  contractAddress="0x8Da37534C58D94E338D0b6D57afF34af6CDc2E32"
  action={(contract) => contract.erc721.claim(1)}
  theme="dark"
>
  Claim an NFT!
</Web3Button>

Preview

NFT Renderer

Editor

function Home() {
  return (
    <MediaRenderer 
      src="ipfs://QmV4HC9fNrPJQeYpbW55NLLuSBMyzE11zS1L4HmL6Lbk7X" 
    />
  );
}

Preview

ThirdwebNFTMedia

Editor

function Home() {
  const { contract } = useContract(
    "0xb413df01580659F671471956e9D2fAe989d1dcd3"
  );
  const { data: nft, isLoading, error } = useNFT(contract, "0");

  if (isLoading) return <div>Loading...</div>;
  if (error || !nft) return <div>NFT not found</div>;

  return <ThirdwebNftMedia metadata={nft.metadata} />;
}

Preview

Latest Versions

Dev Dependencies