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/erc721/lazyMinting/read/getBatchesToReveal.ts

@@ -25,7 +25,7 @@ export interface BatchToReveal {
  * @param options.contract {@link ThirdwebContract} - The NFT contract instance.
  * @returns A promise resolving to an array of unrevealed batches.
  *
- * @note Use the `batchId` and corresponding password for each batch to reveal it with `reveal`. {@see reveal}
+ *  Use the `batchId` and corresponding password for each batch to reveal it with `reveal`. {@see reveal}
  * @extension ERC721
  * @example
  * ```ts

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

@@ -8,7 +8,7 @@ import { useActiveWallet } from "./useActiveWallet.js";
 /**
  * A hook to get the current wallet's capabilities according to [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792).
  *
- * @note This function is dependent on the wallet's support for EIP-5792, but will not throw.
+ *  This function is dependent on the wallet's support for EIP-5792, but will not throw.
  * **The returned object contains a `message` field detailing any issues with the wallet's support for EIP-5792.**
  *
  * @returns a React Query object.

packages/thirdweb/src/react/core/hooks/wallets/useCapabilities.ts

@@ -24,8 +24,8 @@ import { useActiveWallet } from "./useActiveWallet.js";
  *
  * When calls are sent, all contracts that are interacted with will have their corresponding reads revalidated via React Query.
  *
- * @note This hook is dependent on the wallet's support for EIP-5792 and could fail.
- * @note The mutatuon function will use your currently connected wallet by default, but you can pass it a specific wallet to use if you'd like.
+ *  This hook is dependent on the wallet's support for EIP-5792 and could fail.
+ *  The mutatuon function will use your currently connected wallet by default, but you can pass it a specific wallet to use if you'd like.
  *
  * @returns A React Query mutatuon object to interact with {@link sendCalls}
  * @throws an error if the wallet does not support EIP-5792.
@@ -76,7 +76,7 @@ import { useActiveWallet } from "./useActiveWallet.js";
  * });
  * ```
  *
- * @note We recommend proxying any paymaster calls via an API route you setup and control.
+ *  We recommend proxying any paymaster calls via an API route you setup and control.
  * @extension EIP5792
  */
 export function useSendCalls({

packages/thirdweb/src/react/core/hooks/wallets/useSendCalls.ts

@@ -10,7 +10,7 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
  * Retrieves all linked profiles of the connected in-app or ecosystem account.
  *
  * @returns A React Query result containing the linked profiles for the connected in-app account.
- * @note This hook will only run if the connected wallet supports account linking.
+ *  This hook will only run if the connected wallet supports account linking.
  *
  * @example
  * ```jsx

packages/thirdweb/src/react/native/hooks/wallets/useProfiles.ts

@@ -10,7 +10,7 @@ import { useAdminWallet } from "../../../core/hooks/wallets/useAdminWallet.js";
  * Retrieves all linked profiles of the connected in-app or ecosystem account.
  *
  * @returns A React Query result containing the linked profiles for the connected in-app account.
- * @note This hook will only run if the connected wallet supports account linking.
+ *  This hook will only run if the connected wallet supports account linking.
  *
  * @example
  * ```jsx