Update to React 18

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

package.json

@@ -4,47 +4,43 @@
   "homepage": "",
   "private": true,
   "dependencies": {
-    "@tanstack/react-query": "^4.16.1",
-    "@tanstack/react-query-devtools": "^4.16.1",
+    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-query-devtools": "^4.29.6",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.7.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "axios": "^0.27.2",
-    "bignumber.js": "^9.0.1",
+    "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
-    "faker": "^5.4.0",
-    "i18next": "^21.8.0",
-    "i18next-browser-languagedetector": "^6.1.4",
-    "i18next-http-backend": "^1.4.0",
+    "i18next": "^22.4.15",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.2.0",
     "js-api-client": "https://github.com/opexdev/js-api-client.git#develop",
     "jwt-decode": "^3.1.2",
-    "lightweight-charts": "^3.8.0",
-    "moment-jalaali": "^0.9.2",
+    "lightweight-charts": "^4.0.1",
+    "moment-jalaali": "^0.10.0",
     "normalize.css": "^8.0.1",
     "radium": "^0.26.2",
-    "rc-scrollbars": "^1.1.3",
-    "react": "^17.0.1",
-    "react-countdown": "^2.3.2",
-    "react-device-detect": "^2.2.2",
-    "react-dom": "^17.0.1",
+    "rc-scrollbars": "^1.1.5",
+    "react": "^18.2.0",
+    "react-countdown": "^2.3.5",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^11.3.1",
-    "react-hot-toast": "^2.2.0",
-    "react-i18next": "^11.16.9",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
     "react-number-format": "^4.9.3",
-    "react-qr-code": "^2.0.7",
-    "react-redux": "^7.2.2",
-    "react-router-dom": "^6.3.0",
+    "react-qr-code": "^2.0.11",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.11.0",
     "react-scripts": "^5.0.1",
-    "react-select": "^5.3.2",
-    "react-swipeable-list": "^1.7.0",
+    "react-select": "^5.7.3",
+    "react-swipeable-list": "^1.8.1",
     "react-tooltip": "^4.2.21",
-    "redux": "^4.2.0",
-    "redux-saga": "^1.1.3",
+    "redux": "^4.2.1",
+    "redux-saga": "^1.2.3",
     "web-vitals": "^0.2.4"
   },
-  "resolutions": {
-    "react-error-overlay": "6.0.9"
-  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -69,5 +65,5 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "yarn@3.2.4"
+  "packageManager": "yarn@3.2.3"
 }

public/assets/locales/en/translation.json

@@ -605,7 +605,7 @@
     "mostVolume": "Most Volume",
     "nullResponse": "No transactions in the last {{interval}}"
   },
-  "footer": {
+  "Footer": {
     "darkMode": "Dark Mode",
     "aboutUs" : "About Us",
     "contactUS" : "Contact Us",
@@ -616,7 +616,7 @@
     "addCoin": "Add Coin",
     "demo": "Market Demo",
     "errorReport": "Error Report",
-    "copyright": "© 2021 OPEX. All rights reserved."
+    "copyright": "© {{year}} OPEX. All rights reserved."
   },
   "ImageInput": {
     "title": "",

public/assets/locales/fa/translation.json

@@ -605,7 +605,7 @@
     "mostVolume": "بیشترین حجم معامله",
     "nullResponse": "در {{interval}} گذشته معامله‌ای انجام نشده"
   },
-  "footer": {
+  "Footer": {
     "darkMode": "تم تاریک",
     "aboutUs": "درباره ما",
     "contactUS": "تماس با ما",
@@ -616,7 +616,7 @@
     "addCoin": "درخواست افزودن سکه یا توکن",
     "demo": "بازار نمایشی (ویژه تمرین رایگان)",
     "errorReport": "گزارش خطا و مشکل",
-    "copyright": "1400 - کلیه حقوق برای شرکت تجربه کاربری متن باز (در شرف تاُسیس) محفوظ است."
+    "copyright": "{{year}} - کلیه حقوق برای شرکت تجربه کاربری متن باز (در شرف تاُسیس) محفوظ است."
   },
   "ImageInput": {
     "title": "",

src/components/Footer/Footer.js

@@ -1,17 +1,21 @@
 import React from 'react';
 import classes from './Footer.module.css'
-import {useTranslation} from "react-i18next";
+import {Trans, useTranslation} from "react-i18next";
 import {toAbsoluteUrl} from "../../utils/utils";
+import i18n from "i18next";
 
 const Footer = () => {
-
     const {t} = useTranslation();
-
     return (
         <div className={`width-100 column fs-0-6 flex jc-center ai-center py-3 ${classes.container}`}>
             <div className={`width-90 m-auto column jc-center ai-center text-center`}>
                 <img src={toAbsoluteUrl('/assets/logo/logo.svg')} alt={t("title")} title={t("title")} className={`mb-1 img-lg-1`}/>
-                <p className={`mt-1`}>{t("footer.copyright")}</p>
+                <Trans
+                    i18nKey="Footer.copyright"
+                    values={{
+                        year: new Intl.DateTimeFormat(i18n.language , {year: 'numeric'}).format(new Date()),
+                    }}
+                />
             </div>
         </div>
     );

src/components/Loading/Loading.js

@@ -1,12 +1,12 @@
 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, type}) => {
+const Loading = ({type}) => {
     const {t} = useTranslation();
+    const isDark = useSelector((state) => state.global.isDark)
     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..."/>
@@ -15,11 +15,4 @@ const Loading = ({isDark, type}) => {
     );
 };
 
-
-const mapStateToProps = (state) => {
-    return {
-        isDark: state.global.isDark,
-    };
-};
-
-export default connect(mapStateToProps, null)(Loading);
+export default Loading;

src/constants/chart.js

@@ -1,3 +1,5 @@
+import {ColorType} from "lightweight-charts";
+
 export const candleColors = {
     upColor: "#18a979",
     downColor: "#d73e36",
@@ -12,6 +14,7 @@ export const histogramColors = {
     priceFormat: {
         type: "volume",
     },
+    priceScaleId: '',
     overlay: true,
     scaleMargins: {
         top: 0.8,
@@ -20,7 +23,7 @@ export const histogramColors = {
 };
 export const darkTheme = {
     layout: {
-        backgroundColor: "#282a36",
+        background: { type: ColorType.Solid, color: '#282a36' },
         textColor: "rgba(255, 255, 255, 0.9)",
     },
     grid: {
@@ -40,7 +43,7 @@ export const darkTheme = {
 };
 export const lightTheme = {
     layout: {
-        backgroundColor: "#ffffff",
+        background: { type: ColorType.Solid, color: '#ffffff' },
         textColor: "#191919",
     },
     grid: {

src/index.js

@@ -1,8 +1,7 @@
-import React, {Suspense} from "react";
-import ReactDOM from "react-dom";
+import React from "react";
 import "./i18n/i18n";
 import {Provider} from "react-redux";
-import {createStore, applyMiddleware, combineReducers, compose} from "redux";
+import {applyMiddleware, combineReducers, compose, createStore} from "redux";
 import createSagaMiddleware from "redux-saga";
 import globalReducer from "./store/reducers/globalReducer";
 import "normalize.css";
@@ -16,7 +15,8 @@ import axios from "axios";
 import exchangeReducer from "./store/reducers/exchangeReducer";
 import {StyleRoot} from "radium";
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
+import {createRoot} from "react-dom/client";
 
 
 const sagaMiddleware = createSagaMiddleware();
@@ -55,18 +55,16 @@ setupAxios(axios, store);
 //React query client
 const queryClient = new QueryClient()
 
-ReactDOM.render(
-    <React.StrictMode>
-        <Suspense fallback={"loading"}>
-            <Provider store={store}>
-                <StyleRoot>
-                    <QueryClientProvider client={queryClient}>
-                        <Main baseURL={PUBLIC_URL}/>
-                       {/* <ReactQueryDevtools initialIsOpen={false} />*/}
-                    </QueryClientProvider>
-                </StyleRoot>
-            </Provider>
-        </Suspense>
-    </React.StrictMode>,
-    document.getElementById("root"),
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+root.render(
+    <Provider store={store}>
+        <StyleRoot>
+            <QueryClientProvider client={queryClient}>
+                <Main baseURL={PUBLIC_URL}/>
+                <ReactQueryDevtools initialIsOpen={false}/>
+            </QueryClientProvider>
+        </StyleRoot>
+    </Provider>
 );

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

@@ -7,7 +7,7 @@ import LoginFormLoading from "../LoginLoading/LoginFormLoading";
 import {setUserAccountInfoInitiate, setUserInfo, setUserTokensInitiate} from "../../../../../../store/actions";
 import {useLocation, useNavigate} from "react-router-dom";
 import {useTranslation} from "react-i18next";
-import {setKYCStatusInitiate} from "../../../../../../store/actions/auth";
+import {setKYCStatusInitiate} from "../../../../../../store/actions";
 import Button from "../../../../../../components/Button/Button";
 import jwtDecode from "jwt-decode";
 import OTPForm from "../OTPForm/OTPForm";
@@ -28,7 +28,7 @@ const LoginForm = () => {
     const [credential, setCredential] = useState({username: "", password: "", otp: ""});
     const from = location.state?.from?.pathname || "/";
 
-
+    const isDevelopment = window.env.REACT_APP_ENV === "development";
     const agent = [deviceType , browserName , fullBrowserVersion]
 
     useEffect(() => {
@@ -110,9 +110,9 @@ const LoginForm = () => {
 
     return <form onSubmit={(e) => submit(e)} className={`column ai-center jc-between ${classes.form}`}>
         <div className={`width-100 column jc-center ai-center ${classes.formBody} py-2`}>
-            {!needOTP ? <div className={`font-weight-300 fs-0-6 mb-2`}>
+            {!needOTP && isDevelopment ? <div className={`font-weight-300 fs-0-6 mb-2`}>
                 <span>برای ورود آزمایشی،  <span className={`hover-text cursor-pointer`} onClick={() => setCredential({
-                    username: "demo1@opex.dev",
+                    username: "test1@opex.dev",
                     password: "12345678",
                     otp: ""
                 })}

src/main/Mobile/Pages/UserPanel/Secttions/Content/Content.js

@@ -1,21 +1,18 @@
-import React, {useEffect} from "react";
+import React from "react";
 import classes from "./Content.module.css";
 import ScrollBar from "../../../../../../components/ScrollBar";
 import {Navigate, Route, Routes} from "react-router-dom";
 import * as RoutesName from "../../../../Routes/routes";
+import {DepositRelative} from "../../../../Routes/routes";
 import {useTranslation} from "react-i18next";
 import Wallet from "./components/Wallet/Wallet";
 import Settings from "./components/Settings/Settings";
 import ProtectedRoute from "../../../../../../components/ProtectedRoute/ProtectedRoute";
 import {useSelector} from "react-redux";
-import {Deposit, DepositRelative, MarketRelative} from "../../../../Routes/routes";
 import Market from "./components/Market/Market";
-import {activeOrderLayout} from "../../../../../../store/actions/global";
 
 const Content = () => {
 
-
-
     const {t} = useTranslation();
     const defaultWallet = useSelector((state) => state.exchange.assets[0])
 

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/Sections/OrderBookSection/OrderBookSection.js

@@ -17,13 +17,8 @@ const OrderBookSection = () => {
 
 
     const GoToOrderHandler = () => {
-
-        // setActiveOrder(true)
         navigate(RoutesName.Order, {replace: true});
         dispatch(activeOrderLayout(true))
-
-
-
     }
 
     return (
@@ -36,14 +31,12 @@ const OrderBookSection = () => {
                     buttonClass={`${classes.thisButton} ${classes.buyOrder}`}
                     type="submit"
                     onClick={GoToOrderHandler}
-                    // buttonTitle="سفارش خرید"
                     buttonTitle={t("buy")}
                 />
                 <Button
                     buttonClass={`${classes.thisButton} ${classes.sellOrder}`}
                     type="submit"
                     onClick={GoToOrderHandler}
-                    // buttonTitle="سفارش فروش"
                     buttonTitle={t("sell")}
                 />
             </div>