From eb773e63582fa2a92fd419f70f7ff0b0dc2567cf Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Wed, 17 Apr 2024 18:34:06 +0800
Subject: [PATCH] feat: update decimals handling

---
 .../staking/components/modals/staking.tsx     | 19 ++++++++----
 .../staking/components/modals/unstaking.tsx   | 31 +++++++------------
 src/features/staking/lib/formatters.ts        |  2 +-
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/features/staking/components/modals/staking.tsx b/src/features/staking/components/modals/staking.tsx
index e304cba..77223db 100644
--- a/src/features/staking/components/modals/staking.tsx
+++ b/src/features/staking/components/modals/staking.tsx
@@ -23,7 +23,11 @@ import { setModalOpened } from "../../context/reducer";
 import { getTokensAvailableBG } from "../../context/selectors";
 import { getXionCoin } from "../../lib/core/coins";
 import type { StakeAddresses } from "../../lib/core/tx";
-import { formatToSmallDisplay } from "../../lib/formatters";
+import {
+  formatCoin,
+  formatToSmallDisplay,
+  formatXionToUSD,
+} from "../../lib/formatters";
 
 type Step = "completed" | "input" | "review";
 
@@ -215,15 +219,18 @@ const StakingModal = () => {
               </div>
               {availableTokens &&
                 (() => {
-                  const availableUSD = availableTokens.times(xionToUSD);
+                  const availableTokensCoin = {
+                    amount: availableTokens.toString(),
+                    denom: "XION",
+                  };
 
                   return (
                     <div className="mt-[40px] flex w-full flex-col items-center justify-center gap-[12px] uppercase">
                       <Heading8>Available for delegation (XION)</Heading8>
-                      <Heading2>
-                        {formatToSmallDisplay(availableTokens)}
-                      </Heading2>
-                      <Heading8>${formatToSmallDisplay(availableUSD)}</Heading8>
+                      <Heading2>{formatCoin(availableTokensCoin)}</Heading2>
+                      <Heading8>
+                        {formatXionToUSD(availableTokensCoin)}
+                      </Heading8>
                     </div>
                   );
                 })()}
diff --git a/src/features/staking/components/modals/unstaking.tsx b/src/features/staking/components/modals/unstaking.tsx
index 8877c96..1f735f3 100644
--- a/src/features/staking/components/modals/unstaking.tsx
+++ b/src/features/staking/components/modals/unstaking.tsx
@@ -23,7 +23,11 @@ import { setModalOpened } from "../../context/reducer";
 import { getTotalDelegation } from "../../context/selectors";
 import { getXionCoin } from "../../lib/core/coins";
 import type { StakeAddresses } from "../../lib/core/tx";
-import { formatToSmallDisplay, formatXionToUSD } from "../../lib/formatters";
+import {
+  formatCoin,
+  formatToSmallDisplay,
+  formatXionToUSD,
+} from "../../lib/formatters";
 
 type Step = "completed" | "input" | "review";
 
@@ -217,24 +221,13 @@ const UnstakingModal = () => {
                   Unstake From {validator.description.moniker}
                 </HeroText>
               </div>
-              {delegatedTokens &&
-                (() => {
-                  const availableUSD = new BigNumber(
-                    delegatedTokens.amount,
-                  ).times(xionToUSD);
-
-                  return (
-                    <div className="mt-[40px] flex w-full flex-col items-center justify-center gap-[12px] uppercase">
-                      <Heading8>Available amount (XION)</Heading8>
-                      <Heading2>
-                        {formatToSmallDisplay(
-                          new BigNumber(delegatedTokens.amount),
-                        )}
-                      </Heading2>
-                      <Heading8>${formatToSmallDisplay(availableUSD)}</Heading8>
-                    </div>
-                  );
-                })()}
+              {delegatedTokens && (
+                <div className="mt-[40px] flex w-full flex-col items-center justify-center gap-[12px] uppercase">
+                  <Heading8>Available amount (XION)</Heading8>
+                  <Heading2>{formatCoin(delegatedTokens)}</Heading2>
+                  <Heading8>{formatXionToUSD(delegatedTokens)}</Heading8>
+                </div>
+              )}
               <div className="mt-[40px] flex w-full flex-row justify-between">
                 <div>Amount</div>
                 {!!amountUSD && (
diff --git a/src/features/staking/lib/formatters.ts b/src/features/staking/lib/formatters.ts
index 707295a..ee2e8c9 100644
--- a/src/features/staking/lib/formatters.ts
+++ b/src/features/staking/lib/formatters.ts
@@ -25,7 +25,7 @@ export const formatCoin = (coin: Coin, compact?: boolean) => {
     return `${formatter.format(amount.toNumber())} ${resolved.denom}`;
   }
 
-  return `${amount.toFormat(minDisplayedXionDecs)} ${resolved.denom}`;
+  return `${amount.toFormat(Math.min(minDisplayedXionDecs, amount.decimalPlaces() || Infinity))} ${resolved.denom}`;
 };
 
 export const formatVotingPowerPerc = (perc: null | number) => {