added total staked count and percent

DA0-DA0 · Oct 8, 2024 · 6ba0e0e · 6ba0e0e
1 parent 303b6b3
commit 6ba0e0e
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 45 deletions.
diff --git a/packages/stateful/hooks/useMembership.ts b/packages/stateful/hooks/useMembership.ts
@@ -1,3 +1,4 @@
+import { HugeDecimal } from '@dao-dao/math'
 import { DaoSource, LoadingDataWithError } from '@dao-dao/types'
 
 import { useQueryLoadingDataWithError } from './query/useQueryLoadingDataWithError'
@@ -35,12 +36,12 @@ interface UseMembershipResponse {
    * The current wallet voting weight in the DAO. Will be undefined until it
    * successfully loads.
    */
-  walletVotingWeight: number | undefined
+  walletVotingWeight: HugeDecimal | undefined
   /**
    * The current wallet voting weight in the DAO. Will be undefined until it
    * successfully loads.
    */
-  totalVotingWeight: number | undefined
+  totalVotingWeight: HugeDecimal | undefined
 }
 
 export const useMembership = ({
@@ -76,19 +77,17 @@ export const useMembership = ({
   useOnSecretNetworkPermitUpdate()
 
   const walletVotingWeight =
-    !_walletVotingWeight.loading &&
-    !_walletVotingWeight.errored &&
-    !isNaN(Number(_walletVotingWeight.data.power))
-      ? Number(_walletVotingWeight.data.power)
+    !_walletVotingWeight.loading && !_walletVotingWeight.errored
+      ? HugeDecimal.from(_walletVotingWeight.data.power)
       : undefined
   const totalVotingWeight =
-    !_totalVotingWeight.loading &&
-    !_totalVotingWeight.errored &&
-    !isNaN(Number(_totalVotingWeight.data.power))
-      ? Number(_totalVotingWeight.data.power)
+    !_totalVotingWeight.loading && !_totalVotingWeight.errored
+      ? HugeDecimal.from(_totalVotingWeight.data.power)
       : undefined
   const isMember =
-    walletVotingWeight !== undefined ? walletVotingWeight > 0 : undefined
+    walletVotingWeight !== undefined
+      ? walletVotingWeight.isPositive()
+      : undefined
 
   return {
     loading:
@@ -101,9 +100,7 @@ export const useMembership = ({
         : {
             loading: false,
             errored: false,
-            data:
-              !isNaN(Number(_walletVotingWeight.data.power)) &&
-              Number(_walletVotingWeight.data.power) > 0,
+            data: isMember ?? false,
           },
     isMember,
     walletVotingWeight,

diff --git a/...stateful/voting-module-adapter/adapters/DaoVotingCw20Staked/hooks/useMainDaoInfoCards.tsx b/...stateful/voting-module-adapter/adapters/DaoVotingCw20Staked/hooks/useMainDaoInfoCards.tsx
@@ -1,7 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
-import { HugeDecimal } from '@dao-dao/math'
 import { indexerQueries } from '@dao-dao/state'
 import { TokenAmountDisplay, useVotingModule } from '@dao-dao/stateless'
 import { DaoInfoCard } from '@dao-dao/types'
@@ -11,16 +10,21 @@ import {
   isSecretNetwork,
 } from '@dao-dao/utils'
 
-import { useMembership, useQueryLoadingDataWithError } from '../../../../hooks'
+import { useQueryLoadingDataWithError } from '../../../../hooks'
 import { useGovernanceTokenInfo } from './useGovernanceTokenInfo'
 import { useStakingInfo } from './useStakingInfo'
 
 export const useMainDaoInfoCards = (): DaoInfoCard[] => {
   const { t } = useTranslation()
   const votingModule = useVotingModule()
-  const { totalVotingWeight } = useMembership()
 
-  const { unstakingDuration } = useStakingInfo()
+  const { loadingTotalStakedValue, unstakingDuration } = useStakingInfo({
+    fetchTotalStakedValue: true,
+  })
+
+  if (loadingTotalStakedValue === undefined) {
+    throw new Error(t('error.loadingData'))
+  }
 
   const {
     governanceToken: { decimals, symbol },
@@ -71,16 +75,21 @@ export const useMainDaoInfoCards = (): DaoInfoCard[] => {
       tooltip: t('info.totalStakedTooltip', {
         tokenSymbol: symbol,
       }),
-      loading: totalVotingWeight === undefined,
-      value:
-        totalVotingWeight === undefined
-          ? undefined
-          : formatPercentOf100(
-              HugeDecimal.from(totalVotingWeight)
-                .div(HugeDecimal.fromHumanReadable(supply, decimals))
-                .times(100)
-                .toNumber()
-            ),
+      value: (
+        <TokenAmountDisplay
+          amount={loadingTotalStakedValue}
+          decimals={decimals}
+          suffix={
+            loadingTotalStakedValue.loading
+              ? undefined
+              : ` (${formatPercentOf100(
+                  loadingTotalStakedValue.data.div(supply).times(100).toNumber()
+                )})`
+          }
+          suffixClassName="text-text-secondary"
+          symbol={symbol}
+        />
+      ),
     },
     {
       label: t('title.unstakingPeriod'),

diff --git a/packages/stateful/voting-module-adapter/adapters/DaoVotingCw4/components/MembersTab.tsx b/packages/stateful/voting-module-adapter/adapters/DaoVotingCw4/components/MembersTab.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next'
 
+import { HugeDecimal } from '@dao-dao/math'
 import {
   MembersTab as StatelessMembersTab,
   useDaoNavHelpers,
@@ -49,7 +50,10 @@ export const MembersTab = () => {
                   ? { loading: true }
                   : {
                       loading: false,
-                      data: (weight / totalVotingWeight) * 100,
+                      data: HugeDecimal.from(weight)
+                        .div(totalVotingWeight)
+                        .times(100)
+                        .toNumber(),
                     },
             })) || [],
         }

diff --git a/...ul/voting-module-adapter/adapters/DaoVotingCw4/components/ProfileCardMemberInfo/index.tsx b/...ul/voting-module-adapter/adapters/DaoVotingCw4/components/ProfileCardMemberInfo/index.tsx
@@ -21,7 +21,10 @@ export const ProfileCardMemberInfo = ({
           ? { loading: true }
           : {
               loading: false,
-              data: (walletVotingWeight / totalVotingWeight) * 100,
+              data: walletVotingWeight
+                .div(totalVotingWeight)
+                .times(100)
+                .toNumber(),
             }
       }
     />

diff --git a/...tateful/voting-module-adapter/adapters/DaoVotingCw721Staked/hooks/useMainDaoInfoCards.tsx b/...tateful/voting-module-adapter/adapters/DaoVotingCw721Staked/hooks/useMainDaoInfoCards.tsx
@@ -68,11 +68,24 @@ export const useMainDaoInfoCards = (): DaoInfoCard[] => {
       tooltip: t('info.totalStakedTooltip', {
         tokenSymbol: symbol,
       }),
-      value: loadingTotalStakedValue.loading
-        ? '...'
-        : formatPercentOf100(
-            loadingTotalStakedValue.data.div(totalSupply).times(100).toNumber()
-          ),
+      value: (
+        <TokenAmountDisplay
+          amount={loadingTotalStakedValue}
+          decimals={0}
+          suffix={
+            loadingTotalStakedValue.loading
+              ? undefined
+              : ` (${formatPercentOf100(
+                  loadingTotalStakedValue.data
+                    .div(totalSupply)
+                    .times(100)
+                    .toNumber()
+                )})`
+          }
+          suffixClassName="text-text-secondary"
+          symbol={symbol}
+        />
+      ),
     },
     {
       label: t('title.unstakingPeriod'),

diff --git a/...stateful/voting-module-adapter/adapters/DaoVotingOnftStaked/hooks/useMainDaoInfoCards.tsx b/...stateful/voting-module-adapter/adapters/DaoVotingOnftStaked/hooks/useMainDaoInfoCards.tsx
@@ -62,11 +62,24 @@ export const useMainDaoInfoCards = (): DaoInfoCard[] => {
       tooltip: t('info.totalStakedTooltip', {
         tokenSymbol: symbol,
       }),
-      value: loadingTotalStakedValue.loading
-        ? '...'
-        : formatPercentOf100(
-            loadingTotalStakedValue.data.div(totalSupply).times(100).toNumber()
-          ),
+      value: (
+        <TokenAmountDisplay
+          amount={loadingTotalStakedValue}
+          decimals={0}
+          suffix={
+            loadingTotalStakedValue.loading
+              ? undefined
+              : ` (${formatPercentOf100(
+                  loadingTotalStakedValue.data
+                    .div(totalSupply)
+                    .times(100)
+                    .toNumber()
+                )})`
+          }
+          suffixClassName="text-text-secondary"
+          symbol={symbol}
+        />
+      ),
     },
     {
       label: t('title.unstakingPeriod'),

diff --git a/...tateful/voting-module-adapter/adapters/DaoVotingTokenStaked/hooks/useMainDaoInfoCards.tsx b/...tateful/voting-module-adapter/adapters/DaoVotingTokenStaked/hooks/useMainDaoInfoCards.tsx
@@ -1,12 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
-import { HugeDecimal } from '@dao-dao/math'
 import { indexerQueries } from '@dao-dao/state'
 import { TokenAmountDisplay, useVotingModule } from '@dao-dao/stateless'
 import { DaoInfoCard } from '@dao-dao/types'
 import {
   convertDurationToHumanReadableString,
+  formatPercentOf100,
   isSecretNetwork,
 } from '@dao-dao/utils'
 
@@ -80,12 +80,16 @@ export const useMainDaoInfoCards = (): DaoInfoCard[] => {
       }),
       value: (
         <TokenAmountDisplay
-          amount={
+          amount={loadingTotalStakedValue}
+          decimals={decimals}
+          suffix={
             loadingTotalStakedValue.loading
-              ? { loading: true }
-              : HugeDecimal.from(loadingTotalStakedValue.data)
+              ? undefined
+              : ` (${formatPercentOf100(
+                  loadingTotalStakedValue.data.div(supply).times(100).toNumber()
+                )})`
           }
-          decimals={decimals}
+          suffixClassName="text-text-secondary"
           symbol={symbol}
         />
       ),