From 9dc8f5a637b0abe5d18e38372be084032e753abb Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 24 Jul 2025 20:20:12 +0000
Subject: [PATCH] [TOOL-5111] Playground: Update slugs, add redirects (#7698)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on renaming and restructuring routes from `/connect` to `/wallets`, alongside adjustments in documentation links and component imports to streamline the application.

### Detailed summary
- Updated redirect paths from `/connect/...` to `/wallets/...`
- Changed documentation links accordingly
- Refactored component imports to match new route structure
- Adjusted breadcrumb links and sidebar navigation items
- Renamed files and folders to reflect the new `/wallets` hierarchy

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Expanded and reorganized URL redirects for improved navigation, including new paths for wallets, payments, and transactions sections.

* **Refactor**
  * Updated navigation links and internal references to use new URL structures for wallets, payments, and transactions.
  * Simplified import paths and component structures for improved code clarity and maintainability.

* **Documentation**
  * Updated documentation links throughout the app to reflect new URLs and more relevant resources.

* **Style**
  * Minor formatting improvements for code consistency and readability.

* **Chores**
  * Enhanced code comments to clarify the use of array index as React list keys.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/playground-web/next.config.mjs           |  53 ++++++++++-
 apps/playground-web/src/app/navLinks.ts       |  50 +++++------
 apps/playground-web/src/app/page.tsx          |   2 +-
 .../pay => payments}/backend/layout.tsx       |   4 +-
 .../pay => payments}/backend/page.tsx         |   2 +-
 .../backend/reference/page.tsx                |  16 ++--
 .../pay => payments}/backend/utils.ts         |   2 +-
 .../pay => payments}/commerce/page.tsx        |   2 +-
 .../pay => payments}/components/CodeGen.tsx   |   6 +-
 .../pay => payments}/components/types.ts      |   0
 .../pay => payments}/embed/LeftSection.tsx    |   6 +-
 .../pay => payments}/embed/RightSection.tsx   |   6 +-
 .../{connect/pay => payments}/embed/page.tsx  |   0
 .../pay => payments}/fund-wallet/page.tsx     |   2 +-
 .../pay => payments}/opengraph-image.png      | Bin
 .../pay => payments}/transactions/page.tsx    |   2 +-
 .../pay => payments/ui-components}/page.tsx   |   4 +-
 .../_hooks/useEngineTxStatus.ts               |   0
 .../app/{engine => transactions}/actions.ts   |   0
 .../_components/airdrop-card.tsx              |   0
 .../_components/airdrop-code.tsx              |   0
 .../_components/airdrop-preview.tsx           |   0
 .../airdrop-tokens}/constants.ts              |   0
 .../airdrop-tokens}/page.tsx                  |   2 +-
 .../mint-tokens}/_components/mint-code.tsx    |   0
 .../mint-tokens}/_components/mint-preview.tsx |   0
 .../mint-tokens}/constants.ts                 |   0
 .../mint-tokens}/page.tsx                     |   2 +-
 .../src/app/{engine => transactions}/types.ts |   0
 .../webhooks/_components/webhooks-preview.tsx |   0
 .../webhooks/constants.ts                     |   0
 .../webhooks/page.tsx                         |   4 +-
 .../account-abstraction/5792/page.tsx         |  84 +++++++++---------
 .../account-abstraction/7702/page.tsx         |  24 +++--
 .../account-abstraction/connect/page.tsx      |   2 +-
 .../account-abstraction/native-aa/page.tsx    |  14 ++-
 .../account-abstraction/sponsor/page.tsx      |   4 +-
 .../app/{connect => wallets}/auth/page.tsx    |   0
 .../auth/server/actions/auth.ts               |   0
 .../blockchain-api/page.tsx                   |   0
 .../headless/account-components}/page.tsx     |   0
 .../headless/chain-components}/page.tsx       |   0
 .../headless/nft-components}/page.tsx         |   0
 .../headless/token-components}/page.tsx       |   0
 .../headless/wallet-components}/page.tsx      |   0
 .../in-app-wallet/ecosystem/page.tsx          |   2 +-
 .../in-app-wallet/page.tsx                    |   2 +-
 .../in-app-wallet/sponsor/page.tsx            |   4 +-
 .../sign-in/button/LeftSection.tsx            |   4 +-
 .../sign-in/button/RightSection.tsx           |   0
 .../sign-in/button/page.tsx                   |   2 +-
 .../sign-in/components/CodeGen.tsx            |   0
 .../sign-in/components/CollapsibleSection.tsx |   0
 .../sign-in/components/ColorFormGroup.tsx     |   0
 .../sign-in/components/ColorInput/index.tsx   |   0
 .../components/InAppWalletFormGroup.tsx       |   2 +-
 .../sign-in/components/LocaleFormControl.tsx  |   0
 .../sign-in/components/WalletsSelection.tsx   |   0
 .../sign-in/components/types.ts               |   0
 .../sign-in/embed/page.tsx                    |  14 ++-
 .../sign-in/headless/page.tsx                 |  20 ++---
 .../sign-in/opengraph-image.png               | Bin
 .../app/{connect => wallets}/social/page.tsx  |   2 +-
 .../src/components/auth/auth-button.tsx       |   2 +-
 .../src/components/auth/auth-hook.tsx         |   2 +-
 .../src/components/auth/gated-content.tsx     |   4 +-
 .../auth/smart-account-auth-button.tsx        |   2 +-
 .../in-app-wallet/custom-login-form.tsx       |   2 +-
 .../src/components/ui/sidebar.tsx             |   4 +-
 69 files changed, 196 insertions(+), 165 deletions(-)
 rename apps/playground-web/src/app/{connect/pay => payments}/backend/layout.tsx (67%)
 rename apps/playground-web/src/app/{connect/pay => payments}/backend/page.tsx (97%)
 rename apps/playground-web/src/app/{connect/pay => payments}/backend/reference/page.tsx (76%)
 rename apps/playground-web/src/app/{connect/pay => payments}/backend/utils.ts (91%)
 rename apps/playground-web/src/app/{connect/pay => payments}/commerce/page.tsx (95%)
 rename apps/playground-web/src/app/{connect/pay => payments}/components/CodeGen.tsx (95%)
 rename apps/playground-web/src/app/{connect/pay => payments}/components/types.ts (100%)
 rename apps/playground-web/src/app/{connect/pay => payments}/embed/LeftSection.tsx (98%)
 rename apps/playground-web/src/app/{connect/pay => payments}/embed/RightSection.tsx (97%)
 rename apps/playground-web/src/app/{connect/pay => payments}/embed/page.tsx (100%)
 rename apps/playground-web/src/app/{connect/pay => payments}/fund-wallet/page.tsx (94%)
 rename apps/playground-web/src/app/{connect/pay => payments}/opengraph-image.png (100%)
 rename apps/playground-web/src/app/{connect/pay => payments}/transactions/page.tsx (97%)
 rename apps/playground-web/src/app/{connect/pay => payments/ui-components}/page.tsx (87%)
 rename apps/playground-web/src/app/{engine => transactions}/_hooks/useEngineTxStatus.ts (100%)
 rename apps/playground-web/src/app/{engine => transactions}/actions.ts (100%)
 rename apps/playground-web/src/app/{engine/airdrop => transactions/airdrop-tokens}/_components/airdrop-card.tsx (100%)
 rename apps/playground-web/src/app/{engine/airdrop => transactions/airdrop-tokens}/_components/airdrop-code.tsx (100%)
 rename apps/playground-web/src/app/{engine/airdrop => transactions/airdrop-tokens}/_components/airdrop-preview.tsx (100%)
 rename apps/playground-web/src/app/{engine/airdrop => transactions/airdrop-tokens}/constants.ts (100%)
 rename apps/playground-web/src/app/{engine/airdrop => transactions/airdrop-tokens}/page.tsx (89%)
 rename apps/playground-web/src/app/{engine/minting => transactions/mint-tokens}/_components/mint-code.tsx (100%)
 rename apps/playground-web/src/app/{engine/minting => transactions/mint-tokens}/_components/mint-preview.tsx (100%)
 rename apps/playground-web/src/app/{engine/minting => transactions/mint-tokens}/constants.ts (100%)
 rename apps/playground-web/src/app/{engine/minting => transactions/mint-tokens}/page.tsx (89%)
 rename apps/playground-web/src/app/{engine => transactions}/types.ts (100%)
 rename apps/playground-web/src/app/{engine => transactions}/webhooks/_components/webhooks-preview.tsx (100%)
 rename apps/playground-web/src/app/{engine => transactions}/webhooks/constants.ts (100%)
 rename apps/playground-web/src/app/{engine => transactions}/webhooks/page.tsx (72%)
 rename apps/playground-web/src/app/{connect => wallets}/account-abstraction/5792/page.tsx (58%)
 rename apps/playground-web/src/app/{connect => wallets}/account-abstraction/7702/page.tsx (79%)
 rename apps/playground-web/src/app/{connect => wallets}/account-abstraction/connect/page.tsx (96%)
 rename apps/playground-web/src/app/{connect => wallets}/account-abstraction/native-aa/page.tsx (88%)
 rename apps/playground-web/src/app/{connect => wallets}/account-abstraction/sponsor/page.tsx (97%)
 rename apps/playground-web/src/app/{connect => wallets}/auth/page.tsx (100%)
 rename apps/playground-web/src/app/{connect => wallets}/auth/server/actions/auth.ts (100%)
 rename apps/playground-web/src/app/{connect => wallets}/blockchain-api/page.tsx (100%)
 rename apps/playground-web/src/app/{connect/ui => wallets/headless/account-components}/page.tsx (100%)
 rename apps/playground-web/src/app/{connect/ui/chain => wallets/headless/chain-components}/page.tsx (100%)
 rename apps/playground-web/src/app/{connect/ui/nft => wallets/headless/nft-components}/page.tsx (100%)
 rename apps/playground-web/src/app/{connect/ui/token => wallets/headless/token-components}/page.tsx (100%)
 rename apps/playground-web/src/app/{connect/ui/wallet => wallets/headless/wallet-components}/page.tsx (100%)
 rename apps/playground-web/src/app/{connect => wallets}/in-app-wallet/ecosystem/page.tsx (95%)
 rename apps/playground-web/src/app/{connect => wallets}/in-app-wallet/page.tsx (97%)
 rename apps/playground-web/src/app/{connect => wallets}/in-app-wallet/sponsor/page.tsx (95%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/button/LeftSection.tsx (98%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/button/RightSection.tsx (100%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/button/page.tsx (96%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/components/CodeGen.tsx (100%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/components/CollapsibleSection.tsx (100%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/components/ColorFormGroup.tsx (100%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/components/ColorInput/index.tsx (100%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/components/InAppWalletFormGroup.tsx (97%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/components/LocaleFormControl.tsx (100%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/components/WalletsSelection.tsx (100%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/components/types.ts (100%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/embed/page.tsx (83%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/headless/page.tsx (90%)
 rename apps/playground-web/src/app/{connect => wallets}/sign-in/opengraph-image.png (100%)
 rename apps/playground-web/src/app/{connect => wallets}/social/page.tsx (96%)

diff --git a/apps/playground-web/next.config.mjs b/apps/playground-web/next.config.mjs
index 50a13b16629..420ea92fecd 100644
--- a/apps/playground-web/next.config.mjs
+++ b/apps/playground-web/next.config.mjs
@@ -57,14 +57,59 @@ const nextConfig = {
   async redirects() {
     return [
       {
-        destination: "/connect/sign-in/button",
+        source: "/connect/pay",
+        destination: "/payments/ui-components",
         permanent: false,
-        source: "/connect/sign-in",
       },
       {
-        destination: "/connect/account-abstraction/connect",
+        source: "/connect/pay/:path*",
+        destination: "/payments/:path*",
+        permanent: false,
+      },
+      {
+        source: "/connect/ui",
+        destination: "/wallets/headless/account-components",
+        permanent: false,
+      },
+      {
+        source: "/connect/ui/nft",
+        destination: "/wallets/headless/nft-components",
+        permanent: false,
+      },
+      {
+        source: "/connect/ui/token",
+        destination: "/wallets/headless/token-components",
+        permanent: false,
+      },
+      {
+        source: "/connect/ui/chain",
+        destination: "/wallets/headless/chain-components",
+        permanent: false,
+      },
+      {
+        source: "/connect/ui/wallet",
+        destination: "/wallets/headless/wallet-components",
+        permanent: false,
+      },
+      {
+        source: "/connect/:path*",
+        destination: "/wallets/:path*",
+        permanent: false,
+      },
+      {
+        source: "/engine/airdrop",
+        destination: "/transactions/airdrop-tokens",
+        permanent: false,
+      },
+      {
+        source: "/engine/minting",
+        destination: "/transactions/mint-tokens",
+        permanent: false,
+      },
+      {
+        source: "/engine/webhooks",
+        destination: "/transactions/webhooks",
         permanent: false,
-        source: "/connect/account-abstraction",
       },
     ];
   },
diff --git a/apps/playground-web/src/app/navLinks.ts b/apps/playground-web/src/app/navLinks.ts
index a2b3a75ba99..f23d746245b 100644
--- a/apps/playground-web/src/app/navLinks.ts
+++ b/apps/playground-web/src/app/navLinks.ts
@@ -6,74 +6,74 @@ const staticSidebarLinks: SidebarLink[] = [
     isCollapsible: false,
     links: [
       {
-        href: "/connect/sign-in/button",
+        href: "/wallets/sign-in/button",
         name: "ConnectButton",
       },
       {
-        href: "/connect/sign-in/embed",
+        href: "/wallets/sign-in/embed",
         name: "ConnectEmbed",
       },
       {
-        href: "/connect/sign-in/headless",
+        href: "/wallets/sign-in/headless",
         name: "Headless Connect",
       },
       {
-        href: "/connect/in-app-wallet",
+        href: "/wallets/in-app-wallet",
         name: "In-App Wallets",
       },
       {
-        href: "/connect/in-app-wallet/ecosystem",
+        href: "/wallets/in-app-wallet/ecosystem",
         name: "Ecosystem Wallets",
       },
       {
-        href: "/connect/account-abstraction/sponsor",
+        href: "/wallets/account-abstraction/sponsor",
         name: "EIP-4337",
       },
       {
-        href: "/connect/account-abstraction/7702",
+        href: "/wallets/account-abstraction/7702",
         name: "EIP-7702",
       },
       {
-        href: "/connect/account-abstraction/5792",
+        href: "/wallets/account-abstraction/5792",
         name: "EIP-5792",
       },
       {
-        href: "/connect/account-abstraction/native-aa",
+        href: "/wallets/account-abstraction/native-aa",
         name: "Native AA (zkSync)",
       },
       {
-        href: "/connect/auth",
+        href: "/wallets/auth",
         name: "Auth",
       },
       {
-        href: "/connect/social",
+        href: "/wallets/social",
         name: "Social",
       },
       {
-        href: "/connect/blockchain-api",
+        href: "/wallets/blockchain-api",
         name: "Blockchain API",
       },
       {
         expanded: false,
         links: [
           {
-            href: "/connect/ui",
+            href: "/wallets/headless/account-components",
             name: "Account",
           },
           {
-            href: "/connect/ui/nft",
+            href: "/wallets/headless/nft-components",
             name: "NFT",
           },
           {
-            href: "/connect/ui/token",
+            href: "/wallets/headless/token-components",
             name: "Token",
           },
           {
-            href: "/connect/ui/chain",
+            href: "/wallets/headless/chain-components",
             name: "Chain",
           },
           {
-            href: "/connect/ui/wallet",
+            href: "/wallets/headless/wallet-components",
             name: "Wallet",
           },
         ],
@@ -89,23 +89,23 @@ const universalBridgeSidebarLinks: SidebarLink = {
   isCollapsible: false,
   links: [
     {
-      href: "/connect/pay",
+      href: "/payments/ui-components",
       name: "UI Component",
     },
     {
-      href: "/connect/pay/fund-wallet",
+      href: "/payments/fund-wallet",
       name: "Buy Crypto",
     },
     {
-      href: "/connect/pay/commerce",
+      href: "/payments/commerce",
       name: "Checkout",
     },
     {
-      href: "/connect/pay/transactions",
+      href: "/payments/transactions",
       name: "Transactions",
     },
     {
-      href: "/connect/pay/backend",
+      href: "/payments/backend",
       name: "Backend API",
     },
   ],
@@ -117,15 +117,15 @@ const engineSidebarLinks: SidebarLink = {
   isCollapsible: false,
   links: [
     {
-      href: "/engine/airdrop",
+      href: "/transactions/airdrop-tokens",
       name: "Airdrop",
     },
     {
-      href: "/engine/minting",
+      href: "/transactions/mint-tokens",
       name: "Mint NFTs",
     },
     {
-      href: "/engine/webhooks",
+      href: "/transactions/webhooks",
       name: "Webhooks",
     },
   ],
diff --git a/apps/playground-web/src/app/page.tsx b/apps/playground-web/src/app/page.tsx
index 99cb9b88b19..41e53f42c88 100644
--- a/apps/playground-web/src/app/page.tsx
+++ b/apps/playground-web/src/app/page.tsx
@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
 
 export default function Page() {
-  redirect("/connect/sign-in/button");
+  redirect("/wallets/sign-in/button");
 }
diff --git a/apps/playground-web/src/app/connect/pay/backend/layout.tsx b/apps/playground-web/src/app/payments/backend/layout.tsx
similarity index 67%
rename from apps/playground-web/src/app/connect/pay/backend/layout.tsx
rename to apps/playground-web/src/app/payments/backend/layout.tsx
index 3698b5f17c5..acebc58595b 100644
--- a/apps/playground-web/src/app/connect/pay/backend/layout.tsx
+++ b/apps/playground-web/src/app/payments/backend/layout.tsx
@@ -1,5 +1,5 @@
 import type React from "react";
-import { PageHeader } from "../../../../components/blocks/APIHeader";
+import { PageHeader } from "../../../components/blocks/APIHeader";
 
 export default function Layout(props: { children: React.ReactNode }) {
   return (
@@ -8,7 +8,7 @@ export default function Layout(props: { children: React.ReactNode }) {
         description={
           <>HTTP API to bridge, swap and onramp to and from any currency</>
         }
-        docsLink="https://portal.thirdweb.com/connect/pay/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/payments?utm_source=playground"
         title="Payments API"
       />
 
diff --git a/apps/playground-web/src/app/connect/pay/backend/page.tsx b/apps/playground-web/src/app/payments/backend/page.tsx
similarity index 97%
rename from apps/playground-web/src/app/connect/pay/backend/page.tsx
rename to apps/playground-web/src/app/payments/backend/page.tsx
index 930a76763e7..6a8d1e4f6c0 100644
--- a/apps/playground-web/src/app/connect/pay/backend/page.tsx
+++ b/apps/playground-web/src/app/payments/backend/page.tsx
@@ -38,7 +38,7 @@ export default async function Page() {
                 }
                 return {
                   description: pathObj.get?.description || "",
-                  link: `/connect/pay/backend/reference?route=${pathName}`,
+                  link: `/payments/backend/reference?route=${pathName}`,
                   name: pathName,
                 };
               })}
diff --git a/apps/playground-web/src/app/connect/pay/backend/reference/page.tsx b/apps/playground-web/src/app/payments/backend/reference/page.tsx
similarity index 76%
rename from apps/playground-web/src/app/connect/pay/backend/reference/page.tsx
rename to apps/playground-web/src/app/payments/backend/reference/page.tsx
index aadf9847e17..44e2057f2a9 100644
--- a/apps/playground-web/src/app/connect/pay/backend/reference/page.tsx
+++ b/apps/playground-web/src/app/payments/backend/reference/page.tsx
@@ -6,9 +6,9 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
-import { THIRDWEB_CLIENT } from "../../../../../lib/client";
-import { isProd } from "../../../../../lib/env";
-import { BlueprintPlayground } from "../../../../insight/[blueprint_slug]/blueprint-playground.client";
+import { THIRDWEB_CLIENT } from "../../../../lib/client";
+import { isProd } from "../../../../lib/env";
+import { BlueprintPlayground } from "../../../insight/[blueprint_slug]/blueprint-playground.client";
 import { getBridgePaths } from "../utils";
 
 export default async function Page(props: {
@@ -20,7 +20,7 @@ export default async function Page(props: {
 
   // invalid url
   if (!params.route) {
-    redirect("/connect/pay/backend");
+    redirect("/payments/backend");
   }
 
   const thirdwebDomain = !isProd ? "thirdweb-dev" : "thirdweb";
@@ -31,7 +31,7 @@ export default async function Page(props: {
 
   // invalid url
   if (!pathMetadata) {
-    redirect("/connect/pay/backend");
+    redirect("/payments/backend");
   }
 
   const title = pathMetadata.summary || "";
@@ -46,7 +46,7 @@ export default async function Page(props: {
       )}
 
       <BlueprintPlayground
-        backLink={"/connect/pay/backend"}
+        backLink={"/payments/backend"}
         clientId={THIRDWEB_CLIENT.clientId}
         domain={domain}
         key={params.route}
@@ -63,9 +63,7 @@ function Breadcrumbs() {
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="/connect/pay/backend">
-            Payments API
-          </BreadcrumbLink>
+          <BreadcrumbLink href="/payments/backend">Payments API</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
       </BreadcrumbList>
diff --git a/apps/playground-web/src/app/connect/pay/backend/utils.ts b/apps/playground-web/src/app/payments/backend/utils.ts
similarity index 91%
rename from apps/playground-web/src/app/connect/pay/backend/utils.ts
rename to apps/playground-web/src/app/payments/backend/utils.ts
index eb75e377ffc..8bc94534eb3 100644
--- a/apps/playground-web/src/app/connect/pay/backend/utils.ts
+++ b/apps/playground-web/src/app/payments/backend/utils.ts
@@ -1,5 +1,5 @@
 import type { OpenAPIV3 } from "openapi-types";
-import { isProd } from "../../../../lib/env";
+import { isProd } from "../../../lib/env";
 
 export async function getBridgePaths() {
   const thirdwebDomain = !isProd ? "thirdweb-dev" : "thirdweb";
diff --git a/apps/playground-web/src/app/connect/pay/commerce/page.tsx b/apps/playground-web/src/app/payments/commerce/page.tsx
similarity index 95%
rename from apps/playground-web/src/app/connect/pay/commerce/page.tsx
rename to apps/playground-web/src/app/payments/commerce/page.tsx
index 5ef0c963666..6b99c528123 100644
--- a/apps/playground-web/src/app/connect/pay/commerce/page.tsx
+++ b/apps/playground-web/src/app/payments/commerce/page.tsx
@@ -21,7 +21,7 @@ export default function Page() {
             Let your users pay for any service with fiat or crypto on any chain.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/pay/get-started?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/payments?utm_source=playground"
         title="Commerce payments with fiat or crypto"
       >
         <BuyMerch />
diff --git a/apps/playground-web/src/app/connect/pay/components/CodeGen.tsx b/apps/playground-web/src/app/payments/components/CodeGen.tsx
similarity index 95%
rename from apps/playground-web/src/app/connect/pay/components/CodeGen.tsx
rename to apps/playground-web/src/app/payments/components/CodeGen.tsx
index b179561b35d..e4e61de457f 100644
--- a/apps/playground-web/src/app/connect/pay/components/CodeGen.tsx
+++ b/apps/playground-web/src/app/payments/components/CodeGen.tsx
@@ -1,10 +1,8 @@
 import { lazy, Suspense } from "react";
-import { CodeLoading } from "../../../../components/code/code.client";
+import { CodeLoading } from "../../../components/code/code.client";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
 
-const CodeClient = lazy(
-  () => import("../../../../components/code/code.client"),
-);
+const CodeClient = lazy(() => import("../../../components/code/code.client"));
 
 export function CodeGen(props: { options: BridgeComponentsPlaygroundOptions }) {
   return (
diff --git a/apps/playground-web/src/app/connect/pay/components/types.ts b/apps/playground-web/src/app/payments/components/types.ts
similarity index 100%
rename from apps/playground-web/src/app/connect/pay/components/types.ts
rename to apps/playground-web/src/app/payments/components/types.ts
diff --git a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx b/apps/playground-web/src/app/payments/embed/LeftSection.tsx
similarity index 98%
rename from apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
rename to apps/playground-web/src/app/payments/embed/LeftSection.tsx
index 920d2053809..91c034830d8 100644
--- a/apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
+++ b/apps/playground-web/src/app/payments/embed/LeftSection.tsx
@@ -27,8 +27,8 @@ import {
 import { TokenSelector } from "@/components/ui/TokenSelector";
 import { THIRDWEB_CLIENT } from "@/lib/client";
 import type { TokenMetadata } from "@/lib/types";
-import { CollapsibleSection } from "../../sign-in/components/CollapsibleSection";
-import { ColorFormGroup } from "../../sign-in/components/ColorFormGroup";
+import { CollapsibleSection } from "../../wallets/sign-in/components/CollapsibleSection";
+import { ColorFormGroup } from "../../wallets/sign-in/components/ColorFormGroup";
 import type { BridgeComponentsPlaygroundOptions } from "../components/types";
 
 export function LeftSection(props: {
@@ -545,7 +545,7 @@ export function LeftSection(props: {
 
             <Link
               className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
-              href="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
+              href="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
               target="_blank"
             >
               Learn more about Account Abstraction
diff --git a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx b/apps/playground-web/src/app/payments/embed/RightSection.tsx
similarity index 97%
rename from apps/playground-web/src/app/connect/pay/embed/RightSection.tsx
rename to apps/playground-web/src/app/payments/embed/RightSection.tsx
index d29b54806f6..483868bc8ab 100644
--- a/apps/playground-web/src/app/connect/pay/embed/RightSection.tsx
+++ b/apps/playground-web/src/app/payments/embed/RightSection.tsx
@@ -12,9 +12,9 @@ import {
   TransactionWidget,
   useActiveAccount,
 } from "thirdweb/react";
-import { Button } from "../../../../components/ui/button";
-import { THIRDWEB_CLIENT } from "../../../../lib/client";
-import { cn } from "../../../../lib/utils";
+import { Button } from "../../../components/ui/button";
+import { THIRDWEB_CLIENT } from "../../../lib/client";
+import { cn } from "../../../lib/utils";
 import { CodeGen } from "../components/CodeGen";
 import type { BridgeComponentsPlaygroundOptions } from "../components/types";
 
diff --git a/apps/playground-web/src/app/connect/pay/embed/page.tsx b/apps/playground-web/src/app/payments/embed/page.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/pay/embed/page.tsx
rename to apps/playground-web/src/app/payments/embed/page.tsx
diff --git a/apps/playground-web/src/app/connect/pay/fund-wallet/page.tsx b/apps/playground-web/src/app/payments/fund-wallet/page.tsx
similarity index 94%
rename from apps/playground-web/src/app/connect/pay/fund-wallet/page.tsx
rename to apps/playground-web/src/app/payments/fund-wallet/page.tsx
index b9b2a28ee88..6d09963ea87 100644
--- a/apps/playground-web/src/app/connect/pay/fund-wallet/page.tsx
+++ b/apps/playground-web/src/app/payments/fund-wallet/page.tsx
@@ -22,7 +22,7 @@ export default function Page() {
             and generate revenue for each user transaction.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/pay/get-started?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
         title="The easiest way for users to fund their wallets"
       >
         <StyledPayWidget />
diff --git a/apps/playground-web/src/app/connect/pay/opengraph-image.png b/apps/playground-web/src/app/payments/opengraph-image.png
similarity index 100%
rename from apps/playground-web/src/app/connect/pay/opengraph-image.png
rename to apps/playground-web/src/app/payments/opengraph-image.png
diff --git a/apps/playground-web/src/app/connect/pay/transactions/page.tsx b/apps/playground-web/src/app/payments/transactions/page.tsx
similarity index 97%
rename from apps/playground-web/src/app/connect/pay/transactions/page.tsx
rename to apps/playground-web/src/app/payments/transactions/page.tsx
index 003a7a23964..e95dd0ef130 100644
--- a/apps/playground-web/src/app/connect/pay/transactions/page.tsx
+++ b/apps/playground-web/src/app/payments/transactions/page.tsx
@@ -26,7 +26,7 @@ export default function Page() {
             any chain.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/pay/get-started?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
         title="Onchain transactions with fiat or crypto"
       >
         <BuyOnchainAsset />
diff --git a/apps/playground-web/src/app/connect/pay/page.tsx b/apps/playground-web/src/app/payments/ui-components/page.tsx
similarity index 87%
rename from apps/playground-web/src/app/connect/pay/page.tsx
rename to apps/playground-web/src/app/payments/ui-components/page.tsx
index 9f51064d019..042b99cb31f 100644
--- a/apps/playground-web/src/app/connect/pay/page.tsx
+++ b/apps/playground-web/src/app/payments/ui-components/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import ThirdwebProvider from "@/components/thirdweb-provider";
 import { metadataBase } from "@/lib/constants";
 import { PageLayout } from "../../../components/blocks/APIHeader";
-import PayEmbedPlayground from "./embed/page";
+import PayEmbedPlayground from "../embed/page";
 
 export const metadata: Metadata = {
   description:
@@ -23,7 +23,7 @@ export default function Page(props: {
             and generate revenue for each user transaction.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/pay/get-started?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/payments?utm_source=playground"
         title="Payments UI component"
       >
         <PayEmbedPlayground searchParams={props.searchParams} />
diff --git a/apps/playground-web/src/app/engine/_hooks/useEngineTxStatus.ts b/apps/playground-web/src/app/transactions/_hooks/useEngineTxStatus.ts
similarity index 100%
rename from apps/playground-web/src/app/engine/_hooks/useEngineTxStatus.ts
rename to apps/playground-web/src/app/transactions/_hooks/useEngineTxStatus.ts
diff --git a/apps/playground-web/src/app/engine/actions.ts b/apps/playground-web/src/app/transactions/actions.ts
similarity index 100%
rename from apps/playground-web/src/app/engine/actions.ts
rename to apps/playground-web/src/app/transactions/actions.ts
diff --git a/apps/playground-web/src/app/engine/airdrop/_components/airdrop-card.tsx b/apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-card.tsx
similarity index 100%
rename from apps/playground-web/src/app/engine/airdrop/_components/airdrop-card.tsx
rename to apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-card.tsx
diff --git a/apps/playground-web/src/app/engine/airdrop/_components/airdrop-code.tsx b/apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-code.tsx
similarity index 100%
rename from apps/playground-web/src/app/engine/airdrop/_components/airdrop-code.tsx
rename to apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-code.tsx
diff --git a/apps/playground-web/src/app/engine/airdrop/_components/airdrop-preview.tsx b/apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-preview.tsx
similarity index 100%
rename from apps/playground-web/src/app/engine/airdrop/_components/airdrop-preview.tsx
rename to apps/playground-web/src/app/transactions/airdrop-tokens/_components/airdrop-preview.tsx
diff --git a/apps/playground-web/src/app/engine/airdrop/constants.ts b/apps/playground-web/src/app/transactions/airdrop-tokens/constants.ts
similarity index 100%
rename from apps/playground-web/src/app/engine/airdrop/constants.ts
rename to apps/playground-web/src/app/transactions/airdrop-tokens/constants.ts
diff --git a/apps/playground-web/src/app/engine/airdrop/page.tsx b/apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx
similarity index 89%
rename from apps/playground-web/src/app/engine/airdrop/page.tsx
rename to apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx
index ef676f8c77b..247b1c75f04 100644
--- a/apps/playground-web/src/app/engine/airdrop/page.tsx
+++ b/apps/playground-web/src/app/transactions/airdrop-tokens/page.tsx
@@ -1,4 +1,4 @@
-import { EngineAirdropPreview } from "@/app/engine/airdrop/_components/airdrop-preview";
+import { EngineAirdropPreview } from "@/app/transactions/airdrop-tokens/_components/airdrop-preview";
 import ThirdwebProvider from "@/components/thirdweb-provider";
 import { PageLayout } from "../../../components/blocks/APIHeader";
 import { AirdropCode } from "./_components/airdrop-code";
diff --git a/apps/playground-web/src/app/engine/minting/_components/mint-code.tsx b/apps/playground-web/src/app/transactions/mint-tokens/_components/mint-code.tsx
similarity index 100%
rename from apps/playground-web/src/app/engine/minting/_components/mint-code.tsx
rename to apps/playground-web/src/app/transactions/mint-tokens/_components/mint-code.tsx
diff --git a/apps/playground-web/src/app/engine/minting/_components/mint-preview.tsx b/apps/playground-web/src/app/transactions/mint-tokens/_components/mint-preview.tsx
similarity index 100%
rename from apps/playground-web/src/app/engine/minting/_components/mint-preview.tsx
rename to apps/playground-web/src/app/transactions/mint-tokens/_components/mint-preview.tsx
diff --git a/apps/playground-web/src/app/engine/minting/constants.ts b/apps/playground-web/src/app/transactions/mint-tokens/constants.ts
similarity index 100%
rename from apps/playground-web/src/app/engine/minting/constants.ts
rename to apps/playground-web/src/app/transactions/mint-tokens/constants.ts
diff --git a/apps/playground-web/src/app/engine/minting/page.tsx b/apps/playground-web/src/app/transactions/mint-tokens/page.tsx
similarity index 89%
rename from apps/playground-web/src/app/engine/minting/page.tsx
rename to apps/playground-web/src/app/transactions/mint-tokens/page.tsx
index e3a4e6db846..009291364db 100644
--- a/apps/playground-web/src/app/engine/minting/page.tsx
+++ b/apps/playground-web/src/app/transactions/mint-tokens/page.tsx
@@ -1,4 +1,4 @@
-import { EngineMintPreview } from "@/app/engine/minting/_components/mint-preview";
+import { EngineMintPreview } from "@/app/transactions/mint-tokens/_components/mint-preview";
 import ThirdwebProvider from "@/components/thirdweb-provider";
 import { PageLayout } from "../../../components/blocks/APIHeader";
 import { MintCode } from "./_components/mint-code";
diff --git a/apps/playground-web/src/app/engine/types.ts b/apps/playground-web/src/app/transactions/types.ts
similarity index 100%
rename from apps/playground-web/src/app/engine/types.ts
rename to apps/playground-web/src/app/transactions/types.ts
diff --git a/apps/playground-web/src/app/engine/webhooks/_components/webhooks-preview.tsx b/apps/playground-web/src/app/transactions/webhooks/_components/webhooks-preview.tsx
similarity index 100%
rename from apps/playground-web/src/app/engine/webhooks/_components/webhooks-preview.tsx
rename to apps/playground-web/src/app/transactions/webhooks/_components/webhooks-preview.tsx
diff --git a/apps/playground-web/src/app/engine/webhooks/constants.ts b/apps/playground-web/src/app/transactions/webhooks/constants.ts
similarity index 100%
rename from apps/playground-web/src/app/engine/webhooks/constants.ts
rename to apps/playground-web/src/app/transactions/webhooks/constants.ts
diff --git a/apps/playground-web/src/app/engine/webhooks/page.tsx b/apps/playground-web/src/app/transactions/webhooks/page.tsx
similarity index 72%
rename from apps/playground-web/src/app/engine/webhooks/page.tsx
rename to apps/playground-web/src/app/transactions/webhooks/page.tsx
index 3fd85879759..66c458f59e7 100644
--- a/apps/playground-web/src/app/engine/webhooks/page.tsx
+++ b/apps/playground-web/src/app/transactions/webhooks/page.tsx
@@ -1,4 +1,4 @@
-import { EngineWebhooksPreview } from "@/app/engine/webhooks/_components/webhooks-preview";
+import { EngineWebhooksPreview } from "@/app/transactions/webhooks/_components/webhooks-preview";
 import ThirdwebProvider from "@/components/thirdweb-provider";
 import { PageLayout } from "../../../components/blocks/APIHeader";
 
@@ -12,7 +12,7 @@ export default function Page() {
             transaction or backend wallet events.
           </>
         }
-        docsLink="https://portal.thirdweb.com/engine/features/webhooks?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/engine/v2/features/webhooks?utm_source=playground"
         title="Webhooks"
       >
         <EngineWebhooksPreview />
diff --git a/apps/playground-web/src/app/connect/account-abstraction/5792/page.tsx b/apps/playground-web/src/app/wallets/account-abstraction/5792/page.tsx
similarity index 58%
rename from apps/playground-web/src/app/connect/account-abstraction/5792/page.tsx
rename to apps/playground-web/src/app/wallets/account-abstraction/5792/page.tsx
index fd2f4ae8f7b..b3549777ce1 100644
--- a/apps/playground-web/src/app/connect/account-abstraction/5792/page.tsx
+++ b/apps/playground-web/src/app/wallets/account-abstraction/5792/page.tsx
@@ -23,7 +23,7 @@ export default function Page() {
             connected wallet.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
         title="EIP-5792 Wallet Capabilities"
       >
         <div className="flex flex-col gap-14">
@@ -37,9 +37,8 @@ export default function Page() {
 
 function Eip5792GetCapabilities() {
   return (
-    <>
-      <CodeExample
-        code={`\
+    <CodeExample
+      code={`\
 import { useCapabilities } from "thirdweb/react";
 
 function App() {
@@ -52,53 +51,52 @@ function App() {
   return <div>Capabilities: {JSON.stringify(capabilities)}</div>;
 }
 `}
-        header={{
-          description:
-            "Get the capabilities of the connected wallet using the useCapabilities hook",
-          title: "Getting the wallet capabilities",
-        }}
-        lang="tsx"
-        preview={<Eip5792GetCapabilitiesPreview />}
-      />
-    </>
+      header={{
+        description:
+          "Get the capabilities of the connected wallet using the useCapabilities hook",
+        title: "Getting the wallet capabilities",
+      }}
+      lang="tsx"
+      preview={<Eip5792GetCapabilitiesPreview />}
+    />
   );
 }
 
-function Eip5792SendCalls() {
-  return (
-    <>
-      <CodeExample
-        code={`\
+const code = `\
 import { useSendCalls, useWaitForCallsReceipt } from "thirdweb/react";
 
 function App() {
-  const { mutate: sendCalls, isPending, data } = useSendCalls();
-  const { data: receipt, isLoading: isConfirming } = useWaitForCallsReceipt(data);
+const { mutate: sendCalls, isPending, data } = useSendCalls();
+const { data: receipt, isLoading: isConfirming } = useWaitForCallsReceipt(data);
 
-  const handleClick = async () => {
-    sendCalls({
-      calls: [firstTransaction, secondTransaction],
-    });
-  };
+const handleClick = async () => {
+  sendCalls({
+    calls: [firstTransaction, secondTransaction],
+  });
+};
 
-  return (
-    <>
-      <button onClick={handleClick}>Send calls</button>
-      {isPending && <p>Sending...</p>}
-      {isConfirming && <p>Confirming...</p>}
-      {receipt && <p>Confirmed! {receipt?.receipts?.[0]?.transactionHash}</p>}
-    </>
-  );
+return (
+  <>
+    <button onClick={handleClick}>Send calls</button>
+    {isPending && <p>Sending...</p>}
+    {isConfirming && <p>Confirming...</p>}
+    {receipt && <p>Confirmed! {receipt?.receipts?.[0]?.transactionHash}</p>}
+  </>
+);
 }
-`}
-        header={{
-          description:
-            "Send batched calls to the connected wallet using the useSendCalls hook",
-          title: "Sending calls to the wallet",
-        }}
-        lang="tsx"
-        preview={<Eip5792SendCallsPreview />}
-      />
-    </>
+`;
+
+function Eip5792SendCalls() {
+  return (
+    <CodeExample
+      code={code}
+      header={{
+        description:
+          "Send batched calls to the connected wallet using the useSendCalls hook",
+        title: "Sending calls to the wallet",
+      }}
+      lang="tsx"
+      preview={<Eip5792SendCallsPreview />}
+    />
   );
 }
diff --git a/apps/playground-web/src/app/connect/account-abstraction/7702/page.tsx b/apps/playground-web/src/app/wallets/account-abstraction/7702/page.tsx
similarity index 79%
rename from apps/playground-web/src/app/connect/account-abstraction/7702/page.tsx
rename to apps/playground-web/src/app/wallets/account-abstraction/7702/page.tsx
index d464fe508a3..21c07b7a75e 100644
--- a/apps/playground-web/src/app/connect/account-abstraction/7702/page.tsx
+++ b/apps/playground-web/src/app/wallets/account-abstraction/7702/page.tsx
@@ -22,7 +22,7 @@ export default function Page() {
             account with no code changes.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
         title="EIP-7702 Smart Accounts"
       >
         <Eip7702SmartAccount />
@@ -33,9 +33,8 @@ export default function Page() {
 
 function Eip7702SmartAccount() {
   return (
-    <>
-      <CodeExample
-        code={`\
+    <CodeExample
+      code={`\
 import { claimTo } from "thirdweb/extensions/erc1155";
 import { TransactionButton } from "thirdweb/react";
 
@@ -72,14 +71,13 @@ function App() {
     </>
   );
 }`}
-        header={{
-          description:
-            "In-app wallets can be turned into EIP-7702 smart accounts by changing the execution mode",
-          title: "Turning in-app wallets into EIP-7702 smart accounts",
-        }}
-        lang="tsx"
-        preview={<Eip7702SmartAccountPreview />}
-      />
-    </>
+      header={{
+        description:
+          "In-app wallets can be turned into EIP-7702 smart accounts by changing the execution mode",
+        title: "Turning in-app wallets into EIP-7702 smart accounts",
+      }}
+      lang="tsx"
+      preview={<Eip7702SmartAccountPreview />}
+    />
   );
 }
diff --git a/apps/playground-web/src/app/connect/account-abstraction/connect/page.tsx b/apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx
similarity index 96%
rename from apps/playground-web/src/app/connect/account-abstraction/connect/page.tsx
rename to apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx
index a935080a101..afd5eb2301b 100644
--- a/apps/playground-web/src/app/connect/account-abstraction/connect/page.tsx
+++ b/apps/playground-web/src/app/wallets/account-abstraction/connect/page.tsx
@@ -26,7 +26,7 @@ export default function Page() {
             programmability.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
         title="Connect smart accounts"
       >
         <ConnectSmartAccount />
diff --git a/apps/playground-web/src/app/connect/account-abstraction/native-aa/page.tsx b/apps/playground-web/src/app/wallets/account-abstraction/native-aa/page.tsx
similarity index 88%
rename from apps/playground-web/src/app/connect/account-abstraction/native-aa/page.tsx
rename to apps/playground-web/src/app/wallets/account-abstraction/native-aa/page.tsx
index 404dd599cf0..17cb4e4106f 100644
--- a/apps/playground-web/src/app/connect/account-abstraction/native-aa/page.tsx
+++ b/apps/playground-web/src/app/wallets/account-abstraction/native-aa/page.tsx
@@ -22,7 +22,7 @@ export default function Page() {
             abstraction with no code changes.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
         title="Native Account Abstraction"
       >
         <SponsoredZksyncTx />
@@ -33,9 +33,8 @@ export default function Page() {
 
 function SponsoredZksyncTx() {
   return (
-    <>
-      <CodeExample
-        code={`\
+    <CodeExample
+      code={`\
 import { claimTo } from "thirdweb/extensions/erc1155";
 import { TransactionButton } from "thirdweb/react";
 
@@ -68,9 +67,8 @@ function App() {
     </>
   );
 }`}
-        lang="tsx"
-        preview={<SponsoredTxZksyncPreview />}
-      />
-    </>
+      lang="tsx"
+      preview={<SponsoredTxZksyncPreview />}
+    />
   );
 }
diff --git a/apps/playground-web/src/app/connect/account-abstraction/sponsor/page.tsx b/apps/playground-web/src/app/wallets/account-abstraction/sponsor/page.tsx
similarity index 97%
rename from apps/playground-web/src/app/connect/account-abstraction/sponsor/page.tsx
rename to apps/playground-web/src/app/wallets/account-abstraction/sponsor/page.tsx
index 0e595b721ad..2474d99f46a 100644
--- a/apps/playground-web/src/app/connect/account-abstraction/sponsor/page.tsx
+++ b/apps/playground-web/src/app/wallets/account-abstraction/sponsor/page.tsx
@@ -20,7 +20,7 @@ export default function Page() {
         description={
           <>Turn any EOA into a smart contract wallet with EIP-4337.</>
         }
-        docsLink="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
         title="EIP-4337 Smart Contract Wallets"
       >
         <div className="flex flex-col gap-14">
@@ -81,7 +81,7 @@ import { baseSepolia } from "thirdweb/chains";
 
 const wallets = [
   inAppWallet(
-    { 
+    {
       // turn on gas sponsorship for in-app wallets
       // Can use EIP4337 or EIP7702 on supported chains
       executionMode: {
diff --git a/apps/playground-web/src/app/connect/auth/page.tsx b/apps/playground-web/src/app/wallets/auth/page.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/auth/page.tsx
rename to apps/playground-web/src/app/wallets/auth/page.tsx
diff --git a/apps/playground-web/src/app/connect/auth/server/actions/auth.ts b/apps/playground-web/src/app/wallets/auth/server/actions/auth.ts
similarity index 100%
rename from apps/playground-web/src/app/connect/auth/server/actions/auth.ts
rename to apps/playground-web/src/app/wallets/auth/server/actions/auth.ts
diff --git a/apps/playground-web/src/app/connect/blockchain-api/page.tsx b/apps/playground-web/src/app/wallets/blockchain-api/page.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/blockchain-api/page.tsx
rename to apps/playground-web/src/app/wallets/blockchain-api/page.tsx
diff --git a/apps/playground-web/src/app/connect/ui/page.tsx b/apps/playground-web/src/app/wallets/headless/account-components/page.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/ui/page.tsx
rename to apps/playground-web/src/app/wallets/headless/account-components/page.tsx
diff --git a/apps/playground-web/src/app/connect/ui/chain/page.tsx b/apps/playground-web/src/app/wallets/headless/chain-components/page.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/ui/chain/page.tsx
rename to apps/playground-web/src/app/wallets/headless/chain-components/page.tsx
diff --git a/apps/playground-web/src/app/connect/ui/nft/page.tsx b/apps/playground-web/src/app/wallets/headless/nft-components/page.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/ui/nft/page.tsx
rename to apps/playground-web/src/app/wallets/headless/nft-components/page.tsx
diff --git a/apps/playground-web/src/app/connect/ui/token/page.tsx b/apps/playground-web/src/app/wallets/headless/token-components/page.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/ui/token/page.tsx
rename to apps/playground-web/src/app/wallets/headless/token-components/page.tsx
diff --git a/apps/playground-web/src/app/connect/ui/wallet/page.tsx b/apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/ui/wallet/page.tsx
rename to apps/playground-web/src/app/wallets/headless/wallet-components/page.tsx
diff --git a/apps/playground-web/src/app/connect/in-app-wallet/ecosystem/page.tsx b/apps/playground-web/src/app/wallets/in-app-wallet/ecosystem/page.tsx
similarity index 95%
rename from apps/playground-web/src/app/connect/in-app-wallet/ecosystem/page.tsx
rename to apps/playground-web/src/app/wallets/in-app-wallet/ecosystem/page.tsx
index d998db36559..04a5be61f82 100644
--- a/apps/playground-web/src/app/connect/in-app-wallet/ecosystem/page.tsx
+++ b/apps/playground-web/src/app/wallets/in-app-wallet/ecosystem/page.tsx
@@ -23,7 +23,7 @@ export default function Page() {
             apps and games to connect to the same accounts.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/wallet/ecosystem/set-up?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/ecosystem/set-up?utm_source=playground"
         title="Build your own Ecosystem"
       >
         <ConnectEmbedExample />
diff --git a/apps/playground-web/src/app/connect/in-app-wallet/page.tsx b/apps/playground-web/src/app/wallets/in-app-wallet/page.tsx
similarity index 97%
rename from apps/playground-web/src/app/connect/in-app-wallet/page.tsx
rename to apps/playground-web/src/app/wallets/in-app-wallet/page.tsx
index 0cde2f5a711..3f5e5efe8ea 100644
--- a/apps/playground-web/src/app/connect/in-app-wallet/page.tsx
+++ b/apps/playground-web/src/app/wallets/in-app-wallet/page.tsx
@@ -26,7 +26,7 @@ export default function Page() {
             base.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/in-app-wallet/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/users?utm_source=playground"
         title="Onboard users to web3 with any auth method"
       >
         <UIIntegration />
diff --git a/apps/playground-web/src/app/connect/in-app-wallet/sponsor/page.tsx b/apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx
similarity index 95%
rename from apps/playground-web/src/app/connect/in-app-wallet/sponsor/page.tsx
rename to apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx
index b28fb2365cf..373a00c053b 100644
--- a/apps/playground-web/src/app/connect/in-app-wallet/sponsor/page.tsx
+++ b/apps/playground-web/src/app/wallets/in-app-wallet/sponsor/page.tsx
@@ -25,7 +25,7 @@ export default function Page() {
             UX.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/in-app-wallet/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
         title="Signless Sponsored Transactions"
       >
         <SponsoredInAppTx />
@@ -48,7 +48,7 @@ import { baseSepolia } from "thirdweb/chains";
 
 const wallets = [
   inAppWallet(
-    { 
+    {
       // turn on gas sponsorship for in-app wallets
       // Can use EIP4337 or EIP7702 on supported chains
       executionMode: {
diff --git a/apps/playground-web/src/app/connect/sign-in/button/LeftSection.tsx b/apps/playground-web/src/app/wallets/sign-in/button/LeftSection.tsx
similarity index 98%
rename from apps/playground-web/src/app/connect/sign-in/button/LeftSection.tsx
rename to apps/playground-web/src/app/wallets/sign-in/button/LeftSection.tsx
index 829b06f186f..4eb94105149 100644
--- a/apps/playground-web/src/app/connect/sign-in/button/LeftSection.tsx
+++ b/apps/playground-web/src/app/wallets/sign-in/button/LeftSection.tsx
@@ -231,7 +231,7 @@ export function LeftSection(props: {
             </span>
             <Link
               className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
-              href="https://portal.thirdweb.com/connect/auth?utm_source=playground"
+              href="https://portal.thirdweb.com/wallets/auth?utm_source=playground"
               target="_blank"
             >
               Learn more about Auth
@@ -260,7 +260,7 @@ export function LeftSection(props: {
 
             <Link
               className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
-              href="https://portal.thirdweb.com/connect/account-abstraction/overview?utm_source=playground"
+              href="https://portal.thirdweb.com/wallets/sponsor-gas?utm_source=playground"
               target="_blank"
             >
               Learn more about Account Abstraction
diff --git a/apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx b/apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/sign-in/button/RightSection.tsx
rename to apps/playground-web/src/app/wallets/sign-in/button/RightSection.tsx
diff --git a/apps/playground-web/src/app/connect/sign-in/button/page.tsx b/apps/playground-web/src/app/wallets/sign-in/button/page.tsx
similarity index 96%
rename from apps/playground-web/src/app/connect/sign-in/button/page.tsx
rename to apps/playground-web/src/app/wallets/sign-in/button/page.tsx
index 9fd52d55df9..1178447129b 100644
--- a/apps/playground-web/src/app/connect/sign-in/button/page.tsx
+++ b/apps/playground-web/src/app/wallets/sign-in/button/page.tsx
@@ -68,7 +68,7 @@ export default function Page(props: {
             gasless transactions and provides SIWE (Sign In With Ethereum)
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/sign-in/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets/auth?utm_source=playground"
         title="ConnectButton"
       >
         <div className="relative flex flex-col-reverse gap-6 xl:min-h-[900px] xl:flex-row xl:gap-6">
diff --git a/apps/playground-web/src/app/connect/sign-in/components/CodeGen.tsx b/apps/playground-web/src/app/wallets/sign-in/components/CodeGen.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/sign-in/components/CodeGen.tsx
rename to apps/playground-web/src/app/wallets/sign-in/components/CodeGen.tsx
diff --git a/apps/playground-web/src/app/connect/sign-in/components/CollapsibleSection.tsx b/apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/sign-in/components/CollapsibleSection.tsx
rename to apps/playground-web/src/app/wallets/sign-in/components/CollapsibleSection.tsx
diff --git a/apps/playground-web/src/app/connect/sign-in/components/ColorFormGroup.tsx b/apps/playground-web/src/app/wallets/sign-in/components/ColorFormGroup.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/sign-in/components/ColorFormGroup.tsx
rename to apps/playground-web/src/app/wallets/sign-in/components/ColorFormGroup.tsx
diff --git a/apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx b/apps/playground-web/src/app/wallets/sign-in/components/ColorInput/index.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx
rename to apps/playground-web/src/app/wallets/sign-in/components/ColorInput/index.tsx
diff --git a/apps/playground-web/src/app/connect/sign-in/components/InAppWalletFormGroup.tsx b/apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
similarity index 97%
rename from apps/playground-web/src/app/connect/sign-in/components/InAppWalletFormGroup.tsx
rename to apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
index 3b8ea7404bb..a7f1e6a7aa1 100644
--- a/apps/playground-web/src/app/connect/sign-in/components/InAppWalletFormGroup.tsx
+++ b/apps/playground-web/src/app/wallets/sign-in/components/InAppWalletFormGroup.tsx
@@ -38,7 +38,7 @@ export function InAppWalletFormGroup(props: {
       <div className="flex items-center justify-between gap-2 p-4">
         <Link
           className="group flex items-center gap-2"
-          href="https://portal.thirdweb.com/connect/in-app-wallet/overview?utm_source=playground"
+          href="https://portal.thirdweb.com/wallets?utm_source=playground"
           target="_blank"
         >
           <h2 className="font-semibold tracking-tight">In-App Wallet</h2>
diff --git a/apps/playground-web/src/app/connect/sign-in/components/LocaleFormControl.tsx b/apps/playground-web/src/app/wallets/sign-in/components/LocaleFormControl.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/sign-in/components/LocaleFormControl.tsx
rename to apps/playground-web/src/app/wallets/sign-in/components/LocaleFormControl.tsx
diff --git a/apps/playground-web/src/app/connect/sign-in/components/WalletsSelection.tsx b/apps/playground-web/src/app/wallets/sign-in/components/WalletsSelection.tsx
similarity index 100%
rename from apps/playground-web/src/app/connect/sign-in/components/WalletsSelection.tsx
rename to apps/playground-web/src/app/wallets/sign-in/components/WalletsSelection.tsx
diff --git a/apps/playground-web/src/app/connect/sign-in/components/types.ts b/apps/playground-web/src/app/wallets/sign-in/components/types.ts
similarity index 100%
rename from apps/playground-web/src/app/connect/sign-in/components/types.ts
rename to apps/playground-web/src/app/wallets/sign-in/components/types.ts
diff --git a/apps/playground-web/src/app/connect/sign-in/embed/page.tsx b/apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
similarity index 83%
rename from apps/playground-web/src/app/connect/sign-in/embed/page.tsx
rename to apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
index 81fd7782680..ed290405ef0 100644
--- a/apps/playground-web/src/app/connect/sign-in/embed/page.tsx
+++ b/apps/playground-web/src/app/wallets/sign-in/embed/page.tsx
@@ -23,7 +23,7 @@ export default function Page() {
             your brand.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/sign-in/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets?utm_source=playground"
         title="ConnectEmbed"
       >
         <EmbedComponent />
@@ -34,9 +34,8 @@ export default function Page() {
 
 function EmbedComponent() {
   return (
-    <>
-      <CodeExample
-        code={`import { createThirdwebClient } from "thirdweb";
+    <CodeExample
+      code={`import { createThirdwebClient } from "thirdweb";
 import { ConnectEmbed } from "thirdweb/react";
 
 const thirdwebClient = createThirdwebClient({
@@ -48,9 +47,8 @@ return (
 <ConnectEmbed client={thirdwebClient} />
 );
 };`}
-        lang="tsx"
-        preview={<StyledConnectEmbed />}
-      />
-    </>
+      lang="tsx"
+      preview={<StyledConnectEmbed />}
+    />
   );
 }
diff --git a/apps/playground-web/src/app/connect/sign-in/headless/page.tsx b/apps/playground-web/src/app/wallets/sign-in/headless/page.tsx
similarity index 90%
rename from apps/playground-web/src/app/connect/sign-in/headless/page.tsx
rename to apps/playground-web/src/app/wallets/sign-in/headless/page.tsx
index 79eccc1709b..771869c3525 100644
--- a/apps/playground-web/src/app/connect/sign-in/headless/page.tsx
+++ b/apps/playground-web/src/app/wallets/sign-in/headless/page.tsx
@@ -24,7 +24,7 @@ export default function Page() {
             your brand.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect/sign-in/overview?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets?utm_source=playground"
         title="Headless"
       >
         <div className="flex flex-col gap-14">
@@ -38,9 +38,8 @@ export default function Page() {
 
 function OpenConnectModalSection() {
   return (
-    <>
-      <CodeExample
-        code={`\
+    <CodeExample
+      code={`\
 import { useConnectModal } from "thirdweb/react";
 
 function App() {
@@ -58,13 +57,12 @@ function App() {
     </button>
   );
 }`}
-        header={{
-          title: "Open prebuilt connect modal using a hook",
-        }}
-        lang="tsx"
-        preview={<ModalPreview />}
-      />
-    </>
+      header={{
+        title: "Open prebuilt connect modal using a hook",
+      }}
+      lang="tsx"
+      preview={<ModalPreview />}
+    />
   );
 }
 
diff --git a/apps/playground-web/src/app/connect/sign-in/opengraph-image.png b/apps/playground-web/src/app/wallets/sign-in/opengraph-image.png
similarity index 100%
rename from apps/playground-web/src/app/connect/sign-in/opengraph-image.png
rename to apps/playground-web/src/app/wallets/sign-in/opengraph-image.png
diff --git a/apps/playground-web/src/app/connect/social/page.tsx b/apps/playground-web/src/app/wallets/social/page.tsx
similarity index 96%
rename from apps/playground-web/src/app/connect/social/page.tsx
rename to apps/playground-web/src/app/wallets/social/page.tsx
index 4811add0830..ce032bcddf4 100644
--- a/apps/playground-web/src/app/connect/social/page.tsx
+++ b/apps/playground-web/src/app/wallets/social/page.tsx
@@ -22,7 +22,7 @@ export default function Page() {
             as soon as they sign into your app.
           </>
         }
-        docsLink="https://portal.thirdweb.com/connect?utm_source=playground"
+        docsLink="https://portal.thirdweb.com/wallets?utm_source=playground"
         title="Get any user's onchain identity" // TODO: update this once we have Social API docs
       >
         <UserProfiles />
diff --git a/apps/playground-web/src/components/auth/auth-button.tsx b/apps/playground-web/src/components/auth/auth-button.tsx
index 1c9ba59bbef..478bb0d8002 100644
--- a/apps/playground-web/src/components/auth/auth-button.tsx
+++ b/apps/playground-web/src/components/auth/auth-button.tsx
@@ -7,7 +7,7 @@ import {
   isLoggedIn,
   login,
   logout,
-} from "@/app/connect/auth/server/actions/auth";
+} from "@/app/wallets/auth/server/actions/auth";
 import { THIRDWEB_CLIENT } from "@/lib/client";
 
 export function AuthButton() {
diff --git a/apps/playground-web/src/components/auth/auth-hook.tsx b/apps/playground-web/src/components/auth/auth-hook.tsx
index 22fe5a8454f..b7f86409e12 100644
--- a/apps/playground-web/src/components/auth/auth-hook.tsx
+++ b/apps/playground-web/src/components/auth/auth-hook.tsx
@@ -11,7 +11,7 @@ import {
   isLoggedIn,
   login,
   logout,
-} from "@/app/connect/auth/server/actions/auth";
+} from "@/app/wallets/auth/server/actions/auth";
 import { THIRDWEB_CLIENT } from "../../lib/client";
 import { Button } from "../ui/button";
 
diff --git a/apps/playground-web/src/components/auth/gated-content.tsx b/apps/playground-web/src/components/auth/gated-content.tsx
index 95a3a39aa24..a8e6803bbe9 100644
--- a/apps/playground-web/src/components/auth/gated-content.tsx
+++ b/apps/playground-web/src/components/auth/gated-content.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { getContract } from "thirdweb";
 import { sepolia } from "thirdweb/chains";
 import { balanceOf } from "thirdweb/extensions/erc20";
-import { getAuthResult } from "@/app/connect/auth/server/actions/auth";
+import { getAuthResult } from "@/app/wallets/auth/server/actions/auth";
 import { THIRDWEB_CLIENT } from "@/lib/client";
 import { AuthButton } from "./auth-button";
 
@@ -58,7 +58,7 @@ export async function GatedContentPreview() {
           Mint some tokens{" "}
           <Link
             className="font-bold text-yellow-400"
-            href="/connect/blockchain-api"
+            href="/wallets/blockchain-api"
           >
             here
           </Link>
diff --git a/apps/playground-web/src/components/auth/smart-account-auth-button.tsx b/apps/playground-web/src/components/auth/smart-account-auth-button.tsx
index a6531e1a062..76ea8a7ea4f 100644
--- a/apps/playground-web/src/components/auth/smart-account-auth-button.tsx
+++ b/apps/playground-web/src/components/auth/smart-account-auth-button.tsx
@@ -6,7 +6,7 @@ import {
   isLoggedIn,
   login,
   logout,
-} from "@/app/connect/auth/server/actions/auth";
+} from "@/app/wallets/auth/server/actions/auth";
 import { THIRDWEB_CLIENT } from "@/lib/client";
 
 export function SmartAccountAuthButton() {
diff --git a/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx b/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx
index 55aa7d89bb6..eabef03a19f 100644
--- a/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx
+++ b/apps/playground-web/src/components/in-app-wallet/custom-login-form.tsx
@@ -44,7 +44,7 @@ export function CustomLoginForm() {
         auth: {
           mode: "redirect",
           options: ["google"],
-          redirectUrl: `${window.location.origin}/connect/in-app-wallet`,
+          redirectUrl: `${window.location.origin}/wallets/in-app-wallet`,
         },
       });
       await wallet.connect({
diff --git a/apps/playground-web/src/components/ui/sidebar.tsx b/apps/playground-web/src/components/ui/sidebar.tsx
index 852cf3d9b00..2d9a0e7b0a4 100644
--- a/apps/playground-web/src/components/ui/sidebar.tsx
+++ b/apps/playground-web/src/components/ui/sidebar.tsx
@@ -120,7 +120,7 @@ function DocSidebarNonCollapsible(props: {
       <ul className="mb-8 flex flex-col">
         {links.map((link, i) => {
           return (
-            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            // biome-ignore lint/suspicious/noArrayIndexKey: order is static
             <li key={i}>
               <SidebarItem link={link} onLinkClick={props.onLinkClick} />
             </li>
@@ -193,7 +193,7 @@ function SidebarCategory(props: {
         <ul className="flex flex-col border-l pl-4">
           {links.map((link, i) => {
             return (
-              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              // biome-ignore lint/suspicious/noArrayIndexKey: order is static
               <li key={i}>
                 <SidebarItem link={link} onLinkClick={props.onLinkClick} />
               </li>