chore: use decimal places on reserve page

src/pages/Reserve.tsx

@@ -23,6 +23,10 @@ export const Reserve = () => {
   const oraclePrices: { [key: string]: OraclePriceNode } =
     response?.oraclePrices?.nodes?.reduce((agg, node) => ({ ...agg, [node.typeInName]: node }), {}) || {};
 
+  const boardAuxes: { [key: string]: number } = response?.boardAuxes?.nodes?.reduce(
+    (agg, node) => ({ ...agg, [node.allegedName]: node.decimalPlaces }),
+    {},
+  );
   // TODO: make the fallback implementation in this section of code more readable
   const reserveDashboardQueryData: ReserveDashboardData =
     response?.reserveMetrics?.nodes?.map((vaultNode) => ({
@@ -66,9 +70,10 @@ export const Reserve = () => {
       <PageHeader title="Reserve Assets" />
       <PageContent>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <ReserveSummary data={reserveDashboardQueryData} isLoading={isLoading} />
+          <ReserveSummary data={reserveDashboardQueryData} boardAuxes={boardAuxes} isLoading={isLoading} />
           <ReserveCosmosSummary
             reserveAddress={reserveAddress}
+            boardAuxes={boardAuxes}
             isLoading={moduleAccountsLoading}
             error={moduleAccountsError}
           />

src/queries.ts

@@ -160,6 +160,12 @@ query {
             typeOutAmount
         }
     }
+    boardAuxes {
+        nodes {
+            allegedName
+            decimalPlaces
+        }
+    }
 }`
 
 

src/types/reserve-types.ts

@@ -25,9 +25,11 @@ export type ReserveMetricsNode = {
   allocations: { nodes: Array<AllocationsNode> };
   shortfallBalance: number;
 };
+export type BoardAuxesNode = { allegedName: string; decimalPlaces: number };
 export type ReserveDashboardResponse = {
   oraclePrices: { nodes: Array<OraclePriceNode> };
   reserveMetrics: { nodes: Array<ReserveMetricsNode> };
+  boardAuxes: { nodes: Array<BoardAuxesNode> };
 };
 export type ReserveDashboardData = Array<{
   shortfallBalance: number;

src/utils.tsx

@@ -249,3 +249,9 @@ export function createNumberWithLeadingZeroes(numOfZeroes: number) {
 }
 
 export const parseBigInt = (str: string) => Number(str.slice(0, -1))
+
+export const getTokenDivisor = (boardAuxes: { [key: string]: number }, tokenName: string) => {
+  const decimalPlaces = (boardAuxes && boardAuxes[tokenName]) || 6;
+  const tokenDivisor = createNumberWithLeadingZeroes(decimalPlaces);
+  return tokenDivisor;
+};

src/widgets/ReserveCosmosSummary.tsx

@@ -1,6 +1,6 @@
 import { ValueCard } from '@/components/ValueCard';
 import { GET_ACCOUNT_BALANCE_URL, UIST_DENOMINATION } from '@/constants';
-import { fetchDataFromUrl, formatPrice } from '@/utils';
+import { fetchDataFromUrl, formatPrice, getTokenDivisor } from '@/utils';
 import { AxiosResponse, AxiosError } from 'axios';
 import useSWR from 'swr';
 import DataStatus from '@/components/DataStatus';
@@ -10,9 +10,16 @@ type Props = {
   isLoading: boolean;
   error: any;
   reserveAddress: string;
+  boardAuxes: { [key: string]: number };
 };
 
-export function ReserveCosmosSummary({ title = 'Cosmos Reserve', isLoading, reserveAddress, error }: Props) {
+export function ReserveCosmosSummary({
+  title = 'Cosmos Reserve',
+  boardAuxes,
+  isLoading,
+  reserveAddress,
+  error,
+}: Props) {
   if (isLoading || error || !reserveAddress) {
     const errorMessage = !reserveAddress && 'Oops! Unable to show Cosmos Reserve';
 
@@ -34,7 +41,9 @@ export function ReserveCosmosSummary({ title = 'Cosmos Reserve', isLoading, rese
   const istReserve: { amount: number } = reserveBalance?.data?.balances?.find(
     (balance: { denom: string }) => balance.denom === UIST_DENOMINATION,
   );
-  const istReserveBalance = (istReserve?.amount || 0) / 1_000_000;
+
+  const istDivisor = getTokenDivisor(boardAuxes, 'IST');
+  const istReserveBalance = (istReserve?.amount || 0) / istDivisor;
 
   return <ValueCard title={title} value={formatPrice(istReserveBalance)} />;
 }

src/widgets/ReserveSummary.tsx

@@ -1,23 +1,26 @@
 import { Skeleton } from '@/components/ui/skeleton';
 import { ValueCard } from '@/components/ValueCard';
 import { ReserveDashboardData } from '@/types/reserve-types';
-import { formatPrice } from '@/utils';
+import { formatPrice, getTokenDivisor } from '@/utils';
 
 type Props = {
   title?: string;
   data: ReserveDashboardData;
+  boardAuxes: { [key: string]: number };
   isLoading: boolean;
 };
 
-export function ReserveSummary({ title = 'Total Reserve Assets', data, isLoading }: Props) {
+export function ReserveSummary({ title = 'Total Reserve Assets', data, boardAuxes, isLoading }: Props) {
   if (isLoading || !data) {
     return <ValueCard title={title} value={<Skeleton className="w-[100px] h-[32px] rounded-full" />} />;
   }
   const totalReserve = data.reduce(
     (agg, node) =>
       agg +
       Object.values(node.allocations).reduce((agg_, node_) => {
-        const allocationInUsd = ((Number(node_.value) / 1_000_000) * Number(node_.typeOutAmount || 1_000_000)) / 1_000_000;
+        const tokenDivisor = getTokenDivisor(boardAuxes, node_.denom);
+        const allocationInUsd =
+          ((Number(node_.value) / tokenDivisor) * Number(node_.typeOutAmount || tokenDivisor)) / tokenDivisor;
         return agg_ + allocationInUsd;
       }, 0),
     0,