Merge pull request #74 from agoric-labs/rs-decimal-places-homepage

chore: use decimal places with token values on the home page

src/pages/InterProtocol.tsx

@@ -7,16 +7,21 @@ import { ValueCardGrid } from '@/components/ValueCardGrid';
 import { PageHeader } from '@/components/PageHeader';
 import { PageContent } from '@/components/PageContent';
 import { colors } from '@/components/palette';
-import { formatPercent, roundPrice, formatPrice, formatIST, subQueryFetcher, fetchDataFromUrl } from '@/utils';
-import { INTER_DASHBOARD_QUERY } from '@/queries';
 import {
-  GET_INTERCHAIN_BALANCES_URL,
-} from '@/constants';
+  formatPercent,
+  roundPrice,
+  formatPrice,
+  formatIST,
+  subQueryFetcher,
+  fetchDataFromUrl,
+  getTokenDivisor,
+} from '@/utils';
+import { INTER_DASHBOARD_QUERY } from '@/queries';
+import { GET_INTERCHAIN_BALANCES_URL } from '@/constants';
 import InterProtocolSkeleton from '@/components/InterProtocolSkeleton';
 import { AccountData, InterProtocolResponse } from '@/types/interprotocol-types';
 import { OraclePriceNode } from '@/types/vault-types';
 
-
 const RADIAN = Math.PI / 180;
 
 const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, payload }: any) => {
@@ -36,7 +41,6 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, per
   );
 };
 
-
 function getInterchainBalance(data: AccountData[]): number {
   const balanceList = data
     .map((account) => ({
@@ -76,43 +80,62 @@ export function InterProtocol() {
     {},
   );
 
-  const boardAuxes: { [key: string]: number } = dashboardResponse.boardAuxes.nodes.reduce(
-    (agg, node) => ({ ...agg, [node.allegedName]: node.decimalPlaces }),
+  const boardAuxes: { [key: string]: number } = dashboardResponse?.boardAuxes?.nodes?.reduce(
+    (agg, node) => ({ ...agg, [node?.allegedName]: node?.decimalPlaces }),
     {},
   );
 
+  const istTokenDivisor = getTokenDivisor(boardAuxes, 'IST');
+
   const psmMinted =
-  dashboardResponse.psmMetrics.nodes.reduce((agg, node) => agg + Number(node.mintedPoolBalance), 0) / 1_000_000;
-  const psmAnchor = dashboardResponse.psmMetrics.nodes.reduce(
-    (agg, node) => agg + Number(node.anchorPoolBalance) / 10 ** (boardAuxes[node.denom] || 6),
-    0,
-  );
-  const vaultMinted =
-  dashboardResponse.vaultManagerMetrics.nodes.reduce((agg, node) => agg + Number(node.totalDebt), 0) / 1_000_000;
+    dashboardResponse?.psmMetrics?.nodes?.reduce((agg, node) => agg + Number(node?.mintedPoolBalance), 0) /
+    istTokenDivisor;
+
+  const psmAnchor = dashboardResponse.psmMetrics.nodes.reduce((agg, node) => {
+    const tokenDivisor = getTokenDivisor(boardAuxes, node?.denom);
+    const anchorPoolBalance = Number(node?.anchorPoolBalance) / tokenDivisor;
+    return agg + anchorPoolBalance;
+  }, 0);
+
+  const vaultMinted = dashboardResponse.vaultManagerMetrics.nodes.reduce((agg, node) => {
+    const tokenDivisor = getTokenDivisor(boardAuxes, node?.liquidatingCollateralBrand);
+    return agg + Number(node?.totalDebt) / tokenDivisor;
+  }, 0);
+
   const totalMinted = psmMinted + vaultMinted;
 
   const vaultMintLimit =
-  dashboardResponse.vaultManagerGovernances.nodes.reduce((agg, node) => agg + Number(node.debtLimit), 0) / 1_000_000;
-  const psmMintLimit = dashboardResponse.psmGovernances.nodes.reduce((agg, node) => agg + Number(node.mintLimit), 0) / 1_000_000;
+    dashboardResponse?.vaultManagerGovernances?.nodes?.reduce((agg, node) => agg + Number(node?.debtLimit), 0) /
+    istTokenDivisor;
+
+  const psmMintLimit =
+    dashboardResponse?.psmGovernances?.nodes?.reduce((agg, node) => agg + Number(node?.mintLimit), 0) / istTokenDivisor;
+
   const totalMintLimit = vaultMintLimit + psmMintLimit;
 
   // bottom cards
   const totalReserve = dashboardResponse.reserveMetrics.nodes.reduce(
     (agg, node) =>
       agg +
-      node.allocations.nodes.reduce((agg_, node_) => {
+      node?.allocations?.nodes.reduce((agg_, node_) => {
+        const tokenDivisor = getTokenDivisor(boardAuxes, node_?.denom);
         const allocationInUsd =
-          ((Number(node_.value) / 1_000_000) * Number(oraclePrices[node_.denom]?.typeOutAmount || 1_000_000)) / 1_000_000;
+          ((Number(node_?.value) / tokenDivisor) * Number(oraclePrices[node_?.denom]?.typeOutAmount || tokenDivisor)) /
+          tokenDivisor;
         return agg_ + allocationInUsd;
       }, 0),
     0,
   );
   const reserveShortfall =
-  dashboardResponse.reserveMetrics.nodes.reduce((agg, node) => agg + Number(node.shortfallBalance), 0) / 1_000_000;
-  const totalLockedCollateral = dashboardResponse.vaultManagerMetrics.nodes.reduce((agg, node) => {
+    dashboardResponse?.reserveMetrics?.nodes?.reduce((agg, node) => agg + Number(node?.shortfallBalance), 0) /
+    istTokenDivisor;
+  const totalLockedCollateral = dashboardResponse?.vaultManagerMetrics?.nodes?.reduce((agg, node) => {
+    const tokenDivisor = getTokenDivisor(boardAuxes, node?.liquidatingCollateralBrand);
+
     const collateralInUsd =
-      ((Number(node.totalCollateral) / 1_000_000) *
-        Number(oraclePrices[node.liquidatingCollateralBrand]?.typeOutAmount) || 0) / 1_000_000;
+      ((Number(node?.totalCollateral) / tokenDivisor) *
+        Number(oraclePrices[node?.liquidatingCollateralBrand]?.typeOutAmount) || 1) /
+      Number(oraclePrices[node?.liquidatingCollateralBrand]?.typeInAmount || 1);
     return agg + collateralInUsd;
   }, 0);
 

src/utils.tsx

@@ -184,13 +184,11 @@ export const getDateKey = (date: Date, daysToSubtract: number = 0) => {
   dateObject.setDate(dateObject.getDate() - daysToSubtract);
   const startDateFormatDate = dateObject.toISOString().slice(0, 10);
   const startDateKey = Number(startDateFormatDate.replaceAll('-', ''));
-  return {key: startDateKey, formattedDate: startDateFormatDate};
-}
+  return { key: startDateKey, formattedDate: startDateFormatDate };
+};
 
 export const range = (stop: number) => [...Object(Array(stop)).keys()];
 
-
-
 const fillMissingDays = (startDate: Date, endDate: Date, formattedData: FormattedGraphData[]): void => {
   const timeDifferenceInMilliseconds = endDate.getTime() - startDate.getTime();
   const daysDifference = Math.ceil(timeDifferenceInMilliseconds / (1000 * 60 * 60 * 24));
@@ -205,7 +203,10 @@ const fillMissingDays = (startDate: Date, endDate: Date, formattedData: Formatte
     }
   }
 };
-export const populateMissingDays = (graphDataMap: Record<string, GraphData>, GRAPH_DAYS: number): FormattedGraphData[] => {
+export const populateMissingDays = (
+  graphDataMap: Record<string, GraphData>,
+  GRAPH_DAYS: number,
+): FormattedGraphData[] => {
   const sortedGraphDataList = Object.values(graphDataMap).sort((a, b) => a.key - b.key);
 
   const formattedData: FormattedGraphData[] = [];
@@ -248,4 +249,20 @@ export function createNumberWithLeadingZeroes(numOfZeroes: number) {
   }
 }
 
-export const parseBigInt = (str: string) => Number(str.slice(0, -1))
+export const parseBigInt = (str: string) => Number(str.slice(0, -1));
+
+/**
+ * The function computes the token divisor for a given token name.
+ *
+ * If boardAuxes is falsy (null or undefined), the function returns a NaN value
+ * to reflect anomalies in the data on the UI.
+ *
+ */
+export const getTokenDivisor = (boardAuxes: { [key: string]: number } | null, tokenName: string): number => {
+  if (!boardAuxes) {
+    return NaN;
+  }
+
+  const decimalPlaces = boardAuxes[tokenName] ?? 6;
+  return createNumberWithLeadingZeroes(decimalPlaces);
+};