Release v1.0.5-beta.16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opex",
-  "version": "v1.0.5-beta.15",
+  "version": "v1.0.5-beta.16",
   "homepage": "",
   "private": true,
   "dependencies": {

public/assets/locales/en/translation.json

@@ -249,7 +249,8 @@
     "coin": "Coins",
     "category": "Categories",
     "size": "Number",
-    "period" : "Period"
+    "period" : "Period",
+    "ascendingByTime" : "Ascending By Time"
   },
   "TransactionCategory": {
     "DEPOSIT": "Deposit",
@@ -258,7 +259,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

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

public/assets/locales/uzb/translation.json

@@ -249,7 +249,8 @@
     "coin": "Koins",
     "category": "Toifalar",
     "size": "Raqam",
-    "period" : "Davr"
+    "period" : "Davr",
+    "ascendingByTime" : "Eng so'nggisiga asoslangan ko'rsatish"
   },
   "TransactionCategory": {
     "DEPOSIT": "Depozit",
@@ -258,7 +259,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/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>
 );