[SDK] NFT Prebuilt components (#4179)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds NFT prebuilt components for displaying NFT metadata, including name, description, and media.

### Detailed summary
- Added `image_url` property to `NFT` type
- Introduced NFT prebuilt components: `NFT`, `NFT.Media`, `NFT.Name`, `NFT.Description`
- Implemented functions to fetch and display NFT metadata
- Updated test cases for NFT components

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: kien-ngo

.changeset/hip-teachers-drive.md

@@ -0,0 +1,21 @@
+---
+"thirdweb": minor
+---
+
+Add NFT prebuilt components
+```tsx
+import { getContract } from "thirdweb";
+import { NFT } from "thirdweb/react";
+
+const contract = getContract({
+  address: "0x...",
+  chain: ethereum,
+  client: yourThirdwebClient,
+});
+
+<NFT contract={contract} tokenId={0n}>
+  <Suspense fallback={"Loading media..."}>
+    <NFT.Media />
+  </Suspense>
+</NFT>
+```

packages/thirdweb/src/exports/react.ts

@@ -171,6 +171,11 @@ export {
   type CreateDirectListingButtonProps,
 } from "../react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.js";
 
+export {
+  NFT,
+  type NFTMediaProps,
+} from "../react/web/ui/prebuilt/NFT/NFT.js";
+
 export { useConnectionManager } from "../react/core/providers/connection-manager.js";
 
 /**

packages/thirdweb/src/react/web/ui/prebuilt/NFT/NFT.test.tsx

@@ -0,0 +1,111 @@
+import { useContext } from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "~test/react-render.js";
+import { DOODLES_CONTRACT } from "~test/test-contracts.js";
+import { NFT, NFTProviderContext, getNFTInfo } from "./NFT.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("NFT prebuilt component", () => {
+  it("should fetch the NFT metadata", async () => {
+    const nft = await getNFTInfo({
+      contract: DOODLES_CONTRACT,
+      tokenId: 1n,
+    });
+    expect(nft.metadata).toStrictEqual({
+      attributes: [
+        {
+          trait_type: "face",
+          value: "holographic beard",
+        },
+        {
+          trait_type: "hair",
+          value: "white bucket cap",
+        },
+        {
+          trait_type: "body",
+          value: "purple sweater with satchel",
+        },
+        {
+          trait_type: "background",
+          value: "grey",
+        },
+        {
+          trait_type: "head",
+          value: "gradient 2",
+        },
+      ],
+      description:
+        "A community-driven collectibles project featuring art by Burnt Toast. Doodles come in a joyful range of colors, traits and sizes with a collection size of 10,000. Each Doodle allows its owner to vote for experiences and activations paid for by the Doodles Community Treasury. Burnt Toast is the working alias for Scott Martin, a Canadian–based illustrator, designer, animator and muralist.",
+      image: "ipfs://QmTDxnzcvj2p3xBrKcGv1wxoyhAn2yzCQnZZ9LmFjReuH9",
+      name: "Doodle #1",
+    });
+  });
+
+  it("should render children correctly", () => {
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={0n}>
+        <div>Child Component</div>
+      </NFT>,
+    );
+
+    expect(screen.getByText("Child Component")).toBeInTheDocument();
+  });
+
+  it("should provide context values to children", () => {
+    function NFTConsumer() {
+      const context = useContext(NFTProviderContext);
+      if (!context) {
+        return <div>No context</div>;
+      }
+      return (
+        <div>
+          Contract: {String(context.contract)}, Token ID:{" "}
+          {context.tokenId.toString()}
+        </div>
+      );
+    }
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={0n}>
+        <NFTConsumer />
+      </NFT>,
+    );
+
+    expect(screen.getByText(/Contract:/)).toBeInTheDocument();
+    expect(screen.getByText(/Token ID: 0/)).toBeInTheDocument();
+  });
+
+  it("should render the NFT image", () => {
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={0n}>
+        <NFT.Media />
+      </NFT>,
+    );
+
+    waitFor(() => expect(screen.getByRole("img")).toBeInTheDocument());
+  });
+
+  it("should render the NFT name", () => {
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={1n}>
+        <NFT.Name />
+      </NFT>,
+    );
+
+    waitFor(() => expect(screen.getByText("Doodle #1")).toBeInTheDocument());
+  });
+
+  it("should render the NFT description", () => {
+    render(
+      <NFT contract={DOODLES_CONTRACT} tokenId={1n}>
+        <NFT.Name />
+      </NFT>,
+    );
+
+    waitFor(() =>
+      expect(
+        screen.getByText(
+          "A community-driven collectibles project featuring art by Burnt Toast",
+        ),
+      ).toBeInTheDocument(),
+    );
+  });
+});