From c0fab4f170ef8f60b114083fb69491d29393fa24 Mon Sep 17 00:00:00 2001
From: Hossein <hossein13785ab@gmail.com>
Date: Sun, 11 Dec 2022 11:11:21 +0330
Subject: [PATCH 1/2] Fix price change in overview & market stats

---
 .../components/AllMarketInfoCard/AllMarketInfoCard.js     | 6 +++---
 .../components/AllMarketInfoTable/AllMarketInfoTable.js   | 8 +++-----
 .../components/MostDecreasedPrice/MostDecreasedPrice.js   | 6 +++---
 .../components/MostIncreasedPrice/MostIncreasedPrice.js   | 6 +++---
 .../AllMarketContent/components/VolumeInfo/VolumeInfo.js  | 5 ++---
 .../VolumeInfo/components/MostTrades/MostTrades.js        | 2 +-
 .../VolumeInfo/components/MostVolume/MostVolume.js        | 8 ++++----
 .../LandingContent/components/GeneralInfo/GeneralInfo.js  | 6 +++---
 .../components/MarketInfoCard/MarketInfoCard.js           | 6 +++---
 .../components/MarketInfoTable/MarketInfoTable.js         | 6 ++----
 .../LandingContent/components/MarketView/MarketView.js    | 4 ++--
 .../components/MostDecreasedPrice/MostDecreasedPrice.js   | 4 ++--
 .../components/MostIncreasedPrice/MostIncreasedPrice.js   | 4 ++--
 .../MarketView/components/MostVolume/MostVolume.js        | 4 ++--
 14 files changed, 35 insertions(+), 40 deletions(-)

diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoCard/AllMarketInfoCard.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoCard/AllMarketInfoCard.js
index e9131f26..e93a35b4 100644
--- a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoCard/AllMarketInfoCard.js
+++ b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoCard/AllMarketInfoCard.js
@@ -50,7 +50,7 @@ const AllMarketInfoCard = ({data, activeCurrency}) => {
 
             {data.map((tr, index) => {
                 return (
-                    <div key={index} className={`${classes.item} card-border card-bg column cursor-pointer`} style={backgroundBar(tr.priceChange.toString())}
+                    <div key={index} className={`${classes.item} card-border card-bg column cursor-pointer`} style={backgroundBar(tr.priceChangePercent.toString())}
                          onMouseEnter={()=>MouseEnterEventHandler(index)} onMouseLeave={MouseLeaveEventHandler}>
                         <div className={`column jc-between ai-center pt-2 pb-3`} style={{height:"80%"}}>
                             <div className={`row jc-between ai-center width-100 px-1`}>
@@ -61,13 +61,13 @@ const AllMarketInfoCard = ({data, activeCurrency}) => {
                                     <span className={`fs-01`}>{activeCurrency ? t("currency." + tr?.base) : tr?.base + " / " + tr?.quote}</span>
                                 </div>
                                 <div className={`flex jc-end ai-center fs-0-6`}>
-                                        <span className={`${tr.priceChange > 0 ? "text-green" : "text-red"} direction-ltr mr-05`}>{new BN(tr.priceChange).toFormat()} %</span>
+                                        <span className={`${tr.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr mr-05`}>{new BN(tr.priceChangePercent).toFormat(2)} %</span>
                                 </div>
                             </div>
                             <div className={`column px-1 width-100 fs-0-7`}>
                                 <div className={`row jc-between ai-center`}>
                                     <span className={``}>{t("MarketInfo.lastPrice")}:</span>
-                                    <span className={`${tr.priceChange > 0 ? "text-green" : "text-red"} fs-01`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-025`}>{t("currency." + tr?.quote)}</span></span>
+                                    <span className={`${tr.priceChangePercent > 0 ? "text-green" : "text-red"} fs-01`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-025`}>{t("currency." + tr?.quote)}</span></span>
                                 </div>
                                 <div className={`row jc-between ai-center`}>
                                     <span className={`text-gray`}>{t("MarketInfo.lowPrice")}:</span>
diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoTable/AllMarketInfoTable.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoTable/AllMarketInfoTable.js
index c76ed5f3..878ea143 100644
--- a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoTable/AllMarketInfoTable.js
+++ b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoTable/AllMarketInfoTable.js
@@ -12,8 +12,6 @@ import {useDispatch, useSelector} from "react-redux";
 
 const AllMarketInfTable = ({data, activeCurrency}) => {
 
-    console.log("data" , data)
-
     const {t} = useTranslation();
     const navigate = useNavigate();
     const dispatch = useDispatch();
@@ -28,7 +26,7 @@ const AllMarketInfTable = ({data, activeCurrency}) => {
     let head = (
         <div className="row text-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
             <span className="width-15 flex jc-start ai-center">{t("MarketInfo.name")}</span>
-            <span className="width-11 flex jc-start ai-center">{t("MarketInfo.lastPrice")}</span>
+            <span className="width-11 flex  jc-start ai-center">{t("MarketInfo.lastPrice")}</span>
             <span className="width-9 flex jc-start ai-center">{t("MarketInfo.priceChange")}</span>
             <span className="width-12 flex jc-start ai-center">{t("MarketInfo.lowPrice")}</span>
             <span className="width-12 flex jc-start ai-center">{t("MarketInfo.highPrice")}</span>
@@ -51,10 +49,10 @@ const AllMarketInfTable = ({data, activeCurrency}) => {
                                   title={tr?.base} className={`img-md-plus ml-05`}/>
                                  <span className={`fs-01 mr-05`}>{activeCurrency ? t("currency." + tr?.base) : tr?.base + " / " + tr?.quote}</span>
                          </span>
-                        <span className={`width-11 flex jc-start ai-center ${tr?.priceChange > 0 ? "text-green" : "text-red"}`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-05`}>{t("currency." + tr?.quote)}</span></span>
+                        <span className={`width-11 flex jc-start ai-center ${tr?.priceChangePercent > 0 ? "text-green" : "text-red"}`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-05`}>{t("currency." + tr?.quote)}</span></span>
 
 
-                        <span className={`width-9 flex ${i18n.language !== "fa" ? 'jc-start' : 'jc-end'} ai-center ${tr?.priceChange > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(tr?.priceChange).toFormat()} %</span>
+                        <span className={`width-9 flex ${i18n.language !== "fa" ? 'jc-start' : 'jc-end'} ai-center ${tr?.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(tr?.priceChangePercent).toFormat(2)} %</span>
                         <span className="width-12 flex jc-start ai-center">{new BN(tr?.lowPrice).toFormat()}</span>
 
                         <span className={`width-12 flex jc-start ai-center`}>{new BN(tr?.highPrice).toFormat()}</span>
diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/PriceInfo/components/MostDecreasedPrice/MostDecreasedPrice.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/PriceInfo/components/MostDecreasedPrice/MostDecreasedPrice.js
index e538af2d..7d2415e3 100644
--- a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/PriceInfo/components/MostDecreasedPrice/MostDecreasedPrice.js
+++ b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/PriceInfo/components/MostDecreasedPrice/MostDecreasedPrice.js
@@ -15,12 +15,12 @@ const MostDecreasedPrice = ({mostDecreasedPrice}) => {
                  title={mostDecreasedPrice?.pairInfo?.baseAsset}
                  className={`img-md-plus`}/>
             <span>{t("currency." + mostDecreasedPrice?.pairInfo?.baseAsset)}</span>
-            <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100 text-red`}>
+            <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100`}>
                 <span className={`${i18n.language !== "fa" ? 'mr-025' : 'ml-025'} fs-0-6`}>{mostDecreasedPrice?.pairInfo?.quoteAsset}</span>
                 <span className={`${i18n.language !== "fa" ? 'mL-025' : 'mr-025'} fs-01`}>{new BN(mostDecreasedPrice?.lastPrice).toFormat()}</span>
             </div>
-            <div className={`row jc-center ai-center width-100 text-red`}>
-                <span className={`direction-ltr`}>{new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %</span>
+            <div className={`row jc-center ai-center width-100`}>
+                <span className={`${mostDecreasedPrice?.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %</span>
             </div>
         </>
     );
diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/PriceInfo/components/MostIncreasedPrice/MostIncreasedPrice.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/PriceInfo/components/MostIncreasedPrice/MostIncreasedPrice.js
index 3c824d93..f64b7c50 100644
--- a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/PriceInfo/components/MostIncreasedPrice/MostIncreasedPrice.js
+++ b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/PriceInfo/components/MostIncreasedPrice/MostIncreasedPrice.js
@@ -15,12 +15,12 @@ const MostIncreasedPrice = ({mostIncreasedPrice}) => {
                   title={mostIncreasedPrice?.pairInfo?.baseAsset}
                   className={`img-md-plus`}/>
             <span>{t("currency." + mostIncreasedPrice?.pairInfo?.baseAsset)}</span>
-            <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100 text-green`}>
+            <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100`}>
                 <span className={`${i18n.language !== "fa" ? 'mr-025' : 'ml-025'} fs-0-6`}>{mostIncreasedPrice?.pairInfo?.quoteAsset}</span>
                 <span className={`${i18n.language !== "fa" ? 'mL-025' : 'mr-025'} fs-01`}>{new BN(mostIncreasedPrice?.lastPrice).toFormat()}</span>
             </div>
-            <div className={`row jc-center ai-center width-100 text-green`}>
-                <span>% {new BN(mostIncreasedPrice?.priceChangePercent).toFormat(2)}+</span>
+            <div className={`row jc-center ai-center width-100`}>
+                <span  className={`${mostIncreasedPrice?.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(mostIncreasedPrice?.priceChangePercent).toFormat(2)} %</span>
             </div>
         </>
     );
diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/VolumeInfo.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/VolumeInfo.js
index d6511dd1..abd5e806 100644
--- a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/VolumeInfo.js
+++ b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/VolumeInfo.js
@@ -17,13 +17,12 @@ const VolumeInfo = () => {
     const interval = useSelector((state) => state.global.marketInterval)
     const {data:stats, isLoading, error} = useGetMarketStats(interval)
     const allSymbols = useSelector((state) => state.exchange.symbols)
-    const mostDecreasedPrice = stats?.mostDecreasedPrice[0]
     const mostVolume = stats?.mostVolume
     const mostTrades = stats?.mostTrades
 
     if(!isLoading && !error && mostVolume) {
-        mostVolume.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol))
-        mostTrades.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol))
+        mostVolume.pairInfo = allSymbols.find(s => s.symbol === (mostVolume?.symbol))
+        mostTrades.pairInfo = allSymbols.find(s => s.symbol === (mostTrades?.symbol))
     }
 
     const mostVolumeContent = () => {
diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/components/MostTrades/MostTrades.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/components/MostTrades/MostTrades.js
index 70051aab..270276aa 100644
--- a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/components/MostTrades/MostTrades.js
+++ b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/components/MostTrades/MostTrades.js
@@ -15,7 +15,7 @@ const MostTrades = ({mostTrades}) => {
                  title={mostTrades?.pairInfo?.baseAsset}
                  className={`img-md-plus`}/>
             <span>{t("currency." + mostTrades?.pairInfo?.baseAsset)}</span>
-            <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100 text-green`}>
+            <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100`}>
                 <span className={`${i18n.language !== "fa" ? 'mL-025' : 'mr-025'} fs-01`}>{new BN(mostTrades?.tradeCount).toFormat()} </span>
             </div>
 
diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/components/MostVolume/MostVolume.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/components/MostVolume/MostVolume.js
index 42e403a8..064b1f1c 100644
--- a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/components/MostVolume/MostVolume.js
+++ b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/VolumeInfo/components/MostVolume/MostVolume.js
@@ -15,12 +15,12 @@ const MostVolume = ({mostVolume}) => {
                  title={mostVolume?.pairInfo?.baseAsset}
                  className={`img-md-plus`}/>
             <span>{t("currency." + mostVolume?.pairInfo?.baseAsset)}</span>
-            <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100 text-green`}>
-                <span className={`${i18n.language !== "fa" ? 'mr-025' : 'ml-025'} fs-0-6`}>{mostVolume?.pairInfo?.quoteAsset}</span>
+            <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'} jc-center ai-center width-100`}>
+                <span className={`${i18n.language !== "fa" ? 'mr-025' : 'ml-025'} fs-0-6`}>{mostVolume?.pairInfo?.baseAsset}</span>
                 <span className={`${i18n.language !== "fa" ? 'mL-025' : 'mr-025'} fs-01`}>{new BN(mostVolume?.volume).toFormat()} </span>
             </div>
-            <div className={`row jc-center ai-center width-100 text-green`}>
-                <span>% {new BN(mostVolume?.change).toFormat(2)}+</span>
+            <div className={`row jc-center ai-center width-100`}>
+                <span  className={`${mostVolume?.change > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(mostVolume?.change).toFormat(2)} %</span>
             </div>
         </>
     );
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/GeneralInfo/GeneralInfo.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/GeneralInfo/GeneralInfo.js
index 8996a9f4..e2588e0c 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/GeneralInfo/GeneralInfo.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/GeneralInfo/GeneralInfo.js
@@ -17,15 +17,15 @@ const GeneralInfo = () => {
         if (error) return <span className={`width-100`}><Error/></span>
         else return <>
             <div className={`column jc-center ai-center`}>
-                <span className={`fs-02`}>{data.activeUsers} </span>
+                <span className={`fs-02`}>{data.activeUsers.toLocaleString()} </span>
                 <span className={`fs-0-7`}>{t("GeneralInfo.activeUsers")}</span>
             </div>
             <div className={`column jc-center ai-center`}>
-                <span className={`fs-02`}>{data.totalOrders} </span>
+                <span className={`fs-02`}>{data.totalOrders.toLocaleString()} </span>
                 <span className={`fs-0-7`}>{t("GeneralInfo.totalOrders")}</span>
             </div>
             <div className={`column jc-center ai-center`}>
-                <span className={`fs-02`}>{data.totalTrades} </span>
+                <span className={`fs-02`}>{data.totalTrades.toLocaleString()} </span>
                 <span className={`fs-0-7`}>{t("GeneralInfo.totalTrades")}</span>
             </div>
         </>
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.js
index a14c6c8e..8bae6cbd 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.js
@@ -36,18 +36,18 @@ const MarketInfoCard = ({data, activeCurrency}) => {
         <div className={`${classes.container} my-3 px-1`}>
             {data.map((tr, index) => {
                 return (
-                    <div className={`${classes.item} card-border card-bg column jc-between ai-center py-3 cursor-pointer`} style={backgroundBar(tr.priceChange.toString())} key={index} onClick={() => navigateToPanel(tr.symbol)}>
+                    <div className={`${classes.item} card-border card-bg column jc-between ai-center py-3 cursor-pointer`} style={backgroundBar(tr.priceChangePercent.toString())} key={index} onClick={() => navigateToPanel(tr.symbol)}>
                         <div className={`row jc-center ai-center width-100`}>
                             <img src={images[tr?.base]} alt={tr?.base}
                                  title={tr?.base} className={`img-lg ml-05`}/>
                             <div className={`column mr-05`}>
                                 <span className={`fs-01`}>{activeCurrency ? t("currency." + tr?.base) : tr?.base + " / " + tr?.quote}</span>
                                 <span
-                                    className={`${tr.priceChange > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(tr.priceChange).toFormat()} %</span>
+                                    className={`${tr.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(tr.priceChangePercent).toFormat(2)} %</span>
                             </div>
                         </div>
                         <span
-                            className={`${tr.priceChange > 0 ? "text-green" : "text-red"} fs-02`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-05`}>{t("currency." + tr?.quote)}</span></span>
+                            className={`${tr.priceChangePercent > 0 ? "text-green" : "text-red"} fs-02`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-05`}>{t("currency." + tr?.quote)}</span></span>
                         <div className={`row jc-center ai-center width-100`}>
                             <span className={`text-gray ml-05`}>{t("MarketInfo.volume")}:</span>
                             <span className={`mr-05`}>{new BN(tr.volume).toFormat()}</span>
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.js
index fed08581..d6314837 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.js
@@ -11,8 +11,6 @@ import {useNavigate} from "react-router-dom";
 
 const MarketInfoTable = ({data, activeCurrency}) => {
 
-    console.log("data" , data)
-
     const {t} = useTranslation();
     const navigate = useNavigate();
     const dispatch = useDispatch();
@@ -44,8 +42,8 @@ const MarketInfoTable = ({data, activeCurrency}) => {
                              title={tr?.base} className={`img-lg ml-05`}/>
                         <span className={`fs-01 mr-05`}>{activeCurrency ? t("currency." + tr?.base) : tr?.base + " / " + tr?.quote}</span>
                     </span>
-                    <span className={`width-30 flex jc-start ai-center ${tr.priceChange > 0 ? "text-green" : "text-red"}`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-05`}>{t("currency." + tr?.quote)}</span></span>
-                    <span className={`width-25 flex ${i18n.language !== "fa" ? 'jc-start' : 'jc-end'} ai-center ${tr.priceChange > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(tr.priceChange).toFormat()} %</span>
+                    <span className={`width-30 flex jc-start ai-center ${tr.priceChangePercent > 0 ? "text-green" : "text-red"}`}>{new BN(tr.lastPrice).toFormat()} <span className={`fs-0-7 mr-05`}>{t("currency." + tr?.quote)}</span></span>
+                    <span className={`width-25 flex ${i18n.language !== "fa" ? 'jc-start' : 'jc-end'} ai-center ${tr.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(tr.priceChangePercent).toFormat(2)} %</span>
                     <span className="width-20 flex jc-start ai-center">{new BN(tr.volume).toFormat()}</span>
                     <span className="width-25 flex jc-end ai-center position-relative">
                         <img
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/MarketView.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/MarketView.js
index c612f74a..ef2796a2 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/MarketView.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/MarketView.js
@@ -26,8 +26,8 @@ const MarketView = () => {
     if (!isLoading && !error && mostIncreasedPrice) {
         mostIncreasedPrice.pairInfo = allSymbols.find(s => s.symbol === (mostIncreasedPrice?.symbol))
         mostDecreasedPrice.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol))
-        mostVolume.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol))
-        mostTrades.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol))
+        mostVolume.pairInfo = allSymbols.find(s => s.symbol === (mostVolume?.symbol))
+        mostTrades.pairInfo = allSymbols.find(s => s.symbol === (mostTrades?.symbol))
     }
 
 
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostDecreasedPrice/MostDecreasedPrice.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostDecreasedPrice/MostDecreasedPrice.js
index 29eda234..db97b3cd 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostDecreasedPrice/MostDecreasedPrice.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostDecreasedPrice/MostDecreasedPrice.js
@@ -22,12 +22,12 @@ const MostDecreasedPrice = ({mostDecreasedPrice}) => {
                     />
                     <span className={`mr-05`}>{t("currency." + mostDecreasedPrice.pairInfo.baseAsset)}</span>
                 </div>
-                <div className={`column ai-end text-red`}>
+                <div className={`column ai-end`}>
                     <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'}`}>
                         <span className={`fs-0-6 ${i18n.language !== "fa" ? 'mr-05' : 'ml-05'}`}>{mostDecreasedPrice.pairInfo.quoteAsset}</span>
                         <span> {new BN(mostDecreasedPrice?.lastPrice).toFormat()} </span>
                     </div>
-                    <span className={`direction-ltr`}>{new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %</span>
+                    <span className={`${mostDecreasedPrice?.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %</span>
                 </div>
             </div>
         </div>
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostIncreasedPrice/MostIncreasedPrice.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostIncreasedPrice/MostIncreasedPrice.js
index 6143afd1..6e02ffcc 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostIncreasedPrice/MostIncreasedPrice.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostIncreasedPrice/MostIncreasedPrice.js
@@ -22,12 +22,12 @@ const MostIncreasedPrice = ({mostIncreasedPrice}) => {
                     />
                     <span className={`mr-05`}>{t("currency." + mostIncreasedPrice.pairInfo.baseAsset)}</span>
                 </div>
-                <div className={`column ai-end text-green`}>
+                <div className={`column ai-end`}>
                     <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'}`}>
                         <span className={`fs-0-6 ${i18n.language !== "fa" ? 'mr-05' : 'ml-05'}`}>{mostIncreasedPrice.pairInfo.quoteAsset}</span>
                         <span>{new BN(mostIncreasedPrice?.lastPrice).toFormat()}</span>
                     </div>
-                    <span>% {new BN(mostIncreasedPrice?.priceChangePercent).toFormat(2)}+</span>
+                    <span className={`${mostIncreasedPrice?.priceChangePercent > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(mostIncreasedPrice?.priceChangePercent).toFormat(2)} %</span>
                 </div>
             </div>
         </div>
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostVolume/MostVolume.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostVolume/MostVolume.js
index 2e77a580..c9650baf 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostVolume/MostVolume.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/components/MostVolume/MostVolume.js
@@ -24,10 +24,10 @@ const MostVolume = ({mostVolume}) => {
                 </div>
                 <div className={`column ai-end`}>
                     <div className={`${i18n.language !== "fa" ? 'row-reverse' : 'row'}`}>
-                        <span className={`fs-0-6 ${i18n.language !== "fa" ? 'mr-05' : 'ml-05'}`}>{mostVolume.pairInfo.quoteAsset}</span>
+                        <span className={`fs-0-6 ${i18n.language !== "fa" ? 'mr-05' : 'ml-05'}`}>{mostVolume.pairInfo.baseAsset}</span>
                         <span> {new BN(mostVolume?.volume).toFormat()} </span>
                     </div>
-                    <span>% {new BN(mostVolume?.change).toFormat(2)}+</span>
+                    <span className={`${mostVolume?.change > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(mostVolume?.change).toFormat(2)} %</span>
                 </div>
             </div>
         </div>

From c7de39b8ba18491e43864302166860ab56f3c821 Mon Sep 17 00:00:00 2001
From: Hossein <hossein13785ab@gmail.com>
Date: Sun, 11 Dec 2022 11:22:00 +0330
Subject: [PATCH 2/2] Add version number

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6e00e93b..2f6a96f1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opex",
-  "version": "v1.0.2-beta.9",
+  "version": "v1.0.2-beta.10",
   "homepage": "",
   "private": true,
   "dependencies": {