changes in confirmation logic for bond redeem, only if funds on the bonding contract are in warmup period

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

src/containers/Bond/components/WarmupConfirmModal.jsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, FormControlLabel, Checkbox } from "@mui/material";
 import { styled, useTheme } from "@mui/material/styles";
 import SettingsIcon from '@mui/icons-material/Settings';
+import { CheckBoxOutlineBlank, CheckBoxOutlined } from "@mui/icons-material";
 
 import Modal from "../../../components/Modal/Modal";
 import { PrimaryButton } from "../../../components/Button";
@@ -30,6 +31,8 @@ const WarmupConfirmModal = ({
 }) => {
     const theme = useTheme();
 
+    const [isChecked, setIsChecked] = useState(false);
+
     const onSubmit = () => {
         setPreClaimConfirmed();
         handleConfirmClose();
@@ -38,25 +41,35 @@ const WarmupConfirmModal = ({
     return (
         <Modal
             maxWidth="476px"
-            minHeight={warmupLength >= 0 ? "150px" : "200px"}
+            minHeight="150px"
             open={isOpen}
             headerText={
-                warmupLength >= 0
+                warmupLength < 0
-                    ? "Bond Warm-Up is Pending..."
+                    ? "Bond Notification"
-                    : "Unlock Bond"
+                    : "Bond in Warm-up"
             }
             onClose={handleConfirmClose}
         >
             <Box gap="20px" display="flex" flexDirection="column" justifyContent="space-between" alignItems="center">
                 <Box display="flex" flexDirection="column">
-                    <Typography>{
+                    {warmupLength < 0
-                        warmupLength >= 0
+                        ? <FormControlLabel
-                            ? `This bond is currently in a warm-up period and cannot be claimed yet. It'll be available for claim in ${warmupLength} epochs.`
+                            control={
-                            : "This bond is warmed-up and can be unlocked. Please unlock it on behalf of the collective."
+                                <Checkbox
-                    }</Typography>
+                                    data-testid="acknowledge-warmup"
+                                    checked={isChecked}
+                                    onChange={event => setIsChecked(event.target.checked)}
+                                    icon={<CheckBoxOutlineBlank viewBox="0 0 24 24" />}
+                                    checkedIcon={<CheckBoxOutlined viewBox="0 0 24 24" />}
+                                />
+                            }
+                            label={`I acknowledge that I am releasing warmup funds for the bonding contract on behalf of the collective.`}
+                        />
+                        : `Bonding address is in a warm-up period and cannot be claimed now. It'll be available for claim in ${warmupLength} epochs.`
+                    }
                 </Box>
 
-                {warmupLength < 0 && <PrimaryButton fullWidth onClick={onSubmit}>
+                {warmupLength < 0 && <PrimaryButton fullWidth disabled={!isChecked} onClick={onSubmit}>
                     Confirm
                 </PrimaryButton>}
             </Box>