Sync app and user configs

src/components/Loading/Loading.js

@@ -6,10 +6,10 @@ import {isMobile} from 'react-device-detect';
 
 const Loading = ({type}) => {
     const {t} = useTranslation();
-    const isDark = useSelector((state) => state.global.isDark)
+    const theme = useSelector((state) => state.global.theme)
     return (
         <div className="width-100 column ai-center jc-center" style={{height: "100%"}}>
-            <img className="mb-05" style={{width: isMobile ? "10vw" : "3vw"}} src={isDark ? type === "linear" ? images.linearLoading : images.squareLoading : type === "linear" ? images.linearLoading : images.squareLoadingLight} alt="loading..."/>
+            <img className="mb-05" style={{width: isMobile ? "10vw" : "3vw"}} src={theme === "DARK" ? type === "linear" ? images.linearLoading : images.squareLoading : type === "linear" ? images.linearLoading : images.squareLoadingLight} alt="loading..."/>
             {type !== "linear" && <span className="flashit mt-1">{t('loading')}</span>}
         </div>
     );

src/components/SideMenu/SideMenu.js

@@ -2,33 +2,46 @@ import React, {useEffect} from 'react';
 import classes from './SideMenu.module.css'
 import Icon from "../Icon/Icon";
 import {useDispatch, useSelector} from "react-redux";
-import {setThemeInitiate, showSideMenu} from "../../store/actions/global";
+import { showSideMenu} from "../../store/actions/global";
 import {Link, useLocation} from "react-router-dom";
 import {useTranslation} from "react-i18next";
 import ReactTooltip from "react-tooltip";
 import {setLogoutInitiate} from "../../store/actions";
 import {toast} from "react-hot-toast";
-import {logout} from "js-api-client";
+import {logout, setUserConfig} from "js-api-client";
 import {images} from "../../assets/images";
 import i18n from "i18next";
 import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
 import *  as Routes from "../../main/Mobile/Routes/routes";
 import {toAbsoluteUrl} from "../../utils/utils";
 import packageJson from "../../../package.json"
+import {setThemeInitiate} from "../../store/actions";
 
 
 const SideMenu = () => {
 
     const {t} = useTranslation();
-    const isDark = useSelector((state) => state.global.isDark)
-    const dispatch = useDispatch();
+    let location = useLocation();
+
     const open = useSelector((state) => state.global.showSideMenu)
-    const isLogin = useSelector((state) => state.auth.isLogin)
+
     const firstName = useSelector((state) => state.auth.firstName)
     const lastName = useSelector((state) => state.auth.lastName)
-    let location = useLocation();
 
-    const languages = window.env.REACT_APP_LANGS_SUPPORT.split(",")
+    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) => {
+        i18n.changeLanguage(lang)
+        if (isLogin) {
+            setUserConfig({
+                language: lang
+            })
+        }
+    }
+
+
 
     useEffect(() => {
         ReactTooltip.rebuild();
@@ -44,7 +57,7 @@ const SideMenu = () => {
     }
 
     const changeLanguageHandler = (lang) => {
-        i18n.changeLanguage(lang)
+        changeLanguage(lang)
         dispatch(showSideMenu(false))
     }
 
@@ -143,7 +156,10 @@ const SideMenu = () => {
                     </div>}
                     <div className={`row ai-center mb-2`}>
                         <span className={`ml-2`}>{t("Footer.darkMode")}:</span>
-                        <ToggleSwitch onchange={(e) => dispatch(setThemeInitiate(e.target.checked))} checked={isDark}/>
+                        <ToggleSwitch
+                            onchange={(e) => dispatch(setThemeInitiate(e.target.checked ? "DARK" : "LIGHT", isLogin))}
+                            checked={theme === "DARK"}/>
+
                     </div>
                     <img src={toAbsoluteUrl('/assets/logo/logo.svg')} alt={t("title")} title={t("title")} className={`img-lg-1 mb-1 mt-2`}/>
                     <span className={`mt-1`}>{packageJson.version}</span>

src/components/TextInput/TextInput.js

@@ -6,13 +6,13 @@ import DatePicker from "react-multi-date-picker";
 import persian_fa from "react-date-object/locales/persian_fa";
 import persian from "react-date-object/calendars/persian";
 import {useSelector} from "react-redux";
-import i18n from "../../i18n/i18n";
+import i18n from "i18next";
 import "react-multi-date-picker/styles/backgrounds/bg-dark.css"
 
 const TextInput = (props) => {
     const {customRef,readOnly,onchange,customClass,options, lead, ltr, after ,select ,alerts ,max, datePicker, ...other} = props
 
-    const isDark = useSelector((state) => state.global.isDark)
+    const theme = useSelector((state) => state.global.theme)
 
     const optionClassHandler = (state) => {
         let className = classes.selectOptions
@@ -62,7 +62,7 @@ const TextInput = (props) => {
 
     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}

src/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-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 {StyleRoot} from "radium";
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
 import {createRoot} from "react-dom/client";
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+import {initReactI18next} from "react-i18next";
 
 
 const sagaMiddleware = createSagaMiddleware();
@@ -26,12 +29,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.
  *
@@ -52,6 +49,30 @@ 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()
 

src/main/Mobile/Mobile.js

@@ -30,15 +30,16 @@ import EasyTrading from "./Pages/EasyTrading/EasyTrading";
 
 const Mobile = () => {
 
-    const dispatch = useDispatch();
     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 isLogin = useSelector((state) => state.auth.isLogin)
+    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");
@@ -57,13 +58,19 @@ const Mobile = () => {
     }, []);
 
 
-    useInterval(() => {
+    /*useInterval(() => {
         dispatch(setUserAccountInfoInitiate());
     }, isLogin ? 3000 : null)
 
     useInterval(() => {
         dispatch(setLastPriceInitiate());
-    }, 3000)
+    }, 3000)*/
+
+    useEffect(() => {
+        const meta = document.getElementsByTagName('meta')
+        document.title = title ? title : " ";
+        meta.description.content = description ? description : " "
+    }, [title, description])
 
     const Toast = () => <Toaster position="top-center" toastOptions={
         {
@@ -93,24 +100,16 @@ const Mobile = () => {
             },
         }} containerStyle={{}}/>
 
-    if (isLoading) {
-        return <FullWidthLoading/>
-    }
-    if (hasError) {
-        return <FullWidthError/>
-    }
+    if (isLoading) return <FullWidthLoading/>
+
+    if (hasError)  return <FullWidthError/>
 
     return (
         <div className={`mobile-container`}>
             <Routes>
                 <Route path={RoutesName.Login} element={<Login/>}/>
                 <Route path={RoutesName.User + "/*"} element={<User/>}/>
-                {/*<Route path={RoutesName.Landing} element={<Landing/>}/>*/}
-                {/*<Route path={RoutesName.AllMarket} element={<AllMarket/>}/>*/}
-                {/*<Route path={RoutesName.Guide} element={<Guide/>}/>*/}
                 <Route path={RoutesName.Panel + "/*"} element={<UserPanel/>}/>
-
-
                 <Route element={<Layout/>}>
                     <Route path={RoutesName.Landing} element={<Landing/>}/>
                     <Route path={RoutesName.AllMarket} element={<AllMarket/>}/>
@@ -122,14 +121,10 @@ const Mobile = () => {
                     <Route path={RoutesName.Rules} element={<Rules/>}/>
                     <Route path={RoutesName.ContactUs} element={<ContactUs/>}/>
                 </Route>
-
-
             </Routes>
-
             <ReactTooltip data-html={true} data-effect="float"/>
             <Toast/>
             <SideMenu/>
-
         </div>
     );
 };

src/main/Mobile/Pages/AllMarket/components/MarketStats/components/MostIncreasedPrice/MostIncreasedPrice.js

@@ -6,8 +6,6 @@ import {useTranslation} from "react-i18next";
 
 const MostIncreasedPrice = ({mostIncreasedPrice}) => {
 
-    console.log("mostIncreasedPrice" , mostIncreasedPrice)
-
     const {t} = useTranslation();
 
     return (

src/main/Mobile/Pages/Login/components/LoginForm/LoginForm.js

@@ -3,7 +3,12 @@ import React, {useEffect, useState} from "react";
 import classes from "../../Login.module.css";
 import TextInput from "../../../../../../components/TextInput/TextInput";
 import LoginFormLoading from "../LoginLoading/LoginFormLoading";
-import {setUserAccountInfoInitiate, setUserInfo, setUserTokensInitiate} from "../../../../../../store/actions";
+import {
+    getUserConfigsInitiate,
+    setUserAccountInfoInitiate,
+    setUserInfo,
+    setUserTokensInitiate
+} from "../../../../../../store/actions";
 import {useLocation, useNavigate} from "react-router-dom";
 import {useTranslation} from "react-i18next";
 import Button from "../../../../../../components/Button/Button";
@@ -77,9 +82,12 @@ 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(setUserAccountInfoInitiate())*/
+
+                dispatch(setUserInfo(jwt));
+                dispatch(setUserTokensInitiate(userToken));
+                dispatch(getUserConfigsInitiate());
+
                 await getKycStatus()
                 return navigate(from, {replace: true});
             })

src/main/Mobile/Pages/Login/components/LoginLoading/LoginFormLoading.js

@@ -4,10 +4,10 @@ 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: "8vw", textAlign: "center"}} src={isDark ? images.squareLoading : images.squareLoadingLight} alt="Loading"/>
+        <img style={{width: "8vw", textAlign: "center"}} src={theme === "DARK" ? images.squareLoading : images.squareLoadingLight} alt="Loading"/>
     </div>
 }
 

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/TradingView/components/MarketChart/MarketChart.js

@@ -16,7 +16,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)
@@ -54,7 +54,7 @@ const MarketChart = ({type}) => {
         priceScale: lightTheme.priceScale,
         timeScale: {...lightTheme.timeScale, ...timeScale}
     };
-    if (isDark) {
+    if (theme === "DARK") {
         chartProperties = {
             ...chartProperties,
             layout: {
@@ -77,7 +77,7 @@ const MarketChart = ({type}) => {
             chartProperties,
         );
 
-        candleSeries = chart.current.addCandlestickSeries(isDark ? darkTheme : candleColors);
+        candleSeries = chart.current.addCandlestickSeries(theme === "DARK" ? darkTheme : candleColors);
         volumeSeries = chart.current.addHistogramSeries({
             priceFormat: {
                 type: 'volume',
@@ -134,7 +134,7 @@ const MarketChart = ({type}) => {
     }, [])
 
     useEffect(() => {
-        if (isDark) {
+        if (theme === "DARK") {
             chart.current.applyOptions({
                 ...chartProperties,
                 layout: {
@@ -155,7 +155,7 @@ const MarketChart = ({type}) => {
                 timeScale: lightTheme.timeScale,
             });
         }
-    }, [isDark]);
+    }, [theme]);
 
     return (
         <div ref={chartContainerRef} className={`width-100  ${classes.chartContainer}`}>

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Wallet/components/withdrawal/withdrawal.js

@@ -67,7 +67,6 @@ const Withdrawal = () => {
         if (navigator.clipboard !== undefined) {
             navigator.clipboard.readText()
                 .then(text => {
-                    //console.log('Pasted content: ', text);
                     setAddress({...address, value: text})
                     toast.success(t('DepositWithdraw.paste'));
                 })