From 0965e4df5d1a9fa0405dc6804d4ab28b554000bf Mon Sep 17 00:00:00 2001
From: Hossein <hossein13785ab@gmail.com>
Date: Sun, 14 Aug 2022 14:27:02 +0430
Subject: [PATCH 1/2] #83, Add marketStats api

---
 package.json                                  |   2 +-
 public/locales/fa/translation.json            |   8 +-
 .../components/GeneralInfo/GeneralInfo.js     |  27 ++-
 .../components/MarketView/MarketView.js       | 166 ++++++++++++------
 .../MarketView/MarketView.module.css          |   4 +
 .../components/Spinner/Spinner.module.css     |   6 +-
 src/queries/hooks/useGetExchangeInfo.js       |  21 +++
 src/queries/hooks/useGetMarketStats.js        |  21 +++
 src/queries/index.js                          |   2 +
 yarn.lock                                     |   8 +-
 10 files changed, 193 insertions(+), 72 deletions(-)
 create mode 100644 src/queries/hooks/useGetExchangeInfo.js
 create mode 100644 src/queries/hooks/useGetMarketStats.js

diff --git a/package.json b/package.json
index f21176d6..a8282c69 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "i18next": "^21.8.0",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-http-backend": "^1.4.0",
-    "js-api-client": "https://github.com/opexdev/js-api-client.git",
+    "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",
diff --git a/public/locales/fa/translation.json b/public/locales/fa/translation.json
index ecb79c77..2bdaf5f0 100644
--- a/public/locales/fa/translation.json
+++ b/public/locales/fa/translation.json
@@ -516,10 +516,10 @@
   },
   "MarketView": {
     "title": "روند 24 ساعته",
-    "mostIncrease": "بیشترین افزایش",
-    "mostTrade": "بیشترین تعداد معامله",
-    "greatestReduction": "بیشترین کاهش",
-    "MaxTransactionVolume": "بیشترین حجم معامله",
+    "mostIncreased": "بیشترین افزایش",
+    "mostDecreased": "بیشترین کاهش",
+    "mostTrades": "بیشترین تعداد معامله",
+    "mostVolume": "بیشترین حجم معامله",
     "MinTransactionVolume": "کمترین حجم معامله"
   },
   "MarketTitle": {
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 44a59d41..ed18f5e0 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
@@ -1,27 +1,36 @@
 import React from 'react';
 import classes from './GeneralInfo.module.css'
+import {useGetExchangeInfo} from "../../../../../../../../queries";
+import Loading from "../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../components/Error/Error";
 
 const GeneralInfo = () => {
-    return (
-        <div className={`${classes.container} row jc-between ai-center card-background card-border px-2 py-1`}>
 
+    const interval = "3M"
+    const {data, isLoading, error} = useGetExchangeInfo(interval)
+
+    const content = () => {
+        if (isLoading) return <Loading/>
+        if (error) return <Error/>
+        else return <>
             <div className={`column jc-center ai-center`}>
-                <span className={`font-size-md-01`}>100 +</span>
+                <span className={`font-size-md-01`}>{data.activeUsers} +</span>
                 <span className={`font-size-sm`}>کاربر فعال</span>
             </div>
             <div className={`column jc-center ai-center`}>
-                <span className={`font-size-md-01`}>2000 +</span>
+                <span className={`font-size-md-01`}>{data.totalOrders} +</span>
                 <span className={`font-size-sm`}>سفارش ثبت شده</span>
             </div>
             <div className={`column jc-center ai-center`}>
-                <span className={`font-size-md-01`}>700 +</span>
+                <span className={`font-size-md-01`}>{data.totalTrades} +</span>
                 <span className={`font-size-sm`}>معامله انجام شده</span>
             </div>
+        </>
+    }
 
-
-
-
-
+    return (
+        <div className={`${classes.container} row jc-between ai-center card-background card-border px-2 py-1`}>
+            {content()}
         </div>
     );
 };
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 1f00cf5d..2d9751cf 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
@@ -2,82 +2,146 @@ import React from 'react';
 import classes from './MarketView.module.css'
 import {useTranslation} from "react-i18next";
 import {images} from "../../../../../../../../assets/images";
+import {useGetExchangeInfo, useGetMarketStats} from "../../../../../../../../queries";
+import {BN} from "../../../../../../../../utils/utils";
+import {useSelector} from "react-redux";
+import content from "../../../../../UserPanel/Sections/Content/Content";
+import Loading from "../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../components/Error/Error";
 
 const MarketView = () => {
 
     const {t} = useTranslation();
 
-    return (
-        <div className={`${classes.container} card-background card-border`}>
 
+    const interval = "24H"
+    const {data:stats, isLoading, error} = useGetMarketStats(interval)
 
-            <div className={`column border-bottom jc-center card-header-bg ${classes.header}`}>
-                <div className="row jc-center ai-center ">
-                    <h3>{t("MarketView.title")}</h3>
-                </div>
-            </div>
-            <div className={`column container jc-center ${classes.content} px-2 py-1`}>
+    const allSymbols = useSelector((state) => state.exchange.symbols)
 
-                <div className={`column border-bottom`}>
-                    <span className={`${classes.title} text-orange`}>{t("MarketView.mostIncrease")}</span>
-                    <div className={`row jc-between ai-center`}>
-                        <div className={`row jc-center ai-center`}>
-                            <img src={images.BTC} alt="" className={`img-md-plus ml-05`}/>
-                            <span className={`mr-05`}>{t("currency." + "BTC")}</span>
-                        </div>
-                        <div className={`column ai-end`}>
-                            <span className={`text-green`}>25،1254،248</span>
-                            <span className={`text-green`}>10% +</span>
+    const mostIncreasedPrice = stats?.mostIncreasedPrice[0]
+    const mostDecreasedPrice = stats?.mostDecreasedPrice[0]
+    const mostVolume = stats?.mostVolume
+    const mostTrades = stats?.mostTrades
+
+    if(!isLoading) {
+        mostIncreasedPrice.pairInfo = allSymbols.find(s => s.symbol === (mostIncreasedPrice?.symbol).replace("_",""))
+        mostDecreasedPrice.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol).replace("_",""))
+        mostVolume.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol).replace("_",""))
+        mostTrades.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol).replace("_",""))
+    }
+
+
+
+
+
+    console.log("allSymbols , " , allSymbols)
+
+
+    console.log("data: ", stats?.mostDecreasedPrice[0]?.priceChangePercent)
+
+    const content = () => {
+
+        if (isLoading) return <Loading/>
+        if (error) return <Error/>
+        else return <>
+            <div className={`column border-bottom`}>
+                <span className={`${classes.title} text-orange`}>{t("MarketView.mostIncreased")}</span>
+                <div className={`row jc-between ai-center`}>
+
+                    <div className={`row jc-center ai-center`}>
+                        <img
+                            className="img-md-plus ml-05"
+                            src={images[mostIncreasedPrice.pairInfo.baseAsset]}
+                            alt={mostIncreasedPrice.pairInfo.baseAsset}
+                            title={mostIncreasedPrice.pairInfo.baseAsset}
+                        />
+                        <span className={`mr-05`}>{t("currency." + mostIncreasedPrice.pairInfo.baseAsset)}</span>
+                    </div>
+                    <div className={`column ai-end text-green`}>
+                        <div className={`row`}>
+                            <span className={`font-size-sm-mini ml-05`}>{mostIncreasedPrice.pairInfo.quoteAsset}</span>
+                            <span> {new BN(mostIncreasedPrice?.lastPrice).toFormat()} </span>
                         </div>
+                        <span>% {new BN(mostIncreasedPrice?.priceChangePercent).toFormat(2)}+</span>
                     </div>
+
                 </div>
+            </div>
 
-                <div className={`column border-bottom  my-3`}>
-                    <span className={`${classes.title} text-orange`}>{t("MarketView.greatestReduction")}</span>
-                    <div className={`row jc-between ai-center`}>
-                        <div className={`row jc-center ai-center`}>
-                            <img src={images.ETH} alt="" className={`img-md-plus ml-05`}/>
-                            <span className={`mr-05`}>{t("currency." + "ETH")}</span>
-                        </div>
-                        <div className={`column ai-end`}>
-                            <span className={`text-red`}>25،1254،248</span>
-                            <span className={`text-red`}>10% -</span>
+            <div className={`column border-bottom  my-3`}>
+                <span className={`${classes.title} text-orange`}>{t("MarketView.mostDecreased")}</span>
+                <div className={`row jc-between ai-center`}>
+                    <div className={`row jc-center ai-center`}>
+                        <img
+                            className="img-md-plus ml-05"
+                            src={images[mostDecreasedPrice.pairInfo.baseAsset]}
+                            alt={mostDecreasedPrice.pairInfo.baseAsset}
+                            title={mostDecreasedPrice.pairInfo.baseAsset}
+                        />
+                        <span className={`mr-05`}>{t("currency." + mostDecreasedPrice.pairInfo.baseAsset)}</span>
+                    </div>
+
+
+
+                    <div className={`column ai-end text-red`}>
+                        <div className={`row`}>
+                            <span className={`font-size-sm-mini 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>
                     </div>
+
+
                 </div>
+            </div>
 
 
-                <div className={`column`}>
-                    <span className={`${classes.title} text-orange`}>{t("MarketView.MaxTransactionVolume")}</span>
-                    <div className={`row jc-between ai-center`}>
-                        <div className={`row jc-center ai-center`}>
-                            <img src={images.BTC} alt="" className={`img-md-plus ml-05`}/>
-                            <span className={`mr-05`}>{t("currency." + "BTC")}</span>
-                        </div>
-                        <div className={`column ai-end`}>
-                            <span className={`text-green`}>25،1254،248</span>
-                            <span className={`text-green`}>10% +</span>
-                        </div>
+            <div className={`column`}>
+                <span className={`${classes.title} text-orange`}>{t("MarketView.mostVolume")}</span>
+                <div className={`row jc-between ai-center`}>
+
+
+
+                    <div className={`row jc-center ai-center`}>
+                        <img
+                            className="img-md-plus ml-05"
+                            src={images[mostVolume.pairInfo.baseAsset]}
+                            alt={mostVolume.pairInfo.baseAsset}
+                            title={mostVolume.pairInfo.baseAsset}
+                        />
+                        <span className={`mr-05`}>{t("currency." + mostVolume.pairInfo.baseAsset)}</span>
                     </div>
-                </div>{/*
-                <div className={`column border-bottom`}>
-                    <span className={`${classes.title}`}>{t("MarketView.MinTransactionVolume")}</span>
-                    <div className={`row jc-between ai-center`}>
-                        <div className={`row jc-center ai-center`}>
-                            <img src={images.BTC} alt="" className={`img-md-plus ml-05`}/>
-                            <span className={`mr-05`}>{t("currency." + "BTC")}</span>
-                        </div>
-                        <div className={`column ai-end`}>
-                            <span className={`text-green`}>25،1254،248</span>
-                            <span className={`text-green`}>10% +</span>
+                    <div className={`column ai-end`}>
+                        <div className={`row`}>
+                            <span className={`font-size-sm-mini ml-05`}>{mostVolume.pairInfo.quoteAsset}</span>
+                            <span> {new BN(mostVolume?.volume).toFormat()} </span>
                         </div>
+                        <span>% {new BN(mostVolume?.change).toFormat(2)}+</span>
                     </div>
-                </div>*/}
 
 
 
+                </div>
+            </div>
+
+        </>
+
+    }
+
+
+    return (
+        <div className={`${classes.container} card-background card-border`}>
+
 
+            <div className={`column border-bottom jc-center card-header-bg ${classes.header}`}>
+                <div className="row jc-center ai-center ">
+                    <h3>{t("MarketView.title")}</h3>
+                </div>
+            </div>
+            <div className={`column container jc-center ${classes.content} px-2 py-1`}>
 
+                {content()}
 
 
             </div>
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/MarketView.module.css b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/MarketView.module.css
index e6a8939d..ce488e29 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/MarketView.module.css
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketView/MarketView.module.css
@@ -14,4 +14,8 @@
 }*/
 .content {
     height: 85%;
+}
+
+.thisLoading{
+    width: 5vw;
 }
\ No newline at end of file
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/Spinner/Spinner.module.css b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/Spinner/Spinner.module.css
index 6fd52bef..82d4e718 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/Spinner/Spinner.module.css
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/Spinner/Spinner.module.css
@@ -14,7 +14,7 @@
 .BTC{
     width: 15%;
     position: absolute;
-    top: -5%;
+    top: -6.5%;
     left: 50%;
     z-index: 10;
     animation-duration: 10s;
@@ -30,7 +30,7 @@
 .ETH{
     width: 15%;
     position: absolute;
-    bottom: -5%;
+    bottom: -6.5%;
     left: 50%;
     animation-duration: 7s;
 }
@@ -45,7 +45,7 @@
 .USDT{
     width: 15%;
     position: absolute;
-    right: -5%;
+    right: -6.5%;
     top: 40%;
     animation-duration: 4s;
 }
diff --git a/src/queries/hooks/useGetExchangeInfo.js b/src/queries/hooks/useGetExchangeInfo.js
new file mode 100644
index 00000000..e7b61aef
--- /dev/null
+++ b/src/queries/hooks/useGetExchangeInfo.js
@@ -0,0 +1,21 @@
+import {useQuery} from "@tanstack/react-query";
+import {getExchangeInfo} from "js-api-client";
+
+export const useGetExchangeInfo = (interval) => {
+    return useQuery(
+        ['exchangeInfo', interval],
+        () => getExchangeInfoFunc(interval),
+        {
+            staleTime: 5000,
+            refetchInterval: 10000,
+            notifyOnChangeProps: ['data', 'isLoading', 'error'],
+
+        });
+}
+
+const getExchangeInfoFunc = async (interval) => {
+    const {data} = await getExchangeInfo(interval)
+    return data;
+
+}
+
diff --git a/src/queries/hooks/useGetMarketStats.js b/src/queries/hooks/useGetMarketStats.js
new file mode 100644
index 00000000..7c697196
--- /dev/null
+++ b/src/queries/hooks/useGetMarketStats.js
@@ -0,0 +1,21 @@
+import {useQuery} from "@tanstack/react-query";
+import {getMarketStats} from "js-api-client";
+
+export const useGetMarketStats = (interval) => {
+    return useQuery(
+        ['marketStats', interval],
+        () => getMarketStatsFunc(interval),
+        {
+            staleTime: 5000,
+            refetchInterval: 10000,
+            notifyOnChangeProps: ['data', 'isLoading', 'error'],
+
+        });
+}
+
+const getMarketStatsFunc = async (interval) => {
+    const {data} = await getMarketStats(interval)
+    return data;
+
+}
+
diff --git a/src/queries/index.js b/src/queries/index.js
index fd774cf6..75afc7b9 100644
--- a/src/queries/index.js
+++ b/src/queries/index.js
@@ -1,5 +1,7 @@
 //Hooks
 export {useOverview} from "./hooks/useOverview";
+export {useGetExchangeInfo} from "./hooks/useGetExchangeInfo";
+export {useGetMarketStats} from "./hooks/useGetMarketStats";
 export {useLastTrades} from "./hooks/useLastTrades";
 export {useOrderBook} from "./hooks/useOrderBook";
 export {useMyOpenOrders} from "./hooks/useMyOpenOrders";
diff --git a/yarn.lock b/yarn.lock
index e6ffeb27..e8b73afa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9712,12 +9712,12 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"js-api-client@https://github.com/opexdev/js-api-client.git":
+"js-api-client@https://github.com/opexdev/js-api-client.git#develop":
   version: 0.1.0
-  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=731088c4c92baafc05fe3ff3869f357ea3309907"
+  resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=3d44fef7199919e2e5500b3f0132699ffcac7894"
   peerDependencies:
     axios: ^0.22
-  checksum: de66cea2f40bf5f298aafdd5230adf7732bd607afdd7b3b8903d18e1a5e178b594d960ea77ff4719d9598342f72b251b89a84c4f438ed613ea0a8ef2b42effca
+  checksum: c6584afd0cf54e4fd2e9d16fff00f930a7c560d03bd144c593611cc7d7cc7cc912cebfa13e506390a3678d949b9199c9d8ad0dc422683e143a6a3f92a2b45c7f
   languageName: node
   linkType: hard
 
@@ -11295,7 +11295,7 @@ fsevents@^1.2.7:
     i18next: ^21.8.0
     i18next-browser-languagedetector: ^6.1.4
     i18next-http-backend: ^1.4.0
-    js-api-client: "https://github.com/opexdev/js-api-client.git"
+    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

From f0a7b92d26c81960f4ba9707dca7000789a4bcc6 Mon Sep 17 00:00:00 2001
From: Hossein <hossein13785ab@gmail.com>
Date: Sun, 14 Aug 2022 17:03:32 +0430
Subject: [PATCH 2/2] #83, Add marketInfo api

---
 public/locales/fa/translation.json            |  3 +-
 .../AllMarketContent/AllMarketContent.js      |  3 -
 .../components/AllMarketInfo/AllMarketInfo.js |  6 --
 .../Sections/LandingContent/LandingContent.js |  4 +-
 .../components/MarketInfo/MarketInfo.js       | 83 ++++++++++------
 .../MarketInfo/MarketInfo.module.css          | 34 +++----
 .../MarketInfoCard/MarketInfoCard.js          | 19 ++--
 .../MarketInfoCard/MarketInfoCard.module.css  |  0
 .../MarketInfoTable/MarketInfoTable.js        | 96 +++++++++----------
 .../MarketInfoTable.module.css                |  9 +-
 .../components/MarketView/MarketView.js       | 36 +------
 .../PopularCryptocurrencies.js                | 61 ------------
 .../PopularCryptocurrencies.module.css        | 15 ---
 .../MarketInfoTable/MarketInfoTable.js        | 58 -----------
 .../MarketInfoTable.module.css                |  9 --
 src/queries/hooks/useOverview.js              |  2 +-
 16 files changed, 131 insertions(+), 307 deletions(-)
 rename src/main/Browser/Pages/Landing/Sections/LandingContent/components/{PopularCryptocurrencies => MarketInfo}/components/MarketInfoCard/MarketInfoCard.js (68%)
 rename src/main/Browser/Pages/Landing/Sections/LandingContent/components/{PopularCryptocurrencies => MarketInfo}/components/MarketInfoCard/MarketInfoCard.module.css (100%)
 delete mode 100644 src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/PopularCryptocurrencies.js
 delete mode 100644 src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/PopularCryptocurrencies.module.css
 delete mode 100644 src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoTable/MarketInfoTable.js
 delete mode 100644 src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoTable/MarketInfoTable.module.css

diff --git a/public/locales/fa/translation.json b/public/locales/fa/translation.json
index 2bdaf5f0..f58180ca 100644
--- a/public/locales/fa/translation.json
+++ b/public/locales/fa/translation.json
@@ -506,7 +506,8 @@
     "lastPrice": "آخرین قیمت",
     "pcp24h": "24 ساعت %",
     "pcp7d": "7 روز %",
-    "chart": "روند 7 روزه",
+    "7chart": "روند 7 روزه",
+    "chart": "نمودار",
     "volume": "حجم معاملات",
     "details": "جزئیات",
     "lowPrice": "حداقل",
diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/AllMarketContent.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/AllMarketContent.js
index c4fc36a5..16e4df57 100644
--- a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/AllMarketContent.js
+++ b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/AllMarketContent.js
@@ -3,9 +3,6 @@ import classes from './AllMarketContent.module.css'
 import ScrollBar from "../../../../../../components/ScrollBar";
 import Footer from "../../../UserPanel/Sections/Footer/Footer";
 import Swing from "./components/Swing/Swing";
-import {images} from "../../../../../../assets/images";
-import PopularCryptocurrencies
-    from "../../../Landing/Sections/LandingContent/components/PopularCryptocurrencies/PopularCryptocurrencies";
 import AllMarketInfo from "./components/AllMarketInfo/AllMarketInfo";
 import PriceInfo from "./components/PriceInfo/PriceInfo";
 import VolumeInfo from "./components/VolumeInfo/VolumeInfo";
diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.js
index e59b7862..269e3e0f 100644
--- a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.js
+++ b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.js
@@ -1,12 +1,6 @@
 import React, {useState} from 'react';
 import classes from './AllMarketInfo.module.css'
 import Icon from "../../../../../../../../components/Icon/Icon";
-import {Link} from "react-router-dom";
-import * as Routes from "../../../../../../Routes/routes";
-import MarketInfoCard
-    from "../../../../../Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoCard/MarketInfoCard";
-import MarketInfoTable
-    from "../../../../../Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoTable/MarketInfoTable";
 import AllMarketInfoCard from "./components/AllMarketInfoCard/AllMarketInfoCard";
 import AllMarketInfoTable from "./components/AllMarketInfoTable/AllMarketInfoTable";
 
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/LandingContent.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/LandingContent.js
index d40ec490..0ed34618 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/LandingContent.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/LandingContent.js
@@ -6,9 +6,9 @@ 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 PopularCryptocurrencies from "./components/PopularCryptocurrencies/PopularCryptocurrencies";
 import {images} from "../../../../../../assets/images";
 import {useSelector} from "react-redux";
+import MarketInfo from "./components/MarketInfo/MarketInfo";
 
 const LandingContent = () => {
 
@@ -30,7 +30,7 @@ const LandingContent = () => {
                     </div>
                 </div>
                 <div className={`flex jc-center`} style={{height:"" , backgroundColor: "var(--mainContent)"}}>
-                    <PopularCryptocurrencies/>
+                    <MarketInfo/>
                 </div>
                 <div className={`flex jc-center ai-center width-90 m-auto`} style={{height:"70vh" , backgroundColor: ""}}>
                     <img src={isDark ? images.OpexPanelMockupDark : images.OpexPanelMockupLight} alt="OpexMockup" loading="lazy" style={{width:"40%"}}/>
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.js
index 2cda91d2..e5689be0 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.js
@@ -1,43 +1,68 @@
-import React from 'react';
+import React, {useState} from 'react';
 import classes from './MarketInfo.module.css'
-import AccordionBox from "../../../../../../../../components/AccordionBox/AccordionBox";
+import Icon from "../../../../../../../../components/Icon/Icon";
 import MarketInfoTable from "./components/MarketInfoTable/MarketInfoTable";
-import {useTranslation} from "react-i18next";
+import MarketInfoCard from "./components/MarketInfoCard/MarketInfoCard";
+import * as Routes from "../../../../../../Routes/routes";
+import {Link} from "react-router-dom";
+import {useOverview} from "../../../../../../../../queries";
+import Loading from "../../../../../../../../components/Loading/Loading";
+import {useSelector} from "react-redux";
+import Error from "../../../../../../../../components/Error/Error";
 
 const MarketInfo = () => {
 
-    const {t} = useTranslation();
+    const {data:overview, isLoading, error} = useOverview(null , "24h")
+    const [card, setCard] = useState(false)
+    const [IRT, setIRT] = useState(true)
+    const allSymbols = useSelector((state) => state.exchange.symbols)
 
-    const marketData = [
-        {symbol: "BTCBUSD", baseAsset: "BTC", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "ETHBUSD", baseAsset: "ETH", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "-3"},
-        {symbol: "BTCBUSD", baseAsset: "BTC", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "ETHBUSD", baseAsset: "ETH", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "BTCBUSD", baseAsset: "BTC", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "ETHBUSD", baseAsset: "ETH", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "BTCBUSD", baseAsset: "BTC", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "ETHBUSD", baseAsset: "ETH", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "BTCBUSD", baseAsset: "BTC", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "ETHBUSD", baseAsset: "ETH", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "BTCBUSD", baseAsset: "BTC", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
-        {symbol: "ETHBUSD", baseAsset: "ETH", quoteAsset: "BUSD", price: "4500025680", lowPrice: "15000", highPrice: "300050", volume: "300050", priceChangePercent: "10"},
+    let USDTMarket,IRTMarket
 
+    if (!isLoading) {
+        const overviewWithPair = overview.map((o)=>{
+            o.pairInfo = allSymbols.find((s => s.symbol === o.symbol))
+            return o
+        })
+        const USDTPrice = overview.find(s => s.symbol.includes("USDTIRT")).lastPrice
+        USDTMarket = overviewWithPair.filter(s => s.symbol.includes("USDT")).sort((a , b) => b.lastPrice * b.volume * USDTPrice - a.lastPrice * a.volume * USDTPrice).slice(0 , 5)
+        IRTMarket = overviewWithPair.filter(s => s.symbol.includes("IRT")).sort((a , b) => b.lastPrice * b.volume - a.lastPrice * a.volume).slice(0 , 5)
+    }
 
-    ]
+    const content = () => {
+        if (isLoading) return <div style={{height: "40vh"}}><Loading/></div>
+        if (error) return <div style={{height: "40vh"}}><Error/></div>
+        else return <>
+            {card ?
+                <MarketInfoCard data={ IRT ? IRTMarket : USDTMarket}/>
+                :
+                <MarketInfoTable data={ IRT ? IRTMarket : USDTMarket}/>
+            }
+        </>
+    }
 
 
-    const data = [
-        {id: 1, title: t("currency.IRT"), body: <MarketInfoTable data={marketData}/>},
-        {id: 4, title: t("currency.USDT"), body: ""},
-    ];
     return (
-        <div
-            className={`container card-background card-border column ${classes.container}`}>
-            <AccordionBox
-                title={t("MarketInfo.title")}
-                content={data}
-                safari={classes.safariFlexSize}
-            />
+        <div className={`${classes.container} card-background card-border width-90 my-4`}>
+            <div className={`${classes.header} card-header-bg row jc-between ai-center px-2 py-2`}>
+                <div className={`row jc-center ai-center`}>
+                    <Icon iconName={`${card ? 'icon-row' : 'icon-grid'} font-size-md-01 flex cursor-pointer hover-text`} onClick={()=>setCard(prevState => !prevState)}/>
+                    <h1 className={`mr-1 ml-1`}>بازار</h1>
+                    <div className={`row jc-center ai-center mr-1`}>
+                        <span className={`px-2 py-1 rounded cursor-pointer hover-text ${IRT && classes.active}`} onClick={()=>setIRT(true)}>تومان</span>
+                        {/*<span className={`text-orange px-05`} style={{userSelect:"none"}}>|</span>*/}
+                        <span className={`px-2 py-1 rounded cursor-pointer hover-text ${!IRT && classes.active}`} onClick={()=>setIRT(false)}>تتر</span>
+                    </div>
+                </div>
+                <div className={`row jc-center ai-center cursor-pointer hover-text`}>
+                    <Link to={"/"} className={`ml-05 hover-text`}>نمایش تمام بازار</Link>
+                    {/*<Link to={Routes.AllMarket} className={`ml-05 hover-text`}>نمایش تمام بازار</Link>*/}
+                    <Icon iconName="icon-left-open-1 font-size-md flex" className={`mr-05`}/>
+                </div>
+            </div>
+            <div className={`${classes.content}`}>
+                {content()}
+            </div>
         </div>
     );
 };
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.module.css b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.module.css
index 693c868a..d647ba87 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.module.css
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.module.css
@@ -1,26 +1,16 @@
 .container {
-    height: 80vh;
-    border-radius: 9px;
+
 }
-.iconBG {
-    vertical-align: middle;
-    border-radius: 50vw;
+
+.header {
+    height: 10vh;
 }
-.close {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s;
-    opacity: 0;
-    line-height: 0;
-    visibility: collapse;
-}
-.open {
-    max-height: 2vh;
-    transition: max-height 0.6s;
-}
-.safariFlexSize :global(.accordion-header) {
-    flex: 22;
-}
-.safariFlexSize :global(.accordion-body) {
-    flex: 77;
+
+.content {
+   /* height: 85%;*/
 }
+
+.active {
+    background-color: var(--cardHeaderAlpha);
+    color: var(--activeTab);
+}
\ No newline at end of file
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoCard/MarketInfoCard.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.js
similarity index 68%
rename from src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoCard/MarketInfoCard.js
rename to src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.js
index 100459c4..d23fb2cc 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoCard/MarketInfoCard.js
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.js
@@ -2,14 +2,12 @@ import React from 'react';
 import classes from './MarketInfoCard.module.css'
 import {images} from "../../../../../../../../../../assets/images";
 import {useTranslation} from "react-i18next";
+import {BN} from "../../../../../../../../../../utils/utils";
 
-const MarketInfoCard = (props) => {
+const MarketInfoCard = ({data}) => {
 
     const {t} = useTranslation();
 
-    const {data, baseAsset, price, marketCap, lowPrice, highPrice, volume, pcp24h} = props
-
-
     const backgroundBar = (percent) => {
         if (percent > 0) {
             return {
@@ -26,16 +24,17 @@ const MarketInfoCard = (props) => {
 
             {data.map((tr, index) => {
                 return (
-                    <div className={`${classes.item} card-border card-background column jc-between ai-center py-3 cursor-pointer`} style={backgroundBar(tr.pcp24h.toString())}>
+                    <div className={`${classes.item} card-border card-background column jc-between ai-center py-3 cursor-pointer`} style={backgroundBar(tr.priceChange.toString())} key={index}>
                         <div className={`row jc-center ai-center width-100`}>
-                            <img src={images[tr.baseAsset]} alt={tr.baseAsset} title={tr.baseAsset} className={`img-lg ml-05`}/>
+                            <img src={images[tr?.pairInfo?.baseAsset]} alt={tr?.pairInfo?.baseAsset}
+                                 title={tr?.pairInfo?.baseAsset} className={`img-lg ml-05`}/>
                             <div className={`column mr-05`}>
-                                <span className={`font-size-md`}>{t("currency." + tr.baseAsset)}</span>
-                                <span className={`${tr.pcp24h > 0 ? "text-green" : "text-red"}`}>{tr.pcp24h} %</span>
+                                <span className={`font-size-md`}>{t("currency." + tr?.pairInfo?.baseAsset)}</span>
+                                <span className={`${tr.priceChange > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(tr.priceChange).toFormat()} %</span>
                             </div>
                         </div>
 
-                        <span className={`${tr.pcp24h > 0 ? "text-green" : "text-red"} font-size-md-01`}>{tr.price}</span>
+                        <span className={`${tr.priceChange > 0 ? "text-green" : "text-red"} font-size-md-01`}>{new BN(tr.lastPrice).toFormat()}</span>
 
                         <div className={`column jc-center ai-center`}>
                             <img
@@ -44,7 +43,7 @@ const MarketInfoCard = (props) => {
                                 alt={""}
                                 title={""}
                             />
-                            <span className={`mt-05 text-color-gray font-size-sm-plus`}>روند 7 روزه</span>
+                            <span className={`mt-05 text-color-gray font-size-sm-plus`}>روند 24 ساعت</span>
                         </div>
 
 
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoCard/MarketInfoCard.module.css b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.module.css
similarity index 100%
rename from src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoCard/MarketInfoCard.module.css
rename to src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.module.css
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 82d054b4..cd960cd0 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
@@ -1,67 +1,57 @@
 import React from 'react';
 import classes from './MarketInfoTable.module.css'
-import ScrollBar from "../../../../../../../../../../components/ScrollBar";
 import {useTranslation} from "react-i18next";
-import moment from "moment-jalaali";
 import {images} from "../../../../../../../../../../assets/images";
+import {useSelector} from "react-redux";
+import {BN} from "../../../../../../../../../../utils/utils";
 
-const MarketInfoTable = (props) => {
+const MarketInfoTable = ({data}) => {
 
     const {t} = useTranslation();
-    const {data, baseAsset, price, lowPrice, highPrice, volume, priceChangePercent} = props
 
+    let head = (
+        <div className="row text-color-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
+            <span className="width-25 flex jc-start ai-center">{t("MarketInfo.name")}</span>
+            <span className="width-30 flex jc-start ai-center">{t("MarketInfo.lastPrice")}</span>
+            <span className="width-25 flex jc-start ai-center">{t("MarketInfo.pcp24h")}</span>
+            <span className="width-20 flex jc-start ai-center">{t("MarketInfo.volume")}</span>
+            <span className="width-25 flex jc-end ai-center">{t("MarketInfo.chart")}</span>
+        </div>
+    );
 
-    return (
-
-        <ScrollBar>
-            <table className="text-center striped" cellSpacing="0" cellPadding="0">
-                <thead className="th-border-y">
-                <tr className={``}>
-                    <th className={`width-23 py-1`}>{t("MarketInfo.cryptocurrency")}</th>
-                    <th>{t("MarketInfo.lastPrice")}</th>
-                    <th>{t("MarketInfo.priceChangePercent")}</th>
-                    <th>{t("min")}</th>
-                    <th>{t("max")}</th>
-                    <th>{t("MarketInfo.volume")}</th>
-                    <th>{t("MarketInfo.chart")}</th>
-                </tr>
-                </thead>
-                <tbody>
-                {data.map((tr, index) => {
+    let body = (
+        <>
+         {data.map((tr, index) => {
+            return (
+                <div className={`${classes.row} row font-size-md rounded border-bottom cursor-pointer px-2 py-2`} key={index}>
+                    <span className="width-25 row jc-start ai-center">
+                        <img src={images[tr?.pairInfo?.baseAsset]} alt={tr?.pairInfo?.baseAsset}
+                             title={tr?.pairInfo?.baseAsset} className={`img-lg ml-05`}/>
+                        <span className={`font-size-md mr-05`}>{t("currency." + tr?.pairInfo?.baseAsset)}</span>
+                    </span>
+                    <span className={`width-30 flex jc-start ai-center ${tr.priceChange > 0 ? "text-green" : "text-red"}`}>{new BN(tr.lastPrice).toFormat()}</span>
+                    <span className={`width-25 flex jc-end ai-center ${tr.priceChange > 0 ? "text-green" : "text-red"} direction-ltr`}>{new BN(tr.priceChange).toFormat()} %</span>
+                    <span className="width-20 flex jc-start ai-center">{tr.volume}</span>
+                    <span className="width-25 flex jc-end ai-center">
+                        <img
+                            className="img-lg-2"
+                            src={images.chart}
+                            alt={""}
+                            title={""}
+                        />
+                    </span>
+                </div>
+            )
+         })}
+        </>
+    );
 
-                    return (
-                        <tr key={index}>
-                            <td className={`row jc-between ai-center px-3 py-2`}>
-                                <span className={`col-44 flex jc-end`}>
-                                    <img
-                                        className="img-md-plus "
-                                        src={images[tr.baseAsset]}
-                                        alt={tr.baseAsset}
-                                        title={tr.baseAsset}
-                                    />
-                                </span>
-                                <span className={`col-44 flex jc-start`}>
-                                    <span className={``}>{t("currency." + tr.baseAsset)}</span>
-                                </span>
-                            </td>
-                            <td className={tr.priceChangePercent > 0 ? "text-green" : "text-red"}>{tr.price}</td>
-                            <td className={tr.priceChangePercent > 0 ? "text-green" : "text-red"}>{tr.priceChangePercent} %</td>
-                            <td>{tr.lowPrice}</td>
-                            <td>{tr.highPrice}</td>
-                            <td>{tr.volume}</td>
-                            <td className={``}><img
-                                className="img-lg ml-05"
-                                src={images.chart}
-                                alt={tr.baseAsset}
-                                title={tr.baseAsset}
-                            /></td>
-                        </tr>
-                    )
 
-                })}
-                </tbody>
-            </table>
-        </ScrollBar>
+    return (
+        <>
+            {head}
+            {body}
+        </>
     );
 };
 
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.module.css b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.module.css
index 381d33a5..a606e484 100644
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.module.css
+++ b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.module.css
@@ -1,4 +1,9 @@
-.container tr:nth-child(even) td {
+.row:last-child{
+    border-bottom: none;
+}
+.row:nth-child(odd) {
     background-color: var(--tableRow);
-    transition: background-color 0.4s;
 }
+.row:hover {
+    background-color: var(--LoginContainer);
+}
\ No newline at end of file
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 2d9751cf..dd58bcdd 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
@@ -2,10 +2,9 @@ import React from 'react';
 import classes from './MarketView.module.css'
 import {useTranslation} from "react-i18next";
 import {images} from "../../../../../../../../assets/images";
-import {useGetExchangeInfo, useGetMarketStats} from "../../../../../../../../queries";
+import {useGetMarketStats} from "../../../../../../../../queries";
 import {BN} from "../../../../../../../../utils/utils";
 import {useSelector} from "react-redux";
-import content from "../../../../../UserPanel/Sections/Content/Content";
 import Loading from "../../../../../../../../components/Loading/Loading";
 import Error from "../../../../../../../../components/Error/Error";
 
@@ -32,16 +31,7 @@ const MarketView = () => {
     }
 
 
-
-
-
-    console.log("allSymbols , " , allSymbols)
-
-
-    console.log("data: ", stats?.mostDecreasedPrice[0]?.priceChangePercent)
-
     const content = () => {
-
         if (isLoading) return <Loading/>
         if (error) return <Error/>
         else return <>
@@ -65,10 +55,8 @@ const MarketView = () => {
                         </div>
                         <span>% {new BN(mostIncreasedPrice?.priceChangePercent).toFormat(2)}+</span>
                     </div>
-
                 </div>
             </div>
-
             <div className={`column border-bottom  my-3`}>
                 <span className={`${classes.title} text-orange`}>{t("MarketView.mostDecreased")}</span>
                 <div className={`row jc-between ai-center`}>
@@ -81,9 +69,6 @@ const MarketView = () => {
                         />
                         <span className={`mr-05`}>{t("currency." + mostDecreasedPrice.pairInfo.baseAsset)}</span>
                     </div>
-
-
-
                     <div className={`column ai-end text-red`}>
                         <div className={`row`}>
                             <span className={`font-size-sm-mini ml-05`}>{mostDecreasedPrice.pairInfo.quoteAsset}</span>
@@ -91,18 +76,11 @@ const MarketView = () => {
                         </div>
                         <span className={`direction-ltr`}>{new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)} %</span>
                     </div>
-
-
                 </div>
             </div>
-
-
             <div className={`column`}>
                 <span className={`${classes.title} text-orange`}>{t("MarketView.mostVolume")}</span>
                 <div className={`row jc-between ai-center`}>
-
-
-
                     <div className={`row jc-center ai-center`}>
                         <img
                             className="img-md-plus ml-05"
@@ -119,34 +97,22 @@ const MarketView = () => {
                         </div>
                         <span>% {new BN(mostVolume?.change).toFormat(2)}+</span>
                     </div>
-
-
-
                 </div>
             </div>
-
         </>
-
     }
 
 
     return (
         <div className={`${classes.container} card-background card-border`}>
-
-
             <div className={`column border-bottom jc-center card-header-bg ${classes.header}`}>
                 <div className="row jc-center ai-center ">
                     <h3>{t("MarketView.title")}</h3>
                 </div>
             </div>
             <div className={`column container jc-center ${classes.content} px-2 py-1`}>
-
                 {content()}
-
-
             </div>
-
-
         </div>
     );
 };
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/PopularCryptocurrencies.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/PopularCryptocurrencies.js
deleted file mode 100644
index 0b1125ba..00000000
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/PopularCryptocurrencies.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, {useState} from 'react';
-import classes from './PopularCryptocurrencies.module.css'
-import Icon from "../../../../../../../../components/Icon/Icon";
-import MarketInfoTable from "./components/MarketInfoTable/MarketInfoTable";
-import MarketInfoCard from "./components/MarketInfoCard/MarketInfoCard";
-import * as Routes from "../../../../../../Routes/routes";
-import {Link} from "react-router-dom";
-import {AllMarket} from "../../../../../../Routes/routes";
-
-const PopularCryptocurrencies = () => {
-
-
-
-    const [card, setCard] = useState(false)
-
-
-    const marketData = [
-        {symbol: "BTCBUSD", baseAsset: "BTC", quoteAsset: "BUSD", price: "20,515.85", marketCap: "386,159,595,216", lowPrice: "15000", highPrice: "300050", volume: "44,351,555,144", pcp24h: "-8.58", pcp7d: "-15.58"},
-        {symbol: "ETHBUSD", baseAsset: "ETH", quoteAsset: "BUSD", price: "1,054.71", marketCap: "124,977,581,341", lowPrice: "15000", highPrice: "300050", volume: "26,939,396,426", pcp24h: "-11.48", pcp7d: "+14.58"},
-        {symbol: "USDT", baseAsset: "USDT", quoteAsset: "BUSD", price: "0.9985", marketCap: "70,750,495,039", lowPrice: "15000", highPrice: "300050", volume: "71,102,864,297", pcp24h: "+1.03", pcp7d: "-125.58"},
-        {symbol: "BNB", baseAsset: "BNB", quoteAsset: "BUSD", price: "204.98", marketCap: "32,812,595,330", lowPrice: "15000", highPrice: "300050", volume: "1,681,153,480", pcp24h: "-8.18", pcp7d: "-5.58"},
-        {symbol: "BUSD", baseAsset: "BUSD", quoteAsset: "BUSD", price: "1.00", marketCap: "17,437,053,356", lowPrice: "15000", highPrice: "300050", volume: "6,734,823,937", pcp24h: "-0.14", pcp7d: "-5.8"},
-
-        {symbol: "BTCBUSD", baseAsset: "DOGE", quoteAsset: "BUSD", price: "20,515.85", marketCap: "386,159,595,216", lowPrice: "15000", highPrice: "300050", volume: "44,351,555,144", pcp24h: "-8.58", pcp7d: "-1.58"},
-        {symbol: "ETHBUSD", baseAsset: "LTC", quoteAsset: "BUSD", price: "1,054.71", marketCap: "124,977,581,341", lowPrice: "15000", highPrice: "300050", volume: "26,939,396,426", pcp24h: "-11.48", pcp7d: "-19.58"},
-
-
-    ]
-
-
-    return (
-        <div className={`${classes.container} card-background card-border width-90 my-4`}>
-            <div className={`${classes.header} card-header-bg row jc-between ai-center px-2 py-2`}>
-                <div className={`row jc-center ai-center`}>
-
-                    <Icon iconName={`${card ? 'icon-row' : 'icon-grid'} font-size-md-01 flex cursor-pointer hover-text`} onClick={()=>setCard(prevState => !prevState)}/>
-                    <h1 className={`mr-1 ml-1`}>بازار</h1>
-                    <div className={`row jc-center ai-center mr-1`}>
-                        <span className={`px-2 py-1 rounded cursor-pointer hover-text icon-active ${classes.title}`}>تومان</span>
-                        {/*<span className={`text-orange px-05`} style={{userSelect:"none"}}>|</span>*/}
-                        <span className={`px-2 py-1 rounded cursor-pointer hover-text`}>تتر</span>
-                    </div>
-                </div>
-
-                <div className={`row jc-center ai-center cursor-pointer hover-text`}>
-                    <Link to={Routes.AllMarket} className={`ml-05 hover-text`}>نمایش تمام بازار</Link>
-                    <Icon iconName="icon-left-open-1 font-size-md flex" className={`mr-05`}/>
-                </div>
-            </div>
-            <div className={`${classes.content}`}>
-                {card ?
-                        <MarketInfoCard data={marketData.sort((a , b) => b.marketCap - a.marketCap).slice(0 , 5)}/>
-                        :
-                        <MarketInfoTable data={marketData.sort((a , b) => b.marketCap - a.marketCap).slice(0 , 5)}/>
-                }
-            </div>
-        </div>
-    );
-};
-
-export default PopularCryptocurrencies;
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/PopularCryptocurrencies.module.css b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/PopularCryptocurrencies.module.css
deleted file mode 100644
index 5029901f..00000000
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/PopularCryptocurrencies.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.container {
-
-}
-
-.header {
-    height: 10vh;
-}
-
-.content {
-   /* height: 85%;*/
-}
-
-.title {
-    background-color: var(--cardHeaderAlpha);
-}
\ No newline at end of file
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoTable/MarketInfoTable.js b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoTable/MarketInfoTable.js
deleted file mode 100644
index d864cd67..00000000
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoTable/MarketInfoTable.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import classes from './MarketInfoTable.module.css'
-import {useTranslation} from "react-i18next";
-import {images} from "../../../../../../../../../../assets/images";
-
-const MarketInfoTable = (props) => {
-
-    const {t} = useTranslation();
-
-    const {data, baseAsset, price, marketCap, lowPrice, highPrice, volume, pcp24h} = props
-
-    let head = (
-        <div className="row text-color-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
-            <span className="width-25 flex jc-start ai-center">{t("MarketInfo.name")}</span>
-            <span className="width-30 flex jc-start ai-center">{t("MarketInfo.lastPrice")}</span>
-            <span className="width-25 flex jc-start ai-center">{t("MarketInfo.pcp24h")}</span>
-            <span className="width-20 flex jc-start ai-center">{t("MarketInfo.marketCap")}</span>
-            <span className="width-25 flex jc-end ai-center">{t("MarketInfo.chart")}</span>
-        </div>
-    );
-
-    let body = (
-        <>
-         {data.map((tr, index) => {
-            return (
-        <div className={`${classes.row} row font-size-md rounded border-bottom cursor-pointer px-2 py-2`}>
-            <span className="width-25 row jc-start ai-center">
-                <img src={images[tr.baseAsset]} alt={tr.baseAsset}
-                     title={tr.baseAsset} className={`img-lg ml-05`}/>
-                <span className={`font-size-md mr-05`}>{t("currency." + tr.baseAsset)}</span>
-            </span>
-            <span className={`width-30 flex jc-start ai-center ${tr.pcp24h > 0 ? "text-green" : "text-red"}`}>{tr.price}</span>
-            <span className={`width-25 flex jc-start ai-center ${tr.pcp24h > 0 ? "text-green" : "text-red"}`}>{tr.pcp24h} %</span>
-            <span className="width-20 flex jc-start ai-center">{tr.marketCap}</span>
-            <span className="width-25 flex jc-end ai-center">
-                <img
-                    className="img-lg-2"
-                    src={images.chart}
-                    alt={""}
-                    title={""}
-                />
-            </span>
-        </div>
-            )
-        })}
-        </>
-    );
-
-
-    return (
-        <>
-            {head}
-            {body}
-        </>
-    );
-};
-
-export default MarketInfoTable;
diff --git a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoTable/MarketInfoTable.module.css b/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoTable/MarketInfoTable.module.css
deleted file mode 100644
index a606e484..00000000
--- a/src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoTable/MarketInfoTable.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.row:last-child{
-    border-bottom: none;
-}
-.row:nth-child(odd) {
-    background-color: var(--tableRow);
-}
-.row:hover {
-    background-color: var(--LoginContainer);
-}
\ No newline at end of file
diff --git a/src/queries/hooks/useOverview.js b/src/queries/hooks/useOverview.js
index e77b5197..b00e5080 100644
--- a/src/queries/hooks/useOverview.js
+++ b/src/queries/hooks/useOverview.js
@@ -9,7 +9,7 @@ export const useOverview = (symbol, period) => {
             staleTime: 5000,
             refetchInterval: 10000,
             notifyOnChangeProps: ['data', 'isLoading', 'error'],
-            select: (data) => data[0],
+            select: (data) => {return symbol ? data[0] : data},
         });
 }