Add Member Withdraws Component

Author: passandscore

app/member-dashboard/page.tsx

@@ -10,7 +10,7 @@ import {
   Grid,
 } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
-import { shallow } from "zustand/shallow";
+import shallow from "zustand/shallow";
 import { useAuthStore } from "@/store/auth/authStore";
 import { useContractStore } from "@/store/contract/contractStore";
 import { SettingsModal } from "@/components/modals/SettingsModal";
@@ -133,6 +133,7 @@ const MemberDashboard: React.FC = () => {
             onOpenSettingsModal={onOpenSettingsModal}
             onOpenInfoModal={onOpenInfoModal}
             onOpenWithdrawDefiDollarsModal={onOpenWithdrawDefiDollarsModal}
+            stableTokenBalance={tokenBalance}
           />
         </Box>
         {!isMobileSize && (

app/parent-dashboard/page.tsx

@@ -21,7 +21,8 @@ import { RecentMemberActivity } from "@/components/dashboards/parentDashboard/Re
 import StakingContracts from "@/components/dashboards/parentDashboard/StakingContracts";
 import FamilyStatistics from "@/components/dashboards/parentDashboard/FamilyStatistics";
 import { DefiKidsHeading } from "@/components/DefiKidsHeading";
-import { USDC } from "@/components/dashboards/parentDashboard/USDC";
+import { StableToken } from "@/components/dashboards/parentDashboard/StableToken";
+import { MemberWithdrawRequest } from "@/components/dashboards/parentDashboard/MemberWithdrawRequest";
 
 // Modals
 import { SettingsModal } from "@/components/modals/SettingsModal";
@@ -31,7 +32,6 @@ import { SendAllowanceModal } from "@/components/modals/SendAllowanceModal";
 import { MembersTableModal } from "@/components/modals/MembersTableModal";
 import { DepositDefiDollarsModal } from "@/components/modals/DepositDefiDollarsModal";
 import { WithdrawDefiDollarsModal } from "@/components/modals/WithdrawDefiDollarsModal";
-import { IActivity } from "@/models/Activity";
 
 const Parent: React.FC = () => {
   //=============================================================================
@@ -247,11 +247,22 @@ const Parent: React.FC = () => {
             rowStart={1}
             rowEnd={isMobileSize ? 2 : 1}
             colStart={isMobileSize ? 1 : 1}
+            colEnd={isMobileSize ? 1 : 5}
+            h={isMobileSize ? "auto" : "105"}
+            mt={isMobileSize ? "1.2rem" : "12rem"}
+          >
+            <StableToken stableTokenBalance={stableTokenBalance} />
+          </GridItem>
+
+          <GridItem
+            rowStart={1}
+            rowEnd={isMobileSize ? 2 : 1}
+            colStart={isMobileSize ? 1 : 5}
             colEnd={isMobileSize ? 1 : 9}
             h={isMobileSize ? "auto" : "105"}
             mt={isMobileSize ? "1.2rem" : "12rem"}
           >
-            <USDC stableTokenBalance={stableTokenBalance} />
+            <MemberWithdrawRequest />
           </GridItem>
 
           <GridItem

app/withdraw-requests/page.tsx

@@ -0,0 +1,15 @@
+import { Center } from "@chakra-ui/react";
+import Navbar from "@/components/LandingNavbar";
+
+const HowTo = () => {
+  return (
+    <>
+      <Navbar />
+      <Center mt="10rem">
+        <h1>Withdraw Requests</h1>
+      </Center>
+    </>
+  );
+};
+
+export default HowTo;

config.ts

@@ -1,3 +1,4 @@
 import { ChainId } from "@/data-schema/enums";
 
 export const validChainId = ChainId.GOERLI;
+export const stable_coin_symbol = "DK-USDC";

pages/api/etherscan/balancemulti.ts

@@ -30,7 +30,7 @@ export default async function uploadToIpfsRoute(
 
     const normalizedData = data.result.map((item: any) => {
       return {
-        balance: Number(ethers.formatEther(item.balance)).toFixed(4),
+        balance: Number(ethers.formatEther(item.balance)).toFixed(2),
         account: item.account,
       };
     });

src/components/DepositAndMint.tsx

@@ -37,6 +37,7 @@ import { createActivity } from "@/services/mongo/routes/activity";
 import { convertTimestampToSeconds } from "@/utils/dateTime";
 import { IActivity } from "@/models/Activity";
 import { useAuthStore } from "@/store/auth/authStore";
+import { stable_coin_symbol } from "@/config";
 
 type PermitResult = {
   data?: SignatureLike;
@@ -178,7 +179,9 @@ export const DepositAndMint = ({
           accountId,
           wallet: address,
           date: convertTimestampToSeconds(Date.now()),
-          type: `Sent allowance. ${amount.trim()} USDC to ${user.username}`,
+          type: `Sent allowance. ${amount.trim()} ${stable_coin_symbol} to ${
+            user.username
+          }`,
         });
         newActivities.push(newActivity);
       })
@@ -234,10 +237,10 @@ export const DepositAndMint = ({
           <UsdcTokenIcon width={40} height={40} />
           <Flex direction="row" alignItems="baseline" justify="center" my={5}>
             <Heading size="xl" display="flex" alignItems="baseline" ml={3}>
-              {`${Number(stableTokenBalance).toFixed(4)}`}
+              {`${Number(stableTokenBalance).toFixed(2)}`}
             </Heading>
             <Text fontSize="sm" ml={2}>
-              USDC
+              {stable_coin_symbol}
             </Text>
           </Flex>
         </Flex>

src/components/dashboards/DashboardAccountBalance.tsx

@@ -11,8 +11,8 @@ import {
   useToast,
   Tooltip,
 } from "@chakra-ui/react";
-import { useBalance } from "wagmi";
 import { shallow } from "zustand/shallow";
+import { stable_coin_symbol } from "@/config";
 
 const AccountBalance = ({
   walletAddress,
@@ -21,11 +21,6 @@ const AccountBalance = ({
   walletAddress: string;
   tokenBalance: number;
 }) => {
-  const { data } = useBalance({
-    address: walletAddress as `0x${string}`,
-    watch: true,
-  });
-
   const { userDetails } = useAuthStore(
     (state) => ({
       userDetails: state.userDetails,
@@ -49,10 +44,12 @@ const AccountBalance = ({
           display="flex"
           alignItems="baseline"
         >
-          {Number(tokenBalance).toFixed(4)}
+          {Number(tokenBalance).toFixed(2)}
         </Heading>
         <Text fontSize="sm" ml={2}>
-          {userDetails?.userType === UserType.PARENT ? "USDC" : "DFD"}
+          {userDetails?.userType === UserType.PARENT
+            ? stable_coin_symbol
+            : "DFD"}
         </Text>
       </Flex>
 

src/components/dashboards/parentDashboard/DefiDollars.tsx

@@ -71,7 +71,7 @@ export const DefiDollars = ({
         alignItems="center"
       >
         <Heading size="2xl" display="flex">
-          {`${Number(tokenBalance).toFixed(4)}`}
+          {`${Number(tokenBalance).toFixed(2)}`}
         </Heading>
 
         {/* Actions */}

src/components/dashboards/parentDashboard/FamilyStatistics.tsx

@@ -8,6 +8,7 @@ import {
   Grid,
   GridItem,
 } from "@chakra-ui/react";
+import { stable_coin_symbol } from "@/config";
 
 interface Notification {
   title: string;
@@ -16,16 +17,27 @@ interface Notification {
 }
 
 const FamilyStatistics = ({ members }: { members: User[] }) => {
+  const totalActiveAllowances: number = members.reduce(
+    (acc: number, member: User) => {
+      const balanceAsNumber =
+        typeof member.balance === "number"
+          ? member.balance
+          : parseFloat(member.balance!) || 0;
+      return acc + balanceAsNumber;
+    },
+    0
+  );
+
   const stats: Notification[] = [
     {
       title: "Members",
       value: members.length.toString(),
       unit: "",
     },
     {
-      title: "Currently Staked",
-      value: "31,573",
-      unit: "ETH",
+      title: "Total Active Allowances",
+      value: totalActiveAllowances.toString(),
+      unit: stable_coin_symbol,
     },
     {
       title: "Rewards Earned",

src/components/dashboards/parentDashboard/MemberWithdrawRequest.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import {
+  Flex,
+  useColorModeValue,
+  Heading,
+  Button,
+  Box,
+} from "@chakra-ui/react";
+import { useRouter } from "next/navigation";
+
+export const MemberWithdrawRequest = () => {
+  const router = useRouter();
+
+  return (
+    <Box p={5} bg={useColorModeValue("gray.100", "gray.900")} rounded="lg">
+      <Flex justifyContent="space-between" alignItems="center" pb={2}>
+        <Heading as="h3" size="sm" color="white">
+          Withdraw Requests
+        </Heading>
+        <Button
+          size="xs"
+          colorScheme="blue"
+          variant="outline"
+          cursor="pointer"
+          onClick={() => {
+            router.push("/withdraw-requests");
+          }}
+        >
+          Manage
+        </Button>
+      </Flex>
+
+      <Flex
+        rounded="md"
+        overflow="hidden"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Heading size="2xl" display="flex">
+          0
+        </Heading>
+      </Flex>
+    </Box>
+  );
+};

src/components/dashboards/parentDashboard/USDC.tsx renamed to src/components/dashboards/parentDashboard/StableToken.tsx

@@ -12,8 +12,9 @@ import {
 } from "@chakra-ui/react";
 import { AddUSDCTokenToWallet } from "@/services/metamask/addToken";
 import { useRouter } from "next/navigation";
+import { stable_coin_symbol } from "@/config";
 
-export const USDC = ({
+export const StableToken = ({
   stableTokenBalance,
 }: {
   stableTokenBalance: number;
@@ -40,7 +41,7 @@ export const USDC = ({
     <Box p={5} bg={useColorModeValue("gray.100", "gray.900")} rounded="lg">
       <Flex justifyContent="space-between" alignItems="center" pb={2}>
         <Heading as="h3" size="sm" color="white">
-          USDC
+          {stable_coin_symbol}
         </Heading>
         <Tooltip label="Add to Metamask" hasArrow placement="top">
           <Image
@@ -69,7 +70,7 @@ export const USDC = ({
         alignItems="center"
       >
         <Heading size="2xl" display="flex">
-          {stableTokenBalance.toFixed(4)}
+          {stableTokenBalance.toFixed(2)}
         </Heading>
 
         {/* Actions */}

src/data/explainations/allowance.tsx

@@ -1,8 +1,10 @@
+import { stable_coin_symbol } from "@/config";
+
 export const data = {
   title: "Allowance",
   paragraphs: [
     {
-      text: "When sending an allowance you are exchanging the underlying asset (USDC) for a sandbox version of the asset. This sandbox token is called Defi Dollars and is only usable within the sandbox. The Defi Dollars are pegged to the underlying asset at a 1:1 ratio. This means that 1 Defi Dollar is always worth 1 USDC.",
+      text: `When sending an allowance you are exchanging the underlying asset (${stable_coin_symbol}) for a sandbox version of the asset. This sandbox token is called Defi Dollars and is only usable within the sandbox. The Defi Dollars are pegged to the underlying asset at a 1:1 ratio. This means that 1 Defi Dollar is always worth 1 ${stable_coin_symbol}.`,
     },
     {
       text: "The Defi Dollars are used to pay the allowance. The members are able to use these tokens to interact with the features of the sandbox.  When a member would like to withdraw the Defi Dollars for fiat the Parent will recieve a notification of the withdraw request via email.",

src/services/metamask/addToken.ts

@@ -1,3 +1,6 @@
+import { GOERLI_DK_STABLETOKEN_ADDRESS } from "@/blockchain/contract-addresses";
+import { stable_coin_symbol } from "@/config";
+
 interface CustomWindow extends Window {
   ethereum?: any;
 }
@@ -7,7 +10,7 @@ export const AddUSDCTokenToWallet = async () => {
   const ethereum = customWindow.ethereum;
 
   const response = {
-    message: "USDC Token",
+    message: `${stable_coin_symbol} Token`,
     error: "Something went wrong.",
   };
 
@@ -18,8 +21,8 @@ export const AddUSDCTokenToWallet = async () => {
         params: {
           type: "ERC20",
           options: {
-            address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
-            symbol: "USDC",
+            address: GOERLI_DK_STABLETOKEN_ADDRESS,
+            symbol: stable_coin_symbol,
             decimals: 18,
             image:
               "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png",