[Portal] Docs: Adds Social API docs (#4531)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds `Social API` functionality to the codebase.

### Detailed summary
- Added `@social` tag to `useSocialProfiles` and `getSocialProfiles` functions
- Updated sidebar components to include `Social API` section with relevant links
- Updated sidebar order to include `Social API` in the correct position

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

<!-- end pr-codex -->

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

@@ -22,6 +22,7 @@ export const sidebar: SideBar = {
 			href: `${slug}/getting-started`,
 			icon: <ZapIcon />,
 		},
+		{ separator: true },
 		{
 			name: "Core",
 			isCollapsible: false,
@@ -66,6 +67,7 @@ export const sidebar: SideBar = {
 				},
 			],
 		},
+		{ separator: true },
 		{
 			name: "Wallets",
 			isCollapsible: false,
@@ -136,6 +138,17 @@ export const sidebar: SideBar = {
 				},
 			],
 		},
+		{ separator: true },
+		{
+			name: "Social API",
+			isCollapsible: false,
+			links: ["useSocialProfiles"].map((name) => ({
+				name,
+				href: `${slug}/${name}`,
+				icon: <CodeIcon />,
+			})),
+		},
+		{ separator: true },
 		{
 			name: "Pay",
 			isCollapsible: false,
@@ -170,6 +183,7 @@ export const sidebar: SideBar = {
 				},
 			],
 		},
+		{ separator: true },
 		{
 			name: "Blockchain API",
 			isCollapsible: false,

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

@@ -221,6 +221,18 @@ export const sidebar: SideBar = {
     {
       separator: true,
     },
+    {
+      name: "Social API",
+      isCollapsible: false,
+      links: ["useSocialProfiles"].map((name) => ({
+        name,
+        href: `${slug}/${name}`,
+        icon: <CodeIcon />,
+      })),
+    },
+    {
+      separator: true,
+    },
     {
       name: "Pay",
       isCollapsible: false,

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

@@ -38,6 +38,7 @@ const tagsToGroup = {
 	"@buyCrypto": "Buy Crypto",
 	"@utils": "Utils",
 	"@chain": "Chain",
+	"@social": "Social API",
 } as const;
 
 type TagKey = keyof typeof tagsToGroup;
@@ -71,6 +72,7 @@ const sidebarGroupOrder: TagKey[] = [
 	"@transaction",
 	"@rpc",
 	"@utils",
+	"@social",
 	"@theme",
 	"@others",
 ];

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

@@ -222,6 +222,16 @@ export const sidebar: SideBar = {
 			],
 		},
 		{ separator: true },
+		{
+			name: "Social API",
+			isCollapsible: false,
+			links: ["getSocialProfiles"].map((name) => ({
+				name,
+				href: `${slug}/${name}`,
+				icon: <CodeIcon />,
+			})),
+		},
+		{ separator: true },
 		{
 			name: "Blockchain API",
 			isCollapsible: false,
@@ -375,13 +385,13 @@ export const sidebar: SideBar = {
 								},
 								{
 									name: "Transfering tokens",
-									href: `${slug}/extensions/examples/transfering-tokens`
+									href: `${slug}/extensions/examples/transfering-tokens`,
 								},
 								{
 									name: "Ethereum Name Service",
-									href: `${slug}/extensions/examples/ethereum-name-service`
-								}
-							]
+									href: `${slug}/extensions/examples/ethereum-name-service`,
+								},
+							],
 						},
 						{
 							name: "Available Extensions",

packages/thirdweb/src/react/core/social/useSocialProfiles.ts

@@ -17,6 +17,8 @@ import { getSocialProfiles } from "../../../social/profiles.js";
  *   address: "0x...",
  * });
  * ```
+ *
+ * @social
  * @beta
  */
 export function useSocialProfiles(options: {

packages/thirdweb/src/social/profiles.ts

@@ -8,7 +8,7 @@ import type { SocialProfile } from "./types.js";
  * @param args - The arguments to use when fetching the social profiles.
  * @param args.address - The wallet address to fetch the social profiles for.
  * @param args.client - The Thirdweb client.
- * @returns A promise resolving to the retrieved social profiles for different protocols. If a profile is not available for a protocol, the value will be `null`.
+ * @returns A promise resolving to the array of social profiles for the given address.
  *
  * @example
  * ```ts
@@ -18,6 +18,7 @@ import type { SocialProfile } from "./types.js";
  *   client,
  * });
  * ```
+ * @social
  * @beta
  */
 export async function getSocialProfiles(args: {