小白NFT入门实战

npm i -g @thirdweb-dev/cli

npx thirdweb create app --next

我正在开发一个 NFT Minting Page，使用 thirdweb 的 TypeScript 钩子函数与我的 ERC721 合约交互。
合约已部署在 Monad Testnet 上，地址为 `0x11111111111111【替换成自己在Thirdweb上部署的合约】`。
我希望你能帮助我构建一个精美的 NFT Claim 页面，展示 NFT 的标题、描述、总供应量、已 Claim 的数量，并实时更新这些信息。此外，页面还需展示 NFT 的价格和图），并允许每个钱包地址只能 Mint 一个 NFT。
 
请根据以下信息和要求，开发一个完整的 React 组件：
 
1. **合约和链信息：**
   - 合约地址：`0x01111111111【替换成自己在Thirdweb上部署的合约】`
   - 链：Monad Testnet
     - RPC URL: `https://testnet-rpc.monad.xyz`
     - ChainID: `10143` (十进制), `0x279F` (十六进制)
     - 原生代币：MON
     - Explorers:
       - `https://testnet.monadexplorer.com/`
       - `https://monad-testnet.socialscan.io/`
 
2. **页面功能：**
   - 从合约中获取并展示 NFT 的标题和描述（使用 getContractMetadata）。
   - 展示 NFT 的总供应量（使用 nextTokenIdToMint）和已 Claim 的数量（使用 getTotalClaimedSupply），并在有人 Mint NFT 后实时更新（考虑使用 useContractEvents 或定期轮询，但优先考虑使用 hooks 提供的实时更新能力）。
   - 展示 NFT 的价格（从 getActiveClaimCondition 获取 pricePerToken 并转换为可读格式，如 MON 单位），并静态显示图片 boo-nft.png（放置在 public 目录下）。
   - 创建一个 Mint NFT 按钮，使用 claimTo 函数实现 Mint 功能，并限制每个钱包地址只能 Mint 一个 NFT（通过 getTotalClaimedSupply 和用户的已 Mint 数量或 ClaimCondition 的 maxClaimablePerWallet 实现，请优先考虑使用 ClaimCondition 的 maxClaimablePerWallet，如果合约配置了，则直接使用其逻辑。如果未配置，则通过前端判断 getTotalClaimedSupply 是否大于 0 来简单限制每个地址 Mint 一个）。
   - 实现 Mint 成功后的提示信息。
   - 新增功能： 在 Mint 成功后，提供一个按钮或提示，允许用户将 NFT 添加到他们的钱包的资产列表中（使用 account?.watchAsset 方法，需要构造正确的 WatchAssetParams）。
 
3. **技术要求：**
   - 使用 thirdweb 的 TypeScript 钩子函数，如 useReadContract、useActiveAccount、TransactionButton 等。
   - 使用 defineChain 配置 Monad Testnet，并通过 getContract 初始化合约对象。请确保 defineChain 的配置正确，包括 rpcUrls 和 nativeCurrency。
   - 项目中已配置好 client 对象（Client ID 在 .env 文件中定义为 NEXT_PUBLIC_TEMPLATE_CLIENT_ID），请直接使用。
   - 使用 Tailwind CSS 类来美化页面，使其简洁美观。
   - 确保代码可运行并与 Monad Testnet 上的合约交互正常。
 
4. 避免之前遇到的问题：
   - 确保 defineChain 函数的参数格式正确。
   - 使用 useActiveAccount() 获取当前连接的钱包地址，而不是尝试使用 useWatchAccount()。
   - 正确处理 useReadContract 返回的 data 和 isLoading 状态。
   - 在 TransactionButton 的 transaction 函数中使用正确的参数调用 claimTo。
   - 在实现每个钱包地址只能 Mint 一个 NFT 的逻辑时，优先检查 claimCondition?.maxClaimablePerWallet，如果存在且大于 0，则 thirdweb 会自动处理限制。如果 maxClaimablePerWallet 未配置或为 0，则可以通过判断 claimedSupply.data 是否大于 0 来简单限制（但这并非完美方案，仅作为无 maxClaimablePerWallet 配置时的简单限制）。   
 
5. **参考代码：**
   - 请参考以下代码片段的结构和逻辑，调整链、合约地址和功能以满足我的需求：
   
   ```tsx
   use client';
 
   import Image from "next/image";
   import { ConnectButton, MediaRenderer, TransactionButton, useActiveAccount, useReadContract } from "thirdweb/react";
   import { client } from "./client";
   import { defineChain, getContract, toEther } from "thirdweb";
   import { getContractMetadata } from "thirdweb/extensions/common";
   import { claimTo, getActiveClaimCondition, getTotalClaimedSupply, nextTokenIdToMint } from "thirdweb/extensions/erc721";
   import { useState } from "react";
 
   export default function Home() {
     const account = useActiveAccount();
     const chain = defineChain(sepolia);
     const contract = getContract({
       client: client,
       chain: chain,
       address: "0xBb1d78c8799b33c5791ED6e49B84429c7106759E"
     });
 
     const { data: contractMetadata } = useReadContract(getContractMetadata, { contract });
     const { data: claimedSupply } = useReadContract(getTotalClaimedSupply, { contract });
     const { data: totalNFTSupply } = useReadContract(nextTokenIdToMint, { contract });
     const { data: claimCondition } = useReadContract(getActiveClaimCondition, { contract });
 
     const getPrice = (quantity: number) => {
       const total = quantity * parseInt(claimCondition?.pricePerToken.toString() || "0");
       return toEther(BigInt(total));
     };
 
     return (
       <main>
         <ConnectButton client={client} chain={chain} />
         <div>
           <MediaRenderer client={client} src={contractMetadata?.image} />
           <h2>{contractMetadata?.name}</h2>
           <p>{contractMetadata?.description}</p>
           <p>Total NFT Supply: {claimedSupply?.toString()}/{totalNFTSupply?.toString()}</p>
           <TransactionButton
             transaction={() => claimTo({
               contract: contract,
               to: account?.address || "",
               quantity: BigInt(1),
             })}
             onTransactionConfirmed={() => alert("NFT Claimed!")}
           >
             {`Claim NFT (${getPrice(1)} ETH)`}
           </TransactionButton>
         </div>
       </main>
     );
   }
 
期望输出：
- 一个完整的 React 组件（Home.tsx），包含所有功能的实现。
- 使用 Tailwind CSS 或类似样式美化页面。
- 确保代码可运行并与 Monad Testnet 上的合约交互正常。
- 请根据以上信息，帮助我开发这个 NFT Minting Page 组件。