save locale separators to store

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();
     };

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,

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;
+    },
+  },
+});

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) {