feat(onboarding): implement username on onboarding and profile contact card (#1619)

Author: lourou

features/authentication/authentication.api.ts

@@ -1,10 +1,30 @@
+import { z } from "zod";
+import { profileValidationSchema } from "@/features/profiles/schemas/profile-validation.schema";
 import { api } from "@/utils/api/api";
 import { handleApiError } from "@/utils/api/api.error";
 import { buildDeviceMetadata } from "@/utils/device-metadata";
-import { z } from "zod";
 
 const deviceOSEnum = z.enum(["android", "ios", "web"]);
 
+const createUserRequestSchema = z
+  .object({
+    privyUserId: z.string(),
+    device: z.object({
+      os: deviceOSEnum,
+      name: z.string().nullable(),
+    }),
+    identity: z.object({
+      privyAddress: z.string(),
+      xmtpId: z.string(),
+    }),
+    profile: profileValidationSchema.pick({
+      name: true,
+      username: true,
+      avatar: true,
+    }),
+  })
+  .strict();
+
 const createUserResponseSchema = z
   .object({
     id: z.string(),
@@ -22,6 +42,7 @@ const createUserResponseSchema = z
     profile: z.object({
       id: z.string(),
       name: z.string(),
+      username: z.string(),
       description: z.string().nullable(),
     }),
   })
@@ -35,23 +56,45 @@ export const createUser = async (args: {
   inboxId: string;
   profile: {
     name: string;
+    username: string;
     avatar?: string;
   };
 }): Promise<CreateUserResponse> => {
   const { privyUserId, smartContractWalletAddress, inboxId, profile } = args;
 
   try {
-    const response = await api.post<CreateUserResponse>("/api/v1/users", {
+    const requestPayload = {
       privyUserId,
       device: buildDeviceMetadata(),
       identity: {
         privyAddress: smartContractWalletAddress,
         xmtpId: inboxId,
       },
       profile,
-    });
+    };
+
+    const validationResult = createUserRequestSchema.safeParse(requestPayload);
+    if (!validationResult.success) {
+      throw new Error(
+        `Invalid request data: ${validationResult.error.message}`
+      );
+    }
+
+    const response = await api.post<CreateUserResponse>(
+      "/api/v1/users",
+      validationResult.data
+    );
+
+    const responseValidation = createUserResponseSchema.safeParse(
+      response.data
+    );
+    if (!responseValidation.success) {
+      throw new Error(
+        `Response validation failed: ${responseValidation.error.message}`
+      );
+    }
 
-    return createUserResponseSchema.parse(response.data);
+    return responseValidation.data;
   } catch (error) {
     throw handleApiError(error, "createUser");
   }

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx

@@ -185,9 +185,9 @@ const BottomSheetContent = memo(function BottomSheetContent() {
                   <Avatar
                     size={theme.avatarSize.md}
                     uri={item.reactor.avatar}
-                    name={item.reactor.userName}
+                    name={item.reactor.username}
                   />
-                  <Text style={themed($userName)}>{item.reactor.userName}</Text>
+                  <Text style={themed($username)}>{item.reactor.username}</Text>
                   <Text style={themed($reactionContent)}>{item.content}</Text>
                 </HStack>
               </ReactionContainer>
@@ -233,7 +233,7 @@ const $reactionInner: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   flex: 1,
 });
 
-const $userName: ThemedStyle<TextStyle> = ({ spacing, colors }) => ({
+const $username: ThemedStyle<TextStyle> = ({ spacing, colors }) => ({
   flex: 1,
   display: "flex",
   alignItems: "flex-end",

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reactions.types.ts

@@ -34,6 +34,6 @@ export type SortedReaction = {
  */
 export type ReactorDetails = {
   address: string;
-  userName: Nullable<string>;
+  username: Nullable<string>;
   avatar: Nullable<string>;
 };

features/conversation/conversation-message/conversation-message-reactions/use-conversation-message-reactions-rolled-up.tsx

@@ -65,7 +65,7 @@ export function useConversationMessageReactionsRolledUp(args: {
         isOwnReaction,
         reactor: {
           address: reaction.senderInboxId,
-          userName: profile?.name,
+          username: profile?.name,
           avatar: profile?.avatar,
         },
       });

features/current-user/use-create-user.ts

@@ -13,6 +13,7 @@ type ICreateUserArgs = {
   inboxId: string;
   profile: {
     name: string;
+    username: string;
     avatar?: string;
     description?: string;
   };
@@ -35,6 +36,7 @@ const buildOptimisticUser = (args: ICreateUserArgs): CreateUserResponse => {
     profile: {
       id: "123",
       name: args.profile.name,
+      username: args.profile.username,
       description: args.profile.description ?? null,
     },
   };
@@ -102,6 +104,7 @@ export function useCreateUser() {
         data: {
           id: data.profile.id,
           name: data.profile.name,
+          username: data.profile.username,
           description: data.profile.description ?? null,
         },
       });

features/onboarding/screens/onboarding-contact-card-screen.tsx

@@ -2,10 +2,17 @@ import { usePrivy } from "@privy-io/expo";
 import React, { memo, useCallback, useEffect, useState } from "react";
 import { Alert, TextStyle, ViewStyle } from "react-native";
 import { create } from "zustand";
-import { Screen } from "@/components/screen/screen";
+import { z } from "zod";
+
 import { Center } from "@/design-system/Center";
 import { VStack } from "@/design-system/VStack";
-// import { useProfile } from "../hooks/useProfile";
+import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme";
+import { captureErrorWithToast } from "@/utils/capture-error";
+import { ValidationError } from "@/utils/api/api.error";
+import { useAddPfp } from "../../../hooks/use-add-pfp";
+import { isAxiosError } from "axios";
+
+import { Screen } from "@/components/screen/screen";
 import { useAuthStore } from "@/features/authentication/authentication.store";
 import { useMultiInboxStore } from "@/features/authentication/multi-inbox.store";
 import { useCreateUser } from "@/features/current-user/use-create-user";
@@ -17,10 +24,47 @@ import { ProfileContactCardEditableNameInput } from "@/features/profiles/compone
 import { ProfileContactCardLayout } from "@/features/profiles/components/profile-contact-card/profile-contact-card-layout";
 import { validateProfileName } from "@/features/profiles/utils/validate-profile-name";
 import { useHeader } from "@/navigation/use-header";
-import { ThemedStyle, useAppTheme } from "@/theme/use-app-theme";
-import { ValidationError } from "@/utils/api/api.error";
-import { captureErrorWithToast } from "@/utils/capture-error";
-import { useAddPfp } from "../../../hooks/use-add-pfp";
+import { formatRandomUserName } from "@/features/onboarding/utils/format-random-user-name";
+import { profileValidationSchema } from "@/features/profiles/schemas/profile-validation.schema";
+
+// Request validation schema
+const createUserRequestSchema = z.object({
+  inboxId: z.string(),
+  privyUserId: z.string(),
+  smartContractWalletAddress: z.string(),
+  profile: profileValidationSchema.pick({ name: true, username: true }),
+});
+
+type IOnboardingContactCardStore = {
+  name: string;
+  username: string;
+  nameValidationError: string;
+  avatar: string;
+  actions: {
+    setName: (name: string) => void;
+    setUsername: (username: string) => void;
+    setNameValidationError: (nameValidationError: string) => void;
+    setAvatar: (avatar: string) => void;
+    reset: () => void;
+  };
+};
+
+const useOnboardingContactCardStore = create<IOnboardingContactCardStore>(
+  (set) => ({
+    name: "",
+    username: "",
+    nameValidationError: "",
+    avatar: "",
+    actions: {
+      setName: (name: string) => set({ name }),
+      setUsername: (username: string) => set({ username }),
+      setNameValidationError: (nameValidationError: string) =>
+        set({ nameValidationError }),
+      setAvatar: (avatar: string) => set({ avatar }),
+      reset: () => set({ name: "", username: "", nameValidationError: "", avatar: "" }),
+    },
+  })
+);
 
 export function OnboardingContactCardScreen() {
   const { themed } = useAppTheme();
@@ -32,6 +76,19 @@ export function OnboardingContactCardScreen() {
   const handleRealContinue = useCallback(async () => {
     try {
       const currentSender = useMultiInboxStore.getState().currentSender;
+      const store = useOnboardingContactCardStore.getState();
+
+      // Validate profile data first using profileValidationSchema
+      const profileValidation = profileValidationSchema.safeParse({
+        name: store.name,
+        username: store.username,
+      });
+
+      if (!profileValidation.success) {
+        const errorMessage =
+          profileValidation.error.errors[0]?.message || "Invalid profile data";
+        throw new ValidationError({ message: errorMessage });
+      }
 
       if (!currentSender) {
         throw new Error("No current sender found, please logout");
@@ -41,15 +98,25 @@ export function OnboardingContactCardScreen() {
         throw new Error("No Privy user found, please logout");
       }
 
-      await createUserAsync({
-        inboxId: currentSender?.inboxId,
-        privyUserId: privyUser?.id,
-        smartContractWalletAddress: currentSender?.ethereumAddress,
+      // Create and validate the request payload
+      const payload = {
+        inboxId: currentSender.inboxId,
+        privyUserId: privyUser.id,
+        smartContractWalletAddress: currentSender.ethereumAddress,
         profile: {
-          name: useOnboardingContactCardStore.getState().name,
+          name: store.name,
+          username: store.username,
         },
-      });
+      };
+
+      // Validate the payload against our schema
+      const validationResult = createUserRequestSchema.safeParse(payload);
+
+      if (!validationResult.success) {
+        throw new Error("Invalid request data. Please check your input.");
+      }
 
+      await createUserAsync(validationResult.data);
       useAuthStore.getState().actions.setStatus("signedIn");
 
       // TODO: Notification permissions screen
@@ -62,14 +129,20 @@ export function OnboardingContactCardScreen() {
       // }
     } catch (error) {
       if (error instanceof ValidationError) {
-        useOnboardingContactCardStore
-          .getState()
-          .actions.setNameValidationError(Object.values(error.errors)[0]);
         captureErrorWithToast(error, {
-          message: Object.values(error.errors)[0],
+          message: error.message,
         });
+      } else if (isAxiosError(error)) {
+        const userMessage =
+          error.response?.status === 409
+            ? "This username is already taken"
+            : "Failed to create profile. Please try again.";
+
+        captureErrorWithToast(error, { message: userMessage });
       } else {
-        captureErrorWithToast(error);
+        captureErrorWithToast(error, {
+          message: "An unexpected error occurred. Please try again.",
+        });
       }
     }
   }, [createUserAsync, privyUser]);
@@ -173,32 +246,35 @@ const $subtitleStyle: ThemedStyle<TextStyle> = ({ spacing }) => ({
   marginBottom: spacing.sm,
 });
 
-const ProfileContactCardNameInput = memo(
-  function ProfileContactCardNameInput() {
-    const [nameValidationError, setNameValidationError] = useState<string>();
+const ProfileContactCardNameInput = memo(function ProfileContactCardNameInput() {
+  const [nameValidationError, setNameValidationError] = useState<string>();
 
-    const handleDisplayNameChange = useCallback((text: string) => {
-      const { isValid, error } = validateProfileName(text);
+  const handleDisplayNameChange = useCallback((text: string) => {
+    const { isValid, error } = validateProfileName(text);
 
-      if (!isValid) {
-        setNameValidationError(error);
-      } else {
-        setNameValidationError(undefined);
-      }
+    if (!isValid) {
+      setNameValidationError(error);
+      useOnboardingContactCardStore.getState().actions.setUsername("");
+      return;
+    }
 
-      useOnboardingContactCardStore.getState().actions.setName(text);
-    }, []);
-
-    return (
-      <ProfileContactCardEditableNameInput
-        defaultValue={useOnboardingContactCardStore.getState().name}
-        onChangeText={handleDisplayNameChange}
-        status={nameValidationError ? "error" : undefined}
-        helper={nameValidationError}
-      />
-    );
-  },
-);
+    setNameValidationError(undefined);
+    const username = formatRandomUserName({ displayName: text });
+
+    const store = useOnboardingContactCardStore.getState();
+    store.actions.setName(text);
+    store.actions.setUsername(username);
+  }, []);
+
+  return (
+    <ProfileContactCardEditableNameInput
+      defaultValue={useOnboardingContactCardStore.getState().name}
+      onChangeText={handleDisplayNameChange}
+      status={nameValidationError ? "error" : undefined}
+      helper={nameValidationError}
+    />
+  );
+});
 
 const ProfileContactCardAvatar = memo(function ProfileContactCardAvatar() {
   const { asset, addPFP } = useAddPfp();
@@ -221,39 +297,3 @@ const ProfileContactCardAvatar = memo(function ProfileContactCardAvatar() {
     />
   );
 });
-
-type IOnboardingContactCardState = {
-  name: string;
-  nameValidationError: string;
-  avatar: string;
-};
-
-type IOnboardingContactCardActions = {
-  setName: (name: string) => void;
-  setNameValidationError: (nameValidationError: string) => void;
-  setAvatar: (avatar: string) => void;
-  reset: () => void;
-};
-
-type IOnboardingContactCardStore = IOnboardingContactCardState & {
-  actions: IOnboardingContactCardActions;
-};
-
-const initialState: IOnboardingContactCardState = {
-  name: "",
-  nameValidationError: "",
-  avatar: "",
-};
-
-const useOnboardingContactCardStore = create<IOnboardingContactCardStore>(
-  (set, get) => ({
-    ...initialState,
-    actions: {
-      setName: (name: string) => set({ name }),
-      setNameValidationError: (nameValidationError: string) =>
-        set({ nameValidationError }),
-      setAvatar: (avatar: string) => set({ avatar }),
-      reset: () => set(initialState),
-    },
-  }),
-);