[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({