Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #8

Merged
merged 8 commits into from
May 27, 2024
Merged

Fixes #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
abeb0c7
Remove byte code
0xjocke May 27, 2024
2da8175
Remove unneeded network listener
0xjocke May 27, 2024
e657795
Remove public provider.
0xjocke May 27, 2024
630fd94
Prettier
0xjocke May 27, 2024
aa58418
Correct infura url
0xjocke May 27, 2024
d8144b8
Correct infura url
0xjocke May 27, 2024
7f75734
Skip fetching events for UserGrants page.
0xjocke May 27, 2024
a0fce4c
Make sure admin panel passes in network id
0xjocke May 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions frontend/abis/Vester.json
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 27 additions & 19 deletions frontend/components/Admin/AdminPanel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
</>
);
}
158 changes: 117 additions & 41 deletions frontend/components/Home/UserGrants/RedeemTokens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
);
}

Loading
Loading