From 8297057c18bf751ce910fa06b95df6e8b343b310 Mon Sep 17 00:00:00 2001 From: Yaki Date: Tue, 2 Jan 2024 14:34:49 -0800 Subject: [PATCH] chore: fix async loading of stats --- src/components/DaoList.tsx | 66 +++++++++++++--------------------- src/components/ProjectCard.tsx | 53 +++++++-------------------- src/modals/ViewDetails.tsx | 2 -- src/stores/modals.tsx | 5 +++ src/utils/formatNumber.ts | 16 +++++++-- 5 files changed, 56 insertions(+), 86 deletions(-) diff --git a/src/components/DaoList.tsx b/src/components/DaoList.tsx index d0da7ce..cda7c2e 100644 --- a/src/components/DaoList.tsx +++ b/src/components/DaoList.tsx @@ -57,7 +57,6 @@ const DaoList = (props: DaoListProps) => { const handleViewDetails = (mini: boolean, children?: JSX.Element) => { if (!mini || !children) return; - console.log('handleViewDetails', mini, children); setOpenModal({ name: modalName.VIEW_DETAILS, metadata: { children }, @@ -93,6 +92,28 @@ const DaoList = (props: DaoListProps) => { } }; + const loadTotalUserStaked = async () => { + if (!selectedAccount) return; + + const coreInfoResults: { [key: number]: Partial | undefined; } = {}; + const totalUserStakedResults: { [key: number]: BigNumber | undefined; } = {}; + + for (const core of stakingCores) { + const coreInfo = getCoreInfo(coreEraStakeInfo, core); + const totalUserStaked = getTotalUserStaked(userStakedInfo, core); + + if (typeof coreInfo !== 'undefined') { + coreInfoResults[core.key] = coreInfo; + } + + if (typeof totalUserStaked !== 'undefined') { + totalUserStakedResults[core.key] = totalUserStaked; + } + } + + setTotalUserStakedData(prevState => ({ ...prevState, ...totalUserStakedResults })); + }; + const loadAccountInfo = async (selectedAccount: InjectedAccountWithMeta) => { const account = await api.query.system.account(selectedAccount.address); const balance = account.toPrimitive() as BalanceType; @@ -170,7 +191,6 @@ const DaoList = (props: DaoListProps) => { const coreEraStake = coreEraStakeInfo.find(info => info.coreId === stakingCore.key); if (coreEraStake) { - console.log('coreEraStake', coreEraStake); coreEraStakeInfoMap.set(stakingCore.key, { ...coreEraStake, }); @@ -220,44 +240,8 @@ const DaoList = (props: DaoListProps) => { }, [selectedAccount, stakingCores, totalUserStakedData, api]); useEffect(() => { - let isMounted = true; - - (async () => { - const coreInfoResults: { [key: number]: Partial | undefined; } = {}; - const totalUserStakedResults: { [key: number]: BigNumber | undefined; } = {}; - - for (const core of stakingCores) { - if (!isMounted) { - break; - } - - const coreInfo = getCoreInfo(coreEraStakeInfo, core); - const totalUserStaked = getTotalUserStaked(userStakedInfo, core); - - if (typeof coreInfo !== 'undefined') { - coreInfoResults[core.key] = coreInfo; - } - - if (typeof totalUserStaked !== 'undefined') { - totalUserStakedResults[core.key] = totalUserStaked; - } - } - - if (isMounted) { - setTotalUserStakedData(prevState => { - const newState = { ...prevState, ...totalUserStakedResults }; - if (JSON.stringify(newState) !== JSON.stringify(prevState)) { - return newState; - } - return prevState; - }); - } - })(); - - return () => { - isMounted = false; - }; - }, [stakingCores, coreEraStakeInfo, userStakedInfo]); + loadTotalUserStaked(); + }, [selectedAccount, stakingCores, coreEraStakeInfo, userStakedInfo]); useEffect(() => { if (!rewardsCoreClaimedQuery.data?.cores?.length || !selectedAccount) return; @@ -268,7 +252,7 @@ const DaoList = (props: DaoListProps) => { }); setCoreEraStakeInfo(Array.from(coreEraStakeInfoMap.values())); - }, [stakingCores, rewardsCoreClaimedQuery]); + }, [selectedAccount, stakingCores, rewardsCoreClaimedQuery]); useEffect(() => { let unsubs: UnsubscribePromise[] = []; diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx index d760b90..6e4519b 100644 --- a/src/components/ProjectCard.tsx +++ b/src/components/ProjectCard.tsx @@ -1,7 +1,6 @@ import { RefObject, useEffect, useState } from 'react'; import { BigNumber } from 'bignumber.js'; import { LockClosedIcon } from '@heroicons/react/24/outline'; -import { formatBalance } from '@polkadot/util'; import toast from 'react-hot-toast'; import { StakingCore, CoreEraStakeInfoType, ChainPropertiesType } from '../routes/staking'; import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; @@ -38,7 +37,7 @@ const STAT_UNDERLINE = 'pb-2 border-b border-b-[#2B2C30]'; const ProjectCard = (props: ProjectCardProps) => { const { core, - totalUserStaked, + totalUserStaked: totalStaked, coreInfo, chainProperties, availableBalance, @@ -55,6 +54,7 @@ const ProjectCard = (props: ProjectCardProps) => { const [aggregateStaked, setAggregateStaked] = useState(new BigNumber("0")); const [minStakeReward, setMinStakeReward] = useState(new BigNumber("0")); const [minSupportMet, setMinSupportMet] = useState(false); + const [totalUserStaked, setTotalUserStaked] = useState(new BigNumber("0")); const api = useApi(); const handleReadMore = () => { @@ -113,6 +113,12 @@ const ProjectCard = (props: ProjectCardProps) => { calcMinSupportMet(); }, [minStakeReward, coreInfo?.totalStaked]); + useEffect(() => { + if (totalStaked) { + setTotalUserStaked(totalStaked); + } + }, [totalStaked]); + return (
{
{coreInfo?.totalStaked - ? `${ formatBalance( - coreInfo?.totalStaked.toString(), - { - decimals: 12, - withUnit: false, - forceUnit: "-", - } - ).slice(0, -2) } TNKR` + ? `${ formatNumberShorthand(parseFloat(coreInfo?.totalStaked.toString()) / Math.pow(10, 12)) } TNKR` : '--'}
: null} @@ -207,14 +206,7 @@ const ProjectCard = (props: ProjectCardProps) => {
{totalUserStaked - ? `${ formatBalance( - totalUserStaked.toString(), - { - decimals: 12, - withUnit: false, - forceUnit: "-", - } - ).slice(0, -2) } TNKR` + ? `${ formatNumberShorthand(parseFloat(totalUserStaked.toString()) / Math.pow(10, 12)) } TNKR` : '--'}
@@ -231,14 +223,7 @@ const ProjectCard = (props: ProjectCardProps) => {
{coreInfo?.totalRewards - ? `${ formatBalance( - coreInfo?.totalRewards.toString(), - { - decimals: 12, - withUnit: false, - forceUnit: "-", - } - ).slice(0, -2) } TNKR` + ? `${ formatNumberShorthand(parseFloat(coreInfo?.totalRewards.toString()) / Math.pow(10, 12)) } TNKR` : '--'}
: null} @@ -255,14 +240,7 @@ const ProjectCard = (props: ProjectCardProps) => {
{coreInfo?.totalUnclaimed - ? `${ formatBalance( - coreInfo?.totalUnclaimed.toString(), - { - decimals: 12, - withUnit: false, - forceUnit: "-", - } - ).slice(0, -2) } TNKR` + ? `${ formatNumberShorthand(parseFloat(coreInfo?.totalUnclaimed.toString()) / Math.pow(10, 12)) } TNKR` : '--'}
: null} @@ -297,12 +275,7 @@ const ProjectCard = (props: ProjectCardProps) => {
{coreInfo?.totalStaked && minStakeReward - ? `${ formatNumberShorthand(parseFloat(coreInfo?.totalStaked.toString()) / Math.pow(10, 12)) }/${ formatBalance(minStakeReward.toString(), { - decimals: 12, - withUnit: false, - forceUnit: '-', - withZero: false - }) }` + ? `${ minSupportMet ? '25K' : formatNumberShorthand(parseFloat(coreInfo?.totalStaked.toString()) / Math.pow(10, 12)) }/${ formatNumberShorthand(parseFloat(minStakeReward.toString()) / Math.pow(10, 12)) }` : '--'} TNKR
diff --git a/src/modals/ViewDetails.tsx b/src/modals/ViewDetails.tsx index 689ca08..52c6414 100644 --- a/src/modals/ViewDetails.tsx +++ b/src/modals/ViewDetails.tsx @@ -34,8 +34,6 @@ const ViewDetails = (props: ViewDetailsProps) => { }; }, [metadata]); - console.log('localMetadata', metadata, localMetadata); - if (!localMetadata) return null; const { children } = localMetadata; diff --git a/src/stores/modals.tsx b/src/stores/modals.tsx index e9ce8b2..64837bb 100644 --- a/src/stores/modals.tsx +++ b/src/stores/modals.tsx @@ -37,6 +37,11 @@ const useModal = createWithEqualityFn()((set) => ({ }, closeCurrentModal: () => { set((state) => { + if (!state.openModals || state.openModals.length === 0) { + console.log('No open modals to close'); + return state; + } + const newOpenModals = [...state.openModals]; newOpenModals.pop(); return { openModals: newOpenModals }; diff --git a/src/utils/formatNumber.ts b/src/utils/formatNumber.ts index f3808f7..3af6609 100644 --- a/src/utils/formatNumber.ts +++ b/src/utils/formatNumber.ts @@ -1,9 +1,19 @@ export const formatNumberShorthand = (num: number) => { if (num > 999 && num <= 999999) { - return (num / 1000).toFixed(1) + 'K'; + const formattedNum = (num / 1000).toFixed(1); + // Remove decimal if the 1000th place is a zero + return formattedNum.endsWith('.0') ? `${ formattedNum.slice(0, -2) }K` : `${ formattedNum }K`; } else if (num > 999999) { - return (num / 1000000).toFixed(1) + 'M'; + const formattedNum = (num / 1000000).toFixed(1); + // Remove decimal if the millionth place is a zero + return formattedNum.endsWith('.0') ? `${ formattedNum.slice(0, -2) }M` : `${ formattedNum }M`; } else { - return num.toString(); + let formattedNum = num.toString(); + const decimalIndex = formattedNum.indexOf('.'); + // If the number has more than two decimal places, remove the extra ones + if (decimalIndex !== -1 && formattedNum.length > decimalIndex + 3) { + formattedNum = formattedNum.slice(0, decimalIndex + 3); + } + return formattedNum; } }; \ No newline at end of file