allow currencyToString function to accept an object with amount, dp, and denom properties

explorer/src/components/MixNodes/BondBreakdown.tsx

@@ -29,21 +29,23 @@ export const BondBreakdownTable: FCWithChildren = () => {
   React.useEffect(() => {
     if (mixNode?.data) {
       // delegations
-      const decimalisedDelegations = currencyToString(
-        mixNode.data.total_delegation.amount.toString(),
-        mixNode.data.total_delegation.denom,
-      );
+      const decimalisedDelegations = currencyToString({
+        amount: mixNode.data.total_delegation.amount.toString(),
+        denom: mixNode.data.total_delegation.denom,
+      });
 
       // pledges
-      const decimalisedPledges = currencyToString(
-        mixNode.data.pledge_amount.amount.toString(),
-        mixNode.data.pledge_amount.denom,
-      );
+      const decimalisedPledges = currencyToString({
+        amount: mixNode.data.pledge_amount.amount.toString(),
+        denom: mixNode.data.pledge_amount.denom,
+      });
 
       // bonds total (del + pledges)
       const pledgesSum = Number(mixNode.data.pledge_amount.amount);
       const delegationsSum = Number(mixNode.data.total_delegation.amount);
-      const bondsTotal = currencyToString((delegationsSum + pledgesSum).toString());
+      const bondsTotal = currencyToString({
+        amount: (pledgesSum + delegationsSum).toString(),
+      });
 
       setBonds({
         delegations: decimalisedDelegations,
@@ -186,12 +188,12 @@ export const BondBreakdownTable: FCWithChildren = () => {
             </TableHead>
 
             <TableBody>
-              {uniqDelegations?.data?.map(({ owner, amount: { amount, denom } }) => (
+              {uniqDelegations?.data?.map(({ owner, amount: { amount } }) => (
                 <TableRow key={owner}>
                   <TableCell sx={isMobile ? { width: 190 } : null} align="left">
                     {owner}
                   </TableCell>
-                  <TableCell align="left">{currencyToString(amount.toString(), denom)}</TableCell>
+                  <TableCell align="left">{currencyToString({ amount: amount.toString() })}</TableCell>
                   <TableCell align="left">{calcBondPercentage(amount)}%</TableCell>
                 </TableRow>
               ))}

explorer/src/components/MixNodes/Economics/Rows.ts

@@ -11,9 +11,13 @@ export const EconomicsInfoRows = (): EconomicsInfoRowWithIndex => {
   const { economicDynamicsStats, mixNode } = useMixnodeContext();
 
   const estimatedNodeRewards =
-    currencyToString((economicDynamicsStats?.data?.estimated_total_node_reward || '').toString()) || '-';
+    currencyToString({
+      amount: economicDynamicsStats?.data?.estimated_total_node_reward.toString() || '',
+    }) || '-';
   const estimatedOperatorRewards =
-    currencyToString((economicDynamicsStats?.data?.estimated_operator_reward || '').toString()) || '-';
+    currencyToString({
+      amount: economicDynamicsStats?.data?.estimated_operator_reward.toString() || '',
+    }) || '-';
   const profitMargin = mixNode?.data?.profit_margin_percent
     ? toPercentIntegerString(mixNode?.data?.profit_margin_percent)
     : '-';

explorer/src/pages/Mixnodes/index.tsx

@@ -142,7 +142,7 @@ export const PageMixnodes: FCWithChildren = () => {
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.mix_id}`}
         >
-          {currencyToString(params.value)}
+          {currencyToString({ amount: params.value, dp: 2 })}
         </MuiLink>
       ),
     },
@@ -187,7 +187,7 @@ export const PageMixnodes: FCWithChildren = () => {
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.mix_id}`}
         >
-          {currencyToString(params.value)}
+          {currencyToString({ amount: params.value, dp: 2 })}
         </MuiLink>
       ),
     },

explorer/src/utils/currency.ts

@@ -4,11 +4,31 @@ import Big from 'big.js';
 const DENOM = process.env.CURRENCY_DENOM || 'unym';
 const DENOM_STAKING = process.env.CURRENCY_STAKING_DENOM || 'unyx';
 
-export const currencyToString = (amount: string, denom: string = DENOM) =>
-  printableCoin({
+export const toDisplay = (val: string | number | Big, dp = 4) => {
+  let displayValue;
+  try {
+    displayValue = Big(val).toFixed(dp);
+  } catch (e: any) {
+    console.warn(`${displayValue} not a valid decimal number: ${e}`);
+  }
+  return displayValue;
+};
+
+export const currencyToString = ({ amount, dp, denom = DENOM }: { amount: string; dp?: number; denom?: string }) => {
+  if (!dp) {
+    printableCoin({
+      amount,
+      denom,
+    });
+  }
+
+  const [printableAmount, printableDenom] = printableCoin({
     amount,
     denom,
-  });
+  }).split(/\s+/);
+
+  return `${toDisplay(printableAmount, dp)} ${printableDenom}`;
+};
 
 export const stakingCurrencyToString = (amount: string, denom: string = DENOM_STAKING) =>
   printableCoin({
@@ -24,15 +44,6 @@ export const stakingCurrencyToString = (amount: string, denom: string = DENOM_ST
  * @param dp - number of decimal places (4 by default ie. 0.0000)
  * @returns A prettyfied decimal number
  */
-export const toDisplay = (val: string | number | Big, dp = 4) => {
-  let displayValue;
-  try {
-    displayValue = Big(val).toFixed(dp);
-  } catch (e: any) {
-    console.warn(`${displayValue} not a valid decimal number: ${e}`);
-  }
-  return displayValue;
-};
 
 /**
  * Converts a decimal number of μNYM (micro NYM) to NYM.