From 4b956eee8eb9ee6232cb9937b3b1f9a13d70afec Mon Sep 17 00:00:00 2001
From: BeanSama <BeanSama@bean.farm>
Date: Mon, 12 Jun 2023 19:00:34 -0600
Subject: [PATCH] silo vesting period alert

---
 .../Common/Form/FormTxn/AddPlantTxnToggle.tsx | 174 +++++++++---------
 .../Silo/SiloVestingWarningAlert.tsx          |  22 +++
 2 files changed, 110 insertions(+), 86 deletions(-)
 create mode 100644 projects/ui/src/components/Silo/SiloVestingWarningAlert.tsx

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 (
-    <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>
+    </>
   );
 };
 
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 (
+    <WarningAlert>
+      {`${
+        amount.gte(1) ? displayFullBN(amount, 0) : '<1'
+      } BEANs are vesting and will be available for plant in ${remainingBlocks} blocks`}
+    </WarningAlert>
+  );
+};
+
+export default SiloVestingWarningAlert;