[TOOL-3639] Dashboard: Pay > Universal Bridge renaming (#6431)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on renaming and rebranding the `Pay` feature to `Universal Bridge`, updating related paths, descriptions, and components accordingly.

### Detailed summary
- Renamed `Pay` to `Universal Bridge` in various components and files.
- Updated links and routes to reflect the new branding.
- Changed descriptions to align with the new feature purpose.
- Replaced `TrackedLinkTW` with `TrackedUnderlineLink` in multiple components.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/redirects.js

@@ -354,6 +354,13 @@ async function redirects() {
       destination: "/",
       permanent: false,
     },
+    // pay > universal-bridge redirect
+    {
+      source: "/team/:team_slug/:project_slug/connect/pay/:path*",
+      destination:
+        "/team/:team_slug/:project_slug/connect/universal-bridge/:path*",
+      permanent: false,
+    },
     ...legacyDashboardToTeamRedirects,
   ];
 }

apps/dashboard/src/app/(dashboard)/(chain)/components/server/products.ts

@@ -45,7 +45,7 @@ export const products = [
     link: "https://portal.thirdweb.com/connect/account-abstraction/overview",
   },
   {
-    name: "Pay",
+    name: "Universal Bridge",
     id: "pay",
     icon: PayIcon,
     description: "Point of sale solution for bridging, onramping & swapping",

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/AccountAbstractionPage.tsx

@@ -2,7 +2,7 @@
 
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { TabPathLinks } from "@/components/ui/tabs";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
 import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts";
 import { CircleAlertIcon } from "lucide-react";
 import { useActiveWalletChain } from "thirdweb/react";
@@ -29,21 +29,20 @@ export function AccountAbstractionLayout(props: {
 
   return (
     <div>
-      <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
+      <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:mb-2 lg:text-3xl">
         Account Abstraction
       </h1>
       <p className="text-muted-foreground text-sm">
         Easily integrate Account abstraction (ERC-4337) compliant smart accounts
         into your apps.{" "}
-        <TrackedLinkTW
+        <TrackedUnderlineLink
           target="_blank"
           label="docs-wallets"
           category={TRACKING_CATEGORY}
           href="https://portal.thirdweb.com/wallets/smart-wallet"
-          className="text-link-foreground hover:text-foreground"
         >
           View Documentation
-        </TrackedLinkTW>
+        </TrackedUnderlineLink>
       </p>
       <div className="h-6" />
       <div className="flex flex-col gap-6">

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx

@@ -1,5 +1,5 @@
 import { getInAppWalletUsage } from "@/api/analytics";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
 import { InAppWalletsSummary } from "components/embedded-wallets/Analytics/Summary";
 import { subDays } from "date-fns";
 import { TRACKING_CATEGORY } from "../_constants";
@@ -31,22 +31,21 @@ export async function InAppWalletsHeader({
 
   return (
     <div>
-      <h1 className="mb-3 font-semibold text-2xl tracking-tight md:text-3xl">
+      <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:mb-2 lg:text-3xl">
         In-App Wallets
       </h1>
-      <p className="mt-3 mb-7 max-w-[700px] text-muted-foreground">
+      <p className="mb-7 max-w-[700px] text-muted-foreground text-sm leading-relaxed">
         A wallet infrastructure that enables apps to create, manage, and control
         their users wallets. Email login, social login, and bring-your-own auth
         supported.{" "}
-        <TrackedLinkTW
+        <TrackedUnderlineLink
           target="_blank"
           href="https://portal.thirdweb.com/connect/in-app-wallet/overview"
           label="learn-more"
           category={TRACKING_CATEGORY}
-          className="text-link-foreground hover:text-foreground"
         >
           Learn more
-        </TrackedLinkTW>
+        </TrackedUnderlineLink>
       </p>
       <InAppWalletsSummary
         allTimeStats={allTimeStats || []}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/layout.tsx

@@ -20,8 +20,8 @@ export default async function Layout(props: {
       href: `/team/${team_slug}/${project_slug}/connect/account-abstraction`,
     },
     {
-      label: "Pay",
-      href: `/team/${team_slug}/${project_slug}/connect/pay`,
+      label: "Universal Bridge",
+      href: `/team/${team_slug}/${project_slug}/connect/universal-bridge`,
     },
     {
       label: "Playground",

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/layout.tsx renamed to apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/layout.tsx

@@ -1,7 +1,7 @@
 import { getProject } from "@/api/projects";
 import { TabPathLinks } from "@/components/ui/tabs";
-import Link from "next/link";
 import { redirect } from "next/navigation";
+import { UnderlineLink } from "../../../../../../@/components/ui/UnderlineLink";
 
 export default async function Layout(props: {
   params: Promise<{
@@ -17,26 +17,25 @@ export default async function Layout(props: {
     redirect(`/team/${params.team_slug}`);
   }
 
-  const payLayoutPath = `/team/${params.team_slug}/${params.project_slug}/connect/pay`;
+  const payLayoutPath = `/team/${params.team_slug}/${params.project_slug}/connect/universal-bridge`;
 
   return (
     <div className="flex w-full flex-col gap-6">
       <div className="flex flex-col items-start justify-between gap-6 lg:flex-row">
         <div className="max-w-[700px]">
-          <h1 className="mb-3 font-bold text-3xl tracking-tight md:text-4xl">
-            Pay
+          <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:mb-2 lg:text-3xl">
+            Universal Bridge
           </h1>
-          <p className="text-muted-foreground text-sm leading-relaxed md:text-base">
-            Pay allows your users to purchase cryptocurrencies and execute
-            transactions with their credit card or debit card, or with any token
-            via cross-chain routing.{" "}
-            <Link
+          <p className="text-muted-foreground text-sm leading-relaxed">
+            Universal Bridge allows your users to bridge, swap, and purchase
+            cryptocurrencies and execute transactions with any fiat options or
+            tokens via cross-chain routing.{" "}
+            <UnderlineLink
               target="_blank"
               href="https://portal.thirdweb.com/connect/pay/overview"
-              className="!text-link-foreground"
             >
               Learn more
-            </Link>
+            </UnderlineLink>
           </p>
         </div>
       </div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/loading.tsx renamed to apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/loading.tsx

@@ -217,7 +217,7 @@ export function ProjectGeneralSettingsPageUI(props: {
   const paths = {
     aaConfig: `${projectLayout}/connect/account-abstraction/settings`,
     inAppConfig: `${projectLayout}/connect/in-app-wallets/settings`,
-    payConfig: `${projectLayout}/connect/pay/settings`,
+    payConfig: `${projectLayout}/connect/universal-bridge/settings`,
     afterDeleteRedirectTo: `/team/${props.teamSlug}`,
   };
 

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/page.tsx renamed to apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/universal-bridge/page.tsx

@@ -46,8 +46,9 @@ export const SERVICE_DEFINITIONS = {
   },
   pay: {
     name: "pay",
-    title: "Pay",
-    description: "Pay for a blockchain transaction with any currency",
+    title: "Universal Bridge",
+    description:
+      "Bridge, swap, and purchase cryptocurrencies and execute transactions with any fiat or tokens via cross-chain routing",
     // all actions allowed
     actions: [],
   },