TOOL-3446

apps/dashboard/.storybook/preview.tsx

@@ -7,6 +7,7 @@ import { Inter as interFont } from "next/font/google";
 // biome-ignore lint/style/useImportType: <explanation>
 import React from "react";
 import { useEffect } from "react";
+import { Toaster } from "sonner";
 import { Button } from "../src/@/components/ui/button";
 
 const queryClient = new QueryClient();
@@ -16,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,
@@ -57,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>
@@ -72,14 +95,20 @@ 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>
         </div>
 
         <div className="flex min-w-0 grow flex-col">{props.children}</div>
+        <ToasterSetup />
       </div>
     </QueryClientProvider>
   );
 }
+
+function ToasterSetup() {
+  const { theme } = useTheme();
+  return <Toaster richColors theme={theme === "light" ? "light" : "dark"} />;
+}

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/@/components/blocks/pricing-card.tsx

@@ -31,7 +31,6 @@ type PricingCardProps = {
   ctaHint?: string;
   highlighted?: boolean;
   current?: boolean;
-  canTrialGrowth?: boolean;
   activeTrialEndsAt?: string;
   redirectPath: string;
   redirectToCheckout: RedirectBillingCheckoutAction;
@@ -43,7 +42,6 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   cta,
   highlighted = false,
   current = false,
-  canTrialGrowth = false,
   activeTrialEndsAt,
   redirectPath,
   redirectToCheckout,
@@ -88,18 +86,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
         <div className="flex flex-col gap-0.5">
           <div className="flex items-center gap-2">
             <span className="font-semibold text-3xl text-foreground tracking-tight">
-              {isCustomPrice ? (
-                plan.price
-              ) : canTrialGrowth ? (
-                <>
-                  <span className="text-muted-foreground line-through">
-                    ${plan.price}
-                  </span>{" "}
-                  $0
-                </>
-              ) : (
-                `$${plan.price}`
-              )}
+              ${plan.price}
             </span>
 
             {!isCustomPrice && (

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

@@ -54,14 +54,6 @@ export type Account = {
   // TODO - add image URL
 };
 
-interface UpdateAccountInput {
-  name?: string;
-  email?: string;
-  linkWallet?: boolean;
-  subscribeToUpdates?: boolean;
-  onboardSkipped?: boolean;
-}
-
 interface UpdateAccountNotificationsInput {
   billing: "email" | "none";
   updates: "email" | "none";
@@ -379,39 +371,48 @@ export function useUserOpUsagePeriod(args: {
   });
 }
 
-export function useUpdateAccount() {
-  const queryClient = useQueryClient();
-  const address = useActiveAccount()?.address;
+export type UpdateAccountParams = {
+  name?: string;
+  email?: string;
+  linkWallet?: boolean;
+  subscribeToUpdates?: boolean;
+  onboardSkipped?: boolean;
+};
 
-  return useMutation({
-    mutationFn: async (input: UpdateAccountInput) => {
-      type Result = {
-        data: object;
-        error?: { message: string };
-      };
+export async function updateAccountClient(input: UpdateAccountParams) {
+  type Result = {
+    data: object;
+    error?: { message: string };
+  };
 
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/account",
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(input),
-      });
+  const res = await apiServerProxy<Result>({
+    pathname: "/v1/account",
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(input),
+  });
 
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
 
-      const json = res.data;
+  const json = res.data;
 
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
 
-      return json.data;
-    },
+  return json.data;
+}
+
+export function useUpdateAccount() {
+  const queryClient = useQueryClient();
+  const address = useActiveAccount()?.address;
 
+  return useMutation({
+    mutationFn: updateAccountClient,
     onSuccess: () => {
       return queryClient.invalidateQueries({
         queryKey: accountKeys.me(address || ""),
@@ -460,94 +461,61 @@ export function useUpdateNotifications() {
   });
 }
 
-export function useConfirmEmail() {
-  const address = useActiveAccount()?.address;
-  const queryClient = useQueryClient();
+export const verifyEmailClient = async (input: ConfirmEmailInput) => {
+  type Result = {
+    error?: { message: string };
+    data: { team: Team; account: Account };
+  };
 
-  return useMutation({
-    mutationFn: async (input: ConfirmEmailInput) => {
-      type Result = {
-        error?: { message: string };
-        data: { team: Team; account: Account };
-      };
+  const res = await apiServerProxy<Result>({
+    pathname: "/v1/account/confirmEmail",
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(input),
+  });
 
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/account/confirmEmail",
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(input),
-      });
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
 
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
+  const json = res.data;
 
-      const json = res.data;
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
 
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
+  return json.data;
+};
 
-      return json.data;
-    },
-    onSuccess: async () => {
-      // invalidate related cache, since could be relinking account
-      return Promise.all([
-        queryClient.invalidateQueries({
-          queryKey: apiKeys.keys(address || ""),
-        }),
-        queryClient.invalidateQueries({
-          queryKey: accountKeys.usage(address || ""),
-        }),
-        queryClient.invalidateQueries({
-          queryKey: accountKeys.me(address || ""),
-        }),
-      ]);
+export const resendEmailClient = async () => {
+  type Result = {
+    error?: { message: string };
+    data: object;
+  };
+
+  const res = await apiServerProxy<Result>({
+    pathname: "/v1/account/resendEmailConfirmation",
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
     },
+    body: JSON.stringify({}),
   });
-}
-
-export function useResendEmailConfirmation() {
-  const address = useActiveAccount()?.address;
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async () => {
-      type Result = {
-        error?: { message: string };
-        data: object;
-      };
 
-      const res = await apiServerProxy<Result>({
-        pathname: "/v1/account/resendEmailConfirmation",
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({}),
-      });
-
-      if (!res.ok) {
-        throw new Error(res.error);
-      }
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
 
-      const json = res.data;
+  const json = res.data;
 
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
 
-      return json.data;
-    },
-    onSuccess: () => {
-      return queryClient.invalidateQueries({
-        queryKey: accountKeys.me(address || ""),
-      });
-    },
-  });
-}
+  return json.data;
+};
 
 export function useCreateApiKey() {
   const address = useActiveAccount()?.address;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx

@@ -3,7 +3,7 @@ import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { Toaster, toast } from "sonner";
+import { toast } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
 import { ZERO_ADDRESS } from "thirdweb";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
@@ -109,7 +109,6 @@ function Component() {
               contractChainId={1}
             />
           </BadgeContainer>
-          <Toaster richColors />
         </div>
       </ErrorProvider>
     </ThirdwebProvider>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { subDays } from "date-fns";
 import { useState } from "react";
-import { Toaster, toast } from "sonner";
+import { toast } from "sonner";
 import { mobileViewport } from "stories/utils";
 import { NATIVE_TOKEN_ADDRESS, ZERO_ADDRESS } from "thirdweb";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
@@ -196,8 +196,6 @@ function Component() {
           isValidTokenId={true}
           noClaimConditionSet={noClaimConditionSet}
         />
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx

@@ -11,7 +11,7 @@ import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { Toaster, toast } from "sonner";
+import { toast } from "sonner";
 import { BadgeContainer, mobileViewport } from "stories/utils";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { accountStub } from "../../../../../../../stories/stubs";
@@ -175,8 +175,6 @@ function Component() {
             contractChainId={1}
           />
         </BadgeContainer>
-
-        <Toaster richColors />
       </div>
     </ThirdwebProvider>
   );