feat: added basic support for adding contacts to the contact book

Author: Bob-six

bun.lock

@@ -42,6 +42,7 @@
     "@tailwindcss/typography": "^0.5.15",
     "apisauce": "2.0.1",
     "axios": "^1.5.0",
+    "bcryptjs": "^3.0.2",
     "buffer": "^6.0.3",
     "caniuse-lite": "^1.0.30001731",
     "chartjs-plugin-zoom": "^2.2.0",

package.json

@@ -138,6 +138,7 @@ const RecoveryCodeScreen = () => {
         changePrimaryDevice: false,
         name: `Aura ${deviceInfo}`,
       });
+
       setQrUrl(newQrUrl);
     }
   }, [action, recoveryData.aesKey, recoveryData.channel.url]);

src/BrightID/components/Onboarding/RecoveryFlow/RecoveryCodeScreen.tsx

@@ -12,8 +12,13 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
-import { Plus } from 'lucide-react';
+import { PhoneCall, Plus } from 'lucide-react';
 import DefaultHeader from '@/components/Header/DefaultHeader';
+import { MdEmail } from 'react-icons/md';
+import { useSelector } from 'react-redux';
+import { addContactInfo, selectContacts } from '@/store/contacts';
+import { useDispatch } from '@/store/hooks';
+import { useStoreNewContactMutation } from '@/store/api/get-verified';
 
 const isValidEmail = (email: string) =>
   /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
@@ -26,12 +31,16 @@ type Contact = {
 };
 
 export default function ContactPage() {
-  const [contacts, setContacts] = useState<Contact[]>([]);
   const [type, setType] = useState<'email' | 'phone'>('email');
   const [value, setValue] = useState('');
   const [error, setError] = useState('');
 
-  const handleAdd = () => {
+  const contacts = useSelector(selectContacts);
+  const dispatch = useDispatch();
+
+  const [mutate, { isLoading }] = useStoreNewContactMutation();
+
+  const handleAdd = async () => {
     if (type === 'email' && !isValidEmail(value)) {
       setError('Invalid email address');
       return;
@@ -41,9 +50,18 @@ export default function ContactPage() {
       return;
     }
 
-    setContacts([...contacts, { type, value }]);
-    setValue('');
-    setError('');
+    mutate(value).then((res) => {
+      if (res.error) {
+        setError((res.error as { message: string })?.message?.toString());
+
+        return;
+      }
+
+      dispatch(addContactInfo({ type, value }));
+
+      setValue('');
+      setError('');
+    });
   };
 
   return (
@@ -63,19 +81,15 @@ export default function ContactPage() {
               className="flex items-center justify-between p-4 text-sm"
             >
               <span className="capitalize">{c.type}:</span>
-              <span>{c.value}</span>
+              <span>******************</span>
             </Card>
           ))}
         </div>
       </div>
 
-      {/* Floating Action Button and Dialog */}
       <Dialog>
         <DialogTrigger asChild>
-          <Button
-            className="h-12 bg-primary/60 p-0 text-black hover:bg-primary/90"
-            variant="default"
-          >
+          <Button className="h-12 p-0 text-black" variant="default">
             <Plus size={24} />
           </Button>
         </DialogTrigger>
@@ -93,6 +107,7 @@ export default function ContactPage() {
                   setError('');
                 }}
               >
+                <MdEmail />
                 Email
               </Button>
               <Button
@@ -102,6 +117,7 @@ export default function ContactPage() {
                   setError('');
                 }}
               >
+                <PhoneCall />
                 Phone
               </Button>
             </div>
@@ -124,7 +140,7 @@ export default function ContactPage() {
               {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
             </div>
 
-            <Button onClick={handleAdd} className="w-full">
+            <Button disabled={isLoading} onClick={handleAdd} className="w-full">
               Save Contact
             </Button>
           </div>

src/app/routes/_app.contact-info/route.tsx

@@ -21,6 +21,12 @@ export default function Settings() {
       <DefaultHeader title="Settings" />
       <div className="page flex w-full flex-1 flex-col gap-4 pt-4 dark:text-white">
         <section className="mt-20 flex w-full flex-col gap-4">
+          <Link to="/contact-info">
+            <Card className="flex cursor-pointer items-center gap-2 rounded-lg py-3.5 pl-5 pr-2">
+              <MdContactMail size={20} />
+              <p className="text-[20px] font-medium">Your Contact info</p>
+            </Card>
+          </Link>
           <Card
             className="flex cursor-pointer items-center gap-2 rounded-lg py-3.5 pl-5 pr-2"
             onClick={() => navigate(RoutePath.ROLE_MANAGEMENT)}

src/app/routes/_app.settings/route.tsx

@@ -0,0 +1,2 @@
+// This is for making the hash value harder to compute, and prevent brute forcing the hash actual value
+export const BASE_SALT_FOR_CONTACTS = '$2a$12$abcdefghijklmnopqrstuv';

src/constants/contacts.ts

@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { apiSlice } from './slice';
+import bcrypt from 'bcryptjs';
+import { BASE_SALT_FOR_CONTACTS } from '@/constants/contacts';
+
+const salt = BASE_SALT_FOR_CONTACTS;
+
+export const getVerifiedApi = apiSlice.injectEndpoints({
+  endpoints: (build) => ({
+    storeNewContact: build.mutation<null, string>({
+      queryFn: async (value) => {
+        const hashed = await bcrypt.hash(value, salt);
+
+        return axios.post(
+          'https://aura-get-verified.vercel.app/api/create-social',
+          {
+            hash: hashed,
+          },
+        );
+      },
+    }),
+  }),
+  overrideExisting: true,
+});
+
+export const { useStoreNewContactMutation } = getVerifiedApi;

src/store/api/get-verified.ts

@@ -0,0 +1,26 @@
+import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { RootState } from '..';
+
+const initialContactsState = {
+  storedInfoHashed: [] as { type: string; value: string }[],
+};
+
+export const contactsSlice = createSlice({
+  name: 'contacts',
+  initialState: initialContactsState,
+  reducers: {
+    addContactInfo(
+      state,
+      action: PayloadAction<{ type: string; value: string }>,
+    ) {
+      state.storedInfoHashed.push(action.payload);
+    },
+  },
+});
+
+export const selectContacts = createSelector(
+  (state: RootState) => state.contacts,
+  (contacts) => contacts.storedInfoHashed,
+);
+
+export const { addContactInfo } = contactsSlice.actions;

src/store/contacts/index.ts

@@ -30,6 +30,7 @@ import { cacheSlice } from './cache';
 import localforage from 'localforage';
 import { notificationsSlice } from './notifications';
 import { alertsSlice } from './notifications/slice';
+import { contactsSlice } from './contacts';
 
 const migrationManifest = createMigrate(migrations, { debug: __DEV__ });
 
@@ -100,6 +101,7 @@ const rootReducer = withReduxStateSync(
     ...reducers,
     profile: profileSlice.reducer,
     [notificationsSlice.reducerPath]: notificationsSlice.reducer,
+    [contactsSlice.reducerPath]: contactsSlice.reducer,
     [alertsSlice.reducerPath]: alertsSlice.reducer,
     [cacheSlice.reducerPath]: cacheSlice.reducer,
   }),