User Onboarding UI Revamp

Author: MananTank

apps/dashboard/src/@/actions/getAccount.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { getRawAccount } from "../../app/account/settings/getAccount";
+
+export async function getRawAccountAction() {
+  return getRawAccount();
+}

apps/dashboard/src/@/api/team.ts

@@ -1,7 +1,5 @@
 import "server-only";
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
 import { API_SERVER_URL } from "@/constants/env";
-import { cookies } from "next/headers";
 import { getAuthToken } from "../../app/api/lib/getAuthToken";
 
 export type Team = {
@@ -38,14 +36,9 @@ export async function getTeamBySlug(slug: string) {
 }
 
 export async function getTeams() {
-  const cookiesManager = await cookies();
-  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  const token = activeAccount
-    ? cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
-    : null;
-
+  const token = await getAuthToken();
   if (!token) {
-    return [];
+    return null;
   }
 
   const teamsRes = await fetch(`${API_SERVER_URL}/v1/teams`, {
@@ -56,7 +49,7 @@ export async function getTeams() {
   if (teamsRes.ok) {
     return (await teamsRes.json())?.result as Team[];
   }
-  return [];
+  return null;
 }
 
 type TeamNebulWaitList = {

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

@@ -4,6 +4,7 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useStore } from "@/lib/reactive";
+import { cn } from "@/lib/utils";
 import { getSDKTheme } from "app/components/sdk-component-theme";
 import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
@@ -35,6 +36,7 @@ export const CustomConnectWallet = (props: {
   connectButtonClassName?: string;
   signInLinkButtonClassName?: string;
   detailsButtonClassName?: string;
+  loadingButtonClassName?: string;
   chain?: Chain;
 }) => {
   const thirdwebClient = useThirdwebClient();
@@ -123,7 +125,12 @@ export const CustomConnectWallet = (props: {
   if (isPending) {
     return (
       <>
-        <div className="flex h-[48px] w-[144px] items-center justify-center rounded-lg border border-border bg-muted">
+        <div
+          className={cn(
+            "flex h-[48px] w-[144px] items-center justify-center rounded-lg border border-border bg-muted",
+            props.loadingButtonClassName,
+          )}
+        >
           <Spinner className="size-4" />
         </div>
       </>

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -1,4 +1,5 @@
 import type { UserOpStats } from "@/api/analytics";
+import type { Team } from "@/api/team";
 import {
   type Query,
   useMutation,
@@ -528,7 +529,7 @@ export function useConfirmEmail() {
         throw new Error(json.error.message);
       }
 
-      return json.data;
+      return json.data as { team: Team; account: Account };
     },
     onSuccess: async () => {
       // invalidate related cache, since could be relinking account

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

@@ -13,16 +13,17 @@ import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 import { Turnstile } from "@marsidev/react-turnstile";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { CanClaimResponseType } from "app/api/testnet-faucet/can-claim/CanClaimResponseType";
-import { Onboarding } from "components/onboarding";
 import { mapV4ChainToV5Chain } from "contexts/map-chains";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { toUnits } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { useActiveAccount, useWalletBalance } from "thirdweb/react";
 import { z } from "zod";
+import { isOnboardingComplete } from "../../../../../../login/isOnboardingRequired";
 
 function formatTime(seconds: number) {
   const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
@@ -52,6 +53,7 @@ export function FaucetButton({
   chain: ChainMetadata;
   amount: number;
 }) {
+  const pathname = usePathname();
   const client = useThirdwebClient();
   const address = useActiveAccount()?.address;
   const chainId = chain.chainId;
@@ -118,7 +120,6 @@ export function FaucetButton({
 
   const accountQuery = useAccount();
   const userQuery = useLoggedInUser();
-  const [showOnboarding, setShowOnBoarding] = useState(false);
 
   const canClaimFaucetQuery = useQuery({
     queryKey: ["testnet-faucet-can-claim", chainId],
@@ -145,7 +146,8 @@ export function FaucetButton({
     return (
       <CustomConnectWallet
         loginRequired={true}
-        connectButtonClassName="!w-full !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm"
+        loadingButtonClassName="!w-full"
+        signInLinkButtonClassName="!w-full !h-auto !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm hover:!bg-primary/80"
       />
     );
   }
@@ -201,23 +203,17 @@ export function FaucetButton({
     );
   }
 
-  // Email verification is required to claim from the faucet
-  if (
-    !accountQuery.data.emailConfirmedAt &&
-    !accountQuery.data.unconfirmedEmail
-  ) {
+  if (!isOnboardingComplete(accountQuery.data)) {
     return (
-      <>
-        <Button
-          variant="outline"
-          className="!opacity-100 w-full"
-          onClick={() => setShowOnBoarding(true)}
+      <Button asChild className="w-full">
+        <Link
+          href={
+            pathname ? `/login?next=${encodeURIComponent(pathname)}` : "/login"
+          }
         >
           Verify your Email
-        </Button>
-        {/* We will show the modal only if the user click on it, because this is a public page */}
-        {showOnboarding && <Onboarding onOpenChange={setShowOnBoarding} />}
-      </>
+        </Link>
+      </Button>
     );
   }
 

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

@@ -1,18 +1,24 @@
 import { getProjects } from "@/api/projects";
-import { getTeams } from "@/api/team";
+import { type Team, getTeams } from "@/api/team";
 import { AppFooter } from "@/components/blocks/app-footer";
 import type React from "react";
 import { TabPathLinks } from "../../@/components/ui/tabs";
 import { TWAutoConnect } from "../components/autoconnect";
+import { loginRedirect } from "../login/loginRedirect";
 import { AccountHeader } from "./components/AccountHeader";
 
 export default async function AccountLayout(props: {
   children: React.ReactNode;
 }) {
+  const teams = await getTeams();
+  if (!teams) {
+    loginRedirect("/account");
+  }
+
   return (
     <div className="flex min-h-screen flex-col bg-background">
       <div className="flex grow flex-col">
-        <HeaderAndNav />
+        <HeaderAndNav teams={teams} />
         {props.children}
       </div>
       <TWAutoConnect />
@@ -21,11 +27,11 @@ export default async function AccountLayout(props: {
   );
 }
 
-async function HeaderAndNav() {
-  const teams = await getTeams();
-
+async function HeaderAndNav(props: {
+  teams: Team[];
+}) {
   const teamsAndProjects = await Promise.all(
-    teams.map(async (team) => ({
+    props.teams.map(async (team) => ({
       team,
       projects: await getProjects(team.slug),
     })),

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

@@ -1,18 +1,16 @@
 import { getTeams } from "@/api/team";
 import { getMembers } from "@/api/team-members";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
-import { redirect } from "next/navigation";
+import { loginRedirect } from "../login/loginRedirect";
 import { AccountTeamsUI } from "./overview/AccountTeamsUI";
-import { getAccount } from "./settings/getAccount";
+import { getValidAccount } from "./settings/getAccount";
 
 export default async function Page() {
-  const account = await getAccount();
-
-  if (!account) {
-    redirect("/login?next=/account");
-  }
-
+  const account = await getValidAccount("/account");
   const teams = await getTeams();
+  if (!teams) {
+    loginRedirect("/account");
+  }
 
   const teamsWithRole = (
     await Promise.all(

apps/dashboard/src/app/account/settings/getAccount.ts

@@ -1,10 +1,20 @@
 import { API_SERVER_URL } from "@/constants/env";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { getAuthToken } from "../../api/lib/getAuthToken";
+import { isOnboardingComplete } from "../../login/isOnboardingRequired";
+import { loginRedirect } from "../../login/loginRedirect";
 
-export async function getAccount() {
+/**
+ * Just get the account object without enforcing onboarding.
+ * In most cases - you should just be using `getValidAccount`
+ */
+export async function getRawAccount() {
   const authToken = await getAuthToken();
 
+  if (!authToken) {
+    return undefined;
+  }
+
   const res = await fetch(`${API_SERVER_URL}/v1/account/me`, {
     method: "GET",
     headers: {
@@ -21,3 +31,18 @@ export async function getAccount() {
 
   return json.data as Account;
 }
+
+/**
+ * If there's no account or account onboarding not complete, redirect to login page
+ * @param pagePath - the path of the current page to redirect back to after login/onboarding
+ */
+export async function getValidAccount(pagePath: string) {
+  const account = await getRawAccount();
+
+  // enforce login & onboarding
+  if (!account || !isOnboardingComplete(account)) {
+    loginRedirect(pagePath);
+  }
+
+  return account;
+}

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

@@ -1,15 +1,16 @@
 import { getThirdwebClient } from "@/constants/thirdweb.server";
-import { redirect } from "next/navigation";
 import { getAuthToken } from "../../api/lib/getAuthToken";
+import { loginRedirect } from "../../login/loginRedirect";
 import { AccountSettingsPage } from "./AccountSettingsPage";
-import { getAccount } from "./getAccount";
+import { getValidAccount } from "./getAccount";
 
 export default async function Page() {
-  const account = await getAccount();
+  const pagePath = "/account";
+  const account = await getValidAccount(pagePath);
   const token = await getAuthToken();
 
-  if (!account || !token) {
-    redirect(`/login?next=${encodeURIComponent("/account")}`);
+  if (!token) {
+    loginRedirect(pagePath);
   }
 
   return (