From 091b01eaa047dcc98842abd7f4e7dba7ac4ce240 Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Thu, 28 Mar 2024 16:58:44 +0000
Subject: [PATCH] removed transactions modal

---
 src/app/@auth/(.)send/page.tsx           |   4 +-
 src/app/@drawer/(.)transactions/page.tsx | 229 -----------------------
 src/app/components/SendUsdc/SendUsdc.tsx |  76 ++------
 src/app/components/activity/Activity.tsx |   3 +-
 src/app/transactions/page.tsx            | 201 ++++++++++++--------
 5 files changed, 146 insertions(+), 367 deletions(-)
 delete mode 100644 src/app/@drawer/(.)transactions/page.tsx

diff --git a/src/app/@auth/(.)send/page.tsx b/src/app/@auth/(.)send/page.tsx
index 2d8f895..5031f7a 100644
--- a/src/app/@auth/(.)send/page.tsx
+++ b/src/app/@auth/(.)send/page.tsx
@@ -56,9 +56,9 @@ export default function Page() {
         </DrawerHeader>
       </div>
 
-      <div className=''>
+      
         <SendUsdc />
-      </div>
+
     </>
   );
 }
diff --git a/src/app/@drawer/(.)transactions/page.tsx b/src/app/@drawer/(.)transactions/page.tsx
deleted file mode 100644
index a796eab..0000000
--- a/src/app/@drawer/(.)transactions/page.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-'use client';
-// react
-import { useEffect, useState } from 'react';
-// hooks
-import useGetRecentTransactions from '@/app/hooks/useGetRecentTransactions';
-import RecentTransaction from '@/app/components/RecentTransaction/RecentTransaction';
-// framer motion
-import { motion } from 'framer-motion';
-// redux
-import { useDispatch, useSelector } from 'react-redux';
-import { setTransactions } from '@/GlobalRedux/Features/transactions/transactionsSlice';
-import useGetAddress from '@/app/hooks/useGetAddress';
-import {
-  CardTitle,
-  CardHeader,
-  Card,
-  CardContent,
-} from '@/app/components/ui/card';
-
-import BackButton from '@/app/components/Navigation/BackButton/BackButton';
-
-
-// next
-import { useSearchParams } from 'next/navigation';
-import { useRouter } from 'next/navigation';
-
-//import { format, parseISO } from 'date-fns';
-import { format, parseISO, set, fromUnixTime } from 'date-fns';
-
-export default function Page() {
-  //next
-  const searchParams = useSearchParams();
-  let isSheetOpen = searchParams.get('isSheetOpen');
-
-  // state
-  const [transactions, setTxs] = useState<any[]>([]);
-  const [allTransactions, setAllTransactions] = useState<any>([]);
-
-  const [groupedTransactions, setGroupedTransactions] = useState<any[]>([]);
-
-  // animate
-  const [showMoreTx, setShowMoreTx] = useState<boolean>(true);
-
-  const isOpen = useSelector((state: any) => state.sheet.value);
-
-  // animate
-  const [showTxs, setShowTxs] = useState<boolean>(true);
-
-  const dispatch = useDispatch();
-
-  // address
-  const address = useGetAddress();
-
-  // router
-  const router = useRouter();
-
-  const transactionState = useSelector(
-    (state: any) => state.transactions.value
-  );
-
-  interface Transaction {
-    to: string;
-    from: string;
-    value: string;
-    timeStamp: string;
-  }
-
-  useEffect(() => {
-    const getData = async () => {
-      try {
-        const recentTransactions = await useGetRecentTransactions(address);
-        setAllTransactions(recentTransactions);
-        dispatch(setTransactions(recentTransactions));
-      } catch (error) {
-        console.error('Error while getting recent transactions:', error);
-      }
-    };
-
-    getData();
-  }, []);
-
-
-
-  useEffect(() => {
-
-    console.log("transState in page",transactionState)
-    setTxs(transactionState);
-
-    const groupedTransactionsByMonth: { [key: string]: any[] } =
-      transactions.reduce((groups, transaction) => {
-        const monthKey = format(
-          fromUnixTime(transaction.timeStamp),
-          'yyyy-MM'
-        );
-        if (!groups[monthKey]) {
-          groups[monthKey] = [];
-        }
-        groups[monthKey].push(transaction);
-        return groups;
-      }, {});
-
-    // Convert grouped transactions object into an array of arrays with month names
-    const arrayOfMonthArrays: {
-      monthName: string;
-      transactions: Transaction[];
-    }[] = Object.entries(groupedTransactionsByMonth).map(
-      ([monthKey, transactions]) => ({
-        monthName: format(parseISO(monthKey), 'MMMM yyyy'), // Format month name along with the year
-        transactions,
-      })
-    );
-    setGroupedTransactions(arrayOfMonthArrays);
-    console.log('groupedTransactionsByMonth', arrayOfMonthArrays);
-  }, [transactionState]); // Add transactions as a dependency
-
-  return (
-    <>
-      {isSheetOpen && (
-        <motion.div
-          
-          layoutId='activity'
-          transition={{
-            duration: 0.4,
-          }} /*  onAnimationComplete={(definition) => {
-        setShowTxs(true);
-      }} */
-          className='from-background to bg-accent/80 absolute z-50 min-h-screen w-full overflow-hidden bg-gradient-to-br  text-xl backdrop-blur-xl'
-        >
-          <Card style={{ border: '0px' }} className='bg-transparent'>
-            <CardHeader>
-              <CardTitle className='grid grid-cols-3 items-center'>
-                <div
-                  onClick={() => {
-                    router.back();
-                  }}
-                >
-                  <BackButton />
-                </div>
-                <p className='text-center'>Recent Transactions</p>
-                <div className='ml-auto'></div>
-              </CardTitle>
-            </CardHeader>
-            <CardContent className='border-0 border-none'>
-              <motion.div>
-                {showTxs && (
-                  <>
-                    {groupedTransactions && (
-                      <>
-                        <div className=''>
-                          {groupedTransactions.map((month, i) => (
-                            <div key={i} className='grid'>
-                              <div
-                                style={{ marginBottom: '32px' }}
-                                className='flex w-full justify-center'
-                              >
-                                <p className='bg-card text-card-foreground h-9 w-fit  rounded-xl border px-4 py-2 text-sm shadow'>
-                                  {month.monthName}
-                                </p>
-                              </div>
-                              {month.transactions
-                                .map((transaction, j) => (
-                                  <motion.div
-                                    className='grid h-fit w-full space-y-6'
-                                    transition={{
-                                      /*   duration: 0.4, */
-                                      /* delay: j * 0.2, */
-                                      ease: 'easeInOut', // Using a custom easing function
-                                    }}
-                                    key={j}
-                                  >
-                                    <motion.div
-
-                                      className='mb-6 grid h-fit w-full '
-                                    >
-                                      <RecentTransaction
-                                        transaction={month.transactions[j]}
-                                      />
-                                    </motion.div>
-                                  </motion.div>
-                                ))}
-                             {/*  {showMoreTx && (
-                                <motion.div
-                                  key={'transactions-dealyed'}
-                                  initial={{ opacity: 0 }}
-                                  animate={{ opacity: 1 }}
-                                  exit={{ opacity: 0 }}
-                                  transition={{ duration: 0.4, delay: 0.4 }}
-                                >
-                                  {month.transactions
-                                    .slice(5, 20)
-                                    .map((transaction, j) => (
-                                      <motion.div
-                                        className='grid h-fit w-full space-y-6'
-                                        initial={{ opacity: 0 }}
-                                        animate={{ opacity: 1 }}
-                                        transition={{
-                                          duration: 0.4,
-                                          delay: j * 0.2,
-                                          ease: 'easeInOut', // Using a custom easing function
-                                        }}
-                                        key={j}
-                                      >
-                                        <motion.div
-                                          layoutId={transaction.blockHash}
-                                          className='mb-6 grid h-fit w-full '
-                                        >
-                                          <RecentTransaction
-                                            transaction={month.transactions[j]}
-                                          />
-                                        </motion.div>
-                                      </motion.div>
-                                    ))}
-                                </motion.div>
-                              )} */}
-                            </div>
-                          ))}
-                        </div>
-                      </>
-                    )}
-                  </>
-                )}
-              </motion.div>
-            </CardContent>
-          </Card>
-        </motion.div>
-      )}
-    </>
-  );
-}
diff --git a/src/app/components/SendUsdc/SendUsdc.tsx b/src/app/components/SendUsdc/SendUsdc.tsx
index eed81a9..e465819 100644
--- a/src/app/components/SendUsdc/SendUsdc.tsx
+++ b/src/app/components/SendUsdc/SendUsdc.tsx
@@ -63,71 +63,29 @@ export default function SendUsdc() {
     }
   }, [usdcAmount]);
 
-  // Send transaction function
-  const sendTx = async () => {
-    try {
-      // Encode the data with Viem Function
-      // Requires the abi of the contract, the function name, and the arguments address and amount
-      // @ts-ignore
-      if (!zeroDevReady) {
-        console.log('not ready to send');
-        return;
-      }
-      if (usdcAmount == '' || usdcAmount == '0') {
-        console.log('amount is 0');
-        return;
-      }
-      const encoded: any = encodeFunctionData({
-        // @ts-ignore
-        abi: erc20Abi,
-        functionName: 'transfer',
-        args: [payee as `0x${string}`, parseUnits(usdcAmount, 6)],
-      });
-      console.log('Sending USDC');
-      setLoading(true);
-      const txnHash = await sendTransaction({
-        to: usdc, // ERC20 address
-        value: BigInt(0), // default to 0
-        data: encoded,
-      });
-      console.log('Txn hash:', txnHash);
-
-      if (txnHash) {
-        setLoading(false);
-        setTransactionStatus(true);
-        setTimeout(() => {
-          dispatch(setSheet(false));
-          /* router.push(`/transaction?hash=${txnHash}`); */
-          const balance = router.push('/home');
-        }, 1000);
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  };
+  
 
   return (
     <>
       <div className='grid content-start justify-center p-4 text-white'>
         <KeyPad usdcAmount={usdcAmount} setUsdcAmount={setUsdcAmount} />
-
-        <DrawerFooter>
-          <Link
-            href={{
-              pathname: '/confirm',
-              query: { payee: payee, amount: usdcAmount },
-            }}
-          >
-            <Button className='text-xl' size={'lg'} variant={'default'}>
-              <div className='flex content-center items-center'>
-                <div className='text-xl'>
-                  <div>Send</div>
-                </div>
-              </div>
-            </Button>
-          </Link>
-        </DrawerFooter>
       </div>
+      <DrawerFooter>
+        <Link
+          href={{
+            pathname: '/confirm',
+            query: { payee: payee, amount: usdcAmount },
+          }}
+        >
+          <Button className='text-xl' size={'lg'} variant={'default'}>
+            <div className='flex content-center items-center'>
+              <div className='text-xl'>
+                <div>Send</div>
+              </div>
+            </div>
+          </Button>
+        </Link>
+      </DrawerFooter>
     </>
   );
 }
diff --git a/src/app/components/activity/Activity.tsx b/src/app/components/activity/Activity.tsx
index 8c3994e..208f7a3 100644
--- a/src/app/components/activity/Activity.tsx
+++ b/src/app/components/activity/Activity.tsx
@@ -93,8 +93,7 @@ export default function Activity() {
               <Link
                 className='w-fit'
                 href={{
-                  pathname: '/transactions',
-                  query: { isSheetOpen: true },
+                  pathname: '/transactions'
                 }}
               >
                 <Button
diff --git a/src/app/transactions/page.tsx b/src/app/transactions/page.tsx
index 01eb40a..d00e99a 100644
--- a/src/app/transactions/page.tsx
+++ b/src/app/transactions/page.tsx
@@ -9,24 +9,39 @@ import { motion } from 'framer-motion';
 // redux
 import { useDispatch, useSelector } from 'react-redux';
 import { setTransactions } from '@/GlobalRedux/Features/transactions/transactionsSlice';
-import useGetAddress from '../hooks/useGetAddress';
+import useGetAddress from '@/app/hooks/useGetAddress';
 import {
   CardTitle,
   CardHeader,
   Card,
   CardContent,
-} from '../components/ui/card';
+} from '@/app/components/ui/card';
+
+import BackButton from '@/app/components/Navigation/BackButton/BackButton';
+
+// next
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 //import { format, parseISO } from 'date-fns';
-import { format, parseISO, set } from 'date-fns';
-import AuthPage from '../components/AuthPage/AuthPage';
+import { format, parseISO, set, fromUnixTime } from 'date-fns';
 
 export default function Page() {
+  //next
+  const searchParams = useSearchParams();
+  let isSheetOpen = searchParams.get('isSheetOpen');
+
+  // state
   const [transactions, setTxs] = useState<any[]>([]);
   const [allTransactions, setAllTransactions] = useState<any>([]);
 
   const [groupedTransactions, setGroupedTransactions] = useState<any[]>([]);
 
+  // animate
+  const [showMoreTx, setShowMoreTx] = useState<boolean>(true);
+
+  const isOpen = useSelector((state: any) => state.sheet.value);
+
   // animate
   const [showTxs, setShowTxs] = useState<boolean>(true);
 
@@ -35,6 +50,9 @@ export default function Page() {
   // address
   const address = useGetAddress();
 
+  // router
+  const router = useRouter();
+
   const transactionState = useSelector(
     (state: any) => state.transactions.value
   );
@@ -43,17 +61,15 @@ export default function Page() {
     to: string;
     from: string;
     value: string;
-    metadata: {
-      blockTimestamp: string;
-    };
+    timeStamp: string;
   }
 
   useEffect(() => {
     const getData = async () => {
       try {
         const recentTransactions = await useGetRecentTransactions(address);
-        setAllTransactions(recentTransactions?.transfers);
-        dispatch(setTransactions(recentTransactions?.transfers));
+        setAllTransactions(recentTransactions);
+        dispatch(setTransactions(recentTransactions));
       } catch (error) {
         console.error('Error while getting recent transactions:', error);
       }
@@ -63,21 +79,18 @@ export default function Page() {
   }, []);
 
   useEffect(() => {
+    console.log('transState in page', transactionState);
     setTxs(transactionState);
 
     const groupedTransactionsByMonth: { [key: string]: any[] } =
       transactions.reduce((groups, transaction) => {
-        const monthKey = format(
-          parseISO(transaction.metadata.blockTimestamp),
-          'yyyy-MM'
-        );
+        const monthKey = format(fromUnixTime(transaction.timeStamp), 'yyyy-MM');
         if (!groups[monthKey]) {
           groups[monthKey] = [];
         }
         groups[monthKey].push(transaction);
         return groups;
       }, {});
-    console.log('read me ', groupedTransactionsByMonth);
 
     // Convert grouped transactions object into an array of arrays with month names
     const arrayOfMonthArrays: {
@@ -94,67 +107,105 @@ export default function Page() {
   }, [transactionState]); // Add transactions as a dependency
 
   return (
-    <AuthPage>
-      <motion.div
-        layoutId='activity'
-        transition={{
-          duration: 0.3,
-        }} /*  onAnimationComplete={(definition) => {
-        setShowTxs(true);
-      }} */
-        className='absolute w-full text-xl'
-      >
-        <Card style={{ border: '0px' }}>
-          <CardHeader>
-            <motion.div transition={{ duration: 0.4 }}>
-              <CardTitle>Recent Transactions</CardTitle>
-            </motion.div>
-          </CardHeader>
-          <CardContent className='border-0 border-none'>
-            <motion.div>
-              {showTxs && (
-                <>
-                  {groupedTransactions && (
-                    <>
-                      <div className='overflow-auto'>
-                        {groupedTransactions.map((month, i) => (
-                          <div key={i} className='grid'>
-                            <div
-                              style={{ marginBottom: '32px' }}
-                              className='flex w-full justify-center'
-                            >
-                              <p className='bg-card text-card-foreground h-9 w-fit  rounded-xl border px-4 py-2 text-sm shadow'>
-                                {month.monthName}
-                              </p>
-                            </div>
-                            {month.transactions.map((transaction, j) => (
-                              <motion.div
-                                className='grid h-fit w-full space-y-6'
-                                transition={{
-                                  duration: 0.4,
-                                  delay: j * 0.2,
-                                  ease: 'easeInOut', // Using a custom easing function
-                                }}
-                                key={j}
+    <>
+      
+        <motion.div
+          className='from-background to bg-accent/80 absolute z-50 min-h-screen w-full overflow-hidden bg-gradient-to-br  text-xl backdrop-blur-xl'
+        >
+          <Card style={{ border: '0px' }} className='bg-transparent'>
+            <CardHeader>
+              <CardTitle className='grid grid-cols-3 items-center'>
+                <div
+                  onClick={() => {
+                    router.back();
+                  }}
+                >
+                  <BackButton />
+                </div>
+                <p className='text-center'>Recent Transactions</p>
+                <div className='ml-auto'></div>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className='border-0 border-none'>
+              <motion.div>
+                {showTxs && (
+                  <>
+                    {groupedTransactions && (
+                      <>
+                        <div className=''>
+                          {groupedTransactions.map((month, i) => (
+                            <div key={i} className='grid'>
+                              <div
+                                style={{ marginBottom: '32px' }}
+                                className='flex w-full justify-center'
                               >
-                                <div className='mb-6 grid h-fit w-full'>
-                                  <RecentTransaction
-                                    transaction={month.transactions[j]}
-                                  />
-                                </div>
-                              </motion.div>
-                            ))}
-                          </div>
-                        ))}
-                      </div>
-                    </>
-                  )}
-                </>
-              )}
-            </motion.div>
-          </CardContent>
-        </Card>
-      </motion.div>
-    </AuthPage>
+                                <p className='bg-card text-card-foreground h-9 w-fit  rounded-xl border px-4 py-2 text-sm shadow'>
+                                  {month.monthName}
+                                </p>
+                              </div>
+                              {month.transactions.map((transaction, j) => (
+                                <motion.div
+                                  className='grid h-fit w-full space-y-6'
+                                  transition={{
+                                    /*   duration: 0.4, */
+                                    /* delay: j * 0.2, */
+                                    ease: 'easeInOut', // Using a custom easing function
+                                  }}
+                                  key={j}
+                                >
+                                  <motion.div className='mb-6 grid h-fit w-full '>
+                                    <RecentTransaction
+                                      transaction={month.transactions[j]}
+                                    />
+                                  </motion.div>
+                                </motion.div>
+                              ))}
+                              {/*  {showMoreTx && (
+                                <motion.div
+                                  key={'transactions-dealyed'}
+                                  initial={{ opacity: 0 }}
+                                  animate={{ opacity: 1 }}
+                                  exit={{ opacity: 0 }}
+                                  transition={{ duration: 0.4, delay: 0.4 }}
+                                >
+                                  {month.transactions
+                                    .slice(5, 20)
+                                    .map((transaction, j) => (
+                                      <motion.div
+                                        className='grid h-fit w-full space-y-6'
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        transition={{
+                                          duration: 0.4,
+                                          delay: j * 0.2,
+                                          ease: 'easeInOut', // Using a custom easing function
+                                        }}
+                                        key={j}
+                                      >
+                                        <motion.div
+                                          layoutId={transaction.blockHash}
+                                          className='mb-6 grid h-fit w-full '
+                                        >
+                                          <RecentTransaction
+                                            transaction={month.transactions[j]}
+                                          />
+                                        </motion.div>
+                                      </motion.div>
+                                    ))}
+                                </motion.div>
+                              )} */}
+                            </div>
+                          ))}
+                        </div>
+                      </>
+                    )}
+                  </>
+                )}
+              </motion.div>
+            </CardContent>
+          </Card>
+        </motion.div>
+
+    </>
   );
 }