From b27cd5017a83820748ba3bd5ee4c34c41e4d1dd7 Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Tue, 26 Mar 2024 11:14:41 +0000
Subject: [PATCH] fixed react rerender bug when navigating home

---
 src/app/@auth/(.)payee/page.tsx              | 13 ++++++++-----
 src/app/components/CreditCard/CreditCard.tsx | 11 ++++++++---
 src/app/components/Layouts/SheetLayout.tsx   |  5 +----
 src/app/home/page.tsx                        |  6 +++---
 src/app/layout.tsx                           | 13 ++++---------
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/app/@auth/(.)payee/page.tsx b/src/app/@auth/(.)payee/page.tsx
index 895bdda..bf79d9d 100644
--- a/src/app/@auth/(.)payee/page.tsx
+++ b/src/app/@auth/(.)payee/page.tsx
@@ -123,11 +123,14 @@ export default function Page() {
           >
             <BackButton />
           </div>
-          <p className='text-center'>
-            <TextGenerateEffect
-              words={`${payeeAddress && useFindPayeeName(payeeAddress)} ` as string}
-            />
-          </p>
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1 }}
+            className='font-inherit text-center leading-snug tracking-wide text-inherit mix-blend-exclusion'
+          >
+            {payeeAddress && useFindPayeeName(payeeAddress)}
+          </motion.p>
           <div className='ml-auto'>
             <Avatar className='h-9 w-9 bg-white'></Avatar>
           </div>
diff --git a/src/app/components/CreditCard/CreditCard.tsx b/src/app/components/CreditCard/CreditCard.tsx
index 2afba8d..57fef12 100644
--- a/src/app/components/CreditCard/CreditCard.tsx
+++ b/src/app/components/CreditCard/CreditCard.tsx
@@ -4,10 +4,13 @@ import { HoverBorderGradient } from "../ui/hover-border-gradient";
 import { TextGenerateEffect } from "../ui/text-generate-effect";
 import truncateEthAddress from "truncate-eth-address";
 import { motion } from "framer-motion";
+import { usePrivySmartAccount } from "@zerodev/privy";
 export default function CreditCard() {
     
     const address = useGetAddress();
 
+    const {user } = usePrivySmartAccount()
+
     return (
       <>
         <motion.div
@@ -16,7 +19,6 @@ export default function CreditCard() {
           }}
           transition={{
             duration: 0.3,
-            
           }}
         >
           <HoverBorderGradient className='relative grid h-52 w-full rounded-xl shadow-lg'>
@@ -24,11 +26,14 @@ export default function CreditCard() {
               <></>
             </div>
 
-            <div className='absolute z-50 grid h-full w-full content-center items-center justify-center  p-2 text-center text-5xl text-black/80 mix-blend-exclusion dark:text-white/80'>
+            <div className='absolute z-50 grid h-full w-full content-center items-center justify-center  p-2 text-center text-5xl text-card-foreground mix-blend-exclusion '>
               <TextGenerateEffect words='$56'></TextGenerateEffect>
             </div>
-            <div className='absolute z-50 mb-auto grid h-full w-full content-end p-4'>
+            <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'>
+                {user?.google?.name}
+              </div>
+              <div className='text-muted-foreground mb-auto grid h-full content-end justify-start text-right text-base mix-blend-exclusion'>
                 {truncateEthAddress(address as string)}
               </div>
             </div>
diff --git a/src/app/components/Layouts/SheetLayout.tsx b/src/app/components/Layouts/SheetLayout.tsx
index 4593e78..02b204a 100644
--- a/src/app/components/Layouts/SheetLayout.tsx
+++ b/src/app/components/Layouts/SheetLayout.tsx
@@ -45,10 +45,7 @@ const SheetLayout = ({ children }) => {
       </Sheet> */}
       <Drawer
         shouldScaleBackground={true}
-        onClose={() => {
-         router.replace('/home'); 
-          dispatch(setSheet(false));
-        }}
+        onClose={() => dispatch(setSheet(false))}
         open={isOpen}
       >
         <DrawerOverlay />
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index a67a14f..9e29cd8 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -61,14 +61,14 @@ export default function Page() {
   
 
   // pathname use effect
-  useEffect(() => {
-    if (pathname === '/home') {
+  /* useEffect(() => {
+    if (pathname == '/home') {
       dispatch(setSheet(false));
     }
     console.log(`Route changed to: ${pathname}`);
     console.log("MY ADDRESS IS", address)
   }, [pathname]);
-
+ */
 
 
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 87fd653..f6c4179 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -48,15 +48,10 @@ export default function RootLayout({
   const queryClient = new QueryClient();
   const router = useRouter();
 
-  const [isInstalled, setIsInstalled] = useState<boolean | null>(null);
 
-  const [showNav, setShowNav] = useState<boolean>(true);
 
-  const pathname = usePathname();
 
 
-  useEffect(() => {})
-
 /* 
   
   useEffect(() => {
@@ -184,20 +179,20 @@ export default function RootLayout({
                     <QueryClientProvider client={queryClient}>
                       <AnimatePresence mode='wait' initial={false}>
                         <LayoutGroup>
-                          
+                          <div vaul-drawer-wrapper=''
+                              className='h-[100vh] text-gray-300'>
                             <div>{auth}</div>
                             <div>{drawer}</div>
 
                             <main
-                              vaul-drawer-wrapper=''
-                              className='h-[100vh] text-gray-300'
+                              
                             >
                               {children}
                             </main>
                             <div className='w-full overflow-hidden'>
                               <BottomNavbar />
                             </div>
-                          
+                          </div>
                         </LayoutGroup>
                       </AnimatePresence>
                     </QueryClientProvider>