Add landing page

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",

public/locales/fa/translation.json

@@ -506,7 +506,8 @@
     "lastPrice": "آخرین قیمت",
     "pcp24h": "24 ساعت %",
     "pcp7d": "7 روز %",
-    "chart": "روند 7 روزه",
+    "7chart": "روند 7 روزه",
+    "chart": "نمودار",
     "volume": "حجم معاملات",
     "details": "جزئیات",
     "lowPrice": "حداقل",
@@ -516,10 +517,10 @@
   },
   "MarketView": {
     "title": "روند 24 ساعته",
-    "mostIncrease": "بیشترین افزایش",
-    "mostTrade": "بیشترین تعداد معامله",
-    "greatestReduction": "بیشترین کاهش",
-    "MaxTransactionVolume": "بیشترین حجم معامله",
+    "mostIncreased": "بیشترین افزایش",
+    "mostDecreased": "بیشترین کاهش",
+    "mostTrades": "بیشترین تعداد معامله",
+    "mostVolume": "بیشترین حجم معامله",
     "MinTransactionVolume": "کمترین حجم معامله"
   },
   "MarketTitle": {

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";

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";
 

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%"}}/>

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>
     );
 };

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>
     );
 };

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);
+}

src/main/Browser/Pages/Landing/Sections/LandingContent/components/PopularCryptocurrencies/components/MarketInfoCard/MarketInfoCard.js → 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>