added firstname and lastname

backend/native/backpack-api/src/db/users.ts

@@ -302,12 +302,16 @@ const transformUser = (
  */
 export const createUser = async (
   username: string,
+  firstname: string,
+  lastname: string,
   blockchainPublicKeys: Array<{ blockchain: Blockchain; publicKey: string }>,
   waitlistId?: string | null,
   referrerId?: string
 ): Promise<{
   id: string;
   username: string;
+  firstname: string;
+  lastname: string;
   public_keys: { blockchain: "solana" | "ethereum"; id: number }[];
 }> => {
   const inviteCode = uuidv4();
@@ -329,6 +333,8 @@ export const createUser = async (
       {
         object: {
           username: username,
+          firstname: firstname,
+          lastname: lastname,
           public_keys: {
             data: blockchainPublicKeys.map((b) => ({
               blockchain: b.blockchain,
@@ -343,6 +349,8 @@ export const createUser = async (
       {
         id: true,
         username: true,
+        firstname: true,
+        lastname: true,
         public_keys: [
           {},
           {

packages/app-extension/src/components/Onboarding/pages/OnboardAccount.tsx

@@ -77,8 +77,8 @@ export const OnboardAccount = ({
     <UsernameForm
       key="UsernameForm"
       inviteCode={inviteCode!}
-      onNext={(username) => {
-        setOnboardingData({ username });
+      onNext={(username, firstname?, lastname?) => {
+        setOnboardingData({ username, firstname, lastname });
         nextStep();
       }}
     />,

packages/app-extension/src/components/Onboarding/pages/UsernameForm.tsx

@@ -1,5 +1,5 @@
 import { type FormEvent, useCallback, useEffect, useState } from "react";
-import { PrimaryButton,TextInput } from "@coral-xyz/react-common";
+import { PrimaryButton, TextInput } from "@coral-xyz/react-common";
 import { useCustomTheme } from "@coral-xyz/themes";
 import { AlternateEmail } from "@mui/icons-material";
 import { Box, InputAdornment } from "@mui/material";
@@ -11,9 +11,11 @@ export const UsernameForm = ({
   onNext,
 }: {
   inviteCode: string;
-  onNext: (username: string) => void;
+  onNext: (username: string, firstname: string, lastname: string) => void;
 }) => {
   const [username, setUsername] = useState("");
+  const [firstname, setFirstname] = useState("");
+  const [lastname, setLastname] = useState("");
   const [error, setError] = useState("");
   const theme = useCustomTheme();
 
@@ -34,12 +36,12 @@ export const UsernameForm = ({
         const json = await res.json();
         if (!res.ok) throw new Error(json.message || "There was an error");
 
-        onNext(username);
+        onNext(username, firstname, lastname);
       } catch (err: any) {
         setError(err.message);
       }
     },
-    [username]
+    [username, firstname, lastname]
   );
 
   return (
@@ -104,6 +106,70 @@ export const UsernameForm = ({
               </InputAdornment>
             }
           />
+          <Box
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: "10px",
+            }}
+          >
+            <TextInput
+              inputProps={{
+                name: "firstname",
+                autoComplete: "off",
+                spellCheck: "false",
+                autoFocus: true,
+              }}
+              placeholder="First Name"
+              type="text"
+              value={firstname}
+              setValue={(e) => {
+                setFirstname(e.target.value.replace(/[^a-zA-Z]/g, ""));
+              }}
+              error={error ? true : false}
+              errorMessage={error}
+              startAdornment={
+                <InputAdornment position="start">
+                  <AlternateEmail
+                    style={{
+                      color: theme.custom.colors.secondary,
+                      fontSize: 18,
+                      marginRight: -2,
+                      userSelect: "none",
+                    }}
+                  />
+                </InputAdornment>
+              }
+            />
+            <TextInput
+              inputProps={{
+                name: "lastname",
+                autoComplete: "off",
+                spellCheck: "false",
+                autoFocus: true,
+              }}
+              placeholder="Last Name"
+              type="text"
+              value={lastname}
+              setValue={(e) => {
+                setLastname(e.target.value.replace(/[^a-zA-Z]/g, ""));
+              }}
+              error={error ? true : false}
+              errorMessage={error}
+              startAdornment={
+                <InputAdornment position="start">
+                  <AlternateEmail
+                    style={{
+                      color: theme.custom.colors.secondary,
+                      fontSize: 18,
+                      marginRight: -2,
+                      userSelect: "none",
+                    }}
+                  />
+                </InputAdornment>
+              }
+            />
+          </Box>
         </Box>
         <PrimaryButton label="Continue" type="submit" />
       </Box>

packages/recoil/src/context/OnboardingProvider.tsx

@@ -81,6 +81,8 @@ export type OnboardingData = {
   complete: boolean;
   inviteCode: string | undefined;
   username: string | null;
+  firstname: string | null;
+  lastname: string | null;
   action: string;
   keyringType: KeyringType | null;
   blockchain: Blockchain | null;
@@ -102,6 +104,8 @@ const defaultState = {
   complete: false,
   inviteCode: undefined,
   username: null,
+  firstname: null,
+  lastname: null,
   action: "create",
   keyringType: null,
   blockchain: null,
@@ -278,7 +282,8 @@ export function OnboardingProvider({
   //
   const createUser = useCallback(
     async (data: Partial<OnboardingData>) => {
-      const { inviteCode, userId, username, keyringType } = data;
+      const { inviteCode, userId, username, firstname, lastname, keyringType } =
+        data;
 
       // If userId is provided, then we are onboarding via the recover flow.
       if (userId) {
@@ -312,6 +317,8 @@ export function OnboardingProvider({
       //
       const body = JSON.stringify({
         username,
+        firstname,
+        lastname,
         inviteCode,
         waitlistId: getWaitlistId?.(),
         blockchainPublicKeys,