Merge pull request #1167 from alleslabs/fix/voting-powers

fix(components): chart voting power
alleslabs · Oct 21, 2024 · 58ebaad · 58ebaad
1 parent 59a7e5b
commit 58ebaad
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 32 deletions.
diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx
@@ -14,6 +14,7 @@ import {
   formatMMMDD,
   formatUTC,
   formatUTokenWithPrecision,
+  getStakingAssetInfo,
   getTokenLabel,
 } from "lib/utils";
 
@@ -41,9 +42,7 @@ export const VotingPowerChart = ({
   if (isLoading) return <Loading />;
   if (!historicalPowers) return <ErrorFetching dataName="historical powers" />;
 
-  const assetInfo = singleStakingDenom
-    ? assetInfos?.[singleStakingDenom]
-    : undefined;
+  const assetInfo = getStakingAssetInfo(singleStakingDenom, assetInfos);
 
   const currency = singleStakingDenom
     ? `${getTokenLabel(singleStakingDenom, assetInfo?.symbol)}`

diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChartDetails.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChartDetails.tsx
@@ -1,5 +1,6 @@
 import { Flex, Heading, Text } from "@chakra-ui/react";
 import type Big from "big.js";
+import { useMemo } from "react";
 
 import type { HistoricalPowersResponse } from "lib/services/types";
 import { big } from "lib/types";
@@ -36,7 +37,7 @@ export const VotingPowerChartDetails = ({
   const isHistoricalPowersContainsData =
     historicalPowers && historicalPowers.items.length > 0;
 
-  const currentPrice = isHistoricalPowersContainsData
+  const currentVotingPower = isHistoricalPowersContainsData
     ? formatUTokenWithPrecision(
         historicalPowers.items[historicalPowers.items.length - 1]
           .votingPower as U<Token<Big>>,
@@ -46,11 +47,18 @@ export const VotingPowerChartDetails = ({
       )
     : "";
 
-  const compareVotingPower = isHistoricalPowersContainsData
-    ? historicalPowers.items[
-        historicalPowers.items.length - 1
-      ].votingPower.minus(historicalPowers.items[0].votingPower)
-    : big(0);
+  // NOTE: compute 24 hrs voting power change
+  const compareVotingPower = useMemo(() => {
+    if (isHistoricalPowersContainsData) {
+      const presentVotingPower =
+        historicalPowers.items[historicalPowers.items.length - 1].votingPower;
+      const yesterdayVotingPower =
+        historicalPowers.items[historicalPowers.items.length - 25]
+          ?.votingPower ?? big(0);
+      return presentVotingPower.minus(yesterdayVotingPower);
+    }
+    return big(0);
+  }, [historicalPowers.items, isHistoricalPowersContainsData]);
 
   const formattedVotingPower = `${formatArithmetic(compareVotingPower)}${formatUTokenWithPrecision(
     compareVotingPower.abs() as U<Token<Big>>,
@@ -65,7 +73,7 @@ export const VotingPowerChartDetails = ({
         {singleStakingDenom ? "Current Bonded Token" : "Current Voting Powers"}
       </Heading>
       <Heading variant="h5" fontWeight={600}>
-        {currentPrice} {currency}
+        {currentVotingPower} {currency}
       </Heading>
       <Text variant="body1">
         <Text

diff --git a/src/lib/pages/validator-details/components/validator-overview/VotingPowerOverview.tsx b/src/lib/pages/validator-details/components/validator-overview/VotingPowerOverview.tsx
@@ -19,6 +19,7 @@ import {
   formatPrettyPercent,
   formatPrice,
   formatUTokenWithPrecision,
+  getStakingAssetInfo,
   getTokenLabel,
   toToken,
 } from "lib/utils";
@@ -98,9 +99,7 @@ export const VotingPowerOverview = ({
 }: VotingPowerOverviewProps) => {
   const { isFullTier } = useTierConfig();
   const isMobile = useMobile();
-  const assetInfo = singleStakingDenom
-    ? assetInfos?.[singleStakingDenom]
-    : undefined;
+  const assetInfo = getStakingAssetInfo(singleStakingDenom, assetInfos);
 
   const votingPowerPercent = formatPrettyPercent(
     divWithDefault(

diff --git a/src/lib/pages/validators/components/validators-table/ValidatorsTableMobileCard.tsx b/src/lib/pages/validators/components/validators-table/ValidatorsTableMobileCard.tsx
@@ -5,10 +5,10 @@ import { useInternalNavigate } from "lib/app-provider";
 import { MobileCardTemplate, MobileLabel } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
 import type {
+  AssetInfo,
   Option,
   Ratio,
   Token,
-  TokenWithValue,
   U,
   ValidatorData,
 } from "lib/types";
@@ -24,15 +24,15 @@ interface ValidatorsTableMobileCardProps {
   isActive: boolean;
   totalVotingPower: Big;
   minCommissionRate: number;
-  denomToken: Option<TokenWithValue>;
+  assetInfo: Option<AssetInfo>;
   showUptime: boolean;
 }
 export const ValidatorsTableMobileCard = ({
   validator,
   isActive,
   totalVotingPower,
   minCommissionRate,
-  denomToken,
+  assetInfo,
   showUptime,
 }: ValidatorsTableMobileCardProps) => {
   const navigate = useInternalNavigate();
@@ -92,12 +92,12 @@ export const ValidatorsTableMobileCard = ({
               (
               {formatUTokenWithPrecision(
                 validator.votingPower as U<Token<Big>>,
-                denomToken?.precision ?? 0,
+                assetInfo?.precision ?? 0,
                 false,
                 2
               )}
-              {denomToken
-                ? ` ${getTokenLabel(denomToken.denom, denomToken.symbol)}`
+              {assetInfo?.id
+                ? ` ${getTokenLabel(assetInfo.id, assetInfo.symbol)}`
                 : undefined}
               )
             </Text>

diff --git a/src/lib/pages/validators/components/validators-table/ValidatorsTableRow.tsx b/src/lib/pages/validators/components/validators-table/ValidatorsTableRow.tsx
@@ -6,10 +6,10 @@ import { useInternalNavigate } from "lib/app-provider";
 import { TableRow } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
 import type {
+  AssetInfo,
   Option,
   Ratio,
   Token,
-  TokenWithValue,
   U,
   ValidatorAddr,
   ValidatorData,
@@ -27,7 +27,7 @@ interface ValidatorsTableRowProps {
   validator: ValidatorData;
   totalVotingPower: Big;
   minCommissionRate: number;
-  denomToken: Option<TokenWithValue>;
+  assetInfo: Option<AssetInfo>;
   showUptime: boolean;
 }
 
@@ -37,7 +37,7 @@ export const ValidatorsTableRow = ({
   validator,
   totalVotingPower,
   minCommissionRate,
-  denomToken,
+  assetInfo,
   showUptime,
 }: ValidatorsTableRowProps) => {
   const navigate = useInternalNavigate();
@@ -93,12 +93,12 @@ export const ValidatorsTableRow = ({
             (
             {formatUTokenWithPrecision(
               validator.votingPower as U<Token<Big>>,
-              denomToken?.precision ?? 0,
+              assetInfo?.precision ?? 0,
               false,
               2
             )}
-            {denomToken
-              ? ` ${getTokenLabel(denomToken.denom, denomToken.symbol)}`
+            {assetInfo?.id
+              ? ` ${getTokenLabel(assetInfo.id, assetInfo.symbol)}`
               : undefined}
             )
           </Text>

diff --git a/src/lib/pages/validators/components/validators-table/index.tsx b/src/lib/pages/validators/components/validators-table/index.tsx
@@ -11,7 +11,7 @@ import { useAssetInfos } from "lib/services/assetService";
 import { useStakingParamsLcd } from "lib/services/staking";
 import type { ValidatorsResponse } from "lib/services/types";
 import type { Option } from "lib/types";
-import { coinToTokenWithValue } from "lib/utils";
+import { getStakingAssetInfo } from "lib/utils";
 
 import { ValidatorsPercentDivider } from "./ValidatorsPercentDivider";
 import { ValidatorsTableHeader } from "./ValidatorsTableHeader";
@@ -66,9 +66,7 @@ export const ValidatorsTable = ({
     );
 
   const displayDividers = order === ValidatorOrder.VotingPower && isDesc;
-  const denomToken = stakingParams?.bondDenom
-    ? coinToTokenWithValue(stakingParams.bondDenom, "0", assetInfos)
-    : undefined;
+  const assetInfo = getStakingAssetInfo(stakingParams?.bondDenom, assetInfos);
 
   const templateColumns = `${isActive ? "64px " : ""}3fr 2fr ${showUptime ? "110px" : ""} 110px`;
   return (
@@ -82,7 +80,7 @@ export const ValidatorsTable = ({
               validator={validator}
               totalVotingPower={data.metadata.totalVotingPower}
               minCommissionRate={data.metadata.minCommissionRate}
-              denomToken={denomToken}
+              assetInfo={assetInfo}
               showUptime={showUptime}
             />
           ))}
@@ -107,7 +105,7 @@ export const ValidatorsTable = ({
                 validator={validator}
                 totalVotingPower={data.metadata.totalVotingPower}
                 minCommissionRate={data.metadata.minCommissionRate}
-                denomToken={denomToken}
+                assetInfo={assetInfo}
                 showUptime={showUptime}
               />
               {displayDividers &&

diff --git a/src/lib/utils/validator.ts b/src/lib/utils/validator.ts
@@ -1,7 +1,7 @@
 import { Ripemd160, sha256 } from "@cosmjs/crypto";
 import { fromBase64, fromHex, toBech32, toHex } from "@cosmjs/encoding";
 
-import type { ConsensusPubkey } from "lib/types";
+import type { AssetInfo, AssetInfos, ConsensusPubkey, Option } from "lib/types";
 import { zConsensusAddr } from "lib/types";
 
 export const convertRawConsensusAddrToConsensusAddr = (
@@ -30,3 +30,23 @@ export const convertConsensusPubkeyToConsensusAddr = (
 
   return zConsensusAddr.parse("");
 };
+
+export const getStakingAssetInfo = (
+  singleStakingDenom: Option<string>,
+  assetInfos: Option<AssetInfos>
+): Option<AssetInfo> => {
+  if (singleStakingDenom) return assetInfos?.[singleStakingDenom];
+  //  NOTE: divided by 1e6 for initia case
+  return {
+    coingecko: "",
+    description: "",
+    id: "",
+    logo: "",
+    name: "",
+    precision: 6,
+    price: 0,
+    slugs: [],
+    symbol: "",
+    type: "",
+  };
+};