[Dashboard] Login flow improvements (#5658)

Fixes: DASH-564 and DASH-494

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the user interface and functionality related to wallet connection across various components in the dashboard, primarily changing instances of "Sign In" to "Connect Wallet" and modifying how account information is handled.

### Detailed summary
- Changed button text from `Sign In` to `Connect Wallet` in multiple components.
- Updated `TeamHeader` to use `getRawAccount` instead of `getAuthToken`.
- Modified account handling in `TeamLayout` functions to include `getValidAccount`.
- Adjusted `LoginPage` logic for account onboarding and redirection.
- Enhanced `TeamHeaderLoggedIn` to accept `account` as a prop directly.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -150,7 +150,7 @@ export const CustomConnectWallet = (props: {
           <Link
             href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
           >
-            Sign In
+            Connect Wallet
           </Link>
         </Button>
       </>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -146,7 +146,7 @@ export function FaucetButton({
         <Link
           href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
         >
-          Sign In
+          Connect Wallet
         </Link>
       </Button>
     );

apps/dashboard/src/app/login/LoginPage.tsx

@@ -123,11 +123,7 @@ function PageContent(props: {
     | {
         id: "complete";
       }
-  >(
-    props.account
-      ? { id: "onboarding", account: props.account }
-      : { id: "login" },
-  );
+  >({ id: "login" });
 
   const router = useDashboardRouter();
   const connectionStatus = useActiveWalletConnectionStatus();

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

@@ -1,7 +1,5 @@
-import { redirect } from "next/navigation";
 import { getRawAccount } from "../account/settings/getAccount";
 import { LoginAndOnboardingPage } from "./LoginPage";
-import { isOnboardingComplete } from "./onboarding/isOnboardingRequired";
 
 export default async function Page(props: {
   searchParams: Promise<{
@@ -11,13 +9,11 @@ export default async function Page(props: {
   const nextPath = (await props.searchParams).next;
   const account = await getRawAccount();
 
-  if (account && isOnboardingComplete(account)) {
-    if (nextPath) {
-      redirect(nextPath);
-    } else {
-      redirect("/team");
-    }
-  }
+  // don't redirect away from login page if authToken is already present and onboarding is done
+  // so that if user is stuck in a state where cookie is set, account onboarding is complete but the wallet is not connected, they can connect wallet, sign in and continue
+
+  // if the user is already logged in, wallet is connected and onboarding is complete
+  // user will be redirected to the next path on the client side without having to do anything
 
   return <LoginAndOnboardingPage account={account} nextPath={nextPath} />;
 }

apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx

@@ -2,14 +2,19 @@ import { getProjects } from "@/api/projects";
 import { getTeamNebulaWaitList, getTeams } from "@/api/team";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { notFound, redirect } from "next/navigation";
+import { getValidAccount } from "../../../account/settings/getAccount";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
 
 export default async function TeamLayout(props: {
   children: React.ReactNode;
   params: Promise<{ team_slug: string }>;
 }) {
   const params = await props.params;
-  const teams = await getTeams();
+
+  const [account, teams] = await Promise.all([
+    getValidAccount(`/team/${params.team_slug}`),
+    getTeams(),
+  ]);
 
   if (!teams) {
     redirect("/login");
@@ -37,6 +42,7 @@ export default async function TeamLayout(props: {
           currentTeam={team}
           teamsAndProjects={teamsAndProjects}
           currentProject={undefined}
+          account={account}
         />
 
         <TabPathLinks

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

@@ -2,6 +2,7 @@ import { getProjects } from "@/api/projects";
 import { getTeamNebulaWaitList, getTeams } from "@/api/team";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { notFound, redirect } from "next/navigation";
+import { getValidAccount } from "../../../account/settings/getAccount";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
 
 export default async function TeamLayout(props: {
@@ -10,7 +11,10 @@ export default async function TeamLayout(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
 }) {
   const params = await props.params;
-  const teams = await getTeams();
+  const [teams, account] = await Promise.all([
+    getTeams(),
+    getValidAccount(`/team/${params.team_slug}/${params.project_slug}`),
+  ]);
 
   if (!teams) {
     redirect("/login");
@@ -49,6 +53,7 @@ export default async function TeamLayout(props: {
           currentProject={project}
           currentTeam={team}
           teamsAndProjects={teamsAndProjects}
+          account={account}
         />
         <TabPathLinks
           tabContainerClassName="px-4 lg:px-6"

apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderLoggedOut.tsx

@@ -35,7 +35,7 @@ export function TeamHeaderLoggedOutDesktopUI(props: {
           <Link
             href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
           >
-            Sign in
+            Connect Wallet
           </Link>
         </Button>
       </div>
@@ -64,7 +64,7 @@ export function TeamHeaderLoggedOutMobileUI(props: {
           <Link
             href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
           >
-            Sign in
+            Connect Wallet
           </Link>
         </Button>
         <MobileBurgerMenuButton type="loggedOut" />

apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx

@@ -5,7 +5,7 @@ import type { Team } from "@/api/team";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
-import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useCallback, useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { LazyCreateAPIKeyDialog } from "../../../../components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
@@ -20,10 +20,10 @@ export function TeamHeaderLoggedIn(props: {
   currentTeam: Team;
   teamsAndProjects: Array<{ team: Team; projects: Project[] }>;
   currentProject: Project | undefined;
+  account: Pick<Account, "email" | "id">;
 }) {
   const [isCreateProjectDialogOpen, setIsCreateProjectDialogOpen] =
     useState(false);
-  const myAccountQuery = useAccount();
   const activeWallet = useActiveWallet();
   const { disconnect } = useDisconnect();
   const router = useDashboardRouter();
@@ -45,7 +45,7 @@ export function TeamHeaderLoggedIn(props: {
     currentProject: props.currentProject,
     currentTeam: props.currentTeam,
     teamsAndProjects: props.teamsAndProjects,
-    account: myAccountQuery.data,
+    account: props.account,
     logout: logout,
     connectButton: <CustomConnectWallet />,
     createProject: () => setIsCreateProjectDialogOpen(true),

apps/dashboard/src/app/team/components/TeamHeader/team-header.tsx

@@ -1,13 +1,13 @@
 import { getProjects } from "@/api/projects";
 import { getTeams } from "@/api/team";
-import { getAuthToken } from "../../../api/lib/getAuthToken";
+import { getRawAccount } from "../../../account/settings/getAccount";
 import { TeamHeaderLoggedOut } from "./TeamHeaderLoggedOut";
 import { TeamHeaderLoggedIn } from "./team-header-logged-in.client";
 
 export async function TeamHeader() {
-  const authToken = await getAuthToken();
+  const account = await getRawAccount();
 
-  if (!authToken) {
+  if (!account) {
     return <TeamHeaderLoggedOut />;
   }
 
@@ -34,6 +34,7 @@ export async function TeamHeader() {
       currentTeam={firstTeam}
       teamsAndProjects={teamsAndProjects}
       currentProject={undefined}
+      account={account}
     />
   );
 }

apps/dashboard/src/components/buttons/MismatchButton.tsx

@@ -108,7 +108,7 @@ export const MismatchButton = forwardRef<
         <Link
           href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
         >
-          Sign In
+          Connect Wallet
         </Link>
       </Button>
     );