docs: Reorganize TypeScript and React documentation structure

Author: joaquim-verges

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

@@ -113,19 +113,19 @@ Most authentication option are that straight forward. However, some options requ
 
 <div className="flex flex-col space-y-4">
     <ArticleIconCard
-        href="/wallet/sign-in-methods/guest"
+        href="/connect/wallet/sign-in-methods/guest"
         icon={UserIcon}
         title="Guest Mode"
         description="Learn more about guest mode"
     />
     <ArticleIconCard
-        href="/wallet/sign-in-methods/external-wallets"
+        href="/connect/wallet/sign-in-methods/external-wallets"
         icon={WalletsConnectIcon}
         title="External Wallet"
         description="Learn more about external wallet authentication"
     />
     <ArticleIconCard
-        href="/wallet/sign-in-methods/custom-auth/overview"
+        href="/connect/in-app-wallet/custom-auth/configuration"
         icon={EcosystemWalletsIcon}
         title="Custom Authentication"
         description="Learn more about custom authentication with your own auth system"

apps/portal/src/app/react/v5/connecting-wallets/hooks/page.mdx

@@ -48,6 +48,7 @@ function Example() {
 
 You can create any wallet by id with auto completion using the [`createWallet`](/references/typescript/v5/createWallet) function. Or use one of the first party wallets like [`inAppWallet`](/references/typescript/v5/inAppWallet) or [`ecosystemWallet`](/references/typescript/v5/ecosystemWallet).
 
+<Stack>
 <ArticleIconCard
 	title="inAppWallet"
 	icon={Wallet}
@@ -68,7 +69,7 @@ You can create any wallet by id with auto completion using the [`createWallet`](
 	href="/references/typescript/v5/createWallet"
 	description="Create any external wallet by id with auto completion"
 />
-
+</Stack>
 ## Pre Connection Hooks
 
 Use these hooks to trigger and manage wallet wallet connection within your own UI. Refer to [wallet connection hooks reference](/references/typescript/v5/useConnect) for more information.

apps/portal/src/app/react/v5/in-app-wallet/get-started/page.mdx

@@ -13,7 +13,6 @@ import {
 	Step
 } from "@doc";
 import {ExternalLink} from "lucide-react";
-import ConnectWalletHero from "./connect-wallet-hero.webp";
 
 export const metadata = createMetadata({
 	title: "Connect users with In-App Wallet",

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

@@ -1,4 +1,4 @@
-import { Book, CodeIcon, ExternalLink, ZapIcon } from "lucide-react";
+import { CodeIcon, ExternalLink, ZapIcon } from "lucide-react";
 import type { SideBar } from "../../../components/Layouts/DocLayout";
 
 const slug = "/react/v5";
@@ -137,22 +137,15 @@ export const sidebar: SideBar = {
       isCollapsible: false,
       links: [
         {
-          name: "Adapters",
-          links: [
-            {
-              // TODO one guide per library
-              name: "Usage with other libraries",
-              icon: <Book />,
-              href: `${slug}/adapters`,
-            },
-          ],
+          // TODO one guide per library
+          name: "Usage with other libraries",
+          href: `${slug}/adapters`,
         },
         {
           name: "Shared Logins",
           links: ["SiteEmbed", "SiteLink"].map((name) => ({
             name,
             href: `${slug}/${name}`,
-            icon: <CodeIcon />,
           })),
         },
       ],

apps/portal/src/app/typescript/v5/ecosystem-wallet/page.mdx

@@ -0,0 +1,101 @@
+import {
+	Tabs,
+	TabsList,
+	TabsTrigger,
+	TabsContent,
+	Callout,
+	DocImage,
+	createMetadata,
+	ArticleIconCard,
+	Stack,
+	AuthList,
+} from "@doc";
+import { ExternalLink} from "lucide-react";
+import EcosystemSocialConfig from './social-config.png'
+import { TypeScriptIcon } from "@/icons";
+
+export const metadata = createMetadata({
+	title: "Connect users with Ecosystem Wallets",
+	description:
+		"Connect users with ecosystem wallets",
+	image: {
+		title: "Connect users with Ecosystem Wallets",
+		icon: "wallets",
+	},
+});
+
+# Connect Users to your Ecosystem
+
+Ecosystem wallets inherit all the functionality of [in-app wallets](/references/typescript/v5/in-app-wallet), but instead of being scoped to a single app, they can be used across multiple applications.
+
+Head over to the [thirdweb dashboard](https://thirdweb.com/team) to create an ecosystem and obtain your ecosystem id.
+
+## Available auth methods
+
+<AuthList />
+
+## Live Playground
+
+Try out ecosystem wallets for yourself in the [in-app wallet live playground](https://playground.thirdweb.com/connect/in-app-wallet/ecosystem)
+
+<Stack>
+
+<ArticleIconCard
+	title="Try the demo"
+	icon={ExternalLink}
+	href="https://playground.thirdweb.com/connect/in-app-wallet/ecosystem"
+	description="See the SDK in action on the live playground"
+/>
+
+</Stack>
+
+## Configure ecosystem wallets
+
+The only difference with in-app wallets is how you create an ecosystem wallet using the `ecosystemWallet()` function and passing your ecosystem id.
+
+```tsx
+import { ecosystemWallet } from "thirdweb/wallets";
+
+const wallet = ecosystemWallet("ecosystem.your-ecosystem-id");
+```
+
+## Configuring auth strategies
+
+You can configure the allowed auth strategies on [your dashboard](https://thirdweb.com/team/~/~/ecosystem).
+
+<DocImage src={EcosystemSocialConfig}/>
+
+For prebuilt UIs, the enabled auth strategies are automatically read from your dashbaord configurations.
+
+For custom UIs, you can configure the auth options when connecting the wallet. See [using your own UI](#using-your-own-ui) for an example. 
+
+<Callout variant="warning" title="Using disabled auth strategies">
+	Note that while you're allowed to pass any auth strategy today, we recommend only passing the strategies that are enabled on your dashboard. We might enforce this in the future.
+</Callout>
+
+## Passing a partner ID
+
+For closed ecosystems, you can invite partners to your ecosystem. Partners will have to pass a valid `partnerId` to the `ecosystemWallet()` function in order to connect to your ecosystem.
+
+```tsx
+const wallet = ecosystemWallet("ecosystem.your-ecosystem-id", {
+	partnerId: "your-partner-id",
+});
+```
+
+For more information, refer to the [ecosystemWallet API reference](/references/typescript/v5/ecosystemWallet).
+
+<Stack>
+
+<ArticleIconCard
+	title="ecosystemWallet API reference"
+	icon={TypeScriptIcon}
+	href="/references/typescript/v5/ecosystemWallet"
+	description="Learn more about the ecosystemWallet function"
+/>
+
+</Stack>
+
+## Using ecosystem wallets
+
+Refer to the [in-app wallets](/references/typescript/v5/in-app-wallet) documentation to add your ecosystem wallet to your applications.

apps/portal/src/app/typescript/v5/ecosystem-wallet/social-config.png

@@ -0,0 +1,113 @@
+import {
+	Tabs,
+	TabsList,
+	TabsTrigger,
+	TabsContent,
+	Callout,
+	DocImage,
+	createMetadata,
+	AuthList,
+	ArticleIconCard,
+	Stack,
+	Steps,
+	Step
+} from "@doc";
+import {ExternalLink} from "lucide-react";
+import { TypeScriptIcon } from "@/icons";
+
+export const metadata = createMetadata({
+	title: "Connect users with In-App Wallet",
+	description:
+		"use the prebuilt connect UI components to authenticate users and connect in-app wallets",
+	image: {
+		title: "Connect users with In-App Wallets",
+		icon: "wallets",
+	},
+});
+
+# In-App Wallets
+
+Create in-app wallet for your users based on their email, phone, passkey, social auth or even their external wallets. These wallets are scoped by your clientId and do not require any confirmation to sign transactions. 
+
+## Available auth methods
+
+<AuthList />
+
+## Live Playground
+
+Try out in-app wallets for yourself in the [in-app wallet live playground](https://playground.thirdweb.com/connect/in-app-wallet)
+
+<Stack>
+
+<ArticleIconCard
+	title="Try the demo"
+	icon={ExternalLink}
+	href="https://playground.thirdweb.com/connect/in-app-wallet"
+	description="See the SDK in action on the live playground"
+/>
+
+</Stack>
+
+## Configure in-app wallets
+
+The simplest way to create an in-app wallet is to use the `inAppWallet()` function. By default, this will create a wallet that supports email/password login, Google, Apple, Facebook login, and passkey.
+
+```tsx
+import { inAppWallet } from "thirdweb/wallets";
+
+const wallet = inAppWallet();
+```
+
+You can also customize the wallet by passing in options.
+
+```tsx
+import { inAppWallet } from "thirdweb/wallets";
+
+const wallet = inAppWallet({
+	auth: {
+        mode, // options are "popup" | "redirect" | "window";
+        options, // ex: ["discord", "farcaster", "apple", "facebook", "google", "passkey"],
+        passkeyDomain, // for passkey, the domain that the passkey is created on
+        redirectUrl, // the URL to redirect to after authentication
+	},
+	metadata, // metadata for the wallet (name, icon, etc.)
+	smartAccount, // smart account options for the wallet (for gasless tx)
+});
+```
+
+[View all in-app wallet options](/references/typescript/v5/InAppWalletCreationOptions).
+
+Once created, you can use it either with the prebuilt UI components, or with your own UI.
+
+## Usage
+
+```tsx
+import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
+import { inAppWallet } from "thirdweb/wallets";
+
+const client = createThirdwebClient({ clientId });
+const wallet = inAppWallet();
+
+const account = await wallet.connect({
+	client,
+	strategy: "google",
+});
+
+console.log("connected as", account.address);
+
+```
+
+## API Reference
+
+View all the auth and configuration options for in-app wallets in the [API Reference](/references/typescript/v5/inAppWallet).
+
+<Stack>
+
+<ArticleIconCard
+	title="inAppWallet"
+	icon={TypeScriptIcon}
+	href="/references/typescript/v5/inAppWallet"
+	description="Create an in-app wallet from any auth"
+/>
+
+</Stack>