fixed useFindPayee hook crash and fixed balance fetching

Stephen-Gordon · Mar 28, 2024 · 2d16080 · 2d16080
1 parent 89cc4d4
commit 2d16080
Show file tree

Hide file tree

Showing 14 changed files with 144 additions and 83 deletions.
diff --git a/src/GlobalRedux/store.ts b/src/GlobalRedux/store.ts
@@ -32,7 +32,7 @@ export type RootState = {
   };
   transactions: [
     {
-      value: {} | undefined;
+      value: any
     }
   ];
   pendingTx: {

diff --git a/src/app/@auth/(.)payee/page.tsx b/src/app/@auth/(.)payee/page.tsx
@@ -23,12 +23,12 @@ import useGetAddress from '@/app/hooks/useGetAddress';
 // motion
 import { motion } from 'framer-motion';
 // redux
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice';
 // components
 import { Button } from '@/app/components/ui/button';
 // lucide
-import { Send, QrCode } from 'lucide-react';
+import { Send, QrCode, UserPlus } from 'lucide-react';
 // link
 import Link from 'next/link';
 
@@ -42,6 +42,7 @@ import Moralis from 'moralis';
 // format date
 import TimeAgo from 'react-timeago';
 import { formatUnits } from 'viem';
+import AddAContact from '@/app/components/addAContact/addAContact';
 
 interface Transaction {
   to: string;
@@ -65,6 +66,15 @@ export default function Page() {
   // state
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [groupedTransactions, setGroupedTransactions] = useState<any[]>([]);
+  const [showAddContact, setShowAddContact] = useState<boolean>(false);
+
+
+
+  const contactsState = useSelector((state: any) => state.contacts.value);
+
+  const isInContacts = contactsState.some(
+    (contact: any) => contact.address == payeeAddress
+  );
 
   // refs
   const end = useRef<any>(null);
@@ -146,6 +156,10 @@ export default function Page() {
     fetchRecentTransactions();
   }, [payeeAddress]);
 
+   const handleAddUser = () => {
+     setShowAddContact(true);
+   };
+
 
   return (
     <>
@@ -164,11 +178,22 @@ export default function Page() {
             transition={{ duration: 1 }}
             className='font-inherit text-center leading-snug tracking-wide text-inherit mix-blend-exclusion'
           >
-            {payeeAddress && useFindPayeeName(payeeAddress)}
+            {payeeAddress && useFindPayeeName(payeeAddress, contactsState)}
           </motion.p>
-          <div className='ml-auto'>
-            <Avatar className='h-9 w-9 bg-white'></Avatar>
-          </div>
+          {!isInContacts && (
+            <div className='ml-auto'>
+              <div
+                onClick={handleAddUser}
+                className='text-muted-foreground flex space-x-2 text-base font-light'
+              >
+                <UserPlus
+                  strokeWidth={2}
+                  className='fill-muted-foreground stroke-muted-foreground'
+                />
+                <p>Save</p>
+              </div>{' '}
+            </div>
+          )}
         </DrawerTitle>
       </DrawerHeader>
 
@@ -177,7 +202,7 @@ export default function Page() {
           <div className='text-center text-white'>
             <p>
               You've got no transfers with{' '}
-              {payeeAddress && useFindPayeeName(payeeAddress)}
+              {payeeAddress && useFindPayeeName(payeeAddress, contactsState)}
             </p>
           </div>
         </div>
@@ -204,7 +229,9 @@ export default function Page() {
                           style={{ marginBottom: '32px' }}
                           className='bg-muted mr-auto grid w-fit justify-self-start rounded-2xl rounded-bl-none p-4'
                         >
-                          <div className='pb-4'>${formatUnits(transaction.value, 6)}</div>
+                          <div className='pb-4'>
+                            ${formatUnits(transaction.value, 6)}
+                          </div>
 
                           <p className='text-muted-foreground text-xs'>
                             You Received
@@ -220,7 +247,9 @@ export default function Page() {
                           style={{ marginBottom: '32px' }}
                           className='bg-muted ml-auto grid w-fit justify-self-end rounded-2xl rounded-br-none p-4'
                         >
-                          <div className='pb-4'>${formatUnits(transaction.value, 6)}</div>
+                          <div className='pb-4'>
+                            ${formatUnits(transaction.value, 6)}
+                          </div>
 
                           <p className='text-muted-foreground text-xs'>
                             You Sent
@@ -270,6 +299,14 @@ export default function Page() {
           </Link>
         </div>
       </DrawerFooter>
+      {!isInContacts && (
+        <AddAContact
+          open={showAddContact}
+          setShowAddContact={setShowAddContact}
+          contactsState={contactsState}
+          payee={payeeAddress}
+        />
+      )}
     </>
   );
 }
diff --git a/src/app/@auth/(.)send/page.tsx b/src/app/@auth/(.)send/page.tsx
@@ -16,12 +16,15 @@ import { Avatar } from '@/app/components/ui/avatar';
 // link
 import Link from 'next/link';
 import useFindPayeeName from '@/app/hooks/useFindPayeeName';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/GlobalRedux/store';
 export default function Page() {
   const router = useRouter();
 
   // get search params
   const searchParams = useSearchParams();
   let payee = searchParams.get('payee');
+  const contactsState = useSelector((state: RootState) => state.contacts.value);
 
   return (
     <>
@@ -35,7 +38,7 @@ export default function Page() {
             >
               <BackButton />
             </div>
-            <p className='text-center'>{payee && useFindPayeeName(payee)}</p>
+            <p className='text-center'>{payee && useFindPayeeName(payee, contactsState)}</p>
             <div className='ml-auto'>
               <Link
                 className='h-auto w-auto'

diff --git a/src/app/@auth/(.)transaction/page.tsx b/src/app/@auth/(.)transaction/page.tsx
@@ -40,8 +40,9 @@ export default function Page() {
     console.log('filteredTransaction', filteredTransaction);
     setIsLoading(false);
   }, [txState]);
+  const contactsState = useSelector((state: RootState) => state.contacts.value);
 
-  const payeeName = useFindPayeeName(transaction.from);
+  const payeeName = useFindPayeeName(transaction.from, contactsState);
 
   return (
     <>

diff --git a/src/app/components/CreditCard/CreditCard.tsx b/src/app/components/CreditCard/CreditCard.tsx
@@ -10,6 +10,8 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { useEffect, useState } from "react";
 import { setBalance } from "@/GlobalRedux/Features/balance/balanceSlice";
+import axios from "axios";
+import { formatUnits } from "viem";
 
 export default function CreditCard() {
 
@@ -24,11 +26,11 @@ export default function CreditCard() {
 
 
 
-    const hookBalance = useGetBalance(address as string)
+    //const hookBalance = useGetBalance(address as string)
 
     const dispatch = useDispatch()
 
-
+/* 
     useEffect(() => {
       console.log('redux balance', reduxBalance)
       console.log('hook balance', hookBalance)
@@ -39,8 +41,26 @@ export default function CreditCard() {
       }
       
     }, [hookBalance, reduxBalance])
+ */
+
+    useEffect(() => {
+      axios.get(
+        `https://api-sepolia.etherscan.io/api?module=account&action=tokenbalance&contractaddress=0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8&address=${address}&tag=latest&apikey=F7A22CIQFVT5UDPBHKFN8GXYN9EXTS4G65`
+      ).then((r) => {
+        console.log('axios balance', r.data)
+        setBalanceToShow(r.data.result)
+
+        dispatch(setBalance(r.data.result));
+        console.log('balance to show', balanceToShow);
+      }).catch((e) => {
+        console.log('axios balance error', e)
+      })
+    }, [])
 
+    useEffect(() => {
+
 
+    }, [balanceToShow])
 
     return (
       <>
@@ -53,12 +73,12 @@ export default function CreditCard() {
           }}
         >
           <HoverBorderGradient className='relative grid h-52 w-full rounded-xl shadow-lg'>
-            <div className='absolute -z-50 h-full w-full  rounded-xl bg-gradient-to-br from-slate-50/10  to-[#E45368]/40 via-background  backdrop-blur-2xl'>
+            <div className='via-background absolute -z-50 h-full  w-full rounded-xl bg-gradient-to-br  from-slate-50/10 to-[#E45368]/40  backdrop-blur-2xl'>
               <></>
             </div>
 
             <div className='text-card-foreground absolute z-50 grid h-full w-full content-center items-center  justify-center p-2 text-center text-5xl mix-blend-exclusion '>
-              {balanceToShow}
+              {reduxBalance && formatUnits(reduxBalance, 6)}
             </div>
             <div className='absolute z-50 mb-auto flex h-full w-full content-end justify-between p-4'>
               <div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-base mix-blend-exclusion'>

diff --git a/src/app/components/RecentPayee.tsx/RecentPayee.tsx b/src/app/components/RecentPayee.tsx/RecentPayee.tsx
@@ -33,6 +33,7 @@ import useFindPayeeName from '@/app/hooks/useFindPayeeName';
   // If a matching contact is found, use its name, otherwise use truncated payee address
   const payeeName = matchedContact ? matchedContact.name : truncateEthAddress(payee);
 
+
     return (
       <>
         <div key={payee}>
@@ -42,7 +43,7 @@ import useFindPayeeName from '@/app/hooks/useFindPayeeName';
                 <Avatar className='h-9 w-9 bg-white'></Avatar>
                 <div className='ml-4 space-y-1'>
                   <div className='text-sm font-medium leading-none'>
-                    {useFindPayeeName(payee)}
+                    {useFindPayeeName(payee, contactsState)}
                   </div>
                 </div>
               </div>

diff --git a/src/app/components/RecentTransaction/RecentTransaction.tsx b/src/app/components/RecentTransaction/RecentTransaction.tsx
@@ -7,7 +7,7 @@ import { ArrowLeft, ArrowRight } from 'lucide-react';
 // next
 import Link from 'next/link';
 // redux
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice';
 
 // truncate-eth-address
@@ -27,13 +27,17 @@ import useFindPayeeName from '@/app/hooks/useFindPayeeName';
 import TimeAgo from 'react-timeago';
 import { formatUnits } from 'viem';
 import { fromUnixTime } from 'date-fns';
+import { RootState } from '@/GlobalRedux/store';
 
 
 
 export default function RecentTransaction({ transaction }: any) {
   const address = useGetAddress();
 
-  const payeeName = useFindPayeeName(transaction.to);
+  const contactsState = useSelector((state: RootState) => state.contacts.value);
+
+  const payeeName = useFindPayeeName(transaction.to, contactsState);
+
 
   return (
     <div className=''>

diff --git a/src/app/components/Success/Success.tsx b/src/app/components/Success/Success.tsx
@@ -24,7 +24,8 @@ import useGetBalance from '@/app/hooks/useGetBalance';
 import { setSheet } from '@/GlobalRedux/Features/sheet/sheetSlice';
 import { setBalance } from '@/GlobalRedux/Features/balance/balanceSlice';
 
-
+// axios
+import axios from 'axios';
 
 export default function Success({
   transactionStatus,
@@ -45,6 +46,8 @@ export default function Success({
   const address = useGetAddress();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  const [balanceToShow, setBalanceToShow] = useState<string>('');
+
   useEffect(() => {
     if (transactionStatus || loading) {
       setDrawerOpen(true);
@@ -68,15 +71,32 @@ export default function Success({
 
       getData();
       console.log("got data")
-      const balance = useGetBalance(address as string);
-      dispatch(setBalance(balance as string));
-      setTimeout(() => {
-      setDrawerOpen(false);
-
-         dispatch(setSheet(false)); 
-      }, 1000);
+
+      axios
+        .get(
+          `https://api-sepolia.etherscan.io/api?module=account&action=tokenbalance&contractaddress=0x94a9D9AC8a22534E3FaCa9F4e7F2E2cf85d5E4C8&address=${address}&tag=latest&apikey=F7A22CIQFVT5UDPBHKFN8GXYN9EXTS4G65`
+        )
+        .then((r) => {
+          console.log('axios balance', r.data);
+          setBalanceToShow(r.data.result);
+          dispatch(setBalance(r.data.result));
+          setTimeout(() => {
+            setDrawerOpen(false);
+
+            dispatch(setSheet(false));
+          }, 1000);
+        })
+        .catch((e) => {
+          console.log('axios balance error', e);
+        });
+
+
     }
   }, [transactionStatus]);
+
+
+
+
   return (
     <>
       <Drawer nested={true} dismissible={false} open={drawerOpen}>

diff --git a/src/app/components/activity/Activity.tsx b/src/app/components/activity/Activity.tsx
@@ -77,7 +77,7 @@ export default function Activity() {
             </CardHeader>
             <CardContent className=' '>
               <div className='mt-4 space-y-8'>
-                {transactionState &&
+                {Array.isArray(transactionState)  &&
                   transactionState.slice(0,5).map((transaction: any, i: any) => (
                     <motion.div
                       className='h-fit w-full'

diff --git a/src/app/components/addAContact/addAContact.tsx b/src/app/components/addAContact/addAContact.tsx
@@ -53,7 +53,7 @@ export default function AddAContact({
   const [showErrorMessage, setShowErrorMessage] = useState<boolean>(false);
 
   useEffect(() => {
-    if (newContactName === '' || newContactAddress === '' || showErrorMessage ) {
+    if (newContactName === '' || showErrorMessage ) {
       setShowAddButton(false);
     } else {
       setShowAddButton(true);

diff --git a/src/app/contacts/page.tsx b/src/app/contacts/page.tsx
@@ -47,7 +47,7 @@ export default function Page() {
 
   return (
     <>
-      <Drawer shouldScaleBackground={true} open={isNavOpen}>
+      <Drawer shouldScaleBackground={false} open={isNavOpen}>
         <DrawerContent className='ios'>
           <DrawerHeader>
             <DrawerTitle>Contacts</DrawerTitle>

diff --git a/src/app/hooks/useFindPayeeName.tsx b/src/app/hooks/useFindPayeeName.tsx
@@ -3,8 +3,7 @@ import { RootState } from '@/GlobalRedux/store';
 import { Contact } from '@/app/types/types';
 import truncateEthAddress from 'truncate-eth-address';
 
-const useFindPayeeName = (payeeAddress: string) => {
-  const contactsState = useSelector((state: RootState) => state.contacts.value);
+const useFindPayeeName = (payeeAddress: string, contactsState : any) => {
 
   const findPayeeName = (payeeAddress: string): string | null => {
     if (!contactsState || contactsState.length === 0) {