added a contacts feature

links.md

@@ -66,3 +66,7 @@ https://farrynheight.com/
 
 // pwa prompt
 https://medium.com/designly/creating-an-install-to-home-screen-prompt-in-a-next-js-progressive-web-app-588a3e7a6747
+
+
+# add to contacts drawer
+https://github.com/redpangilinan/credenza?tab=readme-ov-file

src/GlobalRedux/Features/contacts/contactsSlice.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { createSlice } from '@reduxjs/toolkit';
+
+export const contactsSlice = createSlice({
+  name: 'contacts',
+  initialState: {
+    value: [],
+  },
+  reducers: {
+    setContacts: (state, action) => {
+      state.value = action.payload;
+    },
+  },
+});
+export const { setContacts } = contactsSlice.actions;
+export default contactsSlice.reducer;

src/GlobalRedux/store.ts

@@ -11,6 +11,8 @@ import transactionsSliceReducer from './Features/transactions/transactionsSlice'
 import sheetSliceReducer from './Features/sheet/sheetSlice';
 import balanceSliceReducer from './Features/balance/balanceSlice';
 import pendingTxSliceReducer from './Features/pendingTx/pendingTxSlice';
+import contactsSliceReducer from './Features/contacts/contactsSlice';
+
 // Define RootState type
 export type RootState = {
   login: {
@@ -33,10 +35,12 @@ export type RootState = {
       value: {} | undefined;
     }
   ];
-  pendingTx : {
+  pendingTx: {
     value: {};
-
-  }
+  };
+  contacts: {
+    value: [];
+  };
 };
 
 const persistConfig = {
@@ -54,6 +58,7 @@ const rootReducer = combineReducers<any>({
   sheet: sheetSliceReducer,
   balance: balanceSliceReducer,
   pendingTx: pendingTxSliceReducer,
+  contacts: contactsSliceReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

src/app/@auth/(.)add-to-contacts/page.tsx

@@ -0,0 +1,7 @@
+export default function AddToContactsPage() {
+  return (
+    <div>
+      <h1>Add To Contacts</h1>
+    </div>
+  );
+}

src/app/@auth/(.)search/page.tsx

@@ -27,35 +27,68 @@ import { DrawerHeader, DrawerTitle } from '@/app/components/ui/drawer';
 import { isAddress } from 'viem';
 
 // icons
-import { QrCode, X, Send } from 'lucide-react';
+import { QrCode, X, Send, UserPlus } from 'lucide-react';
 
 import RecentPayee from '@/app/components/RecentPayee.tsx/RecentPayee';
 // motion
 import { AnimatePresence, motion } from 'framer-motion';
-//
+import AddAContact from '@/app/components/addAContact/addAContact';
+
+// redux
+import { useSelector } from 'react-redux';
+import { RootState } from '@/GlobalRedux/store';
+import { setContacts } from '@/GlobalRedux/Features/contacts/contactsSlice';
+
+import { Avatar } from '@/app/components/ui/avatar';
+
+// types
+import { Contact } from '@/app/types/types';
+
+
 export default function Page() {
   const [payee, setPayee] = useState<string>('');
   const [scanner, setScanner] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  const [showAddContact , setShowAddContact] = useState<boolean>(false);
+
   const address = useGetAddress();
 
+
+  const contactsState = useSelector((state: RootState) => state.contacts.value);
+
   // router
   const router = useRouter();
 
-  const isTrue = isAddress(payee);
+  const isAnAddress = isAddress(payee);
 
   const dispatch = useDispatch();
 
   useEffect(() => {
     // Add logic here to listen to the input value
     console.log('Input value:', payee);
-    console.log('isTrue:', isTrue);
-  }, [payee, isTrue]);
+    console.log('isAnAddress:', isAnAddress);
+    console.log('contactsState:', contactsState);
+  }, [payee, isAnAddress, contactsState]);
+
+
+
+
+  const handleAddUser = () => {
+    setShowAddContact(true); 
+  }
+
+
 
   return (
     <>
-      <div className='grid'>
+      <div className='grid h-full'>
+        <AddAContact
+          open={showAddContact}
+          setShowAddContact={setShowAddContact}
+          contactsState={contactsState}
+          payee={payee}
+        />
         {scanner && <Scanner isOpen={isOpen} setIsOpen={setIsOpen} />}
 
         <DrawerHeader>
@@ -102,10 +135,24 @@ export default function Page() {
                     exit={{ opacity: 0 }}
                     className='ml-auto grid content-center justify-end'
                   >
-                    <X
-                      className='text-muted-foreground h-8 w-8 '
-                      onClick={() => setPayee('')}
-                    />
+                    {isAnAddress &&
+                    !contactsState.some(
+                      (contact: Contact) => contact.address == payee
+                    ) ? (
+                      <>
+                        <div onClick={handleAddUser} className='flex'>
+                          <UserPlus />
+                          Save
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <X
+                          className='text-muted-foreground h-8 w-8 '
+                          onClick={() => setPayee('')}
+                        />
+                      </>
+                    )}
                   </motion.div>
                 )}
               </AnimatePresence>
@@ -114,7 +161,7 @@ export default function Page() {
         </div>
 
         <div className='mt-4 space-y-8 px-4'>
-          {isTrue ? (
+          {isAnAddress ? (
             <>
               <AnimatePresence>
                 <motion.div
@@ -221,6 +268,36 @@ export default function Page() {
                 <div id='#recent-activity' className='space-y-8 p-4'>
                   <RecentPayee />
                 </div>
+                {contactsState.length > 0 && (
+                  <>
+                    <div id='#contacts' className='space-y-8 p-4'>
+                      <div className='text-sm font-medium leading-none'>
+                        Contacts
+                      </div>
+                      {contactsState.map((contact: Contact) => (
+                        <div key={contact.address}>
+                          <Link
+                            href={{
+                              pathname: `/payee`,
+                              query: { payeeAddress: contact.address },
+                            }}
+                          >
+                            <div className='space-y-8'>
+                              <div className='flex w-full items-center '>
+                                <Avatar className='h-9 w-9 bg-white'></Avatar>
+                                <div className='ml-4 space-y-1'>
+                                  <div className='text-sm font-medium leading-none'>
+                                    {contact.name}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </Link>
+                        </div>
+                      ))}
+                    </div>
+                  </>
+                )}
               </motion.div>
             </>
           )}

src/app/components/AuthPage/AuthPage.tsx

@@ -9,9 +9,8 @@ export default function AuthPage ({children} : {children: React.ReactNode}) {
 
     const router = useRouter();
 
-
-    const { authenticated } = usePrivySmartAccount();
-
+    //const { authenticated } = usePrivySmartAccount();
+    const authenticated = true;
      useEffect(() => {
 
         if (!authenticated) {
@@ -20,6 +19,8 @@ export default function AuthPage ({children} : {children: React.ReactNode}) {
 
     }, [authenticated]); 
     return (
-        <>{children}</>
+        <>{authenticated && (
+            <>{children}</>
+        )}</>
     )
 }

src/app/components/Balance/Balance copy.tsx

@@ -0,0 +1,54 @@
+// wagmi
+'use client';
+import { useBalance } from 'wagmi';
+
+// Redux
+import { RootState } from '../../../GlobalRedux/store';
+import { useDispatch, useSelector } from 'react-redux';
+import { setBalance } from '@/GlobalRedux/Features/balance/balanceSlice';
+
+// React
+import { useEffect } from 'react';
+
+// next
+import { usePathname } from 'next/navigation';
+
+export default function Balance() {
+  // Redux
+  const dispatch = useDispatch();
+  // next
+  const pathname = usePathname();
+  // hooks
+  const address = useSelector((state: RootState) => state.address.value);
+
+
+
+  const checkBalance = async () => {
+    try {
+      console.log('balance', result?.data?.formatted);
+
+      const result = useBalance({
+        // @ts-ignore
+        address: address,
+        token: '0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8',
+      });
+      // @ts-ignore
+      dispatch(setBalance(result?.data?.formatted));
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+
+  // pathname use effect
+  useEffect(() => {
+    console.log(`Route changed to: ${pathname}`);
+    checkBalance();
+  }, [pathname]);
+
+  // Get the balance from Redux
+  const balanceState = useSelector((state: RootState) => state.balance.value);
+  console.log('balanceState', balanceState);
+
+  // Render the balance
+  return <div className='text-white'>${balanceState}</div>;
+}

src/app/components/KeyPad/KeyPad.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { useButton } from '@react-aria/button';
 import { FocusRing } from '@react-aria/focus';
 import { motion, useAnimation } from 'framer-motion';
@@ -19,6 +20,7 @@ export default function KeyPad({ setUsdcAmount, usdcAmount }: KeyPadProps) {
   useEffect(() => {
     setUsdcAmount(nums.join(''));
   }, [nums]);
+
 
   return (
     <div className='mx-auto flex max-w-xs flex-col justify-center'>
@@ -49,6 +51,7 @@ export default function KeyPad({ setUsdcAmount, usdcAmount }: KeyPadProps) {
   );
 }
 
+
 function Button({
   onClick = () => {},
   children,