From bbf7b6b764f772bb183f251a67ce4947075fb58b Mon Sep 17 00:00:00 2001
From: MrX-SNX <max@cc.snxdao.io>
Date: Tue, 24 Sep 2024 10:49:34 +0100
Subject: [PATCH] fix: grants

---
 .../components/Home/UserGrants/GrantStatus.js | 99 ++++++++++++-------
 .../Home/UserGrants/RedeemTokens.js           |  2 +-
 frontend/components/Home/UserGrants/index.js  | 10 +-
 frontend/lib/store/grants.js                  | 12 ++-
 4 files changed, 83 insertions(+), 40 deletions(-)

diff --git a/frontend/components/Home/UserGrants/GrantStatus.js b/frontend/components/Home/UserGrants/GrantStatus.js
index 2f63dee..2e60ba2 100644
--- a/frontend/components/Home/UserGrants/GrantStatus.js
+++ b/frontend/components/Home/UserGrants/GrantStatus.js
@@ -1,16 +1,27 @@
-import { Heading, Progress, Flex, Box, Text, LightMode } from '@chakra-ui/react'
-import { Icon } from '@chakra-ui/icons'
-import { BsClockHistory } from 'react-icons/bs'
-import { ethers } from 'ethers'
-import { useRecoilState } from 'recoil'
-import { format, formatDistanceToNowStrict, formatDistance } from 'date-fns'
-import { getGrant } from '../../../lib/store/grants'
+import {
+  Heading,
+  Progress,
+  Flex,
+  Box,
+  Text,
+  LightMode,
+} from "@chakra-ui/react";
+import { Icon } from "@chakra-ui/icons";
+import { BsClockHistory } from "react-icons/bs";
+import { ethers } from "ethers";
+import { useRecoilState } from "recoil";
+import { format, formatDistanceToNowStrict, formatDistance } from "date-fns";
+import { getGrant } from "../../../lib/store/grants";
 
 export default function GrantStatus({ tokenId, cancelled }) {
-  const [grant] = useRecoilState(getGrant(tokenId));
+  const [[grant]] = useRecoilState(getGrant(tokenId));
 
-  const amountVested = parseFloat(ethers.utils.formatUnits(grant.amountVested, 18));
-  const totalAmount = parseFloat(ethers.utils.formatUnits(grant.totalAmount, 18));
+  const amountVested = parseFloat(
+    ethers.utils.formatUnits(grant.amountVested, 18)
+  );
+  const totalAmount = parseFloat(
+    ethers.utils.formatUnits(grant.totalAmount, 18)
+  );
   const vestAmount = parseFloat(ethers.utils.formatUnits(grant.vestAmount, 18));
   const startTimestamp = parseInt(grant.startTimestamp);
   const cliffTimestamp = parseInt(grant.cliffTimestamp);
@@ -26,44 +37,64 @@ export default function GrantStatus({ tokenId, cancelled }) {
   }
 
   const nextVest = formatDistanceToNowStrict(
-    new Date(Math.max(
-      cliffTimestamp * 1000,
-      nextIntervalVest * 1000
-    ))
+    new Date(Math.max(cliffTimestamp * 1000, nextIntervalVest * 1000))
   );
 
-  const intervalInWords = formatDistance(new Date(0), new Date(vestInterval * 1000))
+  const intervalInWords = formatDistance(
+    new Date(0),
+    new Date(vestInterval * 1000)
+  );
 
-  const descriptionText = <div>{
-    cliffTimestamp > Date.now() / 1000 ?
-      <>Your grant will vest {vestAmount.toLocaleString()} {grant.tokenSymbol} every {intervalInWords} starting {format(new Date(startTimestamp * 1000), 'M/dd/yyyy')} with a cliff on {format(new Date(cliffTimestamp * 1000), 'M/dd/yyyy')}.</>
-      :
-      amountVested == totalAmount ?
+  const descriptionText = (
+    <div>
+      {cliffTimestamp > Date.now() / 1000 ? (
+        <>
+          Your grant will vest {vestAmount.toLocaleString()} {grant.tokenSymbol}{" "}
+          every {intervalInWords} starting{" "}
+          {format(new Date(startTimestamp * 1000), "M/dd/yyyy")} with a cliff on{" "}
+          {format(new Date(cliffTimestamp * 1000), "M/dd/yyyy")}.
+        </>
+      ) : amountVested == totalAmount ? (
         <Text>Your grant has completely vested.</Text>
-        :
-        <Text>Your grant vests every {intervalInWords}. Your next {vestAmount.toLocaleString()} {grant.tokenSymbol} will vest in {nextVest}.</Text>
-  } </div>
+      ) : (
+        <Text>
+          Your grant vests every {intervalInWords}. Your next{" "}
+          {vestAmount.toLocaleString()} {grant.tokenSymbol} will vest in{" "}
+          {nextVest}.
+        </Text>
+      )}{" "}
+    </div>
+  );
 
   return (
-    <Box
-      mb={5}
-      borderRadius="md"
-      background="gray.900"
-      py={5}
-      px={6}>
-      <Heading size="lg" fontWeight="light"><Icon as={BsClockHistory} boxSize={5} mr={2} />Grant Status</Heading>
+    <Box mb={5} borderRadius="md" background="gray.900" py={5} px={6}>
+      <Heading size="lg" fontWeight="light">
+        <Icon as={BsClockHistory} boxSize={5} mr={2} />
+        Grant Status
+      </Heading>
       <Flex align="center">
         <Box width="55%" pr={4}>
           {!cancelled ? descriptionText : <Text>Cancelled.</Text>}
         </Box>
         <Box width="45%">
-          <Heading size="md" fontWeight="medium" mb={1}>{(amountVested / totalAmount * 100).toLocaleString()}% Vested</Heading>
+          <Heading size="md" fontWeight="medium" mb={1}>
+            {((amountVested / totalAmount) * 100).toLocaleString()}% Vested
+          </Heading>
           <LightMode>
-            <Progress colorScheme='green' size='sm' background="gray.700" borderRadius={8} value={amountVested / totalAmount * 100} />
+            <Progress
+              colorScheme="green"
+              size="sm"
+              background="gray.700"
+              borderRadius={8}
+              value={(amountVested / totalAmount) * 100}
+            />
           </LightMode>
-          <Text opacity={0.8} fontSize="sm">{amountVested && amountVested.toLocaleString()} {grant.tokenSymbol} of {totalAmount && totalAmount.toLocaleString()} {grant.tokenSymbol}</Text>
+          <Text opacity={0.8} fontSize="sm">
+            {amountVested && amountVested.toLocaleString()} {grant.tokenSymbol}{" "}
+            of {totalAmount && totalAmount.toLocaleString()} {grant.tokenSymbol}
+          </Text>
         </Box>
       </Flex>
     </Box>
-  )
+  );
 }
diff --git a/frontend/components/Home/UserGrants/RedeemTokens.js b/frontend/components/Home/UserGrants/RedeemTokens.js
index 4c006c8..c468801 100644
--- a/frontend/components/Home/UserGrants/RedeemTokens.js
+++ b/frontend/components/Home/UserGrants/RedeemTokens.js
@@ -19,7 +19,7 @@ import { useRecoilState } from "recoil";
 import { getGrant, redeemGrant } from "../../../lib/store/grants";
 
 export default function RedeemTokens({ tokenId }) {
-  const [grant, setGrant] = useRecoilState(getGrant(tokenId));
+  const [[grant], setGrant] = useRecoilState(getGrant(tokenId));
 
   const [exchangeMode, setExchangeMode] = useState(false);
   const [exchangeTokenAmount, setExchangeTokenAmount] = useState(0);
diff --git a/frontend/components/Home/UserGrants/index.js b/frontend/components/Home/UserGrants/index.js
index a4edf2a..2e60afb 100644
--- a/frontend/components/Home/UserGrants/index.js
+++ b/frontend/components/Home/UserGrants/index.js
@@ -19,9 +19,13 @@ export default function UserGrants() {
 
   useEffect(() => {
     if (address && networkId) {
-      fetchGrantsByUser(address).finally(() => {
-        setLoadingData(false);
-      });
+      fetchGrantsByUser(address)
+        .then((grants) => {
+          setGrant(grants);
+        })
+        .finally(() => {
+          setLoadingData(false);
+        });
     }
   }, [address, networkId, setGrant]);
 
diff --git a/frontend/lib/store/grants.js b/frontend/lib/store/grants.js
index 8db6c81..3f3958b 100644
--- a/frontend/lib/store/grants.js
+++ b/frontend/lib/store/grants.js
@@ -37,7 +37,11 @@ export const getGrant = selectorFamily({
   get:
     (tokenId) =>
     ({ get }) => {
-      return get(grantsState)[tokenId];
+      return Object.values(get(grantsState))
+        .flat()
+        .filter((g) => {
+          return g.tokenId.toString() == tokenId.toString();
+        });
     },
   set:
     (tokenId) =>
@@ -53,7 +57,11 @@ export const getGrantsByUser = selectorFamily({
   get:
     (address) =>
     ({ get }) => {
-      return Object.values(get(grantsState)).filter((g) => g.owner == address);
+      return Object.values(get(grantsState))
+        .flat()
+        .filter((g) => {
+          return g.owner == address;
+        });
     },
   set:
     () =>