Sync configs

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

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;

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);
+export default Loading;

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,17 +27,18 @@ 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
-            }
+
+        if (state.isFocused) {
+            className = className + " " + classes.isFocused
+        }
+        if (state.isSelected) {
+            className = className + " " + classes.isSelected
+        }
+
         return className;
     }
 
@@ -55,12 +56,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),
@@ -75,33 +75,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"
@@ -112,21 +102,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>
+    );
 };
 
 

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

src/main/Browser/Browser.js

@@ -28,11 +28,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");
@@ -50,6 +53,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",
@@ -104,7 +113,7 @@ const Browser = () => {
                     <Route path={RoutesName.ContactUs} element={<ContactUs/>}/>
                 </Route>
             </Routes>
-            <Tooltip  id="opex-tooltip"/>
+            <Tooltip id="opex-tooltip"/>
             <Toast/>
         </>
 

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

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>
 }