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

add price estimation for bond notes and warmup during staking

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2026-04-07 13:46:39 +03:00
parent 573bb73609
commit 8bfc14f2f0
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
3 changed files with 42 additions and 16 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", "name": "ghost-dao-interface",
"private": true, "private": true,
"version": "0.6.16", "version": "0.6.17",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

34
src/containers/Bond/components/ClaimBonds.jsx
View File

@ -20,6 +20,7 @@ import { formatCurrency } from "../../../helpers";
import { useCurrentIndex, useEpoch, useWarmupLength, useWarmupInfo } from "../../../hooks/staking"; import { useCurrentIndex, useEpoch, useWarmupLength, useWarmupInfo } from "../../../hooks/staking";
import { useNotes, redeem } from "../../../hooks/bonds"; import { useNotes, redeem } from "../../../hooks/bonds";
import { useTokenSymbol } from "../../../hooks/tokens"; import { useTokenSymbol } from "../../../hooks/tokens";
import { useGhstPrice } from "../../../hooks/prices";
export const ClaimBonds = ({ chainId, address, secondsTo }) => { export const ClaimBonds = ({ chainId, address, secondsTo }) => {
const isSmallScreen = useScreenSize("md"); const isSmallScreen = useScreenSize("md");
@ -28,6 +29,7 @@ export const ClaimBonds = ({ chainId, address, secondsTo }) => {
const [isPreClaimConfirmed, setPreClaimConfirmed] = useState(false); const [isPreClaimConfirmed, setPreClaimConfirmed] = useState(false);
const [isPayoutGhst, _] = useState(true); const [isPayoutGhst, _] = useState(true);
const ghstPrice = useGhstPrice(chainId);
const { epoch } = useEpoch(chainId); const { epoch } = useEpoch(chainId);
const { warmupExists } = useWarmupLength(chainId); const { warmupExists } = useWarmupLength(chainId);
const { warmupInfo } = useWarmupInfo(chainId, BOND_DEPOSITORY_ADDRESSES[chainId]); const { warmupInfo } = useWarmupInfo(chainId, BOND_DEPOSITORY_ADDRESSES[chainId]);
@ -97,6 +99,8 @@ export const ClaimBonds = ({ chainId, address, secondsTo }) => {
? formatCurrency(totalClaimableBalance, 5, ghstSymbol) ? formatCurrency(totalClaimableBalance, 5, ghstSymbol)
: formatCurrency(currentIndex.mul(totalClaimableBalance), 5, stnkSymbol) : formatCurrency(currentIndex.mul(totalClaimableBalance), 5, stnkSymbol)
} }
&nbsp;
({formatCurrency(totalClaimableBalance * ghstPrice, 2)})
</Typography> </Typography>
</Box> </Box>
@ -139,12 +143,15 @@ export const ClaimBonds = ({ chainId, address, secondsTo }) => {
<Box display="flex" justifyContent="space-between" mt="8px"> <Box display="flex" justifyContent="space-between" mt="8px">
<Typography>Payout</Typography> <Typography>Payout</Typography>
<Typography> <Box display="flex" flexDirection="column" alignItems="flex-end">
{isPayoutGhst <Typography>
? formatCurrency(note.payout, 5, ghstSymbol) {isPayoutGhst
: formatCurrency(currentIndex.mul(note.payout), 5, stnkSymbol) ? formatCurrency(note.payout, 5, ghstSymbol)
} : formatCurrency(currentIndex.mul(note.payout), 5, stnkSymbol)
</Typography> }
</Typography>
<Typography>{formatCurrency(note.payout * ghstPrice, 2)}</Typography>
</Box>
</Box> </Box>
<Box mt="16px"> <Box mt="16px">
@ -195,12 +202,15 @@ export const ClaimBonds = ({ chainId, address, secondsTo }) => {
</TableCell> </TableCell>
<TableCell style={{ padding: "8px 0" }}> <TableCell style={{ padding: "8px 0" }}>
<Typography> <Box display="flex" flexDirection="column" alignItems="flex-start">
{isPayoutGhst <Typography>
? formatCurrency(note.payout, 5, ghstSymbol) {isPayoutGhst
: formatCurrency(currentIndex.mul(note.payout), 5, stnkSymbol) ? formatCurrency(note.payout, 5, ghstSymbol)
} : formatCurrency(currentIndex.mul(note.payout), 5, stnkSymbol)
</Typography> }
</Typography>
<Typography variant="body2">{formatCurrency(note.payout * ghstPrice, 2)}</Typography>
</Box>
</TableCell> </TableCell>
<TableCell style={{ padding: "8px 0" }}> <TableCell style={{ padding: "8px 0" }}>

22
src/containers/Stake/components/ClaimsArea.jsx
View File

@ -24,10 +24,11 @@ import { PrimaryButton, SecondaryButton } from "../../../components/Button";
import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber"; import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber";
import { prettifySecondsInDays } from "../../../helpers/timeUtil"; import { prettifySecondsInDays } from "../../../helpers/timeUtil";
import { formatNumber } from "../../../helpers"; import { formatNumber, formatCurrency } from "../../../helpers";
import { STAKING_ADDRESSES } from "../../../constants/addresses"; import { STAKING_ADDRESSES } from "../../../constants/addresses";
import { useCurrentIndex, useWarmupInfo } from "../../../hooks/staking"; import { useCurrentIndex, useWarmupInfo } from "../../../hooks/staking";
import { useBalanceForShares, useTokenSymbol } from "../../../hooks/tokens"; import { useBalanceForShares, useTokenSymbol } from "../../../hooks/tokens";
import { useGhstPrice } from "../../../hooks/prices";
import ClaimConfirmationModal from "./ClaimConfirmationModal"; import ClaimConfirmationModal from "./ClaimConfirmationModal";
@ -53,6 +54,7 @@ export const ClaimsArea = ({ chainId, address, epoch }) => {
const [confirmationModalOpen, setConfirmationModalOpen] = useState(false); const [confirmationModalOpen, setConfirmationModalOpen] = useState(false);
const [isPayoutGhst, _] = useState(true); const [isPayoutGhst, _] = useState(true);
const ghstPrice = useGhstPrice(chainId);
const { warmupInfo: claim, refetch: claimRefetch } = useWarmupInfo(chainId, address); const { warmupInfo: claim, refetch: claimRefetch } = useWarmupInfo(chainId, address);
const { currentIndex, refetch: currentIndexRefetch } = useCurrentIndex(chainId); const { currentIndex, refetch: currentIndexRefetch } = useCurrentIndex(chainId);
const { balanceForShares } = useBalanceForShares(chainId, "STNK", claim.shares); const { balanceForShares } = useBalanceForShares(chainId, "STNK", claim.shares);
@ -132,6 +134,7 @@ export const ClaimsArea = ({ chainId, address, epoch }) => {
isClaimable={claim.expiry > epoch.number} isClaimable={claim.expiry > epoch.number}
stnkSymbol={stnkSymbol} stnkSymbol={stnkSymbol}
ghstSymbol={ghstSymbol} ghstSymbol={ghstSymbol}
ghstPrice={ghstPrice}
/> />
</Table> </Table>
@ -141,7 +144,17 @@ export const ClaimsArea = ({ chainId, address, epoch }) => {
); );
}; };
const ClaimInfo = ({ setConfirmationModalOpen, prepareBalance, claim, epoch, isClaimable, isPayoutGhst, stnkSymbol, ghstSymbol }) => { const ClaimInfo = ({
setConfirmationModalOpen,
prepareBalance,
claim,
epoch,
isClaimable,
isPayoutGhst,
stnkSymbol,
ghstSymbol,
ghstPrice
}) => {
return ( return (
<TableBody> <TableBody>
<TableRow> <TableRow>
@ -155,7 +168,10 @@ const ClaimInfo = ({ setConfirmationModalOpen, prepareBalance, claim, epoch, isC
</TableCell> </TableCell>
<TableCell style={{ padding: "8px 8px 8px 0" }}> <TableCell style={{ padding: "8px 8px 8px 0" }}>
<Typography gutterBottom={false} style={{ lineHeight: 1.4 }}> <Typography gutterBottom={false} style={{ lineHeight: 1.4 }}>
{`${formatNumber(prepareBalance, 5)} ${isPayoutGhst ? ghstSymbol : stnkSymbol}`} {formatCurrency(prepareBalance, 5, isPayoutGhst ? ghstSymbol : stnkSymbol)}
</Typography>
<Typography variant="body2" gutterBottom={false} style={{ lineHeight: 1.4 }}>
{formatCurrency(prepareBalance * ghstPrice, 2)}
</Typography> </Typography>
</TableCell> </TableCell>
<TableCell style={{ padding: "8px 8px 8px 0" }}> <TableCell style={{ padding: "8px 8px 8px 0" }}>