diff --git a/backend/native/backpack-api/src/db/users.ts b/backend/native/backpack-api/src/db/users.ts index c1a1755b7..401e62ca8 100644 --- a/backend/native/backpack-api/src/db/users.ts +++ b/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: [ {}, { diff --git a/packages/app-extension/src/components/Onboarding/pages/OnboardAccount.tsx b/packages/app-extension/src/components/Onboarding/pages/OnboardAccount.tsx index b1564812f..1e9e69335 100644 --- a/packages/app-extension/src/components/Onboarding/pages/OnboardAccount.tsx +++ b/packages/app-extension/src/components/Onboarding/pages/OnboardAccount.tsx @@ -77,8 +77,8 @@ export const OnboardAccount = ({ { - setOnboardingData({ username }); + onNext={(username, firstname?, lastname?) => { + setOnboardingData({ username, firstname, lastname }); nextStep(); }} />, diff --git a/packages/app-extension/src/components/Onboarding/pages/UsernameForm.tsx b/packages/app-extension/src/components/Onboarding/pages/UsernameForm.tsx index 627494a16..c04399478 100644 --- a/packages/app-extension/src/components/Onboarding/pages/UsernameForm.tsx +++ b/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 = ({ } /> + + { + setFirstname(e.target.value.replace(/[^a-zA-Z]/g, "")); + }} + error={error ? true : false} + errorMessage={error} + startAdornment={ + + + + } + /> + { + setLastname(e.target.value.replace(/[^a-zA-Z]/g, "")); + }} + error={error ? true : false} + errorMessage={error} + startAdornment={ + + + + } + /> + diff --git a/packages/recoil/src/context/OnboardingProvider.tsx b/packages/recoil/src/context/OnboardingProvider.tsx index e9499b6a8..094e1c370 100644 --- a/packages/recoil/src/context/OnboardingProvider.tsx +++ b/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) => { - 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,