ghostchain/ghost-dao-interface
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add checkbox if warmup exists during bond purchase

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2026-04-28 14:32:51 +03:00
parent 650feb01d7
commit d9aff4dc6a
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
3 changed files with 70 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

69
src/containers/Bond/components/BondConfirmModal.jsx
View File

@ -1,5 +1,6 @@
import { useState } from "react";
import { Box, Typography } from "@mui/material";
import { useState, useEffect } from "react";
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>
);

10
src/containers/Stake/components/StakeConfirmationModal.jsx
View File

@ -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>
</>
);