Release v1.0.1-beta.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opex",
-  "version": "v1.0.1-beta.4",
+  "version": "v1.0.1-beta.5",
   "homepage": "",
   "private": true,
   "dependencies": {

public/assets/locales/en/translation.json

@@ -254,7 +254,8 @@
     "coin": "Coins",
     "category": "Categories",
     "size": "Number",
-    "period" : "Period"
+    "period" : "Period",
+    "ascendingByTime" : "Ascending By Time"
   },
   "TransactionCategory": {
     "DEPOSIT": "Deposit",
@@ -263,7 +264,8 @@
     "WITHDRAW": "Withdraw",
     "ORDER_CANCEL": "Cancel Order",
     "ORDER_CREATE": "Create Order",
-    "ORDER_FINALIZED": "Finalized Order"
+    "ORDER_FINALIZED": "Finalized Order",
+    "ETC" : "Unknown"
   },
   "DepositWithdraw": {
     "title": "Deposit / Withdraw",

public/assets/locales/fa/translation.json

@@ -254,7 +254,8 @@
     "coin" : "ارز",
     "category" : "نوع تراکنش",
     "size" : "تعداد",
-    "period" : "بازه زمانی"
+    "period" : "بازه زمانی",
+    "ascendingByTime" : "نمایش براساس جدیدترین"
   },
   "TransactionCategory": {
     "DEPOSIT" : "واریز",
@@ -263,7 +264,8 @@
     "WITHDRAW" : "برداشت",
     "ORDER_CANCEL" : "لغو سفارش",
     "ORDER_CREATE" : "ثبت سفارش",
-    "ORDER_FINALIZED" : "اتمام سفارش"
+    "ORDER_FINALIZED" : "اتمام سفارش",
+    "ETC" : "نامشخص"
   },
   "DepositWithdraw": {
     "title": "واریز/برداشت",

public/assets/locales/uzb/translation.json

@@ -254,7 +254,8 @@
     "coin": "Koins",
     "category": "Toifalar",
     "size": "Raqam",
-    "period" : "Davr"
+    "period" : "Davr",
+    "ascendingByTime" : "Eng so'nggisiga asoslangan ko'rsatish"
   },
   "TransactionCategory": {
     "DEPOSIT": "Depozit",
@@ -263,7 +264,8 @@
     "WITHDRAW": "Olib chiqish",
     "ORDER_CANCEL": "Buyurtmani bekor qilish",
     "ORDER_CREATE": "Buyurtma yaratish",
-    "ORDER_FINALIZED": "Buyurtma yakunlandi"
+    "ORDER_FINALIZED": "Buyurtma yakunlandi",
+    "ETC" : "Noma'lum"
   },
   "DepositWithdraw": {
     "title": "Depozit / Pul olish",

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,45 @@ 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 dispatch = useDispatch()
+
     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 theme = useSelector((state) => state.global.theme)
+    const isLogin = useSelector((state) => state.auth.isLogin)
+    const languages = useSelector((state) => state.exchange.supportedLanguages)
+
+    const changeLanguage = (lang) => {
+        i18n.changeLanguage(lang)
+        if (isLogin) {
+            setUserConfig({
+                language: lang
+            })
+        }
+    }
+
 
-    const languages = window.env.REACT_APP_LANGS_SUPPORT.split(",")
 
     useEffect(() => {
         ReactTooltip.rebuild();
@@ -44,7 +56,7 @@ const SideMenu = () => {
     }
 
     const changeLanguageHandler = (lang) => {
-        i18n.changeLanguage(lang)
+        changeLanguage(lang)
         dispatch(showSideMenu(false))
     }
 
@@ -143,7 +155,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,15 +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)
-
-    console.log("isDark", isDark)
+    const theme = useSelector((state) => state.global.theme)
 
     const optionClassHandler = (state) => {
         let className = classes.selectOptions
@@ -64,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 (