opexdev · Benyamin001 · May 7, 2023 · May 7, 2023
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.4",
     "axios": "^0.27.2",
-    "bignumber.js": "^9.0.2",
+    "bignumber.js": "^9.1.1",
     "faker": "^5.4.0",
     "i18next": "^21.8.0",
     "i18next-browser-languagedetector": "^6.1.4",
@@ -27,15 +27,15 @@
     "react-device-detect": "^2.2.2",
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.3.1",
-    "react-hot-toast": "^2.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-i18next": "^11.16.9",
     "react-number-format": "^4.9.3",
     "react-qr-code": "^2.0.7",
     "react-redux": "^7.2.2",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "4.0.1",
+    "react-scripts": "^5.0.1",
     "react-select": "^5.3.2",
-    "react-tooltip": "^4.2.21",
+    "react-tooltip": "^5.11.2",
     "redux": "^4.2.0",
     "redux-saga": "^1.1.3",
     "web-vitals": "^0.2.4"

diff --git a/src/components/HeaderBuilder/HeaderBuilder.js b/src/components/HeaderBuilder/HeaderBuilder.js
@@ -1,11 +1,10 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import classes from './HeaderBuilder.module.css'
 import {Link, NavLink, useLocation} from "react-router-dom";
 import * as Routes from "../../main/Browser/Routes/routes";
-import {Login, Panel} from "../../main/Browser/Routes/routes";
+import {Login} from "../../main/Browser/Routes/routes";
 import {useDispatch, useSelector} from "react-redux";
 import {useTranslation} from "react-i18next";
-import ReactTooltip from "react-tooltip";
 import {toast} from "react-hot-toast";
 import {images} from "../../assets/images";
 import {setLogoutInitiate} from "../../store/actions";
@@ -23,10 +22,6 @@ const HeaderBuilder = ({children}) => {
     const lastName = useSelector((state) => state.auth.lastName)
     let location = useLocation();
 
-    useEffect(() => {
-        ReactTooltip.rebuild();
-    });
-
     const logOutHandler = async () => {
         logout().then(() => {
             toast.success(t("header.logOutSuccess"))
@@ -67,9 +62,6 @@ const HeaderBuilder = ({children}) => {
                         className={({ isActive }) => isActive ? 'text-orange mx-1 cursor-pointer hover-text' : 'mx-1 cursor-pointer hover-text'}
                     >{t("market.title")}</NavLink>
 
-
-
-
                 </div>
                 <div className={`column ai-end width-15`}>
                     {firstName === null ? (
@@ -94,21 +86,20 @@ const HeaderBuilder = ({children}) => {
                         src={images.signOut}
                         alt={t("signOut")}
                         onClick={logOutHandler}
-                        data-html={true}
-                        data-place="right"
-                        data-effect="float"
-                        data-tip={`<span class="column jc-between col-100">${t("signOut")}</span>`}
+                        data-tooltip-place="right"
+                        data-tooltip-id="opex-tooltip"
+                        data-tooltip-float={true}
+                        data-tooltip-html={`<span class="column jc-between col-100">${t("signOut")}</span>`}
                     />
                 ) : (
                     <Link to={Login} state={{from: location}} className="flex">
                         <img
                             className="img-md-plus cursor-pointer"
                             src={images.signIn}
+                            data-tooltip-html={`<span class="column jc-between col-100">${t("signIn")}</span>`}
                             alt={t("signIn")}
-                            data-html={true}
-                            data-place="right"
-                            data-effect="float"
-                            data-tip={`<span class="column jc-between col-100">${t("signIn")}</span>`}
+                            data-tooltip-id="opex-tooltip"
+                            data-tooltip-place="right"
                         />
                     </Link>
                 )}

diff --git a/src/components/ImageInput/ImageInput.js b/src/components/ImageInput/ImageInput.js
@@ -3,14 +3,10 @@ import {useDropzone} from "react-dropzone";
 import classes from "../../main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/Authentication/components/SendPhotosStep/SendPhotosStep.module.css";
 import Icon from "../Icon/Icon";
 import {useTranslation} from "react-i18next";
-import ReactTooltip from "react-tooltip";
 
 const ImageInput = (props) => {
   const {t} = useTranslation();
 
-  useEffect(() => {
-    ReactTooltip.rebuild();
-  });
 
   const [files, setFiles] = useState([]);
   const {getRootProps, getInputProps, fileRejections} = useDropzone({
@@ -60,10 +56,10 @@ const ImageInput = (props) => {
           onClick={(e) => {
             e.stopPropagation();
           }}
-          data-html={true}
-          data-place="bottom"
-          data-effect="float"
-          data-tip={`<span class="column jc-between col-100">${t(
+          data-tooltip-id="opex-tooltip"
+          data-tooltip-place="bottom"
+          data-tooltip-float={true}
+          data-tooltip-html={`<span class="column jc-between col-100">${t(
             "ImageInput.iconErrorText",
           )}</span>`}>
           <Icon

diff --git a/src/components/NumberInput/NumberInput.js b/src/components/NumberInput/NumberInput.js
@@ -1,6 +1,6 @@
 import React from "react";
 import NumberFormat from "react-number-format";
-import * as classes from "./NumberInput.module.css";
+import classes from "./NumberInput.module.css";
 import Icon from "../Icon/Icon";
 
 const NumberInput = (props) => {
@@ -38,10 +38,10 @@ const NumberInput = (props) => {
     if (alert){
         alertSection =<div
             className={`${classes.inputGroupHint} inputGroupHint fs-0-7`}
-            data-html={true}
-            data-place="left"
-            data-effect="float"
-            data-tip={hint}>
+            data-tooltip-id="opex-tooltip"
+            data-tooltip-place="left"
+            data-tooltip-float={true}
+            data-tooltip-html={hint}>
             <Icon
                 iconName="icon-info text-white fs-0-7 flex"
                 customClass={classes.hintIcon}
@@ -53,10 +53,10 @@ const NumberInput = (props) => {
     if (alerts){
         alertSection =<div
             className={`${classes.inputGroupHint} inputGroupHint jc-start`}
-            data-html={true}
-            data-place="left"
-            data-effect="float"
-            data-tip={props.hint}>
+            data-tooltip-id="opex-tooltip"
+            data-tooltip-place="left"
+            data-tooltip-float={true}
+            data-tooltip-html={props.hint}>
             <Icon
                 iconName={`${classes.iconInfo} text-white fs-0-7 flex`}
                 customClass="hint-icon"

diff --git a/src/components/TextInput/TextInput.js b/src/components/TextInput/TextInput.js
@@ -1,7 +1,7 @@
 import React from "react";
 import Icon from "../Icon/Icon";
 import Select from "react-select";
-import * as classes from "./TextInput.module.css";
+import classes from "./TextInput.module.css";
 
 const TextInput = (props) => {
     const {
@@ -54,10 +54,10 @@ const TextInput = (props) => {
     if (alerts){
         alertSection =<div
             className={`${classes.inputGroupHint} inputGroupHint `}
-            data-html={true}
-            data-place="left"
-            data-effect="float"
-            data-tip={props.hint}>
+            data-tooltip-id="opex-tooltip"
+            data-tooltip-place="left"
+            data-tooltip-float={true}
+            data-tooltip-html={props.hint}>
             <Icon
                 iconName={`${classes.iconInfo} text-white fs-0-7 flex`}
                 customClass="hint-icon"

diff --git a/src/components/VerticalTextInput/VerticalNumberInput.js b/src/components/VerticalTextInput/VerticalNumberInput.js
@@ -1,6 +1,6 @@
 import React from "react";
 import NumberFormat from "react-number-format";
-import * as classes from "./VerticalNumberInput.module.css";
+import classes from "./VerticalNumberInput.module.css";
 import Icon from "../Icon/Icon";
 
 const VerticalNumberInput = (props) => {
@@ -38,10 +38,10 @@ const VerticalNumberInput = (props) => {
     if (alert){
         alertSection =<div
             className={`${classes.inputGroupHint} inputGroupHint `}
-            data-html={true}
-            data-place="left"
-            data-effect="float"
-            data-tip={hint}>
+            data-tooltip-id="opex-tooltip"
+            data-tooltip-place="left"
+            data-tooltip-float={true}
+            data-tooltip-html={hint}>
             <Icon
                 iconName="icon-info text-white fs-0-7 flex"
                 customClass={classes.hintIcon}

diff --git a/src/index.js b/src/index.js
@@ -17,6 +17,7 @@ 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 'react-tooltip/dist/react-tooltip.css';
 
 const sagaMiddleware = createSagaMiddleware();
 const rootReducer = combineReducers({

diff --git a/src/main/Browser/Browser.js b/src/main/Browser/Browser.js
@@ -2,7 +2,6 @@ import React, {useEffect} from "react";
 import {useDispatch, useSelector} from "react-redux";
 import {Route, Routes} from "react-router-dom";
 import i18n from "i18next";
-import ReactTooltip from "react-tooltip";
 import * as RoutesName from "./Routes/routes";
 import {Toaster} from "react-hot-toast";
 import Login from "./Pages/Login/Login";
@@ -16,6 +15,7 @@ import User from "./Pages/User/User";
 import Landing from "./Pages/Landing/Landing";
 import AllMarket from "./Pages/AllMarket/AllMarket";
 import UserPanel from "./Pages/UserPanel/UserPanel";
+import {Tooltip} from "react-tooltip";
 
 const Browser = () => {
     const query = useQuery();
@@ -86,7 +86,7 @@ const Browser = () => {
                 <Route path={RoutesName.Guide} element={<Guide/>}/>
                 <Route path={RoutesName.Panel + "/*"} element={<UserPanel/>}/>
             </Routes>
-            <ReactTooltip data-html={true} data-effect="float"/>
+            <Tooltip  id="opex-tooltip"/>
             <Toast/>
         </>
 

diff --git a/src/main/Browser/Pages/Login/components/EmailVerification/EmailVerification.js b/src/main/Browser/Pages/Login/components/EmailVerification/EmailVerification.js
@@ -3,7 +3,6 @@ import classes from "../../Login.module.css";
 import Button from "../../../../../../components/Button/Button";
 import {useTranslation} from "react-i18next";
 import {getCaptchaImage, getPanelToken, requestForVerifyEmail} from "js-api-client";
-import ReactTooltip from "react-tooltip";
 import LoginFormLoading from "../LoginLoading/LoginFormLoading";
 import {validateEmail} from "../../../../../../utils/utils";
 import {images} from "../../../../../../assets/images";
@@ -63,9 +62,7 @@ const EmailVerification = ({returnFunc, email, disable, returnFuncDisableFalse,
     }, [])
 
 
-    useEffect(() => {
-        ReactTooltip.rebuild();
-    });
+
 
     if (loading) return <LoginFormLoading/>
 
@@ -89,7 +86,7 @@ const EmailVerification = ({returnFunc, email, disable, returnFuncDisableFalse,
         }
         setLoading(true);
 
-        const {data: {access_token: panelToken}} = await getPanelToken(clientId, clientSecret);
+        //const {data: {access_token: panelToken}} = await getPanelToken(clientId, clientSecret);
         const captchaValue = `${captcha.SessionKey.value}-${activeEmail.captchaAnswer.value}`
         requestForVerifyEmail(activeEmail.email.value, captchaValue)
             .then(() => {
@@ -99,7 +96,6 @@ const EmailVerification = ({returnFunc, email, disable, returnFuncDisableFalse,
             })
             .catch((err) => {
                 if (err?.response?.data?.code === 10001 && err?.response?.data?.message === "Captcha is not valid") {
-                    console.log("in captcha erro")
                     return setActiveEmail({...activeEmail, captchaAnswer: {value: "", error: [t("login.InvalidCaptcha")]}})
                 }
                 if (err?.response?.data?.code === 1002 && err?.response?.data?.message === "User already verified") {
@@ -157,8 +153,8 @@ const EmailVerification = ({returnFunc, email, disable, returnFuncDisableFalse,
             />
             <TextInput
                 lead={LeadCaptchaHandler()}
-                after={<span data-html={true} data-place="left" data-effect="float"
-                             data-tip={`<span class="column jc-between col-100">${t("login.refreshCaptcha")}</span>`}><Icon
+                after={<span data-tooltip-id="opex-tooltip" data-tooltip-place="left" data-tooltip-float={true}
+                             data-tooltip-html={`<span class="column jc-between col-100">${t("login.refreshCaptcha")}</span>`}><Icon
                     iconName="icon-arrows-cw flex fs-01"
                     onClick={captchaReq}
                     customClass={`hover-text cursor-pointer`}

diff --git a/src/main/Browser/Pages/Login/components/ForgetPassword/ForgetPassword.js b/src/main/Browser/Pages/Login/components/ForgetPassword/ForgetPassword.js
@@ -4,7 +4,6 @@ import TextInput from "../../../../../../components/TextInput/TextInput";
 import LoginFormLoading from "../LoginLoading/LoginFormLoading";
 import {useTranslation} from "react-i18next";
 import Button from "../../../../../../components/Button/Button";
-import ReactTooltip from "react-tooltip";
 import Icon from "../../../../../../components/Icon/Icon";
 import {images} from "../../../../../../assets/images";
 import {validateEmail} from "../../../../../../utils/utils";
@@ -53,9 +52,7 @@ const ForgetPassword = ({returnFunc}) => {
         captchaReq()
     }, [])
 
-    useEffect(() => {
-        ReactTooltip.rebuild();
-    });
+
 
     if (loading) return <LoginFormLoading/>
 
@@ -79,7 +76,7 @@ const ForgetPassword = ({returnFunc}) => {
         }
         setLoading(true);
 
-        const {data: {access_token: panelToken}} = await getPanelToken(clientId, clientSecret);
+        //const {data: {access_token: panelToken}} = await getPanelToken(clientId, clientSecret);
         const captchaValue = `${captcha.SessionKey.value}-${forgetPass.captchaAnswer.value}`
         requestForForgetPassword(forgetPass.email.value, captchaValue)
             .then(() => {
@@ -130,8 +127,8 @@ const ForgetPassword = ({returnFunc}) => {
             />
             <TextInput
                 lead={LeadCaptchaHandler()}
-                after={<span data-html={true} data-place="left" data-effect="float"
-                             data-tip={`<span class="column jc-between col-100">${t("login.refreshCaptcha")}</span>`}><Icon
+                after={<span data-tooltip-id="opex-tooltip" data-tooltip-place="left" data-tooltip-float={true}
+                             data-tooltip-html={`<span class="column jc-between col-100">${t("login.refreshCaptcha")}</span>`}><Icon
                     iconName="icon-arrows-cw flex fs-01"
                     onClick={captchaReq}
                     customClass={`hover-text cursor-pointer`}

diff --git a/src/main/Browser/Pages/Login/components/RegisterForm/RegisterForm.js b/src/main/Browser/Pages/Login/components/RegisterForm/RegisterForm.js
@@ -7,7 +7,6 @@ import {validateEmail} from "../../../../../../utils/utils";
 import Button from "../../../../../../components/Button/Button";
 import Icon from "../../../../../../components/Icon/Icon";
 import {images} from "../../../../../../assets/images";
-import ReactTooltip from "react-tooltip";
 import {getCaptchaImage, getPanelToken, userRegister} from "js-api-client";
 import EmailVerification from "../EmailVerification/EmailVerification";
 import {setVerifyEmailLockInitiate} from "../../../../../../store/actions";
@@ -69,9 +68,7 @@ const RegisterForm = () => {
         captchaReq()
     }, [])
 
-    useEffect(() => {
-        ReactTooltip.rebuild();
-    });
+
 
     useEffect(() => {
         if (verifyEmailLock && new Date().getTime() < verifyEmailLock) setDisable(true)
@@ -288,8 +285,8 @@ const RegisterForm = () => {
                 />
                 <TextInput
                     lead={LeadCaptchaHandler()}
-                    after={<span data-html={true} data-place="left" data-effect="float"
-                                 data-tip={`<span class="column jc-between col-100">${t("login.refreshCaptcha")}</span>`}><Icon
+                    after={<span data-tooltip-id="opex-tooltip" data-tooltip-place="left" data-tooltip-float={true}
+                                 data-tooltip-html={`<span class="column jc-between col-100">${t("login.refreshCaptcha")}</span>`}><Icon
                         iconName="icon-arrows-cw flex fs-01"
                         onClick={captchaReq}
                         customClass={`hover-text cursor-pointer`}

diff --git a/...ections/Content/components/Market/components/MyOrders/components/OpenOrders/OpenOrders.js b/...ections/Content/components/Market/components/MyOrders/components/OpenOrders/OpenOrders.js
@@ -77,10 +77,10 @@ const OpenOrders = () => {
                                 <td>{executedQty.dividedBy(origQty).multipliedBy(100).toFormat(0)}</td>
                                 <td
                                     onClick={() => cancelOrder(tr.orderId)}
-                                    data-html={true}
-                                    data-place="bottom"
-                                    data-effect="float"
-                                    data-tip={t("myOrders.cancelOrder")}
+                                    data-tooltip-id="opex-tooltip"
+                                    data-tooltip-place="bottom"
+                                    data-tooltip-float={true}
+                                    data-tooltip-html={t("myOrders.cancelOrder")}
                                 >
                                     <Icon
                                         iconName="icon-cancel text-red fs-0-7"