Added logic to update metadata

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

@@ -211,7 +211,7 @@ export const getUser = async (id: string, onlyActiveKeys?: boolean) => {
       },
       {
         id: true,
-        username: true,
+        lastname: true,
         public_keys: [
           {},
           {
@@ -279,6 +279,8 @@ const transformUser = (
   return {
     id: user.id,
     username: user.username,
+    firstname: user.firstname,
+    lastname: user.lastname,
     // Camelcase public keys for response
     publicKeys: user.public_keys
       .map((k) => ({
@@ -468,6 +470,29 @@ export async function createUserPublicKey({
   return response.insert_auth_public_keys_one;
 }
 
+export const updateMetadata = async (
+  uuid: string,
+  firstName: string,
+  lastName: string
+) => {
+  const response = await chain("mutation")({
+    update_auth_users: [
+      {
+        where: {
+          id: { _eq: uuid },
+        },
+        _set: {
+          firstname: firstName,
+          lastname: lastName,
+        },
+      },
+      {
+        affected_rows: true,
+      },
+    ],
+  });
+};
+
 /**
  * Update avatar_nft of a user.
  */

backend/native/backpack-api/src/routes/v1/users.ts

@@ -30,6 +30,7 @@ import {
   getUsersByPrefix,
   getUsersByPublicKeys,
   getUsersMetadata,
+  updateMetadata,
   updateUserAvatar,
 } from "../../db/users";
 import { getOrcreateXnftSecret } from "../../db/xnftSecrets";
@@ -110,6 +111,28 @@ router.get("/", extractUserId, async (req, res) => {
   });
 });
 
+router.get("/metadata", extractUserId, async (req, res) => {
+  // @ts-ignore
+  const uuid = req.id as string;
+  const userMetadata = await getUser(uuid);
+  res.json({
+    username: userMetadata.username,
+    firstName: userMetadata.firstname,
+    lastName: userMetadata.lastname,
+  });
+});
+
+router.put("/metadata", extractUserId, async (req, res) => {
+  // @ts-ignore
+  const uuid = req.id as string;
+  const firstName = req.body.firstName;
+  const lastName = req.body.lastName;
+
+  await updateMetadata(uuid, firstName, lastName);
+
+  res.json({});
+});
+
 router.get("/jwt/xnft", extractUserId, async (req, res) => {
   // @ts-ignore
   const uuid = req.id as string;

packages/app-extension/src/components/Unlocked/Settings/Preferences/index.tsx

@@ -90,6 +90,9 @@ export function Preferences() {
     "Trusted Sites": {
       onClick: () => nav.push("preferences-trusted-sites"),
     },
+    "Update Profile": {
+      onClick: () => nav.push("preferences-update-profile"),
+    },
   };
 
   if (BACKPACK_FEATURE_LIGHT_MODE) {

packages/app-extension/src/components/Unlocked/Settings/SettingsNavStackDrawer.tsx

@@ -13,7 +13,7 @@ import { ContactRequests, Contacts } from "../Messages/Contacts";
 import { Requests } from "../Messages/Requests";
 
 import { CreateMenu } from "./AddConnectWallet/CreateMenu";
-import { CreateMnemonic } from "./AddConnectWallet/CreateMnemonic"
+import { CreateMnemonic } from "./AddConnectWallet/CreateMnemonic";
 import { ImportMenu } from "./AddConnectWallet/ImportMenu";
 import { ImportMnemonic } from "./AddConnectWallet/ImportMnemonic";
 import { ImportSecretKey } from "./AddConnectWallet/ImportSecretKey";
@@ -43,6 +43,7 @@ import {
 import { AboutBackpack } from "./AboutBackpack";
 import { AddConnectPreview, AddConnectWalletMenu } from "./AddConnectWallet";
 import { Preferences } from "./Preferences";
+import { UpdateProfile } from "./UpdateProfile";
 import { XnftSettings } from "./Xnfts";
 import { YourAccount } from "./YourAccount";
 import { SettingsMenu } from ".";
@@ -106,6 +107,10 @@ export function SettingsNavStackDrawer({
             name="preferences-trusted-sites"
             component={(props: any) => <PreferencesTrustedSites {...props} />}
           />
+          <NavStackScreen
+            name="preferences-update-profile"
+            component={(props: any) => <UpdateProfile {...props} />}
+          />
           <NavStackScreen
             name="preferences-solana"
             component={(props: any) => <PreferencesSolana {...props} />}

packages/app-extension/src/components/Unlocked/Settings/UpdateProfile.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { BACKEND_API_URL } from "@coral-xyz/common";
+import { PrimaryButton, TextInput } from "@coral-xyz/react-common";
+import { userMetadata } from "@coral-xyz/recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
+
+import { useNavigation } from "../../common/Layout/NavStack";
+
+export const UpdateProfile = () => {
+  const [metadata, setMetadata] = useRecoilState(userMetadata);
+  const [firstName, setFirstName] = useState(metadata?.firstName || "");
+  const [lastName, setLastName] = useState(metadata?.lastName || "");
+  const nav = useNavigation();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: "column",
+        flex: 1,
+        height: "100%",
+        paddingLeft: "16px",
+        paddingRight: "16px",
+        paddingBottom: "16px",
+      }}
+    >
+      <div>
+        <TextInput
+          value={firstName}
+          placeholder="first name"
+          type="string"
+          setValue={(e) => {
+            setFirstName(e.target.value);
+          }}
+        />
+        <TextInput
+          value={lastName}
+          placeholder="last name"
+          type="string"
+          setValue={(e) => {
+            setLastName(e.target.value);
+          }}
+        />
+      </div>
+      <PrimaryButton
+        label="Update"
+        type="submit"
+        onClick={async () => {
+          const response = await fetch(`${BACKEND_API_URL}/users/metadata`, {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              firstName,
+              lastName,
+            }),
+          });
+          setMetadata({
+            firstName,
+            lastName,
+          });
+
+          nav.pop();
+        }}
+      />
+    </div>
+  );
+};

packages/recoil/src/atoms/index.tsx

@@ -6,6 +6,7 @@ export * from "./ethereum";
 export * from "./feature-gates";
 export * from "./friendship";
 export * from "./keyring";
+export * from "./metadata";
 export * from "./nft";
 export * from "./notifications";
 export * from "./preferences";

packages/recoil/src/atoms/metadata.ts

@@ -0,0 +1,22 @@
+import { BACKEND_API_URL } from "@coral-xyz/common";
+import { atom, selector } from "recoil";
+
+export const userMetadata = atom<{
+  firstName: string;
+  lastName: string;
+} | null>({
+  key: "userMetadata",
+  default: selector({
+    key: "userMetadataSelector",
+    get: async ({ get }) => {
+      const response = await fetch(`${BACKEND_API_URL}/users/metadata`, {
+        method: "GET",
+      });
+      const json = await response.json();
+      return {
+        firstName: json.firstName,
+        lastName: json.lastName,
+      };
+    },
+  }),
+});