Unify decimal points in number values (#679)

Resolves #678 Made all numbers values have two decimal points (except for integers like population)
tahowallet · Nov 23, 2023 · 6d00573 · 6d00573
2 parents bb53b5e + df4c584
commit 6d00573
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 8 deletions.
diff --git a/src/shared/components/RealmModal/RealmHeader.tsx b/src/shared/components/RealmModal/RealmHeader.tsx
@@ -44,7 +44,7 @@ export default function RealmHeader() {
               Population
             </span>
             <span>
-              {separateThousandsByComma(realm?.displayedPopulation ?? 0)}
+              {separateThousandsByComma(realm?.displayedPopulation ?? 0, 0)}
             </span>
           </div>
           <div className="tag column">

diff --git a/src/shared/utils/numbers.ts b/src/shared/utils/numbers.ts
@@ -8,9 +8,10 @@ export function separateThousandsByComma(
   decimals = 2
 ): string {
   const adjustedValue = typeof value === "string" ? +value : value
+  // @ts-expect-error - `maximumFractionDigits` wants to get number less than 21,
+  // but as the tokens have 18 decimals have, we can safely pass a parameter
   return adjustedValue.toLocaleString("en-US", {
-    // @ts-expect-error - `maximumFractionDigits` wants to get number less than 21,
-    // but as the tokens have 18 decimals have, we can safely pass a parameter
+    minimumFractionDigits: decimals,
     maximumFractionDigits: decimals < 21 ? decimals : 2,
   })
 }
@@ -135,7 +136,7 @@ export function bigIntToDisplayUserAmount(
 ): string {
   const amountBigInt = typeof amount === "string" ? BigInt(amount) : amount
 
-  const parsed = separateThousandsByComma(
+  let parsed = separateThousandsByComma(
     bigIntToUserAmount(amountBigInt, decimals, desiredDecimals),
     desiredDecimals
   )
@@ -144,5 +145,8 @@ export function bigIntToDisplayUserAmount(
     return `<${1 / 10 ** desiredDecimals}`
   }
 
+  // Remove trailing zeros and the decimal point if there are no decimal values left
+  parsed = parsed.replace(/(\.0+|(?<=\.\d+?)0+)$/g, "")
+
   return parsed
 }
diff --git a/src/ui/Footer/PopulationCount.tsx b/src/ui/Footer/PopulationCount.tsx
@@ -36,7 +36,7 @@ export default function PopulationCount() {
           <p>Population</p>
         </div>
         <p style={{ font: "var(--text-h1)" }}>
-          {separateThousandsByComma(population)}
+          {separateThousandsByComma(population, 0)}
         </p>
       </animated.div>
       <style jsx>{`

diff --git a/src/ui/Footer/RealmBar/RealmBarTooltip.tsx b/src/ui/Footer/RealmBar/RealmBarTooltip.tsx
@@ -36,7 +36,7 @@ export default function RealmBarTooltip({
         <div className="tooltip">
           <p className="tooltip_name">{name}</p>
           <p className="tooltip_population">
-            {separateThousandsByComma(population ?? 0)}
+            {separateThousandsByComma(population, 0)}
           </p>
         </div>
       </animated.div>

diff --git a/src/ui/Footer/RealmBar/index.tsx b/src/ui/Footer/RealmBar/index.tsx
@@ -44,7 +44,7 @@ export default function RealmsBar() {
           <div className="row_center" style={{ gap: 4 }}>
             <p style={{ color: "var(--secondary-s1-60)" }}>Total:</p>
             <p className="total_value">
-              {separateThousandsByComma(totalPopulation)}
+              {separateThousandsByComma(totalPopulation, 0)}
             </p>
           </div>
         </div>

diff --git a/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx b/src/ui/Island/RealmDetails/Quests/QuestsDetails.tsx
@@ -58,7 +58,8 @@ export default function QuestsDetails({
               color="var(--primary-p1-100)"
             />
             {separateThousandsByComma(
-              /* realm?.xpAllocatable || */ WEEKLY_XP_ALLOCATION
+              /* realm?.xpAllocatable || */ WEEKLY_XP_ALLOCATION,
+              0
             )}
           </h1>
           {tokenSymbol}