[Documentation] Refactor: Update tsdoc references (#5374)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on refactoring the `NFT` component and its related functionalities to improve performance, enhance control over fetching logic, and simplify usage by removing the need for `React.Suspense`. It also introduces new props for better loading and error handling.

### Detailed summary
- Deleted several test files and an unused `NFT.tsx` file.
- Introduced `NFTProvider`, `NFTMedia`, `NFTName`, and `NFTDescription` components.
- Added `loadingComponent` and `fallbackComponent` props for better handling of loading states and errors.
- Updated references in tests to use new component structure.
- Renamed and adjusted documentation comments to reflect new functionality.
- Improved sidebar organization by updating links and names for consistency.
- Enhanced utility functions and hooks for better NFT data fetching and context management.

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

<!-- end pr-codex -->

Author: joaquim-verges

.changeset/tall-pots-live.md

@@ -0,0 +1,39 @@
+---
+"thirdweb": minor
+---
+
+# 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>
+  <React.Suspense fallback={"Loading stuff..."}>
+    <NFT.Media />
+    <NFT.Name />
+    <NFT.Description />
+  </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>}
+    />
+    <NFTDescription
+      loadingComponent={<span>Loading NFT Description</span>}
+      fallbackComponent={<span>Failed to load NFT Description</span>}
+    />
+</NFT>
+```

apps/portal/src/app/contracts/sidebar.tsx

@@ -239,7 +239,7 @@ export const sidebar: SideBar = {
                   ],
                 },
                 {
-                  name: "Misc",
+                  name: "Miscellaneous",
                   links: [
                     {
                       name: "TransferableERC20",
@@ -283,7 +283,7 @@ export const sidebar: SideBar = {
                   ],
                 },
                 {
-                  name: "Misc",
+                  name: "Miscellaneous",
                   links: [
                     {
                       name: "RoyaltyERC721",
@@ -327,7 +327,7 @@ export const sidebar: SideBar = {
                   ],
                 },
                 {
-                  name: "Misc",
+                  name: "Miscellaneous",
                   links: [
                     {
                       name: "RoyaltyERC1155",

apps/portal/src/app/react-native/v5/getting-started/page.mdx

@@ -9,7 +9,7 @@ We recommend starting a new thirdweb React Native project using our CLI, which s
 In your CLI, run:
 
 ```bash
-npx thirdweb create --legacy-peer-deps --react-native
+npx thirdweb create app --react-native
 ```
 
 or clone the [expo-starter](https://github.com/thirdweb-dev/expo-starter) repo using git.

apps/portal/src/app/react-native/v5/page.mdx

@@ -60,7 +60,7 @@ Many of the components and hooks in the React Native SDK use a [`client`](/types
 If you want to get started quickly run:
 
 ```bash
-npx thirdweb create --legacy-peer-deps --react-native
+npx thirdweb create app --react-native
 ```
 
 or clone the [expo-starter](https://github.com/thirdweb-dev/expo-starter) repo using git.

apps/portal/src/app/react/v5/getting-started/page.mdx

@@ -9,7 +9,7 @@ You can get started by creating a new project or adding thirdweb to an existing
 You can quickly create a new project with the thirdweb CLI
 
 ```bash
-npx thirdweb create app --legacy-peer-deps
+npx thirdweb create app
 ```
 
 or clone the the Next.js or Vite starter repo:

apps/portal/src/app/react/v5/page.mdx

@@ -52,7 +52,7 @@ Follow this [guide](/react/v5/getting-started) to get started with the React SDK
 You can quickly create a new project with the thirdweb CLI
 
 ```bash
-npx thirdweb create app --legacy-peer-deps
+npx thirdweb create app
 ```
 
 or clone the the Next.js or Vite starter repo:

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",

apps/portal/src/app/references/components/TDoc/utils/getSidebarLinkgroups.ts

@@ -26,7 +26,7 @@ const tagsToGroup = {
   "@connectWallet": "Connect Wallet",
   "@appURI": "App URI",
   "@storage": "Storage",
-  "@others": "Others",
+  "@others": "Miscellaneous",
   "@wallet": "Wallets",
   "@walletConfig": "WalletConfig",
   "@theme": "Theme",
@@ -40,20 +40,25 @@ const tagsToGroup = {
   "@chain": "Chain",
   "@social": "Social API",
   "@modules": "Modules",
+  "@client": "Client",
 } as const;
 
 type TagKey = keyof typeof tagsToGroup;
 
 const sidebarGroupOrder: TagKey[] = [
+  "@client",
   "@wallet",
   "@abstractWallet",
   "@locale",
-  "@chain",
-  "@contract",
   "@networkConnection",
   "@walletConfig",
   "@walletConnection",
   "@walletUtils",
+  "@chain",
+  "@contract",
+  "@transaction",
+  "@social",
+  "@auth",
   "@nft",
   "@buyCrypto",
   "@nftDrop",
@@ -64,18 +69,15 @@ const sidebarGroupOrder: TagKey[] = [
   "@metadata",
   "@permissionControl",
   "@platformFees",
-  "@auth",
   "@storage",
   "@smartWallet",
   "@connectWallet",
   "@appURI",
   "@extension",
-  "@transaction",
   "@rpc",
-  "@utils",
-  "@social",
   "@modules",
   "@theme",
+  "@utils",
   "@others",
 ];
 
@@ -191,6 +193,7 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
           name: name,
           href: getLink(`${path}/${key}`),
           links: [{ name: "Extensions", links: extensionLinkGroups }],
+          isCollapsible: false,
         });
       } else {
         linkGroups
@@ -245,7 +248,12 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
 
     // sort into groups
     for (const d of nonExtensions) {
-      const [tag] = getCustomTag(d) || [];
+      let [tag] = getCustomTag(d) || [];
+      // for ungrouped functions - put it in utils
+      // useful for re-exports that we can't tag
+      if (!tag) {
+        tag = "@others";
+      }
 
       if (tag) {
         if (!groups[tag]) {
@@ -257,16 +265,6 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
       }
     }
 
-    // If a group only has one item, do not create a group for it and add it to noGroups
-    for (const _tag in groups) {
-      const tag = _tag as TagKey;
-      const links = groups[tag];
-      if (links && links.length === 1 && links[0]) {
-        ungroupedLinks.push(links[0]);
-        delete groups[tag];
-      }
-    }
-
     // throw error if we don't know where to put the group in sidebar ( because this leads to it not being added in sidebar at all )
     for (const tag of Object.keys(groups)) {
       if (!sidebarGroupOrder.includes(tag as TagKey)) {
@@ -314,6 +312,7 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
         name: name,
         links: links,
         href: getLink(`${path}/${key}`),
+        isCollapsible: false,
       });
     }
   }
@@ -326,26 +325,10 @@ export function getSidebarLinkGroups(doc: TransformedDoc, path: string) {
     createSubGroups("hooks", doc.hooks);
   }
 
-  if (doc.classes) {
-    createSubGroups("classes", doc.classes);
-  }
-
   if (doc.functions) {
     createSubGroups("functions", doc.functions);
   }
 
-  if (doc.variables) {
-    createSubGroups("variables", doc.variables);
-  }
-
-  if (doc.types) {
-    createSubGroups("types", doc.types);
-  }
-
-  if (doc.enums) {
-    createSubGroups("enums", doc.enums);
-  }
-
   return linkGroups;
 }
 

apps/portal/src/app/references/components/TDoc/utils/subgroups.ts

@@ -1,8 +1,8 @@
 export const subgroups = {
-  components: "Components",
-  hooks: "Hooks",
+  components: "UI Components",
+  hooks: "React Hooks",
   classes: "Classes",
-  functions: "Functions",
+  functions: "Core Functions",
   variables: "Variables",
   types: "Types",
   enums: "Enums",

apps/portal/src/app/references/typescript/[version]/layout.tsx

@@ -5,7 +5,7 @@ import { createMetadata } from "@doc";
 export default getTDocLayout({
   getDoc: fetchTypeScriptDoc,
   packageSlug: "typescript",
-  sdkTitle: "TypeScript SDK",
+  sdkTitle: "Connect SDK",
 });
 
 export const metadata = createMetadata({

apps/portal/src/app/unity/v5/thirdwebmanager/page.mdx

@@ -46,7 +46,7 @@ This section allows you to define the default preferences for the SDK:
 - `Show Debug Logs`: Whether to show thirdweb SDK debug logs.
 - `Opt Out Usage Analytics`: Whether to opt out of Connect usage analytics, such as the number of wallets connected to your game.
 
-### Misc
+### Miscellaneous
 
 <DocImage src={thirdwebmanager_misc} />
 

apps/portal/src/components/others/Sidebar.tsx

@@ -151,7 +151,7 @@ function DocSidebarNonCollapsible(props: {
         {href ? (
           <Link
             className={cn(
-              "block font-medium text-base text-f-100 hover:text-accent-500",
+              "block font-semibold text-base text-f-100 hover:text-accent-500",
               isCategoryActive && "!text-accent-500",
             )}
             href={href}

packages/thirdweb/CHANGELOG.md

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

packages/thirdweb/scripts/typedoc.mjs

@@ -4,7 +4,11 @@ import TypeDoc from "typedoc";
 const jsonOut = "typedoc/documentation.json";
 
 const app = await TypeDoc.Application.bootstrapWithPlugins({
-  entryPoints: ["src/exports/**/*.ts", "src/extensions/modules/**/index.ts"],
+  entryPoints: [
+    "src/exports/**/*.ts",
+    "src/extensions/modules/**/index.ts",
+    "src/react/web/ui/prebuilt/NFT/index.ts",
+  ],
   exclude: [
     "src/exports/*.native.ts",
     "src/exports/**/*.native.ts",

packages/thirdweb/src/client/client.ts

@@ -98,6 +98,7 @@ export type ThirdwebClient = {
  *
  * const client = createThirdwebClient({ secretKey: "..." });
  * ```
+ * @client
  */
 export function createThirdwebClient(
   options: CreateThirdwebClientOptions,

packages/thirdweb/src/exports/react.ts

@@ -173,10 +173,23 @@ export {
   type CreateDirectListingButtonProps,
 } from "../react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.js";
 
+// NFT rendering components
 export {
-  NFT,
+  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/NFT.js";
+} 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/modules/common/checkModulesCompatibility.ts

@@ -18,6 +18,11 @@ import {
   FN_SELECTOR as getModuleConfigSelector,
 } from "../__generated__/IModule/read/getModuleConfig.js";
 
+/**
+ * Check if the given modules are compatible with the given core contract
+ * @param options
+ * @modules
+ */
 export async function checkModulesCompatibility(options: {
   coreBytecode: string;
   moduleBytecodes: string[];

packages/thirdweb/src/extensions/prebuilts/deploy-pack.ts

@@ -73,6 +73,7 @@ export type DeployPackContractOptions = Prettify<
  *   },
  * });
  * ```
+ * @extension DEPLOY
  */
 export async function deployPackContract(options: DeployPackContractOptions) {
   const { chain, client, account, params } = options;