From f990938337feaec0969268826bbe138a9fdcdc6c Mon Sep 17 00:00:00 2001
From: Harkirat Singh <harkirat96@gmail.com>
Date: Sat, 14 Oct 2023 20:50:04 +0530
Subject: [PATCH] figure out issue

---
 .../Onboarding/pages/OnboardAccount.tsx       | 81 +------------------
 .../Onboarding/pages/UsernameForm.tsx         | 75 +++++++++++++++--
 packages/common/src/constants.ts              |  2 +-
 .../recoil/src/context/OnboardingProvider.tsx |  9 ++-
 4 files changed, 82 insertions(+), 85 deletions(-)

diff --git a/packages/app-extension/src/components/Onboarding/pages/OnboardAccount.tsx b/packages/app-extension/src/components/Onboarding/pages/OnboardAccount.tsx
index b1564812f..d7f46da3d 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 = ({
     <UsernameForm
       key="UsernameForm"
       inviteCode={inviteCode!}
-      onNext={(username) => {
-        setOnboardingData({ username });
+      onNext={(username, firstName, lastName) => {
+        setOnboardingData({ username, firstName, lastName });
         nextStep();
       }}
     />,
@@ -160,80 +160,5 @@ export const OnboardAccount = ({
     return <AlreadyOnboarded />;
   }
 
-  return (
-    <WithNav
-      navButtonLeft={
-        step > 0 && step !== steps.length - 1 ? (
-          <NavBackButton onClick={prevStep} />
-        ) : undefined
-      }
-      {...navProps}
-      // Only display the onboarding menu on the first step
-      navButtonRight={step === 0 ? navProps.navButtonRight : undefined}
-    >
-      {steps[step]}
-
-      <WithContaineredDrawer
-        containerRef={containerRef}
-        openDrawer={openDrawer}
-        setOpenDrawer={setOpenDrawer}
-        paperStyles={{
-          height: "calc(100% - 56px)",
-          borderTopLeftRadius: "12px",
-          borderTopRightRadius: "12px",
-        }}
-      >
-        {keyringType === "ledger" ? (
-          <HardwareOnboard
-            blockchain={blockchain!}
-            // @ts-expect-error not assignable to type string ...
-            action={action}
-            signMessage={(publicKey: string) => getCreateMessage(publicKey)}
-            signText="Sign the message to authenticate with Backpack."
-            onClose={() => setOpenDrawer(false)}
-            onComplete={(signedWalletDescriptor: SignedWalletDescriptor) => {
-              setOnboardingData({
-                signedWalletDescriptors: [
-                  ...signedWalletDescriptors,
-                  signedWalletDescriptor,
-                ],
-              });
-              setOpenDrawer(false);
-            }}
-          />
-        ) : (
-          <ImportWallets
-            blockchain={blockchain!}
-            mnemonic={mnemonic!}
-            allowMultiple={false}
-            onNext={async (walletDescriptors: Array<WalletDescriptor>) => {
-              // Should only be one public key path
-              const walletDescriptor = walletDescriptors[0];
-              const signature = await signMessageForWallet(
-                walletDescriptor.blockchain,
-                walletDescriptor.publicKey,
-                getCreateMessage(walletDescriptor.publicKey),
-                {
-                  mnemonic: mnemonic!,
-                  signedWalletDescriptors: [
-                    { ...walletDescriptor, signature: "" },
-                  ],
-                }
-              );
-              setOnboardingData({
-                signedWalletDescriptors: [
-                  ...signedWalletDescriptors,
-                  {
-                    ...walletDescriptor,
-                    signature,
-                  },
-                ],
-              });
-              setOpenDrawer(false);
-            }}
-          />
-        )}
-      </WithContaineredDrawer>
-    </WithNav>
-  );
+  return <div>{steps[step]}</div>;
 };
diff --git a/packages/app-extension/src/components/Onboarding/pages/UsernameForm.tsx b/packages/app-extension/src/components/Onboarding/pages/UsernameForm.tsx
index 627494a16..7c84814eb 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,7 +36,7 @@ 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);
       }
@@ -55,7 +57,7 @@ export const UsernameForm = ({
     >
       <Box style={{ margin: "24px" }}>
         <Header text="Claim your username" />
-        <SubtextParagraph style={{ margin: "16px 0" }}>
+        <SubtextParagraph>
           Others can see and find you by this username, and it will be
           associated with your primary wallet address.
           <br />
@@ -70,7 +72,6 @@ export const UsernameForm = ({
         style={{
           marginLeft: "16px",
           marginRight: "16px",
-          marginBottom: "16px",
         }}
       >
         <Box style={{ marginBottom: "16px" }}>
@@ -105,6 +106,70 @@ export const UsernameForm = ({
             }
           />
         </Box>
+        <Box style={{ marginBottom: "2px" }}>
+          <TextInput
+            inputProps={{
+              name: "firstname",
+              autoComplete: "off",
+              spellCheck: "false",
+              autoFocus: true,
+            }}
+            placeholder="First Name"
+            type="text"
+            value={firstName}
+            setValue={(e) => {
+              setFirstName(
+                e.target.value.toLowerCase().replace(/[^a-z0-9_]/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 style={{ marginBottom: "2px" }}>
+          <TextInput
+            inputProps={{
+              name: "lastname",
+              autoComplete: "off",
+              spellCheck: "false",
+              autoFocus: true,
+            }}
+            placeholder="Last Name"
+            type="text"
+            value={lastName}
+            setValue={(e) => {
+              setLastName(
+                e.target.value.toLowerCase().replace(/[^a-z0-9_]/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>
         <PrimaryButton label="Continue" type="submit" />
       </Box>
     </form>
diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index ca9e6fc80..5e367aa59 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -579,7 +579,7 @@ export const ALCHEMY_ETHEREUM_MAINNET_API_KEY =
   "DlJr6QuBC2EaE-L60-iqQQGq9hi9-XSZ";
 
 export const AVATAR_BASE_URL = "https://swr.xnfts.dev/avatars";
-export const BACKEND_API_URL = "https://backpack-api.xnfts.dev";
+export const BACKEND_API_URL = "http://localhost:8080";
 export const REALTIME_API_URL = "https://backend-ws.xnfts.dev";
 export const MESSAGING_COMMUNICATION_PUSH = "MESSAGING_COMMUNICATION_PUSH";
 export const MESSAGING_COMMUNICATION_FETCH = "MESSAGING_COMMUNICATION_FETCH";
diff --git a/packages/recoil/src/context/OnboardingProvider.tsx b/packages/recoil/src/context/OnboardingProvider.tsx
index e9499b6a8..05aa3b287 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<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,