add checkbox if warmup exists during bond purchase

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.7.28",
+  "version": "0.7.29",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/containers/Bond/components/BondConfirmModal.jsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, Checkbox, FormControlLabel } from "@mui/material";
+import { CheckBoxOutlineBlank, CheckBoxOutlined } from "@mui/icons-material";
 import { styled, useTheme } from "@mui/material/styles";
 import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
@@ -10,13 +11,14 @@ import Metric from "../../../components/Metric/Metric";
 import Modal from "../../../components/Modal/Modal";
 import TokenStack from "../../../components/TokenStack/TokenStack";
 import DataRow from "../../../components/DataRow/DataRow";
-import { PrimaryButton } from "../../../components/Button";
+import { PrimaryButton, SecondaryButton } from "../../../components/Button";
 
 import BondDiscount from "./BondDiscount";
 import BondVesting from "./BondVesting";
 import BondSlippage from "./BondSlippage";
 
 import { purchaseBond } from "../../../hooks/bonds";
+import { useWarmupLength } from "../../../hooks/staking";
 
 const StyledBox = styled(Box, {
     shouldForwardProp: prop => prop !== "template",
@@ -43,8 +45,57 @@ const BondConfirmModal = ({
     handleConfirmClose
 }) => {
     const theme = useTheme();
+
+    const { warmupLength, warmupExists: needsWarmup } = useWarmupLength(chainId);
+    const [acknowledgedWarmup, setAcknowledgedWarmup] = useState(false);
     const [isPending, setIsPending] = useState(false);
 
+    useEffect(() => setAcknowledgedWarmup(acknowledgedWarmup || !needsWarmup), [acknowledgedWarmup, needsWarmup]);
+
+    const AcknowledgeWarmupCheckbox = () => {
+        if (!needsWarmup) return <></>;
+        return (
+            <Box sx={{ marginBottom: "1rem" }}>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            data-testid="acknowledge-bond-warmup"
+                            checked={acknowledgedWarmup}
+                            onChange={event => setAcknowledgedWarmup(event.target.checked)}
+                            icon={<CheckBoxOutlineBlank viewBox="0 0 24 24" />}
+                            checkedIcon={<CheckBoxOutlined viewBox="0 0 24 24" />}
+                        />
+                    }
+                    label={
+                        <Typography variant="body2">
+                            {`I understand the ${bondQuoteTokenName} I’m bonding will only be available to claim ${warmupLength.toString()} epochs after my transaction is confirmed, and the warmup extends with each bond purchase`}
+                        </Typography>
+                    }
+                />
+            </Box>
+        );
+    };
+
+    const NeedsWarmupDetails = () => {
+        if (!needsWarmup) return <></>;
+        return (
+            <>
+                <AcknowledgeWarmupCheckbox />
+                <SecondaryButton
+                    fullWidth
+                    href="https://ghostchain.io/ghostdao_litepaper"
+                >
+                    Why is there a warmup?
+                </SecondaryButton>
+            </>
+        );
+    };
+
+    const handleConfirmCloseMaster = () => {
+        setAcknowledgedWarmup(false);
+        handleConfirmClose()
+    }
+
     const onSubmit = async () => {
         setIsPending(true);
 
@@ -68,7 +119,7 @@ const BondConfirmModal = ({
         });
 
         setIsPending(false);
-        handleConfirmClose();
+        handleConfirmCloseMaster();
     }
 
     return (
@@ -84,7 +135,7 @@ const BondConfirmModal = ({
                     </Typography>
                 </Box>
             }
-            onClose={!isPending && handleConfirmClose}
+            onClose={!isPending && handleConfirmCloseMaster}
             topLeft={<GhostStyledIcon viewBox="0 0 23 23" component={SettingsIcon} style={{ cursor: "pointer" }} onClick={handleSettingsOpen} />}
         >
             <>
@@ -110,9 +161,13 @@ const BondConfirmModal = ({
                 <DataRow title="ROI" balance={<BondDiscount discount={bond.discount} textOnly />} />
                 <DataRow title="Bond Slippage" balance={<BondSlippage slippage={slippage} textOnly />} />
                 <DataRow title="Vesting Term" balance={<BondVesting vesting={bond.vesting} />} />
-                <PrimaryButton fullWidth onClick={onSubmit} disabled={isPending} loading={isPending}>
+                {!acknowledgedWarmup && <Box>
+                    <Box mt="21px" mb="21px" borderTop={`1px solid ${theme.colors.gray[500]}`}></Box>
+                    <NeedsWarmupDetails />
+                </Box>}
+                {acknowledgedWarmup && <PrimaryButton fullWidth onClick={onSubmit} disabled={isPending} loading={isPending}>
                     {isPending ? "Bonding..." : "Confirm Bond Purchase"}
-                </PrimaryButton>
+                </PrimaryButton>}
             </>
         </Modal>
     );

src/containers/Stake/components/StakeConfirmationModal.jsx

@@ -32,15 +32,19 @@ const StakeConfirmationModal = (props) => {
                     <FormControlLabel
                         control={
                             <Checkbox
-                                data-testid="acknowledge-warmup"
+                                data-testid="acknowledge-stake-warmup"
                                 checked={acknowledgedWarmup}
                                 onChange={event => setAcknowledgedWarmup(event.target.checked)}
                                 icon={<CheckBoxOutlineBlank viewBox="0 0 24 24" />}
                                 checkedIcon={<CheckBoxOutlined viewBox="0 0 24 24" />}
                             />
                         }
-                        label={`I understand the ${props.ftsoSymbol} I’m staking will only be available to claim ${warmupLength.toString()} epochs after my transaction is confirmed`}
+                        label={
-                        />
+                            <Typography variant="body2">
+                                {`I understand the ${props.ftsoSymbol} I’m staking will only be available to claim ${warmupLength.toString()} epochs after my transaction is confirmed`}
+                            </Typography>
+                        }
+                    />
                 </Box>
             </>
         );