Skip to content

Commit

Permalink
silo vesting period alert
Browse files Browse the repository at this point in the history
  • Loading branch information
BeanSama authored and BeanSama committed Jun 13, 2023
1 parent 297df3e commit 4b956ee
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 86 deletions.
174 changes: 88 additions & 86 deletions projects/ui/src/components/Common/Form/FormTxn/AddPlantTxnToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ import useToggle from '~/hooks/display/useToggle';
import useFarmerFormTxnsSummary from '~/hooks/farmer/form-txn/useFarmerFormTxnsSummary';
import MergeIcon from '~/img/misc/merge-icon.svg';

import { FormTxnsFormState } from '..';
import { FormTxnsFormState } from '~/components/Common/Form';
import { FormTxn } from '~/lib/Txn';
import SiloVestingWarningAlert from '~/components/Silo/SiloVestingWarningAlert';

const sx = {
accordion: {
Expand Down Expand Up @@ -74,18 +75,14 @@ const AddPlantTxnToggle: React.FC<{}> = () => {

/// Handlers
const handleToggleOn = useCallback(() => {
if (isPlant) {
setFieldValue('farmActions.primary', [FormTxn.PLANT]);
show();
}
}, [isPlant, setFieldValue, show]);
setFieldValue('farmActions.primary', [FormTxn.PLANT]);
show();
}, [setFieldValue, show]);

const handleToggleOff = useCallback(() => {
if (isPlant) {
setFieldValue('farmActions.primary', []);
hide();
}
}, [hide, isPlant, setFieldValue]);
setFieldValue('farmActions.primary', []);
hide();
}, [hide, setFieldValue]);

/// Effects
/// Update the local state if the Form State is updated externally
Expand All @@ -101,88 +98,93 @@ const AddPlantTxnToggle: React.FC<{}> = () => {
if (!isPlant || !plantEnabled) return null;

return (
<Accordion
expanded={open}
defaultExpanded={false}
defaultChecked={false}
sx={sx.accordion}
>
<AccordionSummary sx={sx.accordionSummary}>
<Row justifyContent="space-between" alignItems="center" width="100%">
<Row
gap={1}
alignItems="center"
/// only enable the switch component to toggle
onClick={(e) => e.stopPropagation()}
>
<img
src={MergeIcon}
alt="merge"
css={{ width: '24px', height: '24px' }}
<>
<SiloVestingWarningAlert hide={!open} />
<Accordion
expanded={open}
defaultExpanded={false}
defaultChecked={false}
sx={sx.accordion}
>
<AccordionSummary sx={sx.accordionSummary}>
<Row justifyContent="space-between" alignItems="center" width="100%">
<Row
gap={1}
alignItems="center"
/// only enable the switch component to toggle
onClick={(e) => e.stopPropagation()}
>
<img
src={MergeIcon}
alt="merge"
css={{ width: '24px', height: '24px' }}
/>
<Stack>
<Typography variant="h4" color="primary.main">
Use Earned Beans
</Typography>
<Typography variant="body1" color="text.tertiary">
Toggle to claim Earned Beans in your transaction
</Typography>
</Stack>
</Row>
<Switch
checked={open}
onClick={(e) => {
e.stopPropagation();
open ? handleToggleOff() : handleToggleOn();
}}
color="primary"
/>
<Stack>
<Typography variant="h4" color="primary.main">
Use Earned Beans
</Typography>
<Typography variant="body1" color="text.tertiary">
Toggle to claim Earned Beans in your transaction
</Typography>
</Stack>
</Row>
<Switch
checked={open}
onClick={(e) => {
e.stopPropagation();
open ? handleToggleOff() : handleToggleOn();
</AccordionSummary>
<AccordionDetails sx={{ px: 1 }}>
<Card
sx={{
background: BeanstalkPalette.honeydewGreen,
borderColor: 'primary.light',
}}
color="primary"
/>
</Row>
</AccordionSummary>
<AccordionDetails sx={{ px: 1 }}>
<Card
sx={{
background: BeanstalkPalette.honeydewGreen,
borderColor: 'primary.light',
}}
>
<Stack gap={1} p={1}>
<Typography variant="body1" color="text.tertiary">
You will Plant to claim these silo rewards
</Typography>
<Grid container spacing={1} direction="row">
{items.map((item, i) => (
<Grid item xs={6} sm={3} key={`${item.token.symbol}-${i}`}>
<Card sx={{ border: 0, width: '100%', background: 'white' }}>
<Stack gap={0.2} p={1}>
<Row gap={0.2}>
<TokenIcon
token={item.token}
css={{ height: FontSize.sm }}
/>
>
<Stack gap={1} p={1}>
<Typography variant="body1" color="text.tertiary">
You will Plant to claim these silo rewards
</Typography>
<Grid container spacing={1} direction="row">
{items.map((item, i) => (
<Grid item xs={6} sm={3} key={`${item.token.symbol}-${i}`}>
<Card
sx={{ border: 0, width: '100%', background: 'white' }}
>
<Stack gap={0.2} p={1}>
<Row gap={0.2}>
<TokenIcon
token={item.token}
css={{ height: FontSize.sm }}
/>
<Typography
variant="bodySmall"
fontWeight={FontWeight.semiBold}
>
{displayFullBN(item.amount, 2)}
</Typography>
</Row>
<Typography
variant="bodySmall"
fontWeight={FontWeight.semiBold}
fontWeight={FontWeight.normal}
sx={{ whiteSpace: 'nowrap' }}
>
{displayFullBN(item.amount, 2)}
{item.description}
</Typography>
</Row>
<Typography
variant="bodySmall"
fontWeight={FontWeight.normal}
sx={{ whiteSpace: 'nowrap' }}
>
{item.description}
</Typography>
</Stack>
</Card>
</Grid>
))}
</Grid>
</Stack>
</Card>
</AccordionDetails>
</Accordion>
</Stack>
</Card>
</Grid>
))}
</Grid>
</Stack>
</Card>
</AccordionDetails>
</Accordion>
</>
);
};

Expand Down
22 changes: 22 additions & 0 deletions projects/ui/src/components/Silo/SiloVestingWarningAlert.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';
import useFarmerSiloVesting from '~/hooks/farmer/useFarmerSiloVesting';
import { displayFullBN } from '~/util';
import WarningAlert from '../Common/Alert/WarningAlert';

const SiloVestingWarningAlert: React.FC<{ hide?: boolean }> = ({
hide = false,
}) => {
const { amount, isVesting, remainingBlocks } = useFarmerSiloVesting();

if (!isVesting || hide) return null;

return (
<WarningAlert>
{`${
amount.gte(1) ? displayFullBN(amount, 0) : '<1'
} BEANs are vesting and will be available for plant in ${remainingBlocks} blocks`}
</WarningAlert>
);
};

export default SiloVestingWarningAlert;

0 comments on commit 4b956ee

Please sign in to comment.