[TOOL-5111] Playground: Update slugs, add redirects

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",
       },
     ];
   },

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",
     },
   ],

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");
 }

apps/playground-web/src/app/connect/pay/backend/layout.tsx → 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"
       />
 

apps/playground-web/src/app/connect/pay/backend/page.tsx → 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,
                 };
               })}

apps/playground-web/src/app/connect/pay/backend/reference/page.tsx → 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>

apps/playground-web/src/app/connect/pay/backend/utils.ts → 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";

apps/playground-web/src/app/connect/pay/commerce/page.tsx → 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 />

apps/playground-web/src/app/connect/pay/components/CodeGen.tsx → 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 (

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx → 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

apps/playground-web/src/app/connect/pay/embed/RightSection.tsx → 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";
 

apps/playground-web/src/app/connect/pay/fund-wallet/page.tsx → 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 />

apps/playground-web/src/app/connect/pay/transactions/page.tsx → 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 />

apps/playground-web/src/app/connect/pay/page.tsx → 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} />

apps/playground-web/src/app/engine/airdrop/page.tsx → 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";

apps/playground-web/src/app/engine/minting/page.tsx → 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";