From 92ff333cdcab7f686a75394a65bf3bf5b77a167b Mon Sep 17 00:00:00 2001
From: Fred Liebenberg <fliebenberg@gmail.com>
Date: Mon, 16 Oct 2023 10:58:31 +0200
Subject: [PATCH] save locale separators to store

---
 src/app/layout.tsx       |  9 +++++++++
 src/app/redux/store.ts   |  2 ++
 src/app/redux/uiSlice.ts | 26 ++++++++++++++++++++++++++
 src/app/utils.ts         | 21 ++++++++++++++++++---
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 src/app/redux/uiSlice.ts

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 74df0cc0..4f9095f3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,6 +8,8 @@ import { Navbar } from "./components/NavBar";
 import { store } from "./redux/store";
 import { Provider } from "react-redux";
 import { usePathname } from "next/navigation";
+import { getLocaleSeparators } from "utils";
+import { uiSlice } from "redux/uiSlice";
 
 export default function RootLayout({
   children,
@@ -18,6 +20,13 @@ export default function RootLayout({
 
   useEffect(() => {
     initializeSubscriptions(store);
+    let separators = getLocaleSeparators();
+    store.dispatch(
+      uiSlice.actions.setDecimalSeparator(separators.decimalSeparator)
+    );
+    store.dispatch(
+      uiSlice.actions.setThousandsSeparator(separators.thousandsSeparator)
+    );
     return () => {
       unsubscribeAll();
     };
diff --git a/src/app/redux/store.ts b/src/app/redux/store.ts
index 0fa6463e..fe1cf221 100644
--- a/src/app/redux/store.ts
+++ b/src/app/redux/store.ts
@@ -6,9 +6,11 @@ import { priceChartSlice } from "./priceChartSlice";
 import { accountHistorySlice } from "./accountHistorySlice";
 import { radixSlice } from "./radixSlice";
 import { priceInfoSlice } from "./priceInfoSlice";
+import { uiSlice } from "./uiSlice";
 
 export const store = configureStore({
   reducer: {
+    ui: uiSlice.reducer,
     radix: radixSlice.reducer,
     pairSelector: pairSelectorSlice.reducer,
     orderInput: orderInputSlice.reducer,
diff --git a/src/app/redux/uiSlice.ts b/src/app/redux/uiSlice.ts
new file mode 100644
index 00000000..f209abb4
--- /dev/null
+++ b/src/app/redux/uiSlice.ts
@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface UiState {
+  decimalSeparator: string;
+  thousandsSeparator: string;
+}
+
+const initialState: UiState = {
+  decimalSeparator: ".",
+  thousandsSeparator: " ",
+};
+
+export const uiSlice = createSlice({
+  name: "ui",
+  initialState,
+
+  // synchronous reducers
+  reducers: {
+    setDecimalSeparator: (state: UiState, action: PayloadAction<string>) => {
+      state.decimalSeparator = action.payload;
+    },
+    setThousandsSeparator: (state: UiState, action: PayloadAction<string>) => {
+      state.thousandsSeparator = action.payload;
+    },
+  },
+});
diff --git a/src/app/utils.ts b/src/app/utils.ts
index ee6d49e1..29154768 100644
--- a/src/app/utils.ts
+++ b/src/app/utils.ts
@@ -1,4 +1,4 @@
-// utiluty function to display numbers in a fixed format
+import { store } from "redux/store";
 
 export function displayPositiveNumber(x: number, decimals: number): string {
   // the same as with displayNumber, but if the number is negative, it will return empty string
@@ -9,11 +9,26 @@ export function displayPositiveNumber(x: number, decimals: number): string {
   }
 }
 
+export function getLocaleSeparators(): {
+  decimalSeparator: string;
+  thousandsSeparator: string;
+} {
+  let decimalSeparator = Number(1.1).toLocaleString().substring(1, 2);
+  let thousandsSeparator = Number(10000).toLocaleString().substring(2, 3);
+  if (thousandsSeparator == "0") {
+    thousandsSeparator = "";
+  }
+  return {
+    decimalSeparator,
+    thousandsSeparator,
+  };
+}
+
 export function displayAmount(
   x: number,
   noDigits: number = 6,
-  decimalSeparator: string = ".",
-  thousandsSeparator: string = " ",
+  decimalSeparator: string = store.getState().ui.decimalSeparator,
+  thousandsSeparator: string = store.getState().ui.thousandsSeparator,
   fixedDecimals: number = -1
 ): string {
   if (noDigits < 4) {