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()}
- >
-
+
+
+
+
+ e.stopPropagation()}
+ >
+
+
+
+ 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;