fix display Staking Unlock (days, and balance)

Author: Sharqiewicz

src/pages/collators/CollatorRewards.tsx

@@ -1,3 +1,4 @@
+import Big from 'big.js';
 import { JSX, useCallback, useEffect, useMemo, useState } from 'preact/compat';
 import { Signer } from '@polkadot/types/types';
 import { ApiPromise } from '@polkadot/api';
@@ -25,27 +26,29 @@ import {
   UnstakingDataType,
   handleTransactionStatus,
 } from './helpers';
-import Big from 'big.js';
 
-function CollatorRewards() {
+export function CollatorRewards() {
   const { api, tokenSymbol, ss58Format } = useNodeInfoState().state;
   const { walletAccount } = useGlobalState();
   const { candidates, estimatedRewards, refreshRewards, createUpdateDelegatorRewardsExtrinsic, unlockUnstaked } =
     useStakingPallet();
 
   const [userAvailableBalance, setUserAvailableBalance] = useState<string>('0.00');
+  const [unstaking, setUnstaking] = useState<string>('0.00');
+  const [userAvailableBalanceForUnlock, setUserAvailableBalanceForUnlock] = useState<Big>(new Big(0));
+  const [unlockGasFee, setUnlockGasFee] = useState<Big>(new Big(0));
+
   const [userStaking, setUserStaking] = useState<UserStaking>();
+
   const [claimDialogVisible, setClaimDialogVisible] = useState<boolean>(false);
   const [submissionPendingRewards, setSubmissionPendingRewards] = useState(false);
   const [, setSubmissionPendingUnlock] = useState(false);
   const [unlockDialogSuccess, setUnlockDialogSuccess] = useState(false);
-  const [unstaking, setUnstaking] = useState<string>('0.00');
-  const [balanceEnabledForUnlock, setBalanceEnabledForUnlock] = useState<string>('0.00');
-  const [updateEnabled, setUpdateEnabled] = useState<boolean>(true);
   const [unlockDialogVisible, setUnlockDialogVisible] = useState<boolean>(false);
-  const [tokensTipText, setTokensTipText] = useState<string>('Locked for 7 days.');
+  const [updateEnabled, setUpdateEnabled] = useState<boolean>(true);
   const [loadingToken, setLoadingToken] = useState<boolean>(true);
-  const [unlockGasFee, setUnlockGasFee] = useState<Big>(new Big(0));
+
+  const [tokensTipText, setTokensTipText] = useState<string>('Locked for 7 days.');
 
   const { getTransactionFee } = useFeePallet();
 
@@ -85,13 +88,9 @@ function CollatorRewards() {
     setTokensTipText(tooltipText);
   }
 
-  async function setBalanceForUnlock(
-    unstakingDataJSON: UnstakingDataType,
-    api: ApiPromise,
-    setBalanceEnabledForUnlock: StateUpdater<string>,
-  ) {
+  async function setBalanceForUnlock(unstakingDataJSON: UnstakingDataType, api: ApiPromise) {
     const tokensReadyToUnlock = await calculateTokensReadyToUnlock(unstakingDataJSON, api);
-    setBalanceEnabledForUnlock(tokensReadyToUnlock.toString());
+    setUserAvailableBalanceForUnlock(tokensReadyToUnlock);
   }
 
   function setUnstakingTokens(unstakingData: BTreeMap, setUnstaking: StateUpdater<string>) {
@@ -106,19 +105,20 @@ function CollatorRewards() {
       if (!api || !walletAccount) {
         return '0';
       }
-      const { data: balance } = await api.query.system.account(walletAccount?.address);
+      const { data: balance } = await api.query.system.account(walletAccount.address);
       setUserAvailableBalance(balance.free.sub(balance.frozen).toString());
     };
     const fetchUnstaking = async () => {
       if (!api || !walletAccount) {
         return;
       }
 
-      const unstakingData = await api.query.parachainStaking.unstaking(walletAccount?.address);
+      const unstakingData = await api.query.parachainStaking.unstaking(walletAccount.address);
+
+      const unstakingDataFormatted = unstakingData.toHuman() as UnstakingDataType;
 
-      const unstakingDataJSON = unstakingData.toJSON() as UnstakingDataType;
-      setTooltipText(unstakingDataJSON, api, tokenSymbol || '', setTokensTipText);
-      setBalanceForUnlock(unstakingDataJSON, api, setBalanceEnabledForUnlock);
+      setTooltipText(unstakingDataFormatted, api, tokenSymbol || '', setTokensTipText);
+      setBalanceForUnlock(unstakingDataFormatted, api);
       setUnstakingTokens(unstakingData, setUnstaking);
     };
 
@@ -194,7 +194,6 @@ function CollatorRewards() {
     return content;
   };
 
-
   return (
     <>
       <div className="flex flex-col mb-8 justify-between md:flex-row ">
@@ -205,7 +204,7 @@ function CollatorRewards() {
               <StakingContent
                 userStakingAmount={userStaking?.amount}
                 onButtonClick={handleUnlockButtonClick}
-                balanceEnabledForUnlock={balanceEnabledForUnlock}
+                userAvailableBalanceForUnlock={userAvailableBalanceForUnlock}
                 tokenSymbol={tokenSymbol as string}
                 userAvailableBalance={userAvailableBalance}
                 unstaking={unstaking}
@@ -239,7 +238,7 @@ function CollatorRewards() {
         gasFee={unlockGasFee}
         unlockSuccess={unlockDialogSuccess}
         onUnlock={handleUnlock}
-        userStakeBalance={balanceEnabledForUnlock}
+        userAvailableBalanceForUnlock={userAvailableBalanceForUnlock}
         visible={unlockDialogVisible}
         onClose={() => setUnlockDialogVisible(false)}
       />
@@ -252,5 +251,3 @@ function CollatorRewards() {
     </>
   );
 }
-
-export default CollatorRewards;

src/pages/collators/CollatorRewards/CollatorRewards.tsx

@@ -1,24 +1,25 @@
+import Big from 'big.js';
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
 
 import StakedIcon from '../../../../assets/collators-staked-icon';
 import { nativeToFormatMetric } from '../../../../shared/parseNumbers/metric';
 
 interface StakingContentProps {
   onButtonClick: () => void;
-  balanceEnabledForUnlock: string;
-  tokenSymbol: string;
   userStakingAmount?: string;
   userAvailableBalance: string;
+  userAvailableBalanceForUnlock: Big;
+  tokenSymbol: string;
   unstaking: string;
   tokensTipText: string;
 }
 
 export const StakingContent: React.FC<StakingContentProps> = ({
   onButtonClick,
-  balanceEnabledForUnlock,
-  tokenSymbol,
   userStakingAmount = '0.00',
   userAvailableBalance,
+  userAvailableBalanceForUnlock,
+  tokenSymbol,
   unstaking,
   tokensTipText,
 }) => (
@@ -46,7 +47,7 @@ export const StakingContent: React.FC<StakingContentProps> = ({
         ) : null}
       </div>
       <button
-        disabled={!Number(balanceEnabledForUnlock)}
+        disabled={!userAvailableBalanceForUnlock.toNumber()}
         className="btn btn-primary btn-unlock min-h-fit max-h-10 w-full m-auto px-8"
         onClick={onButtonClick}
       >

src/pages/collators/CollatorRewards/StakingContent/StakingContent.tsx

@@ -3,11 +3,12 @@ import { StateUpdater } from 'preact/hooks';
 import { EventRecord, ExtrinsicStatus } from '@polkadot/types/interfaces';
 
 import { ShowToast, ToastMessage } from '../../../shared/showToast';
-import { nativeToFormatMetric } from '../../../shared/parseNumbers/metric';
+import { nativeToFormatMetric, sanitizeNative } from '../../../shared/parseNumbers/metric';
 import { BLOCK_TIME_SEC, MINUTE_IN_MILLISECONDS, SECONDS_IN_A_DAY } from '../../../shared/constants';
 import { getErrors } from '../../../helpers/substrate';
+import Big from 'big.js';
 
-async function calculateDaysLeft(blockNumber: string, api: ApiPromise) {
+async function calculateDaysLeft(blockNumber: string | number, api: ApiPromise) {
   const currentBlockNumber = await api.derive.chain.bestNumber();
   const blocksLeft = Number(blockNumber) - Number(currentBlockNumber);
   const daysLeft = Math.round((blocksLeft * BLOCK_TIME_SEC) / SECONDS_IN_A_DAY);
@@ -28,7 +29,6 @@ export async function generateUnstakingTooltipText(
 ): Promise<string> {
   const tooltipTextPromises = Object.entries(unstakingData).map(async ([blockNumber, value]) => {
     const daysLeft = await calculateDaysLeft(blockNumber, api);
-
     if (areTokensReadyToUnlock(daysLeft)) {
       return `${nativeToFormatMetric(value, tokenSymbol)} ready to be unlocked.\n`;
     } else {
@@ -43,19 +43,19 @@ export async function generateUnstakingTooltipText(
   return tooltipText;
 }
 
-export async function calculateTokensReadyToUnlock(unstakingData: UnstakingDataType, api: ApiPromise): Promise<number> {
+export async function calculateTokensReadyToUnlock(unstakingData: UnstakingDataType, api: ApiPromise): Promise<Big> {
   const tokensReadyToUnlockPromises = Object.entries(unstakingData).map(async ([blockNumber, value]) => {
     const daysLeft = await calculateDaysLeft(blockNumber, api);
 
     if (areTokensReadyToUnlock(daysLeft)) {
-      return Number(value);
+      return sanitizeNative(value);
     }
 
-    return 0;
+    return new Big(0);
   });
 
   const tokensReadyToUnlockValues = await Promise.all(tokensReadyToUnlockPromises);
-  const tokensReadyToUnlock = tokensReadyToUnlockValues.reduce((total, value) => total + value, 0);
+  const tokensReadyToUnlock = tokensReadyToUnlockValues.reduce((total, value) => total.add(value), new Big(0));
 
   return tokensReadyToUnlock;
 }