update

Author: gregfromstl

.changeset/tall-pots-live.md

@@ -2,13 +2,35 @@
 "thirdweb": minor
 ---
 
-NFT component provider changed from NFT to NFT.Provider
+# Breaking change
+We are making the following changes to the NFT component to provide better performance and fine-grain control over their internal fetching logic.
+Moreover, you no longer have to wrap React.Suspense around said components!
 
+### Old
 ```tsx
-<NFT.Provider contract={contract} tokenId={0n}>
-  <Suspense fallback={"Loading nft..."}>
+<NFT>
+  <React.Suspense fallback={"Loading stuff..."}>
     <NFT.Media />
+    <NFT.Name />
     <NFT.Description />
-  </Suspense>
+  </React.Suspense>
+</NFT>
+```
+
+### New
+The new version comes with 2 new props: `loadingComponent` and `fallbackComponent`.
+Basically, `loadingComponent` takes in a component and show it _while the internal fetching is being done_
+`fallbackComponent` takes in a component and show it _once the data is failed to be resolved_
+
+```tsx
+<NFTProvider contract={contract} tokenId={0n}>
+    <NFTMedia
+      loadingComponent={<span>Loading NFT Image</span>} 
+      fallbackComponent={<span>Failed to load NFT</span>}
+    />
+    <NFT.Description 
+      loadingComponent={<span>Loading NFT Description</span>} 
+      fallbackComponent={<span>Failed to load NFT Description</span>}    
+    />
 </NFT>
 ```

apps/portal/src/app/react/v5/sidebar.tsx

@@ -320,13 +320,29 @@ export const sidebar: SideBar = {
       links: [
         {
           name: "UI Components",
-          links: ["ClaimButton", "TransactionButton", "MediaRenderer"].map(
-            (name) => ({
-              name,
-              href: `${slug}/${name}`,
-              icon: <CodeIcon />,
-            }),
-          ),
+          links: [
+            ...["ClaimButton", "TransactionButton", "MediaRenderer"].map(
+              (name) => ({
+                name,
+                href: `${slug}/${name}`,
+                icon: <CodeIcon />,
+              }),
+            ),
+            {
+              name: "NFT",
+              isCollapsible: true,
+              links: [
+                "NFTProvider",
+                "NFTMedia",
+                "NFTName",
+                "NFTDescription",
+              ].map((name) => ({
+                name,
+                href: `${slug}/${name}`,
+                icon: <CodeIcon />,
+              })),
+            },
+          ],
         },
         {
           name: "Reading State",

packages/thirdweb/CHANGELOG.md

@@ -1041,7 +1041,7 @@
 
   <NFT contract={contract} tokenId={0n}>
     <Suspense fallback={"Loading media..."}>
-      <NFT.Media />
+      <NFTMedia />
     </Suspense>
   </NFT>;
   ```

packages/thirdweb/src/exports/react.ts

@@ -174,7 +174,22 @@ export {
 } from "../react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.js";
 
 // NFT rendering components
-export * as NFT from "../react/web/ui/prebuilt/NFT/index.js";
+export {
+  NFTProvider,
+  type NFTProviderProps,
+} from "../react/web/ui/prebuilt/NFT/provider.js";
+export {
+  NFTName,
+  type NFTNameProps,
+} from "../react/web/ui/prebuilt/NFT/name.js";
+export {
+  NFTDescription,
+  type NFTDescriptionProps,
+} from "../react/web/ui/prebuilt/NFT/description.js";
+export {
+  NFTMedia,
+  type NFTMediaProps,
+} from "../react/web/ui/prebuilt/NFT/media.js";
 
 export { useConnectionManager } from "../react/core/providers/connection-manager.js";
 

packages/thirdweb/src/extensions/prebuilts/deploy-published.test.ts

@@ -2,9 +2,9 @@ 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 * as NFT from "./index.js";
-import { getNFTInfo } from "./media.js";
-import { NFTProviderContext } from "./provider.js";
+import { NFTMedia, getNFTInfo } from "./media.js";
+import { NFTName } from "./name.js";
+import { NFTProvider, NFTProviderContext } from "./provider.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("NFT prebuilt component", () => {
   it("should fetch the NFT metadata", async () => {
@@ -44,9 +44,9 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFT prebuilt component", () => {
 
   it("should render children correctly", () => {
     render(
-      <NFT.Provider contract={DOODLES_CONTRACT} tokenId={0n}>
+      <NFTProvider contract={DOODLES_CONTRACT} tokenId={0n}>
         <div>Child Component</div>
-      </NFT.Provider>,
+      </NFTProvider>,
     );
 
     expect(screen.getByText("Child Component")).toBeInTheDocument();
@@ -66,9 +66,9 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFT prebuilt component", () => {
       );
     }
     render(
-      <NFT.Provider contract={DOODLES_CONTRACT} tokenId={0n}>
+      <NFTProvider contract={DOODLES_CONTRACT} tokenId={0n}>
         <NFTConsumer />
-      </NFT.Provider>,
+      </NFTProvider>,
     );
 
     expect(screen.getByText(/Contract:/)).toBeInTheDocument();
@@ -77,29 +77,29 @@ describe.runIf(process.env.TW_SECRET_KEY)("NFT prebuilt component", () => {
 
   it("should render the NFT image", () => {
     render(
-      <NFT.Provider contract={DOODLES_CONTRACT} tokenId={0n}>
-        <NFT.Media />
-      </NFT.Provider>,
+      <NFTProvider contract={DOODLES_CONTRACT} tokenId={0n}>
+        <NFTMedia />
+      </NFTProvider>,
     );
 
     waitFor(() => expect(screen.getByRole("img")).toBeInTheDocument());
   });
 
   it("should render the NFT name", () => {
     render(
-      <NFT.Provider contract={DOODLES_CONTRACT} tokenId={1n}>
-        <NFT.Name />
-      </NFT.Provider>,
+      <NFTProvider contract={DOODLES_CONTRACT} tokenId={1n}>
+        <NFTName />
+      </NFTProvider>,
     );
 
     waitFor(() => expect(screen.getByText("Doodle #1")).toBeInTheDocument());
   });
 
   it("should render the NFT description", () => {
     render(
-      <NFT.Provider contract={DOODLES_CONTRACT} tokenId={1n}>
-        <NFT.Name />
-      </NFT.Provider>,
+      <NFTProvider contract={DOODLES_CONTRACT} tokenId={1n}>
+        <NFTName />
+      </NFTProvider>,
     );
 
     waitFor(() =>