+ data-tooltip-id="opex-tooltip"
+ data-tooltip-place="left"
+ data-tooltip-float={true}
+ data-tooltip-html={hint}>
{
if (alerts){
alertSection =
+ data-tooltip-id="opex-tooltip"
+ data-tooltip-place="left"
+ data-tooltip-float={true}
+ data-tooltip-html={props.hint}>
{
const {
@@ -54,10 +54,10 @@ const TextInput = (props) => {
if (alerts){
alertSection =
+ data-tooltip-id="opex-tooltip"
+ data-tooltip-place="left"
+ data-tooltip-float={true}
+ data-tooltip-html={props.hint}>
{
@@ -38,10 +38,10 @@ const VerticalNumberInput = (props) => {
if (alert){
alertSection =
+ data-tooltip-id="opex-tooltip"
+ data-tooltip-place="left"
+ data-tooltip-float={true}
+ data-tooltip-html={hint}>
-
-
-
-
-
-
-
-
-
- ,
- document.getElementById("root"),
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+root.render(
+
+
+
+
+
+
+
+
);
diff --git a/src/main/Browser/Browser.js b/src/main/Browser/Browser.js
index 0235ae6b..0462e385 100644
--- 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 = () => {
}/>
}/>
-
else return
}
const mostDecreasedPriceContent = () => {
if (isLoading) return
else return
}
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/LandingContent.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/LandingContent.js
index b3eb71d4..f33e82e6 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/LandingContent.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/LandingContent.js
@@ -6,19 +6,14 @@ import Spinner from "./components/Spinner/Spinner";
import MarketView from "./components/MarketView/MarketView";
import MarketTitle from "./components/MarketTitle/MarketTitle";
import GeneralInfo from "./components/GeneralInfo/GeneralInfo";
-import {images} from "../../../../../../assets/images";
-import {useSelector} from "react-redux";
import MarketInfo from "./components/MarketInfo/MarketInfo";
const LandingContent = () => {
-
- const isDark = useSelector((state) => state.global.isDark)
-
return (
-
-
+
-
+
+
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketTitle/MarketTitle.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketTitle/MarketTitle.js
index f14fb9f9..5a34506f 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketTitle/MarketTitle.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketTitle/MarketTitle.js
@@ -18,10 +18,10 @@ const MarketTitle = () => {
{t("title")} {t("MarketTitle.content")}
- 
-
*/}
-
+ {/*
*/}
{t("MarketTitle.easyTrading")}
-
+
{t("MarketTitle.advancedTrading")}
diff --git a/src/main/Browser/Pages/Login/components/EmailVerification/EmailVerification.js b/src/main/Browser/Pages/Login/components/EmailVerification/EmailVerification.js
index 0e1a20fc..2b5e1a4e 100644
--- a/src/main/Browser/Pages/Login/components/EmailVerification/EmailVerification.js
+++ b/src/main/Browser/Pages/Login/components/EmailVerification/EmailVerification.js
@@ -2,8 +2,7 @@ import React, {useEffect, useState} from 'react';
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 {getCaptchaImage, requestForVerifyEmail} from "js-api-client";
import LoginFormLoading from "../LoginLoading/LoginFormLoading";
import {validateEmail} from "../../../../../../utils/utils";
import {images} from "../../../../../../assets/images";
@@ -15,9 +14,6 @@ import {setVerifyEmailLockInitiate} from "../../../../../../store/actions";
const EmailVerification = ({returnFunc, email, disable, returnFuncDisableFalse, returnFuncDisableTrue}) => {
- const clientSecret = window.env.REACT_APP_CLIENT_SECRET
- const clientId = window.env.REACT_APP_CLIENT_ID
-
const {t} = useTranslation();
const dispatch = useDispatch();
@@ -63,9 +59,7 @@ const EmailVerification = ({returnFunc, email, disable, returnFuncDisableFalse,
}, [])
- useEffect(() => {
- ReactTooltip.rebuild();
- });
+
if (loading) return ${t("login.refreshCaptcha")}`}>${t("login.refreshCaptcha")}`}> {
- const clientSecret = window.env.REACT_APP_CLIENT_SECRET
- const clientId = window.env.REACT_APP_CLIENT_ID
-
const {t} = useTranslation();
const [loading, setLoading] = useState(false);
const [isLoading, setIsLoading] = useState(true);
@@ -53,9 +49,7 @@ const ForgetPassword = ({returnFunc}) => {
captchaReq()
}, [])
- useEffect(() => {
- ReactTooltip.rebuild();
- });
+
if (loading) return ${t("login.refreshCaptcha")}`}>${t("login.refreshCaptcha")}`}> {
captchaReq()
}, [])
- useEffect(() => {
- ReactTooltip.rebuild();
- });
+
useEffect(() => {
if (verifyEmailLock && new Date().getTime() < verifyEmailLock) setDisable(true)
@@ -288,8 +285,8 @@ const RegisterForm = () => {
/>
${t("login.refreshCaptcha")}`}>${t("login.refreshCaptcha")}`}> {
{executedQty.dividedBy(origQty).multipliedBy(100).toFormat(0)}
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")}
>
{
end = "right";
}
- useEffect(() => {
- ReactTooltip.rebuild();
- });
+
if (type === "buy") {
header = (
@@ -113,11 +110,11 @@ const OrderBookTable = (props) => {
style={backgroundBar(percent.toString())}
onMouseEnter={() => setSelected({...selected, sell: index})}
onMouseLeave={() => setSelected({...selected, sell: -1})}
- data-html={true}
+ data-tooltip-id="opex-tooltip"
className={`${selected.sell >= index ? `${classes.selected}` : ""} cursor-pointer`}
- data-place="bottom"
- data-effect="float"
- data-tip={toolTipHandler(avg , index)}
+ data-tooltip-place="bottom"
+ data-tooltip-float={true}
+ data-tooltip-html={toolTipHandler(avg , index)}
data-amount={avg.amount.toString()}
onClick={(e) =>
onSetSellOrder({
@@ -135,11 +132,11 @@ const OrderBookTable = (props) => {
style={backgroundBar(percent.toString())}
onMouseEnter={() => setSelected({...selected, buy: index})}
onMouseLeave={() => setSelected({...selected, buy: -1})}
- data-html={true}
+ data-tooltip-id="opex-tooltip"
className={`${selected.buy >= index ? `${classes.selected}` : ""} cursor-pointer`}
- data-place="bottom"
- data-effect="float"
- data-tip={toolTipHandler(avg , index)}
+ data-tooltip-place="bottom"
+ data-tooltip-float={true}
+ data-tooltip-html={toolTipHandler(avg , index)}
data-amount={avg.amount.toString()}
onClick={(e) =>
onSetBuyOrder({
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTable/OrderBookTable.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTable/OrderBookTable.module.css
index 830f6ece..9b938e7c 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTable/OrderBookTable.module.css
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTable/OrderBookTable.module.css
@@ -2,7 +2,7 @@
background-color: var(--tableRow);
transition: background-color 0.4s;
}
-:global .__react_component_tooltip.show {
+:global #opex-tooltip {
background-color: var(--toolTipBG);
color: var(--textColor);
border: 0.1vh solid transparent;
@@ -10,6 +10,7 @@
font-size: 0.8vw;
padding: 0.5vh 1vw;
opacity: 1 !important;
+ z-index: 10;
}
:global .place-bottom::after {
border-bottom-color: var(--toolTipBG) !important;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTableSafari/OrderBookTableSafari.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTableSafari/OrderBookTableSafari.js
index 0a80db24..7057aede 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTableSafari/OrderBookTableSafari.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTableSafari/OrderBookTableSafari.js
@@ -2,7 +2,6 @@ import React, {useEffect, useState} from "react";
import classes from "./OrderBookTableSafari.module.css";
import {useTranslation} from "react-i18next";
import i18n from "i18next";
-import ReactTooltip from "react-tooltip";
import {connect} from "react-redux";
import {BN} from "../../../../../../../../../../../../utils/utils";
import ScrollBar from "../../../../../../../../../../../../components/ScrollBar";
@@ -30,10 +29,6 @@ const OrderBookTableSafari = (props) => {
end = "right";
}
- useEffect(() => {
- ReactTooltip.rebuild();
- });
-
if (props.type === "buy") {
header = (
@@ -113,11 +108,11 @@ const OrderBookTableSafari = (props) => {
style={backgroundBar(percent.toString())}
onMouseEnter={() => setSelected({...selected, sell: index})}
onMouseLeave={() => setSelected({...selected, sell: -1})}
- data-html={true}
+ data-tooltip-id="opex-tooltip"
className={`${selected.sell >= index ? `${classes.selected}` : ""} cursor-pointer row jc-between ${classes.tbodyRow}`}
- data-place="bottom"
- data-effect="float"
- data-tip={toolTipHandler(avg , index)}
+ data-tooltip-place="bottom"
+ data-tooltip-float={true}
+ data-tooltip-html={toolTipHandler(avg , index)}
data-amount={avg.amount.toString()}
onClick={(e) =>
onSetSellOrder({
@@ -135,11 +130,11 @@ const OrderBookTableSafari = (props) => {
style={backgroundBar(percent.toString())}
onMouseEnter={() => setSelected({...selected, buy: index})}
onMouseLeave={() => setSelected({...selected, buy: -1})}
- data-html={true}
+ data-tooltip-id="opex-tooltip"
className={`${selected.buy >= index ? `${classes.selected}` : ""} cursor-pointer row jc-between ${classes.tbodyRow}`}
- data-place="bottom"
- data-effect="float"
- data-tip={toolTipHandler(avg , index)}
+ data-tooltip-place="bottom"
+ data-tooltip-float={true}
+ data-tooltip-html={toolTipHandler(avg , index)}
data-amount={avg.amount.toString()}
onClick={(e) =>
onSetBuyOrder({
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTableSafari/OrderBookTableSafari.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTableSafari/OrderBookTableSafari.module.css
index c3419732..3327392d 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTableSafari/OrderBookTableSafari.module.css
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/OrderBook/components/OrderBookTableSafari/OrderBookTableSafari.module.css
@@ -2,7 +2,7 @@
background-color: var(--tableRow);
transition: background-color 0.4s;
}
-:global .__react_component_tooltip.show {
+:global #opex-tooltip {
background-color: var(--toolTipBG);
color: var(--textColor);
border: 0.1vh solid transparent;
@@ -10,6 +10,7 @@
font-size: 0.8vw;
padding: 0.5vh 1vw;
opacity: 1 !important;
+ z-index: 10;
}
:global .place-bottom::after {
border-bottom-color: var(--toolTipBG) !important;
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/components/MarketChart/MarketChart.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/components/MarketChart/MarketChart.js
index cbb32782..3390c1f9 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/components/MarketChart/MarketChart.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/TradingView/components/MarketChart/MarketChart.js
@@ -1,12 +1,11 @@
import React, {useEffect, useRef} from "react";
import classes from "../../TradingView.module.css";
-import * as LightweightCharts from "lightweight-charts";
+import { createChart } from 'lightweight-charts';
import {useSelector} from "react-redux";
import moment from "moment-jalaali";
import {
candleColors,
darkTheme,
- histogramColors,
lightTheme
} from "../../../../../../../../../../../../constants/chart";
import i18n from "i18next";
@@ -26,6 +25,7 @@ const MarketChart = ({type}) => {
const chartContainerRef = useRef();
const resizeObserver = useRef();
+ console.log(data)
const timeScale = {
tickMarkFormatter: (time) => {
if (i18n.language === undefined || i18n.language === "fa") return moment(time * 1000).format("jYYYY/jM/jD")
@@ -74,16 +74,28 @@ const MarketChart = ({type}) => {
if (chart.current !== null) {
chart.current = null;
}
- chart.current = LightweightCharts.createChart(
+ chart.current = createChart(
chartContainerRef.current,
chartProperties,
);
candleSeries = chart.current.addCandlestickSeries(isDark ? darkTheme : candleColors);
- volumeSeries = chart.current.addHistogramSeries(histogramColors);
+ volumeSeries = chart.current.addHistogramSeries({
+ priceFormat: {
+ type: 'volume',
+ },
+ priceScaleId: '',
+ });
+ volumeSeries.priceScale().applyOptions({
+ scaleMargins: {
+ top: 0.8,
+ bottom: 0,
+ },
+ });
candleSeries.setData(data);
volumeSeries.setData(data);
+ chart.current .timeScale().fitContent();
return () => {
if (chart.current !== null) {
chart.current.remove();
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/APIKey.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/APIKey.js
index de03ec31..2db9beb8 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/APIKey.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/APIKey.js
@@ -1,20 +1,14 @@
- import React from 'react';
- import classes from './APIKey.module.css'
- import {useTranslation} from "react-i18next";
- import CreateAPIKey from "./components/CreateAPIKey/CreateAPIKey";
- import APIKeyList from "./components/APIKeyList/APIKeyList";
-
- const APIKey = () => {
-
- const {t} = useTranslation();
-
-
- return (<>
-
{