[TOOL-3497] Dashboard: Add Linked Wallets page in account layout, minor UI tweaks in account layout (#6313)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the account management features in the dashboard by introducing linked wallets functionality, refining UI elements, and improving code organization.

### Detailed summary
- Added `/account/wallets` route with "Linked Wallets" label.
- Updated button text from "Create a Team" to "Create Team".
- Changed `<div>` to `<header>` in `AccountSettingsPage.tsx`.
- Enhanced `Devices` page structure with headers and descriptions.
- Implemented `getLinkedWallets` API function.
- Updated `Page` component to fetch linked wallets and account info.
- Refactored `LinkWallet` and `LinkWalletUI` components for better state management and UI.
- Added stubs for unlinking wallets in `LinkWalletsUI.stories.tsx`.
- Improved wallet unlinking functionality with confirmation dialogs.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/api/linked-wallets.ts

@@ -0,0 +1,32 @@
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+export type LinkedWallet = {
+  createdAt: string;
+  id: string;
+  walletAddress: string;
+};
+
+export async function getLinkedWallets() {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const res = await fetch(`${API_SERVER_URL}/v1/account/wallets`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  if (res.ok) {
+    const json = (await res.json()) as {
+      data: LinkedWallet[];
+    };
+
+    return json.data;
+  }
+
+  return null;
+}

apps/dashboard/src/app/account/devices/AccountDevicesPage.tsx

@@ -11,25 +11,12 @@ export function AccountDevicesPage() {
   const authorizedWalletsQuery = useAuthorizedWallets();
 
   return (
-    <div className="container py-8">
-      <div className="flex flex-col gap-8">
-        <div className="flex flex-col gap-2">
-          <div className="flex flex-col justify-between gap-4">
-            <h1 className="font-semibold text-3xl tracking-tight">Devices</h1>
-            <p className="text-muted-foreground">
-              List of authorized devices that can perform actions on behalf of
-              your account.
-            </p>
-            <ChakraProviderSetup>
-              <AuthorizedWalletsTable
-                authorizedWallets={authorizedWalletsQuery.data || []}
-                isPending={authorizedWalletsQuery.isPending}
-                isFetched={authorizedWalletsQuery.isFetched}
-              />
-            </ChakraProviderSetup>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ChakraProviderSetup>
+      <AuthorizedWalletsTable
+        authorizedWallets={authorizedWalletsQuery.data || []}
+        isPending={authorizedWalletsQuery.isPending}
+        isFetched={authorizedWalletsQuery.isFetched}
+      />
+    </ChakraProviderSetup>
   );
 }

apps/dashboard/src/app/account/devices/page.tsx

@@ -5,5 +5,21 @@ export default async function Page() {
   // enforce valid account
   await getValidAccount("/account/devices");
 
-  return <AccountDevicesPage />;
+  return (
+    <div>
+      <header className="border-border border-b py-10">
+        <div className="container max-w-[950px]">
+          <h1 className="font-semibold text-3xl tracking-tight">Devices</h1>
+          <p className="mt-1 text-muted-foreground text-sm">
+            List of authorized devices that can perform actions on behalf of
+            your account.
+          </p>
+        </div>
+      </header>
+
+      <div className="container max-w-[950px] py-8">
+        <AccountDevicesPage />
+      </div>
+    </div>
+  );
 }

apps/dashboard/src/app/account/layout.tsx

@@ -70,11 +70,10 @@ async function HeaderAndNav(props: {
             path: "/account/settings",
             name: "Settings",
           },
-          // TODO - enable these links after they are functional
-          // {
-          //   path: "/account/wallets",
-          //   name: "Wallets",
-          // },
+          {
+            path: "/account/wallets",
+            name: "Linked Wallets",
+          },
           {
             path: "/account/devices",
             name: "Devices",

apps/dashboard/src/app/account/overview/AccountTeamsUI.tsx

@@ -46,9 +46,9 @@ export function AccountTeamsUI(props: {
         </div>
 
         <ToolTipLabel label="Coming Soon">
-          <Button variant="primary" disabled className="gap-2 max-sm:w-full">
+          <Button disabled className="gap-2 max-sm:w-full">
             <PlusIcon className="size-4" />
-            Create a Team
+            Create Team
           </Button>
         </ToolTipLabel>
       </div>

apps/dashboard/src/app/account/page.tsx

@@ -1,14 +1,19 @@
 import { getTeams } from "@/api/team";
 import { getMembers } from "@/api/team-members";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { getAuthToken } from "../api/lib/getAuthToken";
 import { loginRedirect } from "../login/loginRedirect";
 import { AccountTeamsUI } from "./overview/AccountTeamsUI";
 import { getValidAccount } from "./settings/getAccount";
 
 export default async function Page() {
-  const account = await getValidAccount("/account");
-  const teams = await getTeams();
-  if (!teams) {
+  const [authToken, account, teams] = await Promise.all([
+    getAuthToken(),
+    getValidAccount("/account"),
+    getTeams(),
+  ]);
+
+  if (!authToken || !teams) {
     loginRedirect("/account");
   }
 
@@ -36,11 +41,19 @@ export default async function Page() {
   ).filter((x) => !!x);
 
   return (
-    <div className="container grow py-8">
-      <AccountTeamsUI
-        teamsWithRole={teamsWithRole}
-        client={getThirdwebClient()}
-      />
+    <div className="flex grow flex-col">
+      <header className="border-border border-b py-10">
+        <div className="container max-w-[950px]">
+          <h1 className="font-semibold text-3xl tracking-tight">Overview</h1>
+        </div>
+      </header>
+
+      <div className="container flex max-w-[950px] grow flex-col py-8">
+        <AccountTeamsUI
+          teamsWithRole={teamsWithRole}
+          client={getThirdwebClient(authToken)}
+        />
+      </div>
     </div>
   );
 }

apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx

@@ -15,13 +15,14 @@ export function AccountSettingsPage(props: {
   const router = useDashboardRouter();
   return (
     <div>
-      <div className="border-border border-b py-10">
+      <header className="border-border border-b py-10">
         <div className="container max-w-[950px]">
           <h1 className="font-semibold text-3xl tracking-tight">
             Account Settings
           </h1>
         </div>
-      </div>
+      </header>
+
       <div className="container max-w-[950px] grow pt-8 pb-20">
         <AccountSettingsPageUI
           hideDeleteAccount