Merge pull request #106 from defikids/dashboard-family-member-count

Dashboard family member count

Author: passandscore

app/parent-dashboard/page.tsx

@@ -42,7 +42,7 @@ const Parent: React.FC = () => {
 
   const [childKey, setChildKey] = useState<number>(0);
   const [childrenLoading, setChildrenLoading] = useState(false);
-  const [children, setChildren] = useState([]);
+  const [children, setChildren] = useState<string[]>([]);
   // const [stakeContract, setStakeContract] = useState<StakeContract>();
   const [familyDetails, setFamilyDetails] = useState({} as User);
 
@@ -320,7 +320,7 @@ const Parent: React.FC = () => {
             bg={useColorModeValue("gray.100", "gray.900")}
             borderRadius={isMobileSize ? "0" : "10px"}
           >
-            <FamilyStatistics />
+            <FamilyStatistics members={userDetails.children || []} />
           </GridItem>
         </Grid>
       </Flex>

src/components/ExpandedDashboardMenu.tsx

@@ -45,7 +45,7 @@ export const ExpandedDashboardMenu = ({
   onOpenAirdropModal,
 }: {
   familyDetails: User;
-  children: User[];
+  children: string[];
   onAddChildOpen: () => void;
   setSelectedTab: (tab: ParentDashboardTabs) => void;
   onToggleCollapsedMenu: () => void;

src/components/parentDashboard/ButtonMenu.tsx

@@ -28,7 +28,7 @@ const ButtonMenu = ({
   onOpenNetworkModal: () => void;
   onOpenMembersTableModal: () => void;
   onOpenAirdropModal: () => void;
-  children?: User[];
+  children?: string[];
 }) => {
   const { userDetails } = useAuthStore(
     (state) => ({

src/components/parentDashboard/FamilyStatistics.tsx

@@ -1,52 +1,42 @@
-import { Fragment } from "react";
 import {
   Container,
   Flex,
-  Stack,
-  VStack,
-  Icon,
-  Divider,
   useColorModeValue,
-  Avatar,
   Text,
   Heading,
-  Button,
-  Badge,
   Grid,
   GridItem,
 } from "@chakra-ui/react";
-import { SlOptions } from "react-icons/sl";
 
 interface Notification {
   title: string;
   value: string;
   unit: string;
 }
 
-const stats: Notification[] = [
-  {
-    title: "Members",
-    value: "3",
-    unit: "",
-  },
-  {
-    title: "Currently Staked",
-    value: "31,573",
-    unit: "ETH",
-  },
-  {
-    title: "Rewards Earned",
-    value: "5",
-    unit: "ETH",
-  },
-  {
-    title: "Custom Contracts",
-    value: "7",
-    unit: "",
-  },
-];
-
-const FamilyStatistics = () => {
+const FamilyStatistics = ({ members }: { members: string[] }) => {
+  const stats: Notification[] = [
+    {
+      title: "Members",
+      value: members.length.toString(),
+      unit: "",
+    },
+    {
+      title: "Currently Staked",
+      value: "31,573",
+      unit: "ETH",
+    },
+    {
+      title: "Rewards Earned",
+      value: "5",
+      unit: "ETH",
+    },
+    {
+      title: "Custom Contracts",
+      value: "7",
+      unit: "",
+    },
+  ];
   return (
     <Container maxW="5xl" bg={useColorModeValue("gray.100", "gray.900")}>
       <Flex justify="space-between" my="1rem" align="center">