function App() {
  // The token ID of the NFT you want to fetch
  const tokenId = 0;

  const { contract } = useContract("0x5907C77D0b413304667d1764b479ED70eF659e52");
  const { data: nft, isLoading, error } = useNFT(contract, tokenId);

  if (isLoading) return <div>Fetching NFT…</div>;
  if (error) return <div>Error fetching NFT</div>;
  if (!nft) return <div>NFT not found</div>;
  
  return <div style={{display:'flex', flexDirection:'column'}}>
  <h2>{nft.metadata.name}</h2>
  <img
    src={nft.metadata.image}
    alt={nft.metadata.name}
    style={{ maxWidth: "300px" }} // Apply max width of 300px
  />
  <p>{nft.metadata.description}</p>
  </div>;
}

function App() {
  const address = useAddress();
  const { contract } = useContract("0x94221e64B4f64741534D4F65DCf91842A1cA6ae5");
  const { data, isLoading, error } = useOwnedNFTs(contract, address);

  return (
    <div style={{ height: "600px", overflow: "auto" }}>
      {data && data.map((nft) => (
        <div key={nft.metadata.id}>
          <h2>{nft.metadata.name}</h2>
          <p>{nft.metadata.description}</p>
          <img
            src={nft.metadata.image}
            alt={nft.metadata.name}
            style={{ maxWidth: "300px" }}
          />
          <p>Owner: {nft.owner}</p>
          <p>Type: {nft.type}</p>
          <p>Supply: {nft.supply}</p>
          {nft.type === "ERC1155" && <p>Quantity Owned: {nft.quantityOwned}</p>}
        </div>
      ))}
    </div>
  );
}

function App() {
    const { contract } = useContract("0x5907C77D0b413304667d1764b479ED70eF659e52");
    const { mutateAsync: lazyMint, isLoading, error } = useLazyMint(contract);
  
    return (
      <Web3Button
        contractAddress="0x5907C77D0b413304667d1764b479ED70eF659e52"
        action={() =>
          lazyMint({
            // Metadata of the NFTs to upload
            metadatas: [
              {
                name: "thirdweb",
                description: "hello web3",
                image: "https://bafybeibd3p4wruv4rk4n2xqoozi5xedia32yjkj5jfidyv7p4iskyoe2ha.ipfs-public.thirdwebcdn.com/183095154-2578c28b-1dac-4ffd-9f4b-14eb85657b68.png",
              },
            ],
          })
        }
        theme="dark"  
        onError={(error) => alert("Something went wrong!")}
        onSuccess={(result) => alert("Yay! You've lazy minted an NFT! 🥳")}
      >
        Lazy Mint NFTs
      </Web3Button>
    );
  }

function App() {
    const address = useAddress();
    const { contract } = useContract("0x5907C77D0b413304667d1764b479ED70eF659e52");
    const { mutate: claimNft, isLoading, error } = useClaimNFT(contract);
  
    return (
      <Web3Button
        contractAddress="0x5907C77D0b413304667d1764b479ED70eF659e52"
        action={() =>
          claimNft({
            to: address, // Use useAddress hook to get current wallet address
            quantity: 1,
            tokenId: 0,  
          })
        }
        onSuccess={(result) => alert("Yay! NFT Claimed! 🥳")}
        onError={(error) => alert("Something went wrong!")}
      >
        Claim NFT
      </Web3Button>
    );
  }

function App() {
    const { contract } = useContract("0x436492DBc2E30E56FaC8F2297BD1964833c0687d");
    const { data, isLoading, error } = useUnclaimedNFTs(contract);
  
    return (
        <div style={{ height: "550px", width: "650px", overflow: "auto" }}>
          {data && (
            <div>
              {data.map((item) => (
                <div key={item.id}>
                  <p>Name: {item.name}</p>
                  <p>Description: {item.description}</p>
                  <img src={item.image} alt="NFT" 
                  style={{ maxWidth: "300px" }}/>
                  <p>External URL: {item.external_url}</p>
                  <p>Animation URL: {item.animation_url}</p>
                  <p>Background Color: {item.background_color}</p>
                  <p>ID: {item.id}</p>
                  <p>URI: {item.uri}</p>
                </div>
              ))}
            </div>
          )}
        </div>
      );
    }

function App() {
  // Contract must be an ERC-721 or ERC-1155 contract
  const { contract } = useContract("0x5907C77D0b413304667d1764b479ED70eF659e52");
  const {
    mutateAsync: transferNFT,
    isLoading,
    error,
  } = useTransferNFT(contract);

  return (
    <Web3Button
      contractAddress="0x5907C77D0b413304667d1764b479ED70eF659e52"
      action={() =>
        transferNFT({
          to: "0xFe62CD02AFF3641B89c6718732c4B5042a78De79", // Address to transfer the token to
          tokenId: 0, // Token ID to transfer
          amount: 1, // Amount of tokens to transfer (ERC-1155 only)
        })
      }
      onSuccess={(result) => alert("Yay! 1 NFT Transfered! 🥳")}
      onError={(error) => alert("Something went wrong!")}
    >
      Transfer
    </Web3Button>
  );
};

function App() {
  const { contract } = useContract("0x5907C77D0b413304667d1764b479ED70eF659e52");
  const { mutateAsync: airdropNft, isLoading, error } = useAirdropNFT(contract);

  return (
    <Web3Button
      contractAddress="0x5907C77D0b413304667d1764b479ED70eF659e52"
      action={() =>
        airdropNft({
          addresses: [
            {
              address: "0x124",
              quantity: 8,
            },
            {
              address: "0x120",
              quantity: 2,
            },
            {
              address: "0x127",
              quantity: 5,
            },
          ],
          tokenId: 0,
        })
      }
      onSuccess={(result) => alert("NFTs Airdropped! 🛫 📦")}
      onError={(error) => alert("Something went wrong!")}
    >
      Airdrop NFT
    </Web3Button>
  );
}

function App() {
  return (
    <Web3Button
      contractAddress="0xf4aef3201aaA673f424c671c19f36087aF541f8f"
      action={(contract) => {
          contract.call("burn", [2])
        }
      }
      onError={(error) => alert("Something went wrong!")}
      onSuccess={(result) => alert("Are you sure you want to burn this token?")}
    >
      Burn NFT
    </Web3Button>
  )
}

function App() {
    const { contract } = useContract("0x5907C77D0b413304667d1764b479ED70eF659e52");
    const { isLoading, data, error } = useNFTBalance(
      contract,
      "0x86f2aD57b59bb5BE8091A0a5fDBecb168b63cA17",
      0);
  
    // Render based on the state
    if (isLoading) {
      return <div>Loading...</div>;
    }
  
    if (error) {
      return <div>Error: {error.message}</div>;
    }
  
    return (
      <div>
        <h1>NFT Balance</h1>
        {data && (
          <div>
            <p>Balance: {data.balance}</p>
          </div>
        )}
      </div>
    );
  }

function App() {
    const contractAddress = "0xD5dba694e8322B4f15c9047c92C269218880A6cE";
    const { contract } = useContract(contractAddress);
    const tokenId = 123; // Replace with the appropriate tokenId value
    const { data, isLoading } = useContractRead(contract, "getApproved", [tokenId]);
  
    // Function to get the approval information
    const getApprovalInfo = () => {
      if (isLoading) {
        return { isApproved: false, contractAddress: "" };
      }
  
      const isApproved = Boolean(data);
  
      return { isApproved, contractAddress };
    };
  
    const approvalInfo = getApprovalInfo();
  
    return (
      <div>
        {/* Display the result to the user */}
        <p>Is Approved: {String(approvalInfo.isApproved)}</p>
        <p>Contract Address: {approvalInfo.contractAddress}</p>
      </div>
    );
  }