chore: tweak decimals used in overview

forbole · Apr 19, 2024 · 208e4ab · 208e4ab
1 parent 82d6f27
commit 208e4ab
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -6,8 +6,8 @@ export const isTestnet = true;
 
 export const dashboardUrl = undefined;
 
-// export const rpcEndpoint = "https://rpc.xion-testnet-1.burnt.com:443";
-export const rpcEndpoint = "https://rpc.xion-testnet.forbole.com";
+export const rpcEndpoint = "https://rpc.xion-testnet-1.burnt.com:443";
+// export const rpcEndpoint = "https://rpc.xion-testnet.forbole.com";
 
 // This only exists on testnet.
 export const faucetContractAddress =

diff --git a/src/features/staking/components/staking-overview.tsx b/src/features/staking/components/staking-overview.tsx
@@ -2,7 +2,7 @@ import { useAbstraxionAccount, useModal } from "@burnt-labs/abstraxion";
 import BigNumber from "bignumber.js";
 import { memo } from "react";
 
-import { basePath, minDisplayedXion } from "@/constants";
+import { basePath } from "@/constants";
 import {
   BodyMedium,
   Button,
@@ -96,12 +96,9 @@ const StakingOverview = () => {
     >
       <div className={columnStyle}>
         <Heading8>Claimable Rewards (XION)</Heading8>
-        <div className="flex flex-row items-center gap-4">
+        <div className="flex flex-row flex-wrap items-center gap-4">
           <Heading2 title={[totalRewards.amount, "XION"].join(" ")}>
-            {formatToSmallDisplay(
-              new BigNumber(totalRewards.amount),
-              minDisplayedXion,
-            )}
+            {formatToSmallDisplay(new BigNumber(totalRewards.amount), 0.001, 3)}
           </Heading2>
           {getCanClaimAnyRewards(staking.state) && (
             <ButtonPill
@@ -133,7 +130,8 @@ const StakingOverview = () => {
         <Heading2 title={formatCoin(totalDelegation)}>
           {formatToSmallDisplay(
             new BigNumber(totalDelegation.amount),
-            minDisplayedXion,
+            undefined,
+            2,
           )}
         </Heading2>
         <BodyMedium>{formatXionToUSD(totalDelegation)}</BodyMedium>

diff --git a/src/features/staking/lib/formatters.ts b/src/features/staking/lib/formatters.ts
@@ -43,11 +43,19 @@ export const formatVotingPowerPerc = (perc: null | number) => {
   return `${percNum}%`;
 };
 
-export const formatToSmallDisplay = (num: BigNumber, minNumber?: number) => {
+export const formatToSmallDisplay = (
+  num: BigNumber,
+  minNumber?: number,
+  maxDecimals?: number,
+) => {
   if (minNumber && num.lt(minNumber)) {
     return `<${minNumber}`;
   }
 
+  if (maxDecimals) {
+    return num.toFormat(Math.min(maxDecimals, num.decimalPlaces() || Infinity));
+  }
+
   return Intl.NumberFormat("en", { notation: "compact" }).format(
     num.toNumber(),
   );