[Docs] UB Migration & Other Small Things (#7075)

CORE-0000

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on restructuring the `pay` section of the portal by updating links, modifying sidebar navigation, and adding new assets and pages to improve the user experience and documentation clarity.

### Detailed summary
- Added new links to the `links` array for `Bridge`.
- Updated `href` values in `apisLinks` for the Insight API.
- Modified `FooterLinkItem` labels for consistency.
- Created and adjusted multiple `.mdx` pages for the `pay` section.
- Introduced `payRedirects` for improved navigation.
- Updated the sidebar structure for the `pay` section, including new links and icons.
- Added new layout and metadata to `layout.tsx` for better documentation presentation.

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

<!-- end pr-codex -->

Author: saminacodes

apps/portal/redirects.mjs

@@ -1046,6 +1046,27 @@ const v4ToV5Redirects = {
   "/references/wallets/:path*": "/typescript/v5/supported-wallets",
 };
 
+const payRedirects = {
+  "/connect/pay/overview": "/pay",
+  "/connect/pay/onramp-providers": "/pay/onramp-providers",
+  "/connect/pay/fees": "/pay/fees",
+  "/connect/pay/get-started": "/pay/get-started",
+  "/connect/pay/guides/accept-direct-payments":
+    "/pay/guides/accept-direct-payments",
+  "/connect/pay/guides/build-a-custom-experience":
+    "/pay/guides/build-a-custom-experience",
+  "/connect/pay/guides/cross-chain-swapping":
+    "/pay/guides/cross-chain-swapping",
+  "/connect/pay/customization/connectbutton":
+    "/pay/customization/connectbutton",
+  "/connect/pay/customization/payembed": "/pay/customization/payembed",
+  "/connect/pay/customization/send-transaction":
+    "/pay/customization/send-transaction",
+  "/connect/pay/webhooks": "/pay/webhooks",
+  "/connect/pay/testing-pay": "/pay/testing-pay",
+  "/connect/pay/faqs": "/pay/faqs",
+};
+
 /**
  * @type {import('next').NextConfig['redirects']}
  */
@@ -1066,6 +1087,7 @@ export const redirects = async () => {
     ...createRedirects(unrealEngineRedirects),
     ...createRedirects(v4ToV5Redirects),
     ...createRedirects(glossaryRedirects),
+    ...createRedirects(payRedirects),
   ];
 };
 

apps/portal/src/app/Header.tsx

@@ -26,6 +26,10 @@ import {
 import { ThirdwebIcon } from "../icons/thirdweb";
 
 const links = [
+  {
+    name: "Bridge",
+    href: "/pay",
+  },
   {
     name: "Engine",
     href: "/engine",
@@ -120,7 +124,7 @@ export const connectLinks: Array<{
 const apisLinks = [
   {
     name: "Insight",
-    href: "https://insight-api.thirdweb.com/reference",
+    href: "https://insight.thirdweb.com/reference",
   },
   {
     name: "Engine Cloud",

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

@@ -9,7 +9,6 @@ const inAppSlug = "/connect/in-app-wallet";
 const walletSlug = "/connect/wallet";
 const aAslug = "/connect/account-abstraction";
 const authSlug = "/connect/auth";
-const paySlug = "/connect/pay";
 
 export const sidebar: SideBar = {
   name: "Connect",
@@ -229,100 +228,6 @@ export const sidebar: SideBar = {
       ],
     },
     { separator: true },
-    {
-      name: "Universal Bridge",
-      isCollapsible: false,
-      links: [
-        {
-          name: "Overview",
-          href: `${paySlug}/overview`,
-        },
-        {
-          name: "Supported Routes",
-          href: "https://thirdweb.com/routes",
-        },
-        {
-          name: "Onramp Providers",
-          href: `${paySlug}/onramp-providers`,
-        },
-        {
-          name: "Service Fees",
-          href: `${paySlug}/fees`,
-        },
-        {
-          name: "API",
-          href: "https://bridge.thirdweb.com/reference",
-        },
-        {
-          name: "Get Started",
-          href: `${paySlug}/get-started`,
-          expanded: true,
-          links: [
-            {
-              name: "ConnectButton",
-              href: `${paySlug}/get-started#option-1-connectbutton`,
-            },
-            {
-              name: "Embed",
-              href: `${paySlug}/get-started#option-2-embed-pay`,
-            },
-            {
-              name: "Send a Transaction",
-              href: `${paySlug}/get-started#option-3-send-a-transaction-with-pay`,
-            },
-          ],
-        },
-        {
-          name: "Tutorials",
-          isCollapsible: true,
-
-          links: [
-            {
-              name: "Accept Direct Payments",
-              href: `${paySlug}/guides/accept-direct-payments`,
-            },
-            {
-              name: "Build a Custom Onramp Experience",
-              href: `${paySlug}/guides/build-a-custom-experience`,
-            },
-            {
-              name: "Cross-Chain Swapping",
-              href: `${paySlug}/guides/cross-chain-swapping`,
-            },
-          ],
-        },
-        {
-          name: "Customization",
-          isCollapsible: true,
-          links: [
-            {
-              name: "ConnectButton",
-              href: `${paySlug}/customization/connectbutton`,
-            },
-            {
-              name: "PayEmbed",
-              href: `${paySlug}/customization/payembed`,
-            },
-            {
-              name: "useSendTransaction",
-              href: `${paySlug}/customization/send-transaction`,
-            },
-          ],
-        },
-        {
-          name: "Webhooks",
-          href: `${paySlug}/webhooks`,
-        },
-        {
-          name: "Developer Mode",
-          href: `${paySlug}/testing-pay`,
-        },
-        {
-          name: "FAQs",
-          href: `${paySlug}/faqs`,
-        },
-      ],
-    },
     // User identity
     {
       name: "User Identity",

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

@@ -82,13 +82,13 @@ export const sidebar: SideBar = {
         },
         {
           name: "API Reference",
-          href: "https://insight-api.thirdweb.com/reference#tag/webhooks",
+          href: "https://insight.thirdweb.com/reference#tag/webhooks",
         },
       ],
     },
     {
       name: "API Reference",
-      href: "https://insight-api.thirdweb.com/reference",
+      href: "https://insight.thirdweb.com/reference",
       icon: <BracesIcon />,
     },
     {

apps/portal/src/app/page.tsx

@@ -39,8 +39,7 @@ function Hero() {
             thirdweb Documentation
           </h1>
           <p className="mb-8 max-w-md text-lg text-muted-foreground leading-normal">
-            Frontend, Backend, and Onchain tools to build complete web3 apps —
-            on every EVM chain.
+            Development framework for building onchain apps, games, and agents.
           </p>
         </div>
       </div>
@@ -115,7 +114,7 @@ function ReferenceSection() {
         />
         <SDKCard
           title="Insight"
-          href="https://insight-api.thirdweb.com/reference"
+          href="https://insight.thirdweb.com/reference#tag/webhooks"
           icon={InsightIcon}
           isExternal
           iconClassName="text-muted-foreground"
@@ -127,13 +126,6 @@ function ReferenceSection() {
           isExternal
           iconClassName="text-muted-foreground"
         />
-        <SDKCard
-          title="Contracts"
-          href="https://contracts.thirdweb.com/reference"
-          icon={ContractsIcon}
-          isExternal
-          iconClassName="text-muted-foreground"
-        />
         <SDKCard
           title="Wallets"
           href="/connect/wallet/get-users" // TODO: actual openAPI docs

apps/portal/src/app/connect/pay/assets/avax-to-usd.png renamed to apps/portal/src/app/pay/assets/avax-to-usd.png

@@ -0,0 +1,21 @@
+import { DocLayout } from "@/components/Layouts/DocLayout";
+import { createMetadata } from "@doc";
+import { sidebar } from "./sidebar";
+
+export default async function Layout(props: { children: React.ReactNode }) {
+  return (
+    <DocLayout sideBar={sidebar} editPageButton={true}>
+      {props.children}
+    </DocLayout>
+  );
+}
+
+export const metadata = createMetadata({
+  title: "thirdweb Universal Bridge Documentation",
+  image: {
+    title: "thirdweb Universal Bridge Docs",
+    icon: "nebula",
+  },
+  description:
+    "thirdweb Universal Bridge documentation. Learn how to use the thirdweb Universal Bridge to send and receive tokens across different blockchains.",
+});

apps/portal/src/app/connect/pay/assets/buy-with-crypto.png renamed to apps/portal/src/app/pay/assets/buy-with-crypto.png

@@ -1,6 +1,6 @@
 import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc";
-import PayOverviewImage from "../assets/pay-overview.png";
-import SupportedChains from "../../../_images/supported-chains.png";
+import PayOverviewImage from "./assets/pay-overview.png";
+import SupportedChains from "../_images/supported-chains.png";
 import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon} from "lucide-react";
 
 export const metadata = createMetadata({

apps/portal/src/app/connect/pay/assets/bwc.png renamed to apps/portal/src/app/pay/assets/bwc.png

@@ -0,0 +1,131 @@
+import type { SideBar } from "@/components/Layouts/DocLayout";
+import {
+  AlbumIcon,
+  ArrowLeftRightIcon,
+  BracesIcon,
+  CircleDollarSignIcon,
+  CodeIcon,
+  FlaskConicalIcon,
+  MessageCircleQuestionIcon,
+  PaletteIcon,
+  RocketIcon,
+  TriangleRightIcon,
+  WalletIcon,
+  WebhookIcon,
+} from "lucide-react";
+
+const paySlug = "/pay";
+
+export const sidebar: SideBar = {
+  name: "Universal Bridge",
+  links: [
+    {
+      name: "Overview",
+      href: `${paySlug}/overview`,
+      icon: <WalletIcon />,
+    },
+    {
+      name: "Supported Routes",
+      href: "https://thirdweb.com/routes",
+      icon: <ArrowLeftRightIcon />,
+    },
+    {
+      name: "Onramp Providers",
+      href: `${paySlug}/onramp-providers`,
+      icon: <TriangleRightIcon />,
+    },
+    {
+      name: "Service Fees",
+      href: `${paySlug}/fees`,
+      icon: <CircleDollarSignIcon />,
+    },
+    {
+      name: "Get Started",
+      href: `${paySlug}/get-started`,
+      icon: <RocketIcon />,
+      links: [
+        {
+          name: "ConnectButton",
+          href: `${paySlug}/get-started#option-1-connectbutton`,
+        },
+        {
+          name: "Embed",
+          href: `${paySlug}/get-started#option-2-embed-pay`,
+        },
+        {
+          name: "Send a Transaction",
+          href: `${paySlug}/get-started#option-3-send-a-transaction-with-pay`,
+        },
+      ],
+    },
+    {
+      name: "Tutorials",
+      isCollapsible: true,
+      icon: <AlbumIcon />,
+      links: [
+        {
+          name: "Accept Direct Payments",
+          href: `${paySlug}/guides/accept-direct-payments`,
+        },
+        {
+          name: "Build a Custom Onramp Experience",
+          href: `${paySlug}/guides/build-a-custom-experience`,
+        },
+        {
+          name: "Cross-Chain Swapping",
+          href: `${paySlug}/guides/cross-chain-swapping`,
+        },
+      ],
+    },
+    {
+      name: "Customization",
+      isCollapsible: true,
+      icon: <PaletteIcon />,
+      links: [
+        {
+          name: "ConnectButton",
+          href: `${paySlug}/customization/connectbutton`,
+        },
+        {
+          name: "PayEmbed",
+          href: `${paySlug}/customization/payembed`,
+        },
+        {
+          name: "useSendTransaction",
+          href: `${paySlug}/customization/send-transaction`,
+        },
+      ],
+    },
+    {
+      name: "API Reference",
+      href: "https://bridge.thirdweb.com/reference",
+      icon: <BracesIcon />,
+    },
+    {
+      name: "SDK Reference",
+      href: "/typescript/v5/buy/quote",
+      icon: <CodeIcon />,
+      links: [
+        {
+          name: "TypeScript SDK",
+          href: "/typescript/v5/buy/quote",
+        },
+      ],
+    },
+    {
+      name: "Webhooks",
+      href: `${paySlug}/webhooks`,
+      icon: <WebhookIcon />,
+    },
+    {
+      name: "Developer Mode",
+      href: `${paySlug}/testing-pay`,
+      icon: <FlaskConicalIcon />,
+    },
+    {
+      name: "FAQs",
+      href: `${paySlug}/faqs`,
+      icon: <MessageCircleQuestionIcon />,
+    },
+  ],
+};