Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/beanSama/bip/silov3' into silo-v…
Browse files Browse the repository at this point in the history 
…3-ui
  • Loading branch information
@silochad
silochad committed Jun 27, 2023
2 parents 06af847 + 4b956ee commit bfd9373
Show file tree
Hide file tree
Showing 9 changed files with 217 additions and 164 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
85 changes: 45 additions & 40 deletions projects/ui/src/components/Common/Form/FormTxn/AdditionalTxnsAccordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@ import { useFormikContext } from 'formik';
import AddIcon from '@mui/icons-material/Add';
import BigNumber from 'bignumber.js';
import { ethers } from 'ethers';
import Row from '../../Row';
import Row from '~/components/Common/Row';
import SelectionAccordion from '~/components/Common/Accordion/SelectionAccordion';
import { FormTxnsFormState } from '..';
import { FormTxnsFormState } from '~/components/Common/Form';
import useToggle from '~/hooks/display/useToggle';
import useTimedRefresh from '~/hooks/app/useTimedRefresh';

import FormTxnOptionCard from '../FormTxnOptionCard';
import FormTxnOptionCard from '~/components/Common/Form/FormTxnOptionCard';
import useFarmerFormTxnSummary from '~/hooks/farmer/form-txn/useFarmerFormTxnsSummary';
import useFormTxnContext from '~/hooks/sdk/useFormTxnContext';
import SiloVestingWarningAlert from '~/components/Silo/SiloVestingWarningAlert';

import { FormTxn, FormTxnBundler } from '~/lib/Txn';

type Props = {
Expand Down Expand Up @@ -174,44 +176,47 @@ const AdditionalTxnsAccordion: React.FC<Props> = ({ filter }) => {
if (!allOptions?.length) return null;

return (
<SelectionAccordion<FormTxn>
open={open}
onChange={open ? hide : show}
title={
<Row gap={0.5}>
<AddIcon fontSize="small" color="primary" />
<Typography color="primary.main">
Add additional transactions to save gas
</Typography>
</Row>
}
subtitle={
<Row width="100%" justifyContent="space-between">
<Typography color="text.secondary">Claim All</Typography>
<Switch
checked={allToggled}
onClick={handleOnToggleAll}
disabled={allOptions.length === 0}
<>
<SiloVestingWarningAlert hide={!local.has(FormTxn.PLANT)} />
<SelectionAccordion<FormTxn>
open={open}
onChange={open ? hide : show}
title={
<Row gap={0.5}>
<AddIcon fontSize="small" color="primary" />
<Typography color="primary.main">
Add additional transactions to save gas
</Typography>
</Row>
}
subtitle={
<Row width="100%" justifyContent="space-between">
<Typography color="text.secondary">Claim All</Typography>
<Switch
checked={allToggled}
onClick={handleOnToggleAll}
disabled={allOptions.length === 0}
/>
</Row>
}
options={allOptions}
selected={local}
onToggle={handleOnToggle}
render={(item, selected) => (
<FormTxnOptionCard
key={item}
option={item}
summary={summary[item]}
selected={selected}
required={impliedOptions.has(item)}
gas={gasEstimates[item] || undefined}
isHovered={hovered.has(item)}
onMouseOver={() => handleMouseOver(item)}
onMouseLeave={handleMouseLeave}
/>
</Row>
}
options={allOptions}
selected={local}
onToggle={handleOnToggle}
render={(item, selected) => (
<FormTxnOptionCard
key={item}
option={item}
summary={summary[item]}
selected={selected}
required={impliedOptions.has(item)}
gas={gasEstimates[item] || undefined}
isHovered={hovered.has(item)}
onMouseOver={() => handleMouseOver(item)}
onMouseLeave={handleMouseLeave}
/>
)}
/>
)}
/>
</>
);
};

Expand Down
6 changes: 0 additions & 6 deletions projects/ui/src/components/Common/Form/FormTxn/ClaimBeanDrawerToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import podIconGreen from '~/img/beanstalk/pod-icon-green.svg';
import sproutsIconGrey from '~/img/beanstalk/sprout-icon-grey.svg';
import sproutsIconGreen from '~/img/beanstalk/rinsable-sprout-icon.svg';

import beanIconGreen from '~/img/tokens/bean-logo-circled.svg';
import beanIconGrey from '~/img/tokens/bean-logo-circled-grey.svg';
import IconWrapper from '~/components/Common/IconWrapper';
import Centered from '~/components/Common/ZeroState/Centered';
import useFarmerFormTxnsSummary, {
Expand All @@ -35,10 +33,6 @@ const actionsToIconMap = {
selected: podIconGreen,
grey: podIconGrey,
},
[FormTxn.CLAIM]: {
selected: beanIconGreen,
grey: beanIconGrey,
},
};

const ClaimBeanDrawerToggle: React.FC<{}> = () => {
Expand Down
Loading

0 comments on commit bfd9373

Please sign in to comment.