docs: add docs on getting user details

Author: ElasticBottle

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

@@ -134,23 +134,23 @@ export const sidebar: SideBar = {
             {
               name: "User Management",
               links: [
+                {
+                  name: "Get User Profiles",
+                  href: `${walletSlug}/user-management/get-user-profiles`,
+                },
                 {
                   name: "Export Private Keys",
-                  href: `${inAppSlug}/guides/export-private-key`,
+                  href: `${walletSlug}/user-management/export-private-key`,
                 },
                 {
-                  name: "Getting User Details",
-                  href: `${connectSlug}/ConnectButton`,
+                  name: "Link Multiple Identity",
+                  href: `${inAppSlug}/guides/link-multiple-profiles`,
                 },
                 // TODO:
                 // {
                 //   name: "Deleting User Details",
-                //   href: `${connectSlug}/ConnectButton`,
+                //   href: `${walletSlug}/user-management/deleting-user-details`,
                 // },
-                {
-                  name: "Link Multiple Identity",
-                  href: `${inAppSlug}/guides/link-multiple-profiles`,
-                },
               ],
             },
             {
@@ -226,23 +226,6 @@ export const sidebar: SideBar = {
           name: "In-App Wallet",
           icon: <WalletsInAppIcon />,
           links: [
-            {
-              name: "Guides",
-              links: [
-                {
-                  name: "Export Private Keys",
-                  href: `${inAppSlug}/guides/export-private-key`,
-                },
-                {
-                  name: "Link Multiple Profiles",
-                  href: `${inAppSlug}/guides/link-multiple-profiles`,
-                },
-                {
-                  name: "Retrieving Linked Profiles",
-                  href: `${inAppSlug}/guides/retrieve-linked-profiles`,
-                },
-              ],
-            },
             {
               name: "Custom Authentication",
               links: [
@@ -273,10 +256,6 @@ export const sidebar: SideBar = {
                 },
               ],
             },
-            {
-              name: "Backend APIs",
-              href: `${inAppSlug}/guides/get-user-details`,
-            },
           ],
         },
         // Ecosystem Wallet

apps/portal/src/app/connect/wallet/sign-in-methods/external-wallets/page.mdx

@@ -1,4 +1,4 @@
-import { ArticleIconCard, Callout } from "@doc";
+import { createMetadata, ArticleIconCard, Callout } from "@doc";
 import { 
   WalletsAuthIcon, 
   WalletsConnectIcon,     
@@ -10,6 +10,17 @@ import {
   UnrealEngineIcon 
 } from "@/icons"
 
+export const metadata = createMetadata({
+	image: {
+		title: "External Wallets",
+		icon: "wallets",
+	},
+	title: "External Wallets | thirdweb",
+	description:
+		"Learn how to connect and authenticate with external wallets using thirdweb.",
+});
+
+
 # External wallets
 
 thirdweb natively supports 350+ first-party wallets and all wallets that implement EIP-6963 (Multi-injected Provider Discovery). For the full list, please consult [this list](/typescript/v5/supported-wallets).
@@ -30,7 +41,7 @@ Read on to find out how it's done:
 
 External wallets are perfect for applications that want to integrate with existing web3 users. These users typically already have wallets like MetaMask, Coinbase Wallet, or Rainbow installed and are familiar with web3 concepts.
 
-<Callout variant="info" title='Limitations'>
+<Callout variant="warning" title='Limitations'>
   Your backend will not know about the user's wallet. 
   This is fine if the user's wallet is used to sign transactions and interact with the blockchain directly.
 

apps/portal/src/app/connect/wallet/user-management/export-private-key/confirm-reveal.png

@@ -0,0 +1,59 @@
+import { Callout, DocImage, createMetadata, Step, Steps } from "@doc";
+import ManageWallet from './manage-wallet.png'
+import ExportKey from './export-key.png'
+import ConfirmReveal from './confirm-reveal.png'
+import ExportedKey from './exported-key.png'
+
+export const metadata = createMetadata({
+	image: {
+		title: "Export private key of thirdweb Wallet",
+		icon: "wallets",
+	},
+	title: "Export private key | thirdweb",
+	description:
+		"Learn how to export private keys for thirdweb wallets",
+});
+
+# Export Private Key
+
+Learn how to export the private key for a thirdweb wallet using the Connect modal. 
+
+<Callout variant="info" title="Headless private key export">
+    Note that we don't allow exporting private key headlessly today. This is to ensure the security of the users assets.
+</Callout>
+
+<Steps>
+
+  <Step title="Login">
+    Login to your wallet on the application.
+  </Step>
+
+  <Step title="Manage">
+    Select "Manage Wallet".
+    <DocImage src={ManageWallet} />
+  </Step>
+
+  <Step title="Export">
+    Choose "Export Private Key" and confirm the action to reveal the private key.
+    <DocImage src={ExportKey} />
+  </Step>
+
+  <Step title="Confirm">
+	Confirm you want to reveal your private key.
+    <Callout variant="warning" title="Secure Private Keys">
+      Revealing private keys can compromise your assets and security. Keep them safe and confidential at all times.
+    </Callout>
+    <DocImage src={ConfirmReveal} />
+  </Step>
+
+  <Step title="Reveal">
+    Copy the exported private key directly from the modal.
+    <DocImage src={ExportedKey} />
+  </Step>
+
+</Steps>
+
+
+<Callout variant="info" title="Advanced Configuration">
+    As an advanced option, to hide the export private key option from the modal, set the `hidePrivateKeyOption` to `true` when initializing the typescript or react SDK.
+</Callout>