fixed react rerender bug when navigating home

Stephen-Gordon · Mar 26, 2024 · b27cd50 · b27cd50
1 parent 922dde7
commit b27cd50
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 24 deletions.
diff --git 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
@@ -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,19 +19,21 @@ export default function CreditCard() {
           }}
           transition={{
             duration: 0.3,
-
           }}
         >
           <HoverBorderGradient className='relative grid h-52 w-full rounded-xl shadow-lg'>
             <div className='absolute -z-50 h-full w-full rounded-xl bg-transparent bg-gradient-to-tr from-slate-50/10 backdrop-blur-xl'>
               <></>
             </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
@@ -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
@@ -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
@@ -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>