split value by thousand (#122)

domechn · Oct 8, 2023 · 4b64d96 · 4b64d96
1 parent 8492f64
commit 4b64d96
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 26 deletions.
diff --git a/src/components/comparison/index.tsx b/src/components/comparison/index.tsx
@@ -9,7 +9,7 @@ import _ from "lodash";
 import Select from "../common/select";
 import viewIcon from "../../assets/icons/view-icon.png";
 import hideIcon from "../../assets/icons/hide-icon.png";
-import { currencyWrapper } from "../../utils/currency";
+import { currencyWrapper, prettyNumberToLocaleString } from "../../utils/currency";
 import { useWindowSize } from "../../utils/hook";
 import { parseDateToTS } from "../../utils/date";
 
@@ -314,10 +314,7 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
     }
     let res = "" + convertedNumber;
     if (!keepDecimal) {
-      res = convertedNumber.toLocaleString("en-US", {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      });
+      res = prettyNumberToLocaleString(convertedNumber)
     }
     if (convertCurrency) {
       return `${currency.symbol} ${res}`;

diff --git a/src/components/historical-data/index.tsx b/src/components/historical-data/index.tsx
@@ -12,7 +12,10 @@ import "./index.css";
 import { toast } from "react-hot-toast";
 import { LoadingContext } from "../../App";
 import { timestampToDate } from "../../utils/date";
-import { currencyWrapper } from "../../utils/currency";
+import {
+  currencyWrapper,
+  prettyNumberToLocaleString,
+} from "../../utils/currency";
 import Modal from "../common/modal";
 
 type RankData = {
@@ -66,7 +69,9 @@ const App = ({
           <>
             {curData
               ? currency.symbol +
-                currencyWrapper(currency)(curData.value).toFixed(2)
+                prettyNumberToLocaleString(
+                  currencyWrapper(currency)(curData.value)
+                )
               : "-"}
           </>
         );
@@ -169,7 +174,9 @@ const App = ({
               </div>
               <div className="historical-data-card-total">
                 {currency.symbol +
-                  currencyWrapper(currency)(d.total).toFixed(2)}
+                  prettyNumberToLocaleString(
+                    currencyWrapper(currency)(d.total)
+                  )}
               </div>
             </div>
 
@@ -196,9 +203,11 @@ const App = ({
                 {idx < data.length - 1
                   ? getUpOrDown(d.total - data[idx + 1].total) +
                     currency.symbol +
-                    currencyWrapper(currency)(
-                      Math.abs(d.total - data[idx + 1].total)
-                    ).toFixed(2)
+                    prettyNumberToLocaleString(
+                      currencyWrapper(currency)(
+                        Math.abs(d.total - data[idx + 1].total)
+                      )
+                    )
                   : ""}
               </div>
             </div>
@@ -220,7 +229,7 @@ const App = ({
             key={"his-page-" + curPageNum}
             onClick={() => setPageNum(curPageNum)}
             style={{
-              color: curPageNum === pageNum ? "rgb(37, 37, 244)" : "gray",
+              color: curPageNum === pageNum ? "black" : "gray",
               marginRight: 10,
             }}
           >

diff --git a/src/components/total-value/index.tsx b/src/components/total-value/index.tsx
@@ -1,6 +1,9 @@
 import { useEffect, useState } from "react";
 import { CurrencyRateDetail } from "../../middlelayers/types";
-import { currencyWrapper } from "../../utils/currency";
+import {
+  currencyWrapper,
+  prettyNumberToLocaleString,
+} from "../../utils/currency";
 import { useWindowSize } from "../../utils/hook";
 import "./index.css";
 
@@ -32,7 +35,8 @@ const App = ({
 
   function formatTotalValue() {
     return (
-      currency.symbol + currencyWrapper(currency)(data.totalValue).toFixed(2)
+      currency.symbol +
+      prettyNumberToLocaleString(currencyWrapper(currency)(data.totalValue))
     );
   }
 
@@ -47,7 +51,7 @@ const App = ({
     if (val < 0) {
       val = -val;
     }
-    return `${p}${val.toFixed(2)}%`;
+    return `${p}${prettyNumberToLocaleString(val)}%`;
   }
 
   function formatChangeValue() {
@@ -59,7 +63,7 @@ const App = ({
     if (val < 0) {
       val = -val;
     }
-    return p + symbol + val.toFixed(2);
+    return p + symbol + prettyNumberToLocaleString(val);
   }
 
   function fontCount() {
@@ -117,8 +121,10 @@ const App = ({
         style={{
           minHeight: totalValueFontSize(),
         }}
-          onMouseEnter={() => setChangedValueOrPercentage(formatChangeValue())}
-          onMouseLeave={() => setChangedValueOrPercentage(formatChangePercentage()) }
+        onMouseEnter={() => setChangedValueOrPercentage(formatChangeValue())}
+        onMouseLeave={() =>
+          setChangedValueOrPercentage(formatChangePercentage())
+        }
       >
         <span
           className="totalValue"
@@ -138,7 +144,6 @@ const App = ({
             fontSize: changePercentageFontSize(),
           }}
         >
-          {/* {formatChangePercentage()} */}
           {changedValueOrPercentage}
         </span>
       </div>

diff --git a/src/components/wallet-assets-change/index.tsx b/src/components/wallet-assets-change/index.tsx
@@ -3,7 +3,7 @@ import {
   CurrencyRateDetail,
   WalletAssetsChangeData,
 } from "../../middlelayers/types";
-import { currencyWrapper } from "../../utils/currency";
+import { currencyWrapper, prettyNumberToLocaleString } from "../../utils/currency";
 import { useWindowSize } from "../../utils/hook";
 import { insertEllipsis } from "../../utils/string";
 import "./index.css";
@@ -125,7 +125,7 @@ const App = ({
                 >
                   <span className={getChangeClassName(d.changePercentage)}>
                     {getArrow(d.changePercentage)}
-                    {getPositiveValue(d.changePercentage).toFixed(2)}%
+                    {prettyNumberToLocaleString(getPositiveValue(d.changePercentage))}%
                   </span>
                 </td>
                 <td
@@ -137,9 +137,9 @@ const App = ({
                   <span className={getChangeClassName(d.changeValue)}>
                     {getArrow(d.changeValue)}
                     {currency.symbol}
-                    {currencyWrapper(currency)(
-                      getPositiveValue(d.changeValue)
-                    ).toFixed(2)}
+                    {prettyNumberToLocaleString(
+                      currencyWrapper(currency)(getPositiveValue(d.changeValue))
+                    )}
                   </span>
                 </td>
               </tr>

diff --git a/src/components/wallet-assets-percentage/index.tsx b/src/components/wallet-assets-percentage/index.tsx
@@ -4,7 +4,7 @@ import {
   CurrencyRateDetail,
   WalletAssetsPercentageData,
 } from "../../middlelayers/types";
-import { currencyWrapper } from "../../utils/currency";
+import { currencyWrapper, prettyNumberToLocaleString } from "../../utils/currency";
 import _ from "lodash";
 import { useEffect, useState } from "react";
 import { insertEllipsis } from '../../utils/string'
@@ -42,7 +42,7 @@ const App = ({
         align: "top",
         offset: Math.max(0, 15 - _(data).size()),
         formatter: (value: number) => {
-          return `${((value / totalValue) * 100).toFixed(2)}%`;
+          return `${prettyNumberToLocaleString((value / totalValue) * 100)}%`;
         },
       },
     },

diff --git a/src/utils/currency.ts b/src/utils/currency.ts
@@ -5,3 +5,10 @@ export function currencyWrapper(currencyInfo: CurrencyRateDetail) {
 		return valueInUsd * currencyInfo.rate
 	}
 }
+
+export function prettyNumberToLocaleString(value: number) {
+	return value.toLocaleString("en-US", {
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2,
+	})
+}