From 2e830974dea9670c9be17c48647855a46d1ce3a6 Mon Sep 17 00:00:00 2001
From: Benyamin <Koorosh.azimi1@gmail.com>
Date: Tue, 24 Oct 2023 17:54:03 +0330
Subject: [PATCH 1/3] Get Exchange Config

---
 .../AdvanceTradingView/AdvanceTradingView.jsx |  6 +-
 src/components/Date/Date.js                   |  7 ++-
 src/components/Loading/Loading.js             | 18 ++----
 src/components/TextInput/TextInput.js         | 63 ++++++++-----------
 src/i18n/i18n.js                              | 28 ---------
 src/index.js                                  | 42 ++++++++++---
 src/main/Browser/Browser.js                   | 15 ++++-
 .../LoginLoading/LoginFormLoading.js          |  4 +-
 .../components/RegisterForm/RegisterForm.js   |  6 +-
 .../components/MarketChart/MarketChart.js     | 16 ++---
 .../TechnicalChart/TechnicalChart.js          |  2 +-
 .../Pages/UserPanel/Sections/Footer/Footer.js | 12 ++--
 .../Sections/Header/components/Clock/Clock.js | 10 ++-
 .../components/WalletHeader/WalletHeader.js   |  4 +-
 .../components/MarketSubMenu/MarketSubMenu.js | 16 +++--
 .../components/WalletBalance/WalletBalance.js |  3 +-
 .../WalletListItem/WalletListItem.js          |  3 +-
 src/store/actions/actionTypes.js              | 11 ++--
 src/store/actions/auth.js                     | 19 ++++++
 src/store/actions/exchange.js                 | 26 +++++---
 src/store/actions/global.js                   | 10 +--
 src/store/actions/index.js                    |  4 ++
 src/store/reducers/authReducer.js             | 13 +++-
 src/store/reducers/exchangeReducer.js         | 16 ++++-
 src/store/reducers/globalReducer.js           |  6 +-
 src/store/sagas/auth.js                       | 11 ++++
 src/store/sagas/global.js                     | 48 +++++++++++---
 src/store/sagas/index.js                      |  3 +-
 28 files changed, 254 insertions(+), 168 deletions(-)
 delete mode 100644 src/i18n/i18n.js

diff --git a/src/components/AdvanceTradingView/AdvanceTradingView.jsx b/src/components/AdvanceTradingView/AdvanceTradingView.jsx
index 26449505..9e870a31 100644
--- a/src/components/AdvanceTradingView/AdvanceTradingView.jsx
+++ b/src/components/AdvanceTradingView/AdvanceTradingView.jsx
@@ -12,7 +12,7 @@ const removeTestCoin = (pair) => {
 }
 
 const AdvanceTradingView = () => {
-    const isDark = useSelector((state) => state.global.isDark)
+    const theme = useSelector((state) => state.global.theme)
     const activePair = useSelector((state) => state.exchange.activePair)
     const widgetOptions = {
         symbol: removeTestCoin(activePair.baseAsset+"/"+activePair.quoteAsset),
@@ -32,13 +32,13 @@ const AdvanceTradingView = () => {
 
     useLayoutEffect(() => {
         const widget = (window.tvWidget = new window.TradingView.widget(
-            {...widgetOptions, theme: isDark ? "dark" : "light"},
+            {...widgetOptions, theme: theme.toLowerCase()},
         ));
 
         widget.onChartReady(() => {
             console.log("Chart has loaded!");
         });
-    }, [isDark]);
+    }, [theme]);
 
     return (
         <div
diff --git a/src/components/Date/Date.js b/src/components/Date/Date.js
index cc089db2..15fcdba5 100644
--- a/src/components/Date/Date.js
+++ b/src/components/Date/Date.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import moment from "moment-jalaali";
+import {useSelector} from "react-redux";
 
 const Date = ({date}) => {
-
+    const type = useSelector((state) => state.exchange.dateType)
     const calendar = () => {
-        const type = window.env.REACT_APP_CALENDAR_TYPE
+
         switch (type) {
             case "Jalali":
                 return moment(date).format("jYY/jMM/jDD");
@@ -17,7 +18,7 @@ const Date = ({date}) => {
         }
     };
 
-    return calendar();
+    return (<>{calendar()}</>);
 };
 
 export default Date;
diff --git a/src/components/Loading/Loading.js b/src/components/Loading/Loading.js
index 884c6bc1..340064ee 100644
--- a/src/components/Loading/Loading.js
+++ b/src/components/Loading/Loading.js
@@ -1,25 +1,17 @@
 import React from "react";
 import {useTranslation} from "react-i18next";
 import {images} from "../../assets/images";
-import {connect} from "react-redux";
+import {useSelector} from "react-redux";
 import {isMobile} from 'react-device-detect';
 
-
-const Loading = ({isDark}) => {
+const Loading = () => {
+    const theme = useSelector((state) => state.global.theme)
     const {t} = useTranslation();
     return (
         <div className="width-100 column ai-center jc-center" style={{height: "100%"}}>
-            <img className="mb-05" style={{width: isMobile ? "10vw" : "3vw"}} src={isDark ? images.squareLoading : images.squareLoadingLight} alt="loading..."/>
+            <img className="mb-05" style={{width: isMobile ? "10vw" : "3vw"}} src={theme === "DARK" ? images.squareLoading : images.squareLoadingLight} alt="loading..."/>
             <span className="flashit mt-1">{t('loading')}</span>
         </div>
     );
 };
-
-
-const mapStateToProps = (state) => {
-    return {
-        isDark: state.global.isDark,
-    };
-};
-
-export default connect(mapStateToProps, null)(Loading);
\ No newline at end of file
+export default Loading;
\ No newline at end of file
diff --git a/src/components/TextInput/TextInput.js b/src/components/TextInput/TextInput.js
index 70133167..ef69cb08 100644
--- a/src/components/TextInput/TextInput.js
+++ b/src/components/TextInput/TextInput.js
@@ -2,12 +2,12 @@ import React from "react";
 import Icon from "../Icon/Icon";
 import Select from "react-select";
 import classes from "./TextInput.module.css";
-import i18n from "../../i18n/i18n";
 import persian_fa from "react-date-object/locales/persian_fa";
 import persian from "react-date-object/calendars/persian";
 import DatePicker from "react-multi-date-picker";
 import "react-multi-date-picker/styles/backgrounds/bg-dark.css"
 import {useSelector} from "react-redux";
+import i18n from "i18next";
 
 const TextInput = (props) => {
     const {
@@ -27,18 +27,16 @@ const TextInput = (props) => {
         ...other
     } = props
 
-    const isDark = useSelector((state) => state.global.isDark)
-
+    const theme = useSelector((state) => state.global.theme)
 
     const optionClassHandler = (state) => {
         let className = classes.selectOptions
-            if (state.isFocused) {
-                className = className + " " + classes.isFocused
-            }
-            if (state.isSelected) {
-                className = className + " " + classes.isSelected
-            }
-        console.log("className", className)
+        if (state.isFocused) {
+            className = className + " " + classes.isFocused
+        }
+        if (state.isSelected) {
+            className = className + " " + classes.isSelected
+        }
         return className;
     }
 
@@ -56,12 +54,11 @@ const TextInput = (props) => {
         {...other}
     />
 
-    if(lead){
+    if (lead) {
         leadSection = <span className={`lead ${classes.lead}`}>{lead}</span>
     }
 
-
-    if ( select ){
+    if (select) {
         inputSection = <Select
             classNames={{
                 option: (state) => optionClassHandler(state),
@@ -76,33 +73,23 @@ const TextInput = (props) => {
             {...other}
         />
     }
-    if ( datePicker ){
+    if (datePicker) {
         inputSection = <DatePicker
-
-            className={`${isDark && "bg-dark"}`}
-
+            className={`${theme === "DARK" ? "bg-dark" : ""}`}
             locale={i18n.language === "fa" ? persian_fa : null}
             calendar={i18n.language === "fa" ? persian : null}
             onChange={onchange}
             render={<input className={`${classes.datePicker}`}/>}
             {...other}
         >
-
-            {/*<button
-                style={{ margin: "5px 0" }}
-                onClick={() => alert("clicked")}
-            >
-                click me
-            </button>*/}
-
         </DatePicker>
     }
-    if(after){
+    if (after) {
         afterSection = <span className={`after ${classes.after}`}>{after}</span>
     }
 
-    if (alerts){
-        alertSection =<div
+    if (alerts) {
+        alertSection = <div
             className={`${classes.inputGroupHint} inputGroupHint `}
             data-tooltip-id="opex-tooltip"
             data-tooltip-place="left"
@@ -113,21 +100,21 @@ const TextInput = (props) => {
                 customClass="hint-icon"
             />
             <div className="column pt-05">
-                { alerts.map((alert , index) => <span key={index} className={`${classes.alert} pr-05 `}>{alert}</span>) }
+                {alerts.map((alert, index) => <span key={index} className={`${classes.alert} pr-05 `}>{alert}</span>)}
             </div>
         </div>
     }
 
     return (
-    <div className={customClass ?? ""}>
-      <div className={classes.inputGroup}>
-          {leadSection}
-          {inputSection}
-          {afterSection}
-      </div>
-        {alertSection}
-    </div>
-  );
+        <div className={customClass ?? ""}>
+            <div className={classes.inputGroup}>
+                {leadSection}
+                {inputSection}
+                {afterSection}
+            </div>
+            {alertSection}
+        </div>
+    );
 };
 
 
diff --git a/src/i18n/i18n.js b/src/i18n/i18n.js
deleted file mode 100644
index 3cd11386..00000000
--- a/src/i18n/i18n.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import i18n from "i18next";
-import LanguageDetector from "i18next-browser-languagedetector";
-import {initReactI18next} from "react-i18next";
-import Backend from "i18next-http-backend";
-
-
-i18n
-    .use(LanguageDetector)
-    .use(Backend)
-    .use(initReactI18next)
-    .init({
-        preload: [window.env.REACT_APP_PRELOAD_LANG],
-        fallbackLng: window.env.REACT_APP_PRELOAD_LANG,
-        debug: process.env.NODE_ENV === "development",
-        detection: {
-            order: ["localStorage"],
-            lookupLocalStorage: "language",
-            caches: ["localStorage"],
-        },
-        backend: {
-            loadPath: process.env.PUBLIC_URL+'/assets/locales/{{lng}}/{{ns}}.json',
-        },
-        interpolation: {
-            escapeValue: false,
-        },
-    });
-
-export default i18n;
diff --git a/src/index.js b/src/index.js
index bab32783..100462f3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import React from "react";
 import {createRoot} from 'react-dom/client';
-import "./i18n/i18n";
 import {Provider} from "react-redux";
 import {applyMiddleware, combineReducers, compose, createStore} from "redux";
 import createSagaMiddleware from "redux-saga";
@@ -17,6 +16,10 @@ import exchangeReducer from "./store/reducers/exchangeReducer";
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
 import 'react-tooltip/dist/react-tooltip.css';
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+import {initReactI18next} from "react-i18next";
 
 const sagaMiddleware = createSagaMiddleware();
 const rootReducer = combineReducers({
@@ -25,10 +28,6 @@ const rootReducer = combineReducers({
     auth: authReducer,
 });
 
-//add custom title & meta
-const meta = document.getElementsByTagName('meta')
-document.title = window.env.REACT_APP_TITLE ? window.env.REACT_APP_TITLE : " ";
-meta.description.content = window.env.REACT_APP_DESCRIPTION_CONTENT ? window.env.REACT_APP_DESCRIPTION_CONTENT : " "
 
 /**
  * Base URL of the website.
@@ -50,6 +49,31 @@ sagaMiddleware.run(watchGlobal);
 
 setupAxios(axios, store);
 
+const {exchange: {defaultLanguage}} = store.getState()
+
+i18n
+    .use(LanguageDetector)
+    .use(Backend)
+    .use(initReactI18next)
+    .init({
+        preload: [defaultLanguage],
+        fallbackLng: defaultLanguage,
+        debug: process.env.NODE_ENV === "development",
+        detection: {
+            order: ["localStorage"],
+            lookupLocalStorage: "language",
+            caches: ["localStorage"],
+        },
+        backend: {
+            loadPath: process.env.PUBLIC_URL + '/assets/locales/{{lng}}/{{ns}}.json',
+        },
+        interpolation: {
+            escapeValue: false,
+        },
+    });
+
+
+
 //React query client
 const queryClient = new QueryClient()
 
@@ -59,10 +83,10 @@ const root = createRoot(container);
 root.render(
     <Provider store={store}>
         {/*<StyleRoot>*/}
-            <QueryClientProvider client={queryClient}>
-                <Main baseURL={PUBLIC_URL}/>
-                <ReactQueryDevtools initialIsOpen={false}/>
-            </QueryClientProvider>
+        <QueryClientProvider client={queryClient}>
+            <Main baseURL={PUBLIC_URL}/>
+            <ReactQueryDevtools initialIsOpen={false}/>
+        </QueryClientProvider>
         {/*</StyleRoot>*/}
     </Provider>
 );
diff --git a/src/main/Browser/Browser.js b/src/main/Browser/Browser.js
index 6d352777..f9e3f0ce 100644
--- a/src/main/Browser/Browser.js
+++ b/src/main/Browser/Browser.js
@@ -27,11 +27,14 @@ const Browser = () => {
     const query = useQuery();
     const dispatch = useDispatch();
 
-    const isDark = useSelector((state) => state.global.isDark)
+    const theme = useSelector((state) => state.global.theme)
     const isLoading = useSelector((state) => state.global.isLoading)
     const hasError = useSelector((state) => state.global.hasError)
+    const title = useSelector((state) => state.exchange.title)
+    const description = useSelector((state) => state.exchange.description)
 
-    isDark ? document.body.classList.add('dark') : document.body.classList.remove('dark');
+
+    theme === "DARK" ? document.body.classList.add('dark') : document.body.classList.remove('dark');
 
     useEffect(() => {
         const impersonate = query.get("impersonate");
@@ -49,6 +52,12 @@ const Browser = () => {
         }
     }, []);
 
+    useEffect(() => {
+        const meta = document.getElementsByTagName('meta')
+        document.title = title ? title : " ";
+        meta.description.content = description ? description : " "
+    }, [title, description])
+
     const Toast = () => <Toaster position="bottom-right" toastOptions={
         {
             className: "rtl",
@@ -102,7 +111,7 @@ const Browser = () => {
                     <Route path={RoutesName.ContactUs} element={<ContactUs/>}/>
                 </Route>
             </Routes>
-            <Tooltip  id="opex-tooltip"/>
+            <Tooltip id="opex-tooltip"/>
             <Toast/>
         </>
 
diff --git a/src/main/Browser/Pages/Login/components/LoginLoading/LoginFormLoading.js b/src/main/Browser/Pages/Login/components/LoginLoading/LoginFormLoading.js
index e95f67b2..2453214e 100644
--- a/src/main/Browser/Pages/Login/components/LoginLoading/LoginFormLoading.js
+++ b/src/main/Browser/Pages/Login/components/LoginLoading/LoginFormLoading.js
@@ -3,11 +3,11 @@ import {images} from "../../../../../../assets/images";
 import {useSelector} from "react-redux";
 
 const LoginFormLoading = () => {
-    const isDark = useSelector((state) => state.global.isDark)
+    const theme = useSelector((state) => state.global.theme)
 
     return <div className="flex jc-center ai-center" style={{height: "35vh"}}>
         <img style={{width: "2.5vw", textAlign: "center"}}
-             src={isDark ? images.squareLoading : images.squareLoadingLight} alt="Loading"/>
+             src={theme === "DARK" ? images.squareLoading : images.squareLoadingLight} alt="Loading"/>
     </div>
 }
 
diff --git a/src/main/Browser/Pages/Login/components/RegisterForm/RegisterForm.js b/src/main/Browser/Pages/Login/components/RegisterForm/RegisterForm.js
index c34ea98c..541cab09 100644
--- a/src/main/Browser/Pages/Login/components/RegisterForm/RegisterForm.js
+++ b/src/main/Browser/Pages/Login/components/RegisterForm/RegisterForm.js
@@ -17,6 +17,7 @@ const RegisterForm = () => {
     const {t} = useTranslation();
     const dispatch = useDispatch();
     const verifyEmailLock = useSelector((state) => state.exchange.verifyEmailLock)
+    const supportEmail = useSelector((state) => state.exchange.supportEmail)
 
     const [registerStatus, setRegisterStatus] = useState("")
     const [verifyEmail, setVerifyEmail] = useState(false);
@@ -89,7 +90,7 @@ const RegisterForm = () => {
             </span>
             <span className={`fs-0-8 border-top-dotted pt-1 mt-1`}><Trans
                 i18nKey="login.registerFinishedSpamMail"
-                values={{email: window.env.REACT_APP_SYSTEM_EMAIL_ADDRESS,}}
+                values={{email: supportEmail}}
             /></span>
 
             <div className={`column mt-3 hover-text text-orange`}>
@@ -134,6 +135,9 @@ const RegisterForm = () => {
             } else if (e?.response?.data?.error === "UserAlreadyExists") {
                 setUserData({...userData, email: {...userData.email, error: [t("login.UserAlreadyExists")]}})
                 setRegisterStatus("")
+            } else if (e?.response?.data?.error === "RegisterIsLimited") {
+                setUserData({...userData, email: {...userData.email, error: [t("login.RegisterIsLimited")]}})
+                setRegisterStatus("")
             } else {
                 setRegisterStatus("finishedWithError");
             }
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/components/MarketChart/MarketChart.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/components/MarketChart/MarketChart.js
index 9416a27f..9acbaf61 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/components/MarketChart/MarketChart.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/components/MarketChart/MarketChart.js
@@ -1,6 +1,6 @@
 import React, {useEffect, useRef} from "react";
 import classes from "../../TradingView.module.css";
-import { createChart } from 'lightweight-charts';
+import {createChart} from 'lightweight-charts';
 import {useSelector} from "react-redux";
 import moment from "moment-jalaali";
 import {
@@ -18,7 +18,7 @@ const MarketChart = ({type}) => {
     let chartProperties, candleSeries, volumeSeries;
     const chart = useRef();
 
-    const isDark = useSelector((state) => state.global.isDark)
+    const theme = useSelector((state) => state.global.theme)
     const activePairSymbol = useSelector((state) => state.exchange.activePair.symbol)
 
     const {data, error} = useGetChartCandlesticks(activePairSymbol, type)
@@ -56,7 +56,7 @@ const MarketChart = ({type}) => {
         priceScale: lightTheme.priceScale,
         timeScale: {...lightTheme.timeScale, ...timeScale}
     };
-    if (isDark) {
+    if (theme === "DARK") {
         chartProperties = {
             ...chartProperties,
             layout: {
@@ -77,13 +77,13 @@ const MarketChart = ({type}) => {
             chartContainerRef.current,
             chartProperties,
         );
-        candleSeries = chart.current.addCandlestickSeries(isDark ? darkTheme : candleColors);
+        candleSeries = chart.current.addCandlestickSeries(theme === "DARK" ? darkTheme : candleColors);
         volumeSeries = chart.current.addHistogramSeries({
             priceFormat: {
                 type: 'volume',
             },
             priceScaleId: '',
-            lastValueVisible:false,
+            lastValueVisible: false,
         });
         volumeSeries.priceScale().applyOptions({
             scaleMargins: {
@@ -95,7 +95,7 @@ const MarketChart = ({type}) => {
         candleSeries.setData(data);
         volumeSeries.setData(data);
 
-        chart.current .timeScale().fitContent();
+        chart.current.timeScale().fitContent();
         return () => {
             if (chart.current !== null) {
                 chart.current.remove();
@@ -133,7 +133,7 @@ const MarketChart = ({type}) => {
     }, [])
 
     useEffect(() => {
-        if (isDark) {
+        if (theme === "DARK") {
             chart.current.applyOptions({
                 ...chartProperties,
                 layout: {
@@ -154,7 +154,7 @@ const MarketChart = ({type}) => {
                 timeScale: lightTheme.timeScale,
             });
         }
-    }, [isDark]);
+    }, [theme]);
 
     return (
         <div ref={chartContainerRef} className={`container  ${classes.chartContainer}`}>
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/TechnicalChart/TechnicalChart.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/TechnicalChart/TechnicalChart.js
index 31cf1a7f..99881d13 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/TechnicalChart/TechnicalChart.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/TechnicalChart/TechnicalChart.js
@@ -1,4 +1,4 @@
-import React from "react";
+ import React from "react";
 import AdvanceTradingView from "../../../../../../../../components/AdvanceTradingView/AdvanceTradingView";
 
 const TechnicalChart = () => {
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Footer/Footer.js b/src/main/Browser/Pages/UserPanel/Sections/Footer/Footer.js
index 421a9a2f..3f3c1012 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Footer/Footer.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Footer/Footer.js
@@ -12,10 +12,12 @@ import {toAbsoluteUrl} from "../../../../../../utils/utils";
 
 const Footer = () => {
     const {t} = useTranslation();
-    const isDark = useSelector((state) => state.global.isDark)
+    const theme = useSelector((state) => state.global.theme)
     const dispatch = useDispatch()
-
-    const languages = window.env.REACT_APP_LANGS_SUPPORT.split(",")
+    const languages = useSelector((state) => state.exchange.supportedLanguages)
+    const changeLanguage = (lang) =>{
+        i18n.changeLanguage(lang)
+    }
 
     return (
         <div className={`width-100 column jc-center ai-center ${classes.container} fs-0-8 mt-1 py-2`}>
@@ -58,11 +60,11 @@ const Footer = () => {
                 <div className={`column ai-center jc-center`}>
                     <div className={`row ai-center py-2`}>
                         <span className={`pl-1`}>{t("Footer.darkMode")}:</span>
-                        <ToggleSwitch onchange={(e) => dispatch(setThemeInitiate(e.target.checked))} checked={isDark}/>
+                        <ToggleSwitch onchange={(e) => dispatch(setThemeInitiate(e.target.checked ? "DARK" : "LIGHT"))} checked={theme === "DARK"}/>
                     </div>
                     <div className={`row ai-center jc-between`}>
                         <div className={`row ai-center ${classes.languages}`}>
-                            {languages?.map((lang, index) => <span className="cursor-pointer px-1" onClick={() => i18n.changeLanguage(lang)} key={index}>{t("Languages."+ lang)}</span>)}
+                            {languages?.map((lang, index) => <span className="cursor-pointer px-1" onClick={() => changeLanguage(lang)} key={index}>{t("Languages."+ lang)}</span>)}
                         </div>
                     </div>
                 </div>
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Header/components/Clock/Clock.js b/src/main/Browser/Pages/UserPanel/Sections/Header/components/Clock/Clock.js
index 9a606046..2515f5ae 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Header/components/Clock/Clock.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Header/components/Clock/Clock.js
@@ -1,11 +1,11 @@
-import React, {useState} from "react";
 import moment from "moment-jalaali";
+import React, {useState} from "react";
+import {useSelector} from "react-redux";
 import useInterval from "../../../../../../../../Hooks/useInterval";
 
 const Clock = () => {
-
+    const type = useSelector((state) => state.exchange.dateType)
     const calendar = () => {
-        const type = window.env.REACT_APP_CALENDAR_TYPE
         switch (type) {
             case "Jalali":
                 return moment().format("jYYYY/jMM/jDD - HH:mm:ss");
@@ -24,9 +24,7 @@ const Clock = () => {
         setTime(calendar())
     }, 1000);
 
-    return (
-        <>{time}</>
-    );
+    return (<>{time}</>);
 };
 
 export default Clock;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Header/components/WalletHeader/WalletHeader.js b/src/main/Browser/Pages/UserPanel/Sections/Header/components/WalletHeader/WalletHeader.js
index 5055b079..23f75804 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Header/components/WalletHeader/WalletHeader.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Header/components/WalletHeader/WalletHeader.js
@@ -5,12 +5,14 @@ import {useParams} from "react-router-dom";
 import {BN} from "../../../../../../../../utils/utils";
 import {useGetUserAccount} from "../../../../../../../../queries/hooks/useGetUserAccount";
 import {useGetUserAssets} from "../../../../../../../../queries";
+import {useSelector} from "react-redux";
 
 const WalletHeader = () => {
     const {id} = useParams()
     const {t} = useTranslation()
-    const refCurrency = window.env.REACT_APP_REFERENCE_FIAT_CURRENCY
+
     const {data: userAccount} = useGetUserAccount()
+    const refCurrency = useSelector((state) => state.exchange.baseCurrency)
 
     const {data: estimateValue , isLoading, error} = useGetUserAssets(refCurrency)
     const allEstimateValue = (isLoading || error) ?  0 : (estimateValue?.find( q => q.asset === id ))
diff --git a/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/MarketSubMenu/MarketSubMenu.js b/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/MarketSubMenu/MarketSubMenu.js
index e5b08084..f840b2cd 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/MarketSubMenu/MarketSubMenu.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/MarketSubMenu/MarketSubMenu.js
@@ -1,28 +1,26 @@
-import React, {useEffect, useState} from "react";
+import React, {useState} from "react";
 import classes from "./MarketSubMenu.module.css";
 import MarketCard from "./components/MarketCard/MarketCard";
 import {useTranslation} from "react-i18next";
 import Icon from "../../../../../../../../components/Icon/Icon";
 import AccordionBox from "../../../../../../../../components/AccordionBox/AccordionBox";
-import {useSelector} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
+import {setFavPairInitiate} from "../../../../../../../../store/actions";
 
 const MarketSubMenu = () => {
 
     const {t} = useTranslation();
     const [activeTab] = useState(JSON.parse(localStorage.getItem("activeMarketTab")) || 1);
-    const [fav, setFav] = useState(JSON.parse(localStorage.getItem("favPair")) || []);
     const symbols = useSelector((state) => state.exchange.symbols)
-
-    useEffect(() => {
-        localStorage.setItem("favPair", JSON.stringify(fav))
-    }, [fav])
+    const fav = useSelector((state) => state.auth.favoritePairs)
+    const dispatch = useDispatch();
 
     const addToFav = (selected) => {
         if (fav.includes(selected)) {
             const newFav = fav.filter((item) => item !== selected);
-            setFav(newFav);
+            dispatch(setFavPairInitiate(newFav))
         } else {
-            setFav((prev) => [...prev, selected]);
+            dispatch(setFavPairInitiate([...fav, selected]))
         }
     };
 
diff --git a/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/WalletSubMenu/components/WalletBalance/WalletBalance.js b/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/WalletSubMenu/components/WalletBalance/WalletBalance.js
index 34081acc..abfaa719 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/WalletSubMenu/components/WalletBalance/WalletBalance.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/WalletSubMenu/components/WalletBalance/WalletBalance.js
@@ -4,11 +4,12 @@ import {useTranslation} from "react-i18next";
 import {images} from "../../../../../../../../../../assets/images";
 import {BN} from "../../../../../../../../../../utils/utils";
 import {useGetUserAssetsEstimatedValue} from "../../../../../../../../../../queries";
+import {useSelector} from "react-redux";
 
 const WalletBalance = () => {
 
     const {t} = useTranslation();
-    const refCurrency = window.env.REACT_APP_REFERENCE_FIAT_CURRENCY
+    const refCurrency = useSelector((state) => state.exchange.baseCurrency)
     const {data , isLoading, error} = useGetUserAssetsEstimatedValue(refCurrency)
     const totalValue = (isLoading || error) ?  0 : data.value
 
diff --git a/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/WalletSubMenu/components/WalletListItem/WalletListItem.js b/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/WalletSubMenu/components/WalletListItem/WalletListItem.js
index e5f08bb0..0d720f0d 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/WalletSubMenu/components/WalletListItem/WalletListItem.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/SubMenu/components/WalletSubMenu/components/WalletListItem/WalletListItem.js
@@ -7,10 +7,11 @@ import * as Routes from "../../../../../../../../Routes/routes";
 import {BN} from "../../../../../../../../../../utils/utils";
 import {useGetUserAccount} from "../../../../../../../../../../queries/hooks/useGetUserAccount";
 import {useGetUserAssets} from "../../../../../../../../../../queries";
+import {useSelector} from "react-redux";
 
 const WalletListItem = ({assetName, showZero}) => {
     const {t} = useTranslation();
-    const refCurrency = window.env.REACT_APP_REFERENCE_FIAT_CURRENCY
+    const refCurrency = useSelector((state) => state.exchange.baseCurrency)
     const {data: userAccount} = useGetUserAccount()
     const free = userAccount?.wallets[assetName]?.free || 0
 
diff --git a/src/store/actions/actionTypes.js b/src/store/actions/actionTypes.js
index ee1889e8..74d0348c 100644
--- a/src/store/actions/actionTypes.js
+++ b/src/store/actions/actionTypes.js
@@ -24,10 +24,8 @@ export const SET_BEST_BUY_PRICE = "SET_BEST_BUY_PRICE";
 export const SET_BEST_SELL_PRICE = "SET_BEST_SELL_PRICE";
 export const SET_LAST_TRADE_PRICE = "SET_LAST_TRADE_PRICE";
 
-export const SET_PANEL_TOKENS = "SET_PANEL_TOKENS";
-export const SET_PANEL_TOKENS_INITIATE = "SET_PANEL_TOKENS_INITIATE";
-
 export const SET_EXCHANGE = "SET_EXCHANGE";
+export const SET_EXCHANGE_CONFIG = "SET_EXCHANGE_CONFIG";
 export const SET_LAST_PRICE = "SET_LAST_PRICE";
 export const SET_LAST_PRICE_INITIATE = "SET_LAST_PRICE_INITIATE";
 
@@ -45,9 +43,12 @@ export const SET_KYC_STATUS = "SET_KYC_STATUS";
 export const SET_KYC_STATUS_INITIATE = "SET_KYC_STATUS_INITIATE";
 export const SET_LAST_TRANSACTION = "SET_LAST_TRANSACTION";
 
-export const LOGIN_INITIATE = "LOGIN_INITIATE";
 export const LOGOUT = "LOGOUT";
 export const LOGOUT_INITIATE = "LOGOUT_INITIATE";
 
+export const SET_MARKET_INTERVAL = "SET_MARKET_INTERVAL";
+
+export const SET_USER_CONFIG = "SET_USER_CONFIG"
 
-export const Set_MARKET_INTERVAL = "Set_MARKET_INTERVAL";
\ No newline at end of file
+export const SET_FAV_PAIR = "SET_FAV_PAIR"
+export const SET_FAV_PAIR_INITIATE = "SET_FAV_PAIR_INITIATE"
\ No newline at end of file
diff --git a/src/store/actions/auth.js b/src/store/actions/auth.js
index fc69fcca..9b2b9e03 100644
--- a/src/store/actions/auth.js
+++ b/src/store/actions/auth.js
@@ -79,3 +79,22 @@ export const setLogoutInitiate = () => {
         type: actionTypes.LOGOUT_INITIATE,
     };
 };
+
+export const setFavPairInitiate = (favoritePairs) => {
+    return {
+        type: actionTypes.SET_FAV_PAIR_INITIATE,
+        favoritePairs
+    };
+};
+export const setFavPair = (favoritePairs) => {
+    return {
+        type: actionTypes.SET_FAV_PAIR,
+        favoritePairs
+    };
+};
+export const setUserConfig = (configs) => {
+    return {
+        type: actionTypes.SET_USER_CONFIG,
+        configs
+    };
+};
diff --git a/src/store/actions/exchange.js b/src/store/actions/exchange.js
index 367fe1ba..79c0d27a 100644
--- a/src/store/actions/exchange.js
+++ b/src/store/actions/exchange.js
@@ -8,67 +8,67 @@ export const setActivePairInitiate = (pair, activeTab) => {
     };
 };
 
-export const setActivePair = (pair) => {
+export const setActivePair = pair => {
     return {
         type: actionTypes.SET_ACTIVE_PAIR,
         pair: pair,
     };
 };
 
-export const setBuyOrder = (selected) => {
+export const setBuyOrder = selected => {
     return {
         type: actionTypes.SET_BUY_ORDERS,
         selected: selected,
     };
 };
-export const setSellOrder = (selected) => {
+export const setSellOrder = selected => {
     return {
         type: actionTypes.SET_SELL_ORDERS,
         selected: selected,
     };
 };
 
-export const setBestSellPrice = (bestBuyPrice) => {
+export const setBestSellPrice = bestBuyPrice => {
     return {
         type: actionTypes.SET_BEST_SELL_PRICE,
         bestSellPrice: bestBuyPrice,
     };
 };
 
-export const setBestBuyPrice = (bestBuyPrice) => {
+export const setBestBuyPrice = bestBuyPrice => {
     return {
         type: actionTypes.SET_BEST_BUY_PRICE,
         bestBuyPrice: bestBuyPrice,
     };
 };
-export const setLastTradePrice = (lastTradePrice) => {
+export const setLastTradePrice = lastTradePrice => {
     return {
         type: actionTypes.SET_LAST_TRADE_PRICE,
         lastTradePrice: lastTradePrice,
     };
 };
 
-export const setIPG = (lockTime) => {
+export const setIPG = lockTime => {
     return {
         type: actionTypes.SET_IPG,
         lockTime,
     };
 };
 
-export const setIPGInitiate = (lockTime) => {
+export const setIPGInitiate = lockTime => {
     return {
         type: actionTypes.SET_IPG_INITIATE,
         lockTime,
     };
 };
-export const setVerifyEmailLock = (verifyEmailLockTime) => {
+export const setVerifyEmailLock = verifyEmailLockTime => {
     return {
         type: actionTypes.SET_VERIFY_EMAIL_LOCK,
         verifyEmailLockTime,
     };
 };
 
-export const setVerifyEmailLockInitiate = (verifyEmailLockTime) => {
+export const setVerifyEmailLockInitiate = verifyEmailLockTime => {
     return {
         type: actionTypes.SET_VERIFY_EMAIL_LOCK_INITIATE,
         verifyEmailLockTime,
@@ -91,4 +91,10 @@ export const setLastPriceInitiate = () => {
     return {
         type: actionTypes.SET_LAST_PRICE_INITIATE,
     };
+};
+export const setExchangeConfigs = configs => {
+    return {
+        type: actionTypes.SET_EXCHANGE_CONFIG,
+        configs: configs
+    };
 };
\ No newline at end of file
diff --git a/src/store/actions/global.js b/src/store/actions/global.js
index 53bfa631..0a617c47 100644
--- a/src/store/actions/global.js
+++ b/src/store/actions/global.js
@@ -1,16 +1,16 @@
 import * as actionTypes from "./actionTypes";
 
-export const setThemeInitiate = (isDark) => {
+export const setThemeInitiate = (theme) => {
   return {
     type: actionTypes.SET_THEME_INITIATE,
-    isDark,
+    theme,
   };
 };
 
-export const setTheme = (isDark) => {
+export const setTheme = (theme) => {
   return {
     type: actionTypes.SET_THEME,
-    isDark,
+    theme: theme.toUpperCase(),
   };
 };
 
@@ -45,7 +45,7 @@ export const setInfoMessage = (messageType, message) => {
 
 export const setMarketInterval = (interval) => {
   return {
-    type: actionTypes.Set_MARKET_INTERVAL,
+    type: actionTypes.SET_MARKET_INTERVAL,
     interval,
   };
 };
\ No newline at end of file
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
index a15a7b91..8089c6b0 100644
--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -21,6 +21,7 @@ export {
     setIPG,
     setIPGInitiate,
     setVerifyEmailLock,
+    setExchangeConfigs,
     setVerifyEmailLockInitiate
 
 } from "./exchange";
@@ -35,6 +36,9 @@ export {
     setUserAccountInfo,
     setUserAccountInfoInitiate,
     setKYCStatus,
+    setUserConfig,
+    setFavPairInitiate,
+    setFavPair,
     setKYCStatusInitiate
 } from "./auth";
 
diff --git a/src/store/reducers/authReducer.js b/src/store/reducers/authReducer.js
index 25bc671a..78cea19a 100644
--- a/src/store/reducers/authReducer.js
+++ b/src/store/reducers/authReducer.js
@@ -17,6 +17,7 @@ const initialState = {
     lastTransaction: null,
     tradeFee: {},
     isLogin: false,
+    favoritePairs: []
 };
 
 const reducer = (state = initialState, action) => {
@@ -28,7 +29,7 @@ const reducer = (state = initialState, action) => {
             });
             return {
                 ...initialState,
-                tradeFee : {...state.tradeFee},
+                tradeFee: {...state.tradeFee},
                 wallets: resetWallet
             };
         case actionTypes.SET_USER_INFO:
@@ -73,6 +74,16 @@ const reducer = (state = initialState, action) => {
                 ...state,
                 lastTransaction: action.time
             }
+        case actionTypes.SET_USER_CONFIG:
+            return {
+                ...state,
+                ...action.configs
+            }
+        case actionTypes.SET_FAV_PAIR:
+            return {
+                ...state,
+                favoritePairs: action.favoritePairs
+            }
         default:
             return state;
     }
diff --git a/src/store/reducers/exchangeReducer.js b/src/store/reducers/exchangeReducer.js
index b5af0a5c..a34e2f46 100644
--- a/src/store/reducers/exchangeReducer.js
+++ b/src/store/reducers/exchangeReducer.js
@@ -19,6 +19,15 @@ const initialState = {
     },
     ipgLock: null,
     verifyEmailLock: null,
+    logoUrl: "",
+    title: "",
+    description: "",
+    defaultLanguage: "en",
+    supportedLanguages: [],
+    defaultTheme: "",
+    supportEmail: "",
+    baseCurrency: "",
+    dateType: ""
 };
 
 const exchangeReducer = (state = initialState, action) => {
@@ -89,7 +98,12 @@ const exchangeReducer = (state = initialState, action) => {
         case actionTypes.SET_EXCHANGE:
             return {
                 ...state,
-               ...action.exchangeInfo
+                ...action.exchangeInfo
+            };
+        case actionTypes.SET_EXCHANGE_CONFIG:
+            return {
+                ...state,
+                ...action.configs
             };
         default:
             return state;
diff --git a/src/store/reducers/globalReducer.js b/src/store/reducers/globalReducer.js
index 06e0bb4f..ed458b2f 100644
--- a/src/store/reducers/globalReducer.js
+++ b/src/store/reducers/globalReducer.js
@@ -1,7 +1,7 @@
 import * as actionTypes from "../actions/actionTypes";
 
 const initialState = {
-    isDark: window.env.REACT_APP_DEFAULT_THEME === 'DARK',
+    theme: "LIGHT",
     isLoading: true,
     hasError: false,
     marketInterval: "24h",
@@ -16,7 +16,7 @@ const globalReducer = (state = initialState, action) => {
         case actionTypes.SET_THEME:
             return {
                 ...state,
-                isDark: action.isDark,
+                theme: action.theme,
             };
         case actionTypes.SET_INFO_MESSAGE:
             return {
@@ -36,7 +36,7 @@ const globalReducer = (state = initialState, action) => {
                 ...state,
                 hasError: action.error,
             };
-        case actionTypes.Set_MARKET_INTERVAL:
+        case actionTypes.SET_MARKET_INTERVAL:
             return {
                 ...state,
                 marketInterval: action.interval
diff --git a/src/store/sagas/auth.js b/src/store/sagas/auth.js
index 58a0e4be..5d6945cf 100644
--- a/src/store/sagas/auth.js
+++ b/src/store/sagas/auth.js
@@ -19,4 +19,15 @@ export function* getUserKYCStatus() {
     } catch (e) {
         console.log(e)
     }
+}
+
+export function* setFavPair(action) {
+    try {
+        yield put(actions.setFavPair(action.favoritePairs));
+        yield call(axios.post, '/config/user/v1', {
+            favoritePairs: action.favoritePairs
+        })
+    } catch (e) {
+        console.log(e)
+    }
 }
\ No newline at end of file
diff --git a/src/store/sagas/global.js b/src/store/sagas/global.js
index c312df43..4acd724a 100644
--- a/src/store/sagas/global.js
+++ b/src/store/sagas/global.js
@@ -1,11 +1,19 @@
-import {call, put, delay} from "redux-saga/effects";
+import {call, delay, put} from "redux-saga/effects";
 import * as actions from "../actions/index";
 import jwtDecode from "jwt-decode";
 import axios from "axios";
+import i18n from "i18next";
 
 export function* setThemeSaga(action) {
-    yield call([localStorage, 'setItem'], "isDark", action.isDark)
-    yield put(actions.setTheme(action.isDark));
+    try {
+        yield put(actions.setTheme(action.theme));
+        yield call([localStorage, 'setItem'], "theme", action.theme)
+        yield call(axios.post, '/config/user/v1', {
+            theme: action.theme
+        })
+    } catch (e) {
+        console.log(e)
+    }
 }
 
 export function* setActivePair(action) {
@@ -59,6 +67,8 @@ export function* loadConfig(action) {
     yield put(actions.setLoading(true))
     yield put(actions.setError(false))
 
+    let appTheme;
+
     const pairs = [];
     const assets = [];
     const wallets = {};
@@ -66,9 +76,21 @@ export function* loadConfig(action) {
     const lastPrice = {};
 
     try {
+        const {
+            data: {
+                defaultTheme,
+                ...configs
+            }
+        } = yield call(axios.get, '/config/web/v1')
 
-        const symbols = yield call(getExchangeInfo)
+        yield put(actions.setExchangeConfigs(configs));
+
+        appTheme = defaultTheme;
 
+        const localTheme = yield call([localStorage, 'getItem'], 'theme')
+        if (localTheme) appTheme = localTheme;
+
+        const symbols = yield call(getExchangeInfo)
         for (const symbol of symbols) {
             if (symbol.symbol.toUpperCase().includes("NLN")) continue
             if (!assets.includes(symbol.baseAsset)) {
@@ -99,9 +121,6 @@ export function* loadConfig(action) {
         return yield put(actions.setLoading(false));
     }
 
-    const isDark = yield call([localStorage, 'getItem'], 'isDark')
-    if (isDark) yield put(actions.setTheme(JSON.parse(isDark)));
-
     if (action.token) {
         yield put(actions.setUserTokens({refreshToken: null, accessToken: action.token}));
         yield call([localStorage, 'removeItem'], "refreshToken")
@@ -118,16 +137,24 @@ export function* loadConfig(action) {
     if (verifyEmailLockTime) yield put(actions.setVerifyEmailLock(verifyEmailLockTime));
 
     const refreshToken = localStorage.getItem("refreshToken")
-
     if (refreshToken) {
         const params = new URLSearchParams();
         params.append('client_id', window.env.REACT_APP_CLIENT_ID);
         params.append('client_secret', window.env.REACT_APP_CLIENT_SECRET);
         params.append('grant_type', 'refresh_token');
         params.append('refresh_token', refreshToken);
-
         try {
             const {data: {access_token}} = yield call(axios.post, '/auth/realms/opex/protocol/openid-connect/token', params)
+            const {
+                data: {
+                    theme: userTheme,
+                    language,
+                    ...userConfigs
+                }
+            } = yield call(axios.get, '/config/user/v1', {headers: {Authorization: `Bearer ${access_token}`}})
+            i18n.changeLanguage(language)
+            yield put(actions.setUserConfig(userConfigs));
+            if (userTheme) appTheme = userTheme
             const jwt = jwtDecode(access_token)
             yield call([localStorage, 'setItem'], "refreshToken", refreshToken)
             yield put(actions.setUserTokens({refreshToken, accessToken: access_token}));
@@ -136,7 +163,8 @@ export function* loadConfig(action) {
         } catch (e) {
             yield put(actions.setLogoutInitiate());
         }
-    }
 
+    }
+    yield put(actions.setTheme(appTheme));
     yield put(actions.setLoading(false));
 }
diff --git a/src/store/sagas/index.js b/src/store/sagas/index.js
index 193a6785..92851f73 100644
--- a/src/store/sagas/index.js
+++ b/src/store/sagas/index.js
@@ -3,7 +3,7 @@ import * as actionTypes from "../actions/actionTypes";
 
 import {getExchangeLastPrice, loadConfig, setActivePair, setIPGLock, setThemeSaga, setVerifyEmailLock} from "./global";
 
-import {getUserKYCStatus, logout, setUserTokens} from "./auth";
+import {getUserKYCStatus, logout, setFavPair, setUserTokens} from "./auth";
 
 export function* watchGlobal() {
   yield takeEvery(actionTypes.LOGOUT_INITIATE, logout);
@@ -15,4 +15,5 @@ export function* watchGlobal() {
   yield takeEvery(actionTypes.SET_VERIFY_EMAIL_LOCK_INITIATE, setVerifyEmailLock);
   yield takeEvery(actionTypes.SET_KYC_STATUS_INITIATE, getUserKYCStatus);
   yield takeEvery(actionTypes.SET_LAST_PRICE_INITIATE, getExchangeLastPrice);
+  yield takeEvery(actionTypes.SET_FAV_PAIR_INITIATE, setFavPair);
 }

From 68c8c5c99eee988e8cf38f146cbc38989a178a40 Mon Sep 17 00:00:00 2001
From: Benyamin <Koorosh.azimi1@gmail.com>
Date: Tue, 7 Nov 2023 11:12:33 +0330
Subject: [PATCH 2/3] Get User Config After Login

---
 .../Login/components/LoginForm/LoginForm.js     |  8 ++++----
 src/store/actions/actionTypes.js                |  4 +++-
 src/store/actions/auth.js                       |  8 ++++++++
 src/store/actions/index.js                      |  1 +
 src/store/sagas/auth.js                         | 17 +++++++++++++++++
 src/store/sagas/index.js                        |  4 +++-
 6 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js b/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js
index a80d3137..d3687bc6 100644
--- a/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js
+++ b/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js
@@ -11,7 +11,7 @@ import OTPForm from "../OTPForm/OTPForm";
 import {browserName, deviceType, fullBrowserVersion} from "react-device-detect";
 import {validateEmail} from "../../../../../../utils/utils";
 import ForgetPassword from "../ForgetPassword/ForgetPassword";
-import {setUserAccountInfoInitiate, setUserInfo, setUserTokensInitiate} from "../../../../../../store/actions";
+import {getUserConfigsInitiate, setUserInfo, setUserTokensInitiate} from "../../../../../../store/actions";
 import {useGetKycStatus} from "../../../../../../queries";
 import {login, parseToken} from "js-api-client";
 import Icon from "../../../../../../components/Icon/Icon";
@@ -75,9 +75,9 @@ const LoginForm = () => {
             .then(async (res) => {
                 const userToken = parseToken(res.data);
                 const jwt = jwtDecode(userToken.accessToken)
-                await dispatch(setUserInfo(jwt));
-                await dispatch(setUserTokensInitiate(userToken));
-                await dispatch(setUserAccountInfoInitiate())
+                dispatch(setUserInfo(jwt));
+                dispatch(setUserTokensInitiate(userToken));
+                dispatch(getUserConfigsInitiate());
                 await getKycStatus()
                 return navigate(from, {replace: true});
             })
diff --git a/src/store/actions/actionTypes.js b/src/store/actions/actionTypes.js
index 74d0348c..1c897a99 100644
--- a/src/store/actions/actionTypes.js
+++ b/src/store/actions/actionTypes.js
@@ -51,4 +51,6 @@ export const SET_MARKET_INTERVAL = "SET_MARKET_INTERVAL";
 export const SET_USER_CONFIG = "SET_USER_CONFIG"
 
 export const SET_FAV_PAIR = "SET_FAV_PAIR"
-export const SET_FAV_PAIR_INITIATE = "SET_FAV_PAIR_INITIATE"
\ No newline at end of file
+export const SET_FAV_PAIR_INITIATE = "SET_FAV_PAIR_INITIATE"
+
+export const GET_USER_CONFIGS_INITIATE = "GET_USER_CONFIGS_INITIATE"
\ No newline at end of file
diff --git a/src/store/actions/auth.js b/src/store/actions/auth.js
index 9b2b9e03..e355325e 100644
--- a/src/store/actions/auth.js
+++ b/src/store/actions/auth.js
@@ -1,4 +1,5 @@
 import * as actionTypes from "./actionTypes";
+import {GET_USER_CONFIGS_INITIATE} from "./actionTypes";
 
 
 export const setUserTokens = (token) => {
@@ -98,3 +99,10 @@ export const setUserConfig = (configs) => {
         configs
     };
 };
+
+export const getUserConfigsInitiate = (configs) => {
+    return {
+        type: actionTypes.GET_USER_CONFIGS_INITIATE,
+        configs
+    };
+};
diff --git a/src/store/actions/index.js b/src/store/actions/index.js
index 8089c6b0..9cab6a40 100644
--- a/src/store/actions/index.js
+++ b/src/store/actions/index.js
@@ -35,6 +35,7 @@ export {
     changeUserInfo,
     setUserAccountInfo,
     setUserAccountInfoInitiate,
+    getUserConfigsInitiate,
     setKYCStatus,
     setUserConfig,
     setFavPairInitiate,
diff --git a/src/store/sagas/auth.js b/src/store/sagas/auth.js
index 5d6945cf..b966b3c4 100644
--- a/src/store/sagas/auth.js
+++ b/src/store/sagas/auth.js
@@ -1,6 +1,8 @@
 import {call, put} from "redux-saga/effects";
 import * as actions from "../actions/index";
 import axios from "axios";
+import i18n from "i18next";
+import jwtDecode from "jwt-decode";
 
 export function* logout() {
     yield call([localStorage, 'removeItem'], "refreshToken")
@@ -19,6 +21,21 @@ export function* getUserKYCStatus() {
     } catch (e) {
         console.log(e)
     }
+}export function* getUserConfigs() {
+    try {
+        const {
+            data: {
+                theme: userTheme,
+                language,
+                ...userConfigs
+            }
+        } = yield call(axios.get, '/config/user/v1')
+        i18n.changeLanguage(language)
+        yield put(actions.setUserConfig(userConfigs));
+        if (userTheme) yield put(actions.setTheme(userTheme));
+    } catch (e) {
+        console.log(e)
+    }
 }
 
 export function* setFavPair(action) {
diff --git a/src/store/sagas/index.js b/src/store/sagas/index.js
index 92851f73..c12ffce2 100644
--- a/src/store/sagas/index.js
+++ b/src/store/sagas/index.js
@@ -3,7 +3,7 @@ import * as actionTypes from "../actions/actionTypes";
 
 import {getExchangeLastPrice, loadConfig, setActivePair, setIPGLock, setThemeSaga, setVerifyEmailLock} from "./global";
 
-import {getUserKYCStatus, logout, setFavPair, setUserTokens} from "./auth";
+import {getUserConfigs, getUserKYCStatus, logout, setFavPair, setUserTokens} from "./auth";
 
 export function* watchGlobal() {
   yield takeEvery(actionTypes.LOGOUT_INITIATE, logout);
@@ -16,4 +16,6 @@ export function* watchGlobal() {
   yield takeEvery(actionTypes.SET_KYC_STATUS_INITIATE, getUserKYCStatus);
   yield takeEvery(actionTypes.SET_LAST_PRICE_INITIATE, getExchangeLastPrice);
   yield takeEvery(actionTypes.SET_FAV_PAIR_INITIATE, setFavPair);
+
+  yield takeEvery(actionTypes.GET_USER_CONFIGS_INITIATE, getUserConfigs);
 }

From 961270fa5f552e3906dd0f2331e508130829e7fe Mon Sep 17 00:00:00 2001
From: Benyamin <Koorosh.azimi1@gmail.com>
Date: Mon, 27 Nov 2023 18:25:42 +0330
Subject: [PATCH 3/3] Fix Language Config

---
 .../Pages/UserPanel/Sections/Footer/Footer.js | 25 +++++---
 src/store/actions/global.js                   | 61 ++++++++++---------
 src/store/sagas/auth.js                       |  1 -
 src/store/sagas/global.js                     |  8 ++-
 yarn.lock                                     |  4 +-
 5 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/src/main/Browser/Pages/UserPanel/Sections/Footer/Footer.js b/src/main/Browser/Pages/UserPanel/Sections/Footer/Footer.js
index 3f3c1012..1b7bdb5b 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Footer/Footer.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Footer/Footer.js
@@ -9,14 +9,21 @@ import {setThemeInitiate} from "../../../../../../store/actions";
 import {Link} from "react-router-dom";
 import packageJson from "../../../../../../../package.json"
 import {toAbsoluteUrl} from "../../../../../../utils/utils";
+import {setUserConfig} from "js-api-client";
 
 const Footer = () => {
     const {t} = useTranslation();
     const theme = useSelector((state) => state.global.theme)
+    const isLogin = useSelector((state) => state.auth.isLogin)
     const dispatch = useDispatch()
     const languages = useSelector((state) => state.exchange.supportedLanguages)
-    const changeLanguage = (lang) =>{
+    const changeLanguage = (lang) => {
         i18n.changeLanguage(lang)
+        if (isLogin) {
+            setUserConfig({
+                language: lang
+            })
+        }
     }
 
     return (
@@ -60,11 +67,15 @@ const Footer = () => {
                 <div className={`column ai-center jc-center`}>
                     <div className={`row ai-center py-2`}>
                         <span className={`pl-1`}>{t("Footer.darkMode")}:</span>
-                        <ToggleSwitch onchange={(e) => dispatch(setThemeInitiate(e.target.checked ? "DARK" : "LIGHT"))} checked={theme === "DARK"}/>
+                        <ToggleSwitch
+                            onchange={(e) => dispatch(setThemeInitiate(e.target.checked ? "DARK" : "LIGHT", isLogin))}
+                            checked={theme === "DARK"}/>
                     </div>
                     <div className={`row ai-center jc-between`}>
                         <div className={`row ai-center ${classes.languages}`}>
-                            {languages?.map((lang, index) => <span className="cursor-pointer px-1" onClick={() => changeLanguage(lang)} key={index}>{t("Languages."+ lang)}</span>)}
+                            {languages?.map((lang, index) => <span className="cursor-pointer px-1"
+                                                                   onClick={() => changeLanguage(lang)}
+                                                                   key={index}>{t("Languages." + lang)}</span>)}
                         </div>
                     </div>
                 </div>
@@ -75,14 +86,14 @@ const Footer = () => {
                 </div>
             </div>
             <div className={`width-90 flex jc-center ai-center mt-1`}>
-              <p>
-                <Trans
+                <p>
+                    <Trans
                         i18nKey="Footer.copyright"
                         values={{
-                            year: new Intl.DateTimeFormat(i18n.language , {year: 'numeric'}).format(new Date()),
+                            year: new Intl.DateTimeFormat(i18n.language, {year: 'numeric'}).format(new Date()),
                         }}
                     />
-              </p>
+                </p>
             </div>
         </div>
     );
diff --git a/src/store/actions/global.js b/src/store/actions/global.js
index 0a617c47..6cc00265 100644
--- a/src/store/actions/global.js
+++ b/src/store/actions/global.js
@@ -1,51 +1,52 @@
 import * as actionTypes from "./actionTypes";
 
-export const setThemeInitiate = (theme) => {
-  return {
-    type: actionTypes.SET_THEME_INITIATE,
-    theme,
-  };
+export const setThemeInitiate = (theme, isLogin) => {
+    return {
+        type: actionTypes.SET_THEME_INITIATE,
+        isLogin,
+        theme,
+    };
 };
 
 export const setTheme = (theme) => {
-  return {
-    type: actionTypes.SET_THEME,
-    theme: theme.toUpperCase(),
-  };
+    return {
+        type: actionTypes.SET_THEME,
+        theme: theme.toUpperCase(),
+    };
 };
 
 export const setLoading = (isLoading) => {
-  return {
-    type: actionTypes.SET_LOADING,
-    isLoading,
-  };
+    return {
+        type: actionTypes.SET_LOADING,
+        isLoading,
+    };
 };
 
 export const setError = (error) => {
-  return {
-    type: actionTypes.SET_ERROR,
-    error,
-  };
+    return {
+        type: actionTypes.SET_ERROR,
+        error,
+    };
 };
 
 export const loadConfig = (token) => {
-  return {
-    type: actionTypes.LOAD_CONFIG,
-    token
-  };
+    return {
+        type: actionTypes.LOAD_CONFIG,
+        token
+    };
 };
 
 export const setInfoMessage = (messageType, message) => {
-  return {
-    type: actionTypes.SET_INFO_MESSAGE,
-    messageType,
-    message,
-  };
+    return {
+        type: actionTypes.SET_INFO_MESSAGE,
+        messageType,
+        message,
+    };
 };
 
 export const setMarketInterval = (interval) => {
-  return {
-    type: actionTypes.SET_MARKET_INTERVAL,
-    interval,
-  };
+    return {
+        type: actionTypes.SET_MARKET_INTERVAL,
+        interval,
+    };
 };
\ No newline at end of file
diff --git a/src/store/sagas/auth.js b/src/store/sagas/auth.js
index b966b3c4..bf275684 100644
--- a/src/store/sagas/auth.js
+++ b/src/store/sagas/auth.js
@@ -2,7 +2,6 @@ import {call, put} from "redux-saga/effects";
 import * as actions from "../actions/index";
 import axios from "axios";
 import i18n from "i18next";
-import jwtDecode from "jwt-decode";
 
 export function* logout() {
     yield call([localStorage, 'removeItem'], "refreshToken")
diff --git a/src/store/sagas/global.js b/src/store/sagas/global.js
index 4acd724a..d7986449 100644
--- a/src/store/sagas/global.js
+++ b/src/store/sagas/global.js
@@ -8,9 +8,11 @@ export function* setThemeSaga(action) {
     try {
         yield put(actions.setTheme(action.theme));
         yield call([localStorage, 'setItem'], "theme", action.theme)
-        yield call(axios.post, '/config/user/v1', {
-            theme: action.theme
-        })
+        if (action.isLogin) {
+            yield call(axios.post, '/config/user/v1', {
+                theme: action.theme
+            })
+        }
     } catch (e) {
         console.log(e)
     }
diff --git a/yarn.lock b/yarn.lock
index 7fde28af..6de0e156 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9446,8 +9446,8 @@ __metadata:
 
 "js-api-client@https://github.com/opexdev/js-api-client.git#develop":
   version: 1.0.0-beta2
-  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=c185b3b2b61c2655592b4d31276473bed5b47a25"
-  checksum: e5b1085d4b7ece8766720ac12ad56a1270acd9705bd3a8d364b776273b9a99b14ff9a5768074aedfb96131ae92b198d1035b30ff794f45217c0d5a393e903b5a
+  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=754533374a6d8c61a80fe95122810b33229815d0"
+  checksum: a97c02196681a0538c164fb3e0c8348eeee1a8a0fd984441ab257b9187675a4d7b71b16153dfc4f7399c7554fc94d1bdbb29d6422fd9c783b34130f1acd882e2
   languageName: node
   linkType: hard