Merge pull request #8 from Synthetixio/fixes

Fixes
Synthetixio · May 27, 2024 · ba3cb2e · ba3cb2e
2 parents 120cc17 + a0fce4c
commit ba3cb2e
Show file tree

Hide file tree

Showing 8 changed files with 679 additions and 401 deletions.
diff --git a/frontend/abis/Vester.json b/frontend/abis/Vester.json
diff --git a/frontend/components/Admin/AdminPanel/index.js b/frontend/components/Admin/AdminPanel/index.js
@@ -1,28 +1,36 @@
-import { useState, useEffect } from 'react'
-import { Spinner } from '@chakra-ui/react'
-import Grants from './Grants'
-import TokenBalance from './TokenBalance'
-import RecentActivity from '../../shared/RecentActivity'
-import { useRecoilState } from 'recoil'
-import { getGrants, fetchGrants } from '../../../lib/store/grants'
-import { eventsState, fetchEvents } from '../../../lib/store/events'
+import { useState, useEffect } from "react";
+import { Spinner } from "@chakra-ui/react";
+import Grants from "./Grants";
+import TokenBalance from "./TokenBalance";
+import RecentActivity from "../../shared/RecentActivity";
+import { useRecoilState } from "recoil";
+import { getGrants, fetchGrants } from "../../../lib/store/grants";
+import { eventsState, fetchEvents } from "../../../lib/store/events";
 
 export default function AdminPanel() {
   const [grants, setGrant] = useRecoilState(getGrants());
   const [events, setEvents] = useRecoilState(eventsState);
   const [loadingData, setLoadingData] = useState(true);
+  const { chain } = useNetwork();
+  const networkId = chain.id;
 
   useEffect(() => {
-    Promise.all([fetchEvents(setEvents), fetchGrants(setGrant)]).finally(() => {
-      setLoadingData(false)
-    })
-  }, [])
-
-  return loadingData ? <Spinner d="block" mx="auto" my={6} /> : <>
-    <Grants />
-    <TokenBalance />
-    <RecentActivity />
-  </>
-
+    if (!networkId) return;
+    Promise.all([
+      fetchEvents(setEvents, networkId),
+      fetchGrants(setGrant, networkId),
+    ]).finally(() => {
+      setLoadingData(false);
+    });
+  }, [networkId]);
 
+  return loadingData ? (
+    <Spinner d="block" mx="auto" my={6} />
+  ) : (
+    <>
+      <Grants />
+      <TokenBalance />
+      <RecentActivity />
+    </>
+  );
 }
diff --git a/frontend/components/Home/UserGrants/RedeemTokens.js b/frontend/components/Home/UserGrants/RedeemTokens.js
@@ -1,84 +1,160 @@
-import { useState } from 'react';
-import { Heading, Input, Button, FormControl, Flex, Box, FormLabel, Text, Checkbox, Grid, LightMode } from '@chakra-ui/react'
-import { Icon } from '@chakra-ui/icons'
-import { BsCash } from 'react-icons/bs'
-import { ethers } from 'ethers'
-import { useRecoilState } from 'recoil'
-import { getGrant, redeemGrant } from '../../../lib/store/grants'
-import { getEventsByTokenId } from '../../../lib/store/events'
+import { Icon } from "@chakra-ui/icons";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Flex,
+  FormControl,
+  FormLabel,
+  Grid,
+  Heading,
+  Input,
+  LightMode,
+  Text,
+} from "@chakra-ui/react";
+import { ethers } from "ethers";
+import { useState } from "react";
+import { BsCash } from "react-icons/bs";
+import { useRecoilState } from "recoil";
+import { getGrant, redeemGrant } from "../../../lib/store/grants";
 
 export default function RedeemTokens({ tokenId }) {
   const [grant, setGrant] = useRecoilState(getGrant(tokenId));
-  const [events, setEvents] = useRecoilState(getEventsByTokenId(tokenId));
 
   const [exchangeMode, setExchangeMode] = useState(false);
   const [exchangeTokenAmount, setExchangeTokenAmount] = useState(0);
   const [exchangeTokenAddress, setExchangeTokenAddress] = useState("");
   const [loadingRedemption, setLoadingRedemption] = useState(false);
 
-  const vested = parseFloat(ethers.utils.formatUnits(grant.amountVested, 18))
-  const redeemed = parseFloat(ethers.utils.formatUnits(grant.amountRedeemed, 18));
-  const available = parseFloat(ethers.utils.formatUnits(grant.amountAvailable, 18));
+  const vested = parseFloat(ethers.utils.formatUnits(grant.amountVested, 18));
+  const redeemed = parseFloat(
+    ethers.utils.formatUnits(grant.amountRedeemed, 18)
+  );
+  const available = parseFloat(
+    ethers.utils.formatUnits(grant.amountAvailable, 18)
+  );
 
   const redeem = () => {
-    setLoadingRedemption(true)
-    redeemGrant(grant.tokenId, exchangeMode && exchangeTokenAmount, exchangeMode && exchangeTokenAddress, setGrant, setEvents)
-      .finally(() => {
-        setLoadingRedemption(false)
-      })
-  }
+    setLoadingRedemption(true);
+    redeemGrant(
+      grant.tokenId,
+      exchangeMode && exchangeTokenAmount,
+      exchangeMode && exchangeTokenAddress,
+      setGrant
+    ).finally(() => {
+      setLoadingRedemption(false);
+    });
+  };
 
   return (
-    <Box
-      mb={5}
-      borderRadius="md"
-      background="gray.900"
-      py={5}
-      px={6}>
-      <Heading size="lg" fontWeight="light"><Icon as={BsCash} boxSize={5} mr={2} />Redeem {grant.tokenSymbol}</Heading>
+    <Box mb={5} borderRadius="md" background="gray.900" py={5} px={6}>
+      <Heading size="lg" fontWeight="light">
+        <Icon as={BsCash} boxSize={5} mr={2} />
+        Redeem {grant.tokenSymbol}
+      </Heading>
 
       <Flex align="center" mb={6}>
         <Box width="50%" pr={4} pt={2}>
-          <Text>You can redeem available {grant.tokenSymbol}. Available tokens do not expire.</Text>
+          <Text>
+            You can redeem available {grant.tokenSymbol}. Available tokens do
+            not expire.
+          </Text>
         </Box>
         <Box width="50%" pr={4}>
           <Flex>
             <Box>
-              <Text fontSize='2xl' fontWeight="medium">{vested.toLocaleString()}</Text>
-              <Text fontSize='sm' lineHeight={1} textTransform="uppercase" letterSpacing={1.5} opacity={0.8}>Vested</Text>
+              <Text fontSize="2xl" fontWeight="medium">
+                {vested.toLocaleString()}
+              </Text>
+              <Text
+                fontSize="sm"
+                lineHeight={1}
+                textTransform="uppercase"
+                letterSpacing={1.5}
+                opacity={0.8}
+              >
+                Vested
+              </Text>
             </Box>
             <Box px={4}>
-              <Text fontSize='2xl' fontWeight="medium">-</Text>
+              <Text fontSize="2xl" fontWeight="medium">
+                -
+              </Text>
             </Box>
             <Box>
-              <Text fontSize='2xl' fontWeight="medium">{redeemed.toLocaleString()}</Text>
-              <Text fontSize='sm' lineHeight={1} textTransform="uppercase" letterSpacing={1.5} opacity={0.8}>Redeemed</Text>
+              <Text fontSize="2xl" fontWeight="medium">
+                {redeemed.toLocaleString()}
+              </Text>
+              <Text
+                fontSize="sm"
+                lineHeight={1}
+                textTransform="uppercase"
+                letterSpacing={1.5}
+                opacity={0.8}
+              >
+                Redeemed
+              </Text>
             </Box>
             <Box px={4}>
-              <Text fontSize='2xl' fontWeight="medium">=</Text>
+              <Text fontSize="2xl" fontWeight="medium">
+                =
+              </Text>
             </Box>
             <Box>
-              <Text fontSize='2xl' fontWeight="medium">{available.toLocaleString()}</Text>
-              <Text fontSize='sm' lineHeight={1} textTransform="uppercase" letterSpacing={1.5} opacity={0.8}>Available</Text>
+              <Text fontSize="2xl" fontWeight="medium">
+                {available.toLocaleString()}
+              </Text>
+              <Text
+                fontSize="sm"
+                lineHeight={1}
+                textTransform="uppercase"
+                letterSpacing={1.5}
+                opacity={0.8}
+              >
+                Available
+              </Text>
             </Box>
           </Flex>
         </Box>
       </Flex>
 
-      <Checkbox mb={4} checked={exchangeMode} onChange={(e) => setExchangeMode(e.target.checked)}>I would like to purchase this {grant.tokenSymbol}.</Checkbox>
+      <Checkbox
+        mb={4}
+        checked={exchangeMode}
+        onChange={(e) => setExchangeMode(e.target.checked)}
+      >
+        I would like to purchase this {grant.tokenSymbol}.
+      </Checkbox>
 
       <FormControl d={!exchangeMode && "none"} mb={6}>
         <FormLabel>Optional Purchase Price</FormLabel>
 
-        <Grid templateColumns='repeat(2, 1fr)' gap={6}>
-          <Input type="number" value={exchangeTokenAmount} onChange={(e) => setExchangeTokenAmount(e.target.value)} placeholder='Enter Amount' />
-          <Input value={exchangeTokenAddress} onChange={(e) => setExchangeTokenAddress(e.target.value)} placeholder='Enter Token Address' />
+        <Grid templateColumns="repeat(2, 1fr)" gap={6}>
+          <Input
+            type="number"
+            value={exchangeTokenAmount}
+            onChange={(e) => setExchangeTokenAmount(e.target.value)}
+            placeholder="Enter Amount"
+          />
+          <Input
+            value={exchangeTokenAddress}
+            onChange={(e) => setExchangeTokenAddress(e.target.value)}
+            placeholder="Enter Token Address"
+          />
         </Grid>
       </FormControl>
       <LightMode>
-        <Button onClick={redeem} isLoading={loadingRedemption} isFullWidth size="lg" isDisabled={available == 0} colorScheme="blue">Redeem {available.toLocaleString()} {grant.tokenSymbol}</Button>
+        <Button
+          onClick={redeem}
+          isLoading={loadingRedemption}
+          isFullWidth
+          size="lg"
+          isDisabled={available == 0}
+          colorScheme="blue"
+        >
+          Redeem {available.toLocaleString()} {grant.tokenSymbol}
+        </Button>
       </LightMode>
     </Box>
-  )
+  );
 }
-