Handle network change on parent & member layouts

Author: passandscore

app/confirm-email/[token]/page.tsx

@@ -10,25 +10,25 @@ import {
   Image,
   Button,
 } from "@chakra-ui/react";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import jwt from "jsonwebtoken";
 import { useEffect, useMemo, useState } from "react";
 import { useSignMessage, useAccount } from "wagmi";
 import { ethers } from "ethers";
 import { CustomConnectButton } from "@/components/ConnectButton";
 import { User } from "@/data-schema/types";
 import { editUser, getUserByWalletAddress } from "@/services/mongo/routes/user";
+import { useAuthStore } from "@/store/auth/authStore";
+import shallow from "zustand/shallow";
 
 export default function ConfirmEmail() {
   const [isConfirmed, setIsConfirmed] = useState(false);
   const [emailVerified, setEmailVerified] = useState(false);
   const [disabled, setDisabled] = useState(false);
-  const [countdown, setCountdown] = useState(5);
   const [decodedWalletAddress, setDecodedWalletAddress] = useState<string>("");
   const [user, setUser] = useState<User | null>(null);
   const [initialUseCheck, setInitialUseCheck] = useState(false);
 
-  const router = useRouter();
   const pathname = usePathname();
 
   const token = useMemo(() => {
@@ -42,35 +42,14 @@ export default function ConfirmEmail() {
 
   const message = "Confirm Email Address";
 
-  const redirectUser = async () => {
-    let count = 5;
-
-    // Countdown function
-    const countdown = async () => {
-      if (count === 0) {
-        router.push("/");
-      } else {
-        setTimeout(() => {
-          count--;
-          setCountdown(count);
-          countdown();
-        }, 1000);
-      }
-    };
-
-    countdown(); // Start the countdown
-  };
-
   const updateUserEmailVerified = async (emailVerified: boolean) => {
     const body = {
       ...user,
       emailVerified,
     };
 
     await editUser(user?.accountId!, body);
-
     setEmailVerified(true);
-    redirectUser();
   };
 
   /*
@@ -155,7 +134,7 @@ export default function ConfirmEmail() {
               setUser(user);
 
               if (user.data?.emailVerified) {
-                redirectUser();
+                setEmailVerified(true);
               }
             }
           }
@@ -214,7 +193,7 @@ export default function ConfirmEmail() {
             Your email address was successfully authenticated.
           </Text>
           <Text my={5} color="gray" fontSize="lg">
-            {`Your will be redirected to the DefiKids app in ${countdown} seconds.`}
+            You may close this window.
           </Text>
         </Flex>
       </Box>

app/member-dashboard/[memberAddress]/page.tsx

@@ -1,22 +1,26 @@
 import { Box } from "@chakra-ui/react";
 import MemberDashboardClientLayout from "@/components/dashboards/memberDashboard/MemberDashboardClientLayout";
+import { getUserByWalletAddress } from "@/services/mongo/routes/user";
+import { User } from "@/data-schema/types";
 
 const getProps = async (context: any) => {
   const { memberAddress } = context.params || {};
 
+  const user = await getUserByWalletAddress(memberAddress);
+
   return {
-    memberAddress,
+    user,
   };
 };
 
 export default async function MemberDashboard(context: any) {
-  const { memberAddress } = (await getProps(context)) as {
-    memberAddress: string;
+  const { user } = (await getProps(context)) as {
+    user: User;
   };
 
   return (
     <Box height="100vh">
-      <MemberDashboardClientLayout memberAddress={memberAddress} />
+      <MemberDashboardClientLayout user={user} />
     </Box>
   );
 }

app/member-invite/[token]/page.tsx

@@ -118,25 +118,6 @@ const MemberInvite = () => {
     }
   };
 
-  const redirectUser = async () => {
-    let count = 5;
-
-    // Countdown function
-    const countdown = async () => {
-      if (count === 0) {
-        router.push("/");
-      } else {
-        setTimeout(() => {
-          count--;
-          setCountdown(count);
-          countdown();
-        }, 1000);
-      }
-    };
-
-    countdown(); // Start the countdown
-  };
-
   const handleToken = async () => {
     if (!username) {
       toast({
@@ -190,17 +171,6 @@ const MemberInvite = () => {
     );
   };
 
-  // Reset store on page load
-  useEffect(() => {
-    reset();
-
-    // const init = async () => {
-    //   //@ts-ignore
-    //   const provider = ethers.BrowserProvider(window.ethereum);
-    //   const user = await getUserByWalletAddress(await getSignerAddress());
-    //   set
-  }, []);
-
   // Check if wallet has already been registered and if invite has already been accepted
   useEffect(() => {
     if (!decodedData) return;
@@ -231,7 +201,6 @@ const MemberInvite = () => {
         await deleteInvitation(invitation._id);
 
         setInviteAccepted(true);
-        redirectUser();
       } catch (error) {
         console.error("Error fetching data:", error);
       }
@@ -250,8 +219,24 @@ const MemberInvite = () => {
             Your account was successfully created.
           </Text>
           <Text my={5} color="gray" fontSize="lg">
-            {`Your will be redirected to the DefiKids app in ${countdown} seconds.`}
+            You may close this window.
           </Text>
+          <Button
+            mt="3rem"
+            colorScheme="gray"
+            size="lg"
+            style={{
+              cursor: "pointer",
+              borderRadius: "10px",
+              padding: "15px",
+            }}
+            onClick={() => {
+              reset();
+              router.push(`/member-dashboard/${address}`);
+            }}
+          >
+            <Text fontSize={"lg"}>Go to Dashboard</Text>
+          </Button>
         </Flex>
       </Box>
     );

next.config.js

@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  experimental: {
-    appDir: true,
-  },
+  // experimental: {
+  //   appDir: true,
+  // },
   reactStrictMode: true,
   images: {
     domains: ["cryptologos.cc"],

package.json

@@ -58,7 +58,7 @@
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
     "viem": "0.3.35",
-    "wagmi": "^1.3.10",
+    "wagmi": "^1.4.12",
     "web3": "^4.2.2",
     "zustand": "^4.4.0"
   },

public/logos/download

@@ -9,7 +9,6 @@ export const getFamilyMembersByAccount = async (
   includeParent?: boolean
 ) => {
   const users = (await getAllUsers()) as IUser[];
-  console.log("getFamilyMembersByAccount", users);
   const members = users.filter((user) => {
     const checkForParent = () => {
       if (includeParent) {

src/BFF/mongo/getFamilyMembersByAccount.ts

@@ -5,10 +5,8 @@ import { useEffect } from "react";
 import { useAuthStore } from "@/store/auth/authStore";
 import { shallow } from "zustand/shallow";
 import { watchAccount } from "@wagmi/core";
-import { getUserByWalletAddress } from "@/services/mongo/routes/user";
 import { useRouter } from "next/navigation";
 import { useAccount } from "wagmi";
-import { initialState } from "@/store/auth/createAuthStore";
 
 const Auth = () => {
   const router = useRouter();

src/components/Auth.tsx

@@ -99,16 +99,12 @@ export const AvatarSelection = ({
       setActiveStep(1);
 
       const avatar = `https://ipfs.io/ipfs/${ifpsHash}`;
-      console.log(avatar);
 
-      console.log("user", user);
       const payload = {
         ...user,
         avatarURI: avatar,
       };
 
-      console.log("payload", payload);
-
       await editUser(user?.accountId!, payload);
       setUser(payload);
 

src/components/AvatarSelection.tsx

@@ -8,17 +8,17 @@ const Username = ({ user }: { user: User }) => {
     <Flex align="center" mt={2 || 0} ml={4}>
       <Avatar
         size="md"
-        name={user.username}
+        name={user?.username}
         sx={{
           fontFamily: "Slackey",
           bgColor: "purple.500",
         }}
       />
       <Flex direction="column" ml={2}>
         <Heading fontSize="lg" display="flex">
-          {user.username}
+          {user?.username}
         </Heading>
-        <Text fontSize="md">{user.userType}</Text>
+        <Text fontSize="md">{user?.userType}</Text>
       </Flex>
     </Flex>
   );