From 605381f09709a7c6c6895a1bb76a1c3dd15539a8 Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Thu, 28 Mar 2024 17:30:32 +0000
Subject: [PATCH] added fade in for pages

---
 src/app/@auth/(.)confirm/page.tsx             |  9 ++++++++
 src/app/@auth/(.)send/page.tsx                | 20 ++++++++++++------
 .../RecentPayee.tsx/RecentPayee.tsx           | 21 ++++++++++---------
 src/app/components/Success/Success.tsx        |  3 ++-
 src/app/layout.tsx                            |  4 ++--
 src/app/transactions/page.tsx                 |  3 +++
 src/styles/globals.css                        |  4 ++++
 7 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/app/@auth/(.)confirm/page.tsx b/src/app/@auth/(.)confirm/page.tsx
index 0c47bca..aedb625 100644
--- a/src/app/@auth/(.)confirm/page.tsx
+++ b/src/app/@auth/(.)confirm/page.tsx
@@ -41,6 +41,9 @@ import { useSelector } from 'react-redux';
 import { RootState } from '@/GlobalRedux/store';
 import { Contact } from '@/app/types/types';
 
+// motion
+import { motion } from 'framer-motion';
+
 interface ConfirmProps {
   showConfirm: boolean;
 }
@@ -85,6 +88,11 @@ export default function Page({ showConfirm }: ConfirmProps) {
 
   return (
     <>
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      >
       <DrawerHeader>
         <DrawerTitle className='grid grid-cols-3 items-center'>
           <div
@@ -144,6 +152,7 @@ export default function Page({ showConfirm }: ConfirmProps) {
         </button>
 
       </DrawerFooter>
+    </motion.div>
     </>
   );
 }
diff --git a/src/app/@auth/(.)send/page.tsx b/src/app/@auth/(.)send/page.tsx
index 5031f7a..a1f3617 100644
--- a/src/app/@auth/(.)send/page.tsx
+++ b/src/app/@auth/(.)send/page.tsx
@@ -18,6 +18,11 @@ import Link from 'next/link';
 import useFindPayeeName from '@/app/hooks/useFindPayeeName';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/GlobalRedux/store';
+
+// motion
+import { motion } from 'framer-motion';
+
+
 export default function Page() {
   const router = useRouter();
 
@@ -28,7 +33,11 @@ export default function Page() {
 
   return (
     <>
-      <div className='grid'>
+      <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className='grid'>
         <DrawerHeader>
           <DrawerTitle className='grid grid-cols-3 items-center'>
             <div
@@ -38,7 +47,9 @@ export default function Page() {
             >
               <BackButton />
             </div>
-            <p className='text-center'>{payee && useFindPayeeName(payee, contactsState)}</p>
+            <p className='text-center'>
+              {payee && useFindPayeeName(payee, contactsState)}
+            </p>
             <div className='ml-auto'>
               <Link
                 className='h-auto w-auto'
@@ -54,11 +65,8 @@ export default function Page() {
             </div>
           </DrawerTitle>
         </DrawerHeader>
-      </div>
-
-      
         <SendUsdc />
-
+      </motion.div>
     </>
   );
 }
diff --git a/src/app/components/RecentPayee.tsx/RecentPayee.tsx b/src/app/components/RecentPayee.tsx/RecentPayee.tsx
index d465a09..468ae61 100644
--- a/src/app/components/RecentPayee.tsx/RecentPayee.tsx
+++ b/src/app/components/RecentPayee.tsx/RecentPayee.tsx
@@ -33,7 +33,6 @@ 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}>
@@ -43,7 +42,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, contactsState)}
+                    {useFindPayeeName(payee)}
                   </div>
                 </div>
               </div>
@@ -65,19 +64,21 @@ export default function RecentPayee(): JSX.Element {
       (state: RootState) => state.contacts.value
     );
 
-    const transactionState = useSelector(
+    const transactionstate = useSelector(
       (state: RootState) => state.transactions.value
-    );
+    );  
   
   // get recent transactions 
   useEffect(() => {
 
-    const uniquePayees = Array.from(
-      new Set(
-        transactionState.map((transaction) => transaction.to || transaction.from)
-      )
-    );
-    setPayees(uniquePayees);
+          const uniquePayees = Array.from(
+            new Set(
+              transactionstate.map(
+                (transaction) => transaction.to || transaction.from
+              )
+            )
+          );
+          setPayees(uniquePayees);
     /* const fetchRecentTransactions = async () => {
       try {
         const recentTransactions = await useGetRecentTransactions(address);
diff --git a/src/app/components/Success/Success.tsx b/src/app/components/Success/Success.tsx
index cc0d759..9662c27 100644
--- a/src/app/components/Success/Success.tsx
+++ b/src/app/components/Success/Success.tsx
@@ -82,8 +82,9 @@ export default function Success({
           dispatch(setBalance(r.data.result));
           setTimeout(() => {
             setDrawerOpen(false);
-
+            router.push(`/tx?hash=${transactionHash}`);
             dispatch(setSheet(false));
+           
           }, 1000);
         })
         .catch((e) => {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3c5014c..fcf91f5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -98,7 +98,7 @@ export default function RootLayout({
         <meta name='format-detection' content='telephone=no' />
         <meta name='mobile-web-app-capable' content='yes' />
         <meta name='msapplication-config' content='/icons/browserconfig.xml' />
-        <meta name='msapplication-TileColor' content='#2B5797' />
+        <meta name='msapplication-TileColor' content='#020817' />
         <meta name='msapplication-tap-highlight' content='no' />
         <meta name='theme-color' content='#020817' />
         <link rel='apple-touch-icon' href='/icons/touch-icon-iphone.png' />
@@ -133,7 +133,7 @@ export default function RootLayout({
         <link
           rel='mask-icon'
           href='/icons/safari-pinned-tab.svg'
-          color='#5bbad5'
+          color='#020817'
         />
         <link rel='shortcut icon' href='/favicon.ico' />
         <link rel='preconnect' href='https://fonts.googleapis.com'></link>
diff --git a/src/app/transactions/page.tsx b/src/app/transactions/page.tsx
index d00e99a..fed1a99 100644
--- a/src/app/transactions/page.tsx
+++ b/src/app/transactions/page.tsx
@@ -110,6 +110,9 @@ export default function Page() {
     <>
       
         <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
           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'>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0c77bf1..e0eb37b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -14,6 +14,10 @@
   backdrop-filter: blur(100px) ;
     -webkit-backdrop-filter: blur(100px) ;
         }  */
+
+html {
+  background-color: #020817;
+}
 @layer base {
   :root {
     --background: 0 0% 100%;