temp2

Author: MananTank

apps/dashboard/.storybook/preview.tsx

@@ -17,8 +17,30 @@ const fontSans = interFont({
   variable: "--font-sans",
 });
 
+const customViewports = {
+  xs: {
+    // Regular sized phones (iphone 15 / 15 pro)
+    name: "iPhone",
+    styles: {
+      width: "390px",
+      height: "844px",
+    },
+  },
+  sm: {
+    // Larger phones (iphone 15 plus / 15 pro max)
+    name: "iPhone Plus",
+    styles: {
+      width: "430px",
+      height: "932px",
+    },
+  },
+};
+
 const preview: Preview = {
   parameters: {
+    viewport: {
+      viewports: customViewports,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -58,13 +80,13 @@ function StoryLayout(props: {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="flex min-h-screen min-w-0 flex-col bg-background text-foreground">
+      <div className="flex min-h-dvh min-w-0 flex-col bg-background text-foreground">
         <div className="flex justify-end gap-2 border-b p-4">
           <Button
             onClick={() => setTheme("dark")}
             size="sm"
             variant={theme === "dark" ? "default" : "outline"}
-            className="h-auto w-auto rounded-full p-2"
+            className="h-auto w-auto shrink-0 rounded-full p-2"
           >
             <MoonIcon className="size-4" />
           </Button>
@@ -73,7 +95,7 @@ function StoryLayout(props: {
             onClick={() => setTheme("light")}
             size="sm"
             variant={theme === "light" ? "default" : "outline"}
-            className="h-auto w-auto rounded-full p-2"
+            className="h-auto w-auto shrink-0 rounded-full p-2"
           >
             <SunIcon className="size-4" />
           </Button>

apps/dashboard/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@@ -54,14 +54,6 @@ export type Account = {
   // TODO - add image URL
 };
 
-export interface UpdateAccountInput {
-  name?: string;
-  email?: string;
-  linkWallet?: boolean;
-  subscribeToUpdates?: boolean;
-  onboardSkipped?: boolean;
-}
-
 interface UpdateAccountNotificationsInput {
   billing: "email" | "none";
   updates: "email" | "none";
@@ -379,7 +371,15 @@ export function useUserOpUsagePeriod(args: {
   });
 }
 
-export async function updateAccountClient(input: UpdateAccountInput) {
+export type UpdateAccountParams = {
+  name?: string;
+  email?: string;
+  linkWallet?: boolean;
+  subscribeToUpdates?: boolean;
+  onboardSkipped?: boolean;
+};
+
+export async function updateAccountClient(input: UpdateAccountParams) {
   type Result = {
     data: object;
     error?: { message: string };

apps/dashboard/src/app/login/onboarding/LinkWalletPrompt/EmailExists.stories.tsx renamed to apps/dashboard/src/app/login/onboarding/LinkWalletPrompt/LinkWalletPrompt.stories.tsx

@@ -1,13 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-  BadgeContainer,
-  mobileViewport,
-  storybookLog,
-} from "../../../../stories/utils";
-import { EmailExists } from "./EmailExists";
+import { storybookLog } from "../../../../stories/utils";
+import { OnboardingLayout } from "../onboarding-layout";
+import { LinkWalletPrompt } from "./LinkWalletPrompt";
 
 const meta = {
-  title: "Onboarding/screens/EmailExists",
+  title: "Onboarding/AccountOnboarding/LinkWalletPrompt",
   component: Story,
   parameters: {
     nextjs: {
@@ -19,33 +16,24 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
-  args: {},
+export const SendSuccess: Story = {
+  args: {
+    type: "success",
+  },
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
+export const SendError: Story = {
+  args: {
+    type: "error",
   },
 };
 
-function Story() {
-  return (
-    <div className="container flex max-w-[800px] flex-col gap-20 py-10">
-      <Variant label="Success" type="success" />
-      <Variant label="Error Generic" type="error" />
-    </div>
-  );
-}
-
-function Variant(props: {
-  label: string;
+function Story(props: {
   type: "success" | "error";
 }) {
   return (
-    <BadgeContainer label={props.label}>
-      <EmailExists
+    <OnboardingLayout currentStep={1}>
+      <LinkWalletPrompt
         onLinkWalletRequestSent={() => {
           storybookLog("onLinkWalletRequestSent");
         }}
@@ -65,6 +53,6 @@ function Variant(props: {
         }}
         accountAddress="0x1234567890123456789012345678901234567890"
       />
-    </BadgeContainer>
+    </OnboardingLayout>
   );
 }

apps/dashboard/src/app/login/onboarding/LinkWalletPrompt/EmailExists.tsx renamed to apps/dashboard/src/app/login/onboarding/LinkWalletPrompt/LinkWalletPrompt.tsx

@@ -4,13 +4,12 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useMutation } from "@tanstack/react-query";
-import { ArrowLeftIcon } from "lucide-react";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import { toast } from "sonner";
 import { shortenString } from "utils/usedapp-external";
 import type { TrackingParams } from "../../../../hooks/analytics/useTrack";
-import { TitleAndDescription } from "../Title";
 
-export function EmailExists(props: {
+export function LinkWalletPrompt(props: {
   email: string;
   accountAddress: string;
   onBack: () => void;
@@ -57,45 +56,52 @@ export function EmailExists(props: {
   }
 
   return (
-    <div>
-      <TitleAndDescription
-        heading="Email already in use"
-        description={
-          <>
-            {`We've`} noticed that an account associated with{" "}
+    <div className="rounded-lg border bg-card">
+      <h3 className="border-b px-4 py-6 font-semibold text-xl tracking-tight lg:p-6">
+        Link your wallet
+      </h3>
+
+      <div className="p-4 lg:p-6">
+        <div className="mb-6 space-y-2 text-muted-foreground">
+          <p>
+            An account with{" "}
             <span className="text-foreground">{props.email}</span> already
-            exists.
-            <br /> Would you like to link your wallet{" "}
-            <span className="font-mono text-foreground text-sm">
-              {shortenString(props.accountAddress)}
-            </span>{" "}
-            to the existing account?
-            <div className="h-2" />
+            exists, created with another wallet
+          </p>
+
+          <p>
+            You can link your wallet with this account to access it. <br />{" "}
+            Multiple wallets can be linked to the same account.{" "}
             <TrackedLinkTW
               href="https://portal.thirdweb.com/account/billing/account-info"
               category="account"
               label="learn-wallet-linking"
               target="_blank"
-              className="underline hover:text-foreground"
+              className="underline decoration-muted-foreground/50 decoration-dotted underline-offset-[5px] hover:text-foreground hover:decoration-foreground hover:decoration-solid"
             >
               Learn more about wallet linking
             </TrackedLinkTW>
-            .
-          </>
-        }
-      />
+          </p>
+        </div>
 
-      <div className="h-8" />
+        <p className="text-foreground">
+          Would you like to link your wallet{" "}
+          <span className="font-mono text-sm tracking-tight">
+            ({shortenString(props.accountAddress)})
+          </span>{" "}
+          with this account?
+        </p>
+      </div>
 
-      <div className="flex flex-row gap-3">
+      <div className="flex flex-col-reverse gap-4 border-t px-4 py-6 md:flex-row lg:justify-between lg:p-6">
         <Button
           variant="outline"
           className="gap-2 bg-card"
           onClick={props.onBack}
           disabled={requestLinkWallet.isPending}
         >
           <ArrowLeftIcon className="size-4" />
-          Use another email
+          Change Email
         </Button>
 
         <Button
@@ -104,8 +110,12 @@ export function EmailExists(props: {
           disabled={requestLinkWallet.isPending}
           className="gap-2"
         >
-          {requestLinkWallet.isPending && <Spinner className="size-4" />}
-          {requestLinkWallet.isPending ? "Linking" : "Yes, link them"}
+          Link wallet and continue
+          {requestLinkWallet.isPending ? (
+            <Spinner className="size-4" />
+          ) : (
+            <ArrowRightIcon className="size-4" />
+          )}
         </Button>
       </div>
     </div>

apps/dashboard/src/app/login/onboarding/LoginOrSignup/LoginOrSignup.stories.tsx

@@ -1,14 +1,11 @@
-import type { UpdateAccountInput } from "@3rdweb-sdk/react/hooks/useApi";
+import type { UpdateAccountParams } from "@3rdweb-sdk/react/hooks/useApi";
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-  BadgeContainer,
-  mobileViewport,
-  storybookLog,
-} from "../../../../stories/utils";
+import { storybookLog } from "../../../../stories/utils";
+import { OnboardingLayout } from "../onboarding-layout";
 import { LoginOrSignup } from "./LoginOrSignup";
 
 const meta = {
-  title: "Onboarding/screens/LoginOrSignup",
+  title: "Onboarding/AccountOnboarding/LoginOrSignup",
   component: Story,
   parameters: {
     nextjs: {
@@ -20,50 +17,44 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Desktop: Story = {
-  args: {},
+export const Success: Story = {
+  args: {
+    type: "success",
+  },
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
+export const EmailExists: Story = {
+  args: {
+    type: "email-exists",
+  },
+};
+
+export const ConfiramtionError: Story = {
+  args: {
+    type: "error",
   },
 };
 
-function loginOrSignupStug(
-  type: "success" | "error-generic" | "error-email-exists",
-) {
-  return async (data: UpdateAccountInput) => {
+function loginOrSignupStug(type: "success" | "error" | "email-exists") {
+  return async (data: UpdateAccountParams) => {
     storybookLog("loginOrSignup", data);
     await new Promise((resolve) => setTimeout(resolve, 1000));
 
-    if (type === "error-generic") {
+    if (type === "error") {
       throw new Error("Error Example");
     }
 
-    if (type === "error-email-exists") {
+    if (type === "email-exists") {
       throw new Error("email address already exists");
     }
   };
 }
 
-function Story() {
-  return (
-    <div className="container flex max-w-[800px] flex-col gap-20 py-10">
-      <Variant label="Success" type="success" />
-      <Variant label="Email Exists" type="error-email-exists" />
-      <Variant label="Error Generic" type="error-generic" />
-    </div>
-  );
-}
-
-function Variant(props: {
-  label: string;
-  type: "success" | "error-generic" | "error-email-exists";
+function Story(props: {
+  type: "success" | "error" | "email-exists";
 }) {
   return (
-    <BadgeContainer label={props.label}>
+    <OnboardingLayout currentStep={1}>
       <LoginOrSignup
         onRequestSent={(params) => {
           storybookLog("onRequestSent", params);
@@ -73,6 +64,6 @@ function Variant(props: {
           storybookLog("trackEvent", params);
         }}
       />
-    </BadgeContainer>
+    </OnboardingLayout>
   );
 }