add price estimation for bond notes and warmup during staking

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

package.json

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

src/containers/Bond/components/ClaimBonds.jsx

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

src/containers/Stake/components/ClaimsArea.jsx

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