diff --git a/projects/ui/src/components/Common/Form/FormTxn/AddPlantTxnToggle.tsx b/projects/ui/src/components/Common/Form/FormTxn/AddPlantTxnToggle.tsx index d04e68a99a..6ffaea2189 100644 --- a/projects/ui/src/components/Common/Form/FormTxn/AddPlantTxnToggle.tsx +++ b/projects/ui/src/components/Common/Form/FormTxn/AddPlantTxnToggle.tsx @@ -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: { @@ -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 @@ -101,88 +98,93 @@ const AddPlantTxnToggle: React.FC<{}> = () => { if (!isPlant || !plantEnabled) return null; return ( - - - - e.stopPropagation()} - > - merge + + + + + e.stopPropagation()} + > + merge + + + Use Earned Beans + + + Toggle to claim Earned Beans in your transaction + + + + { + e.stopPropagation(); + open ? handleToggleOff() : handleToggleOn(); + }} + color="primary" /> - - - Use Earned Beans - - - Toggle to claim Earned Beans in your transaction - - - { - e.stopPropagation(); - open ? handleToggleOff() : handleToggleOn(); + + + - - - - - - - You will Plant to claim these silo rewards - - - {items.map((item, i) => ( - - - - - + > + + + You will Plant to claim these silo rewards + + + {items.map((item, i) => ( + + + + + + + {displayFullBN(item.amount, 2)} + + - {displayFullBN(item.amount, 2)} + {item.description} - - - {item.description} - - - - - ))} - - - - - + + + + ))} + + + + + + ); }; diff --git a/projects/ui/src/components/Silo/SiloVestingWarningAlert.tsx b/projects/ui/src/components/Silo/SiloVestingWarningAlert.tsx new file mode 100644 index 0000000000..dbcd2fc13b --- /dev/null +++ b/projects/ui/src/components/Silo/SiloVestingWarningAlert.tsx @@ -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 ( + + {`${ + amount.gte(1) ? displayFullBN(amount, 0) : '<1' + } BEANs are vesting and will be available for plant in ${remainingBlocks} blocks`} + + ); +}; + +export default SiloVestingWarningAlert;