Add landing page

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

package.json

@@ -4,7 +4,9 @@
   "homepage": "",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.9",
+    "@tanstack/react-query": "^4.16.1",
+    "@tanstack/react-query-devtools": "^4.16.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.4",
     "axios": "^0.27.2",
@@ -13,6 +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#develop",
     "jwt-decode": "^3.1.2",
     "lightweight-charts": "^3.8.0",
     "moment-jalaali": "^0.9.2",
@@ -61,5 +64,5 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "yarn@3.2.0"
+  "packageManager": "yarn@3.2.4"
 }

src/components/HeaderBuilder/HeaderBuilder.js

@@ -47,7 +47,7 @@ const HeaderBuilder = ({children}) => {
 
                    <div className={`column ai-start width-20`}>
 
-                       <Icon iconName="icon-menu_vertical fs-01-plus-plus flex" onClick={()=>dispatch(showSideMenu(true))}/>
+                       <Icon iconName="icon-menu_vertical fs-04 flex" onClick={()=>dispatch(showSideMenu(true))}/>
                    </div>
 
 

src/components/Loading/Loading.js

@@ -5,12 +5,12 @@ import {connect} from "react-redux";
 import {isMobile} from 'react-device-detect';
 
 
-const Loading = ({isDark}) => {
+const Loading = ({isDark, type}) => {
     const {t} = useTranslation();
     return (
         <div className="width-100 column ai-center jc-center" style={{height: "100%"}}>
-            <img className="mb-05" style={{width: isMobile ? "10vw" : "3vw"}} src={isDark ? images.squareLoading : images.squareLoadingLight} alt="loading..."/>
-            <span className="flashit mt-1">{t('loading')}</span>
+            <img className="mb-05" style={{width: isMobile ? "10vw" : "3vw"}} src={isDark ? type === "linear" ? images.linearLoading : images.squareLoading : type === "linear" ? images.linearLoading : images.squareLoadingLight} alt="loading..."/>
+            {type !== "linear" && <span className="flashit mt-1">{t('loading')}</span>}
         </div>
     );
 };

src/components/Title/Title.js

@@ -3,7 +3,7 @@ import classes from './Title.module.css'
 
 const Title = ({title}) => {
     return (
-        <div className={`${classes.container}`}>
+        <div className={`${classes.container} my-05`}>
             <span className={`font-weight-bold fs-05 ${classes.title} px-2`} style={{position: 'relative'}}>
                 {title}
                 <span className={`${classes.underline} px-2`}></span>

src/index.js

@@ -15,6 +15,9 @@ import setupAxios from "./setup/axios/setupAxios";
 import axios from "axios";
 import exchangeReducer from "./store/reducers/exchangeReducer";
 import {StyleRoot} from "radium";
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
 
 const sagaMiddleware = createSagaMiddleware();
 const rootReducer = combineReducers({
@@ -48,12 +51,18 @@ sagaMiddleware.run(watchGlobal);
 
 setupAxios(axios, store);
 
+//React query client
+const queryClient = new QueryClient()
+
 ReactDOM.render(
     <React.StrictMode>
         <Suspense fallback={"loading"}>
             <Provider store={store}>
                 <StyleRoot>
-                    <Main baseURL={PUBLIC_URL}/>
+                    <QueryClientProvider client={queryClient}>
+                        <Main baseURL={PUBLIC_URL}/>
+                       {/* <ReactQueryDevtools initialIsOpen={false} />*/}
+                    </QueryClientProvider>
                 </StyleRoot>
             </Provider>
         </Suspense>

src/main/Mobile/Pages/AllMarket/Sections/AllMarketContent/components/MarketStats/MarketStats.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classes from './MarketStats.module.css'
+
+const MarketStats = () => {
+
+
+
+    return (
+        <div className={``}>
+
+        </div>
+    );
+};
+
+export default MarketStats;

src/main/Mobile/Pages/Landing/Sections/LandingContent/LandingContent.js

@@ -6,6 +6,7 @@ import Spinner from "./components/Spinner/Spinner";
 import MarketView from "./components/MarketView/MarketView";
 import MarketInfo from "./components/MarketInfo/MarketInfo";
 import Footer from "../../../../../../components/Footer/Footer";
+import GeneralInfo from "./components/GeneralInfo/GeneralInfo";
 
 const LandingContent = () => {
     return (
@@ -15,6 +16,7 @@ const LandingContent = () => {
                 <Spinner/>
                 <MarketView/>
                 <MarketInfo/>
+                <GeneralInfo/>
                 <Footer/>
             </ScrollBar>
         </div>

src/main/Mobile/Pages/Landing/Sections/LandingContent/components/GeneralInfo/GeneralInfo.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import classes from './GeneralInfo.module.css'
+import {useTranslation} from "react-i18next";
+import {useGetExchangeInfo} from "../../../../../../../../queries";
+import Loading from "../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../components/Error/Error";
+
+const GeneralInfo = () => {
+
+    const {t} = useTranslation();
+
+    const interval = "1Y"
+    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={`fs-02`}>{data.activeUsers} </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-0-7`}>{t("GeneralInfo.totalOrders")}</span>
+            </div>
+            <div className={`column jc-center ai-center`}>
+                <span className={`fs-02`}>{data.totalTrades} </span>
+                <span className={`fs-0-7`}>{t("GeneralInfo.totalTrades")}</span>
+            </div>
+        </>
+    }
+
+    return (
+        <div className={`${classes.container} width-90 card-border row jc-between ai-center card-bg px-5 py-1`}>
+            {content()}
+        </div>
+    );
+};
+
+export default GeneralInfo;

src/main/Mobile/Pages/Landing/Sections/LandingContent/components/GeneralInfo/GeneralInfo.module.css

@@ -0,0 +1,5 @@
+.container {
+    height: 17%;
+   /* width: 90%*/
+    margin: 4vh auto 6vh auto;
+}

src/main/Mobile/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.js

@@ -1,15 +1,43 @@
-import React from 'react';
+import React, {useState} from 'react';
 import classes from './MarketInfo.module.css'
 import Title from "../../../../../../../../components/Title/Title";
 import {Link} from "react-router-dom";
 import Icon from "../../../../../../../../components/Icon/Icon";
 import * as Routes from "../../../../../../Routes/routes";
 import MarketInfoTable from "./components/MarketInfoTable/MarketInfoTable";
+import {useGetQuoteCurrencies, useOverview} from "../../../../../../../../queries";
+import Loading from "../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../components/Error/Error";
+import MarketInfoCard from "./components/MarketInfoCard/MarketInfoCard";
+import {useTranslation} from "react-i18next";
 
 
 
 const MarketInfo = () => {
 
+    const {t} = useTranslation();
+
+    const [card, setCard] = useState(false)
+    const [activeCurrency, setActiveCurrency] = useState("")
+
+    const interval = "24h"
+    const quote = activeCurrency === "" ? null : activeCurrency
+
+    const {data: overview, isLoading, error} = useOverview(null, interval, quote)
+    const {data: currencies} = useGetQuoteCurrencies()
+
+    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={overview.slice(0, 5)} activeCurrency={activeCurrency}/>
+                :
+                <MarketInfoTable data={overview.slice(0, 5)} activeCurrency={activeCurrency}/>
+            }
+        </>
+    }
+
     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"},
@@ -25,24 +53,36 @@ const MarketInfo = () => {
 
     return (
         <div className={`column py-2`} style={{backgroundColor: "var(--mainContent)"}}>
-            <span className={`width-90 m-auto`}>
-                <Title title={"بازار"}/>
+            <span className={`width-90 m-auto row jc-between ai-center pb-2`}>
+                <div className={`row jc-center ai-center`}>
+                     <Title title={`${t("market.title")}`}/>
+                    {/*<span className={`fs-0-8 mr-025`}>( {t("marketInterval." + interval)} )</span>*/}
+                </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 fs-01 flex" className={`mr-05`}/>
+                    </div>
+
             </span>
 
             <div className={`${classes.container} card-bg card-border width-90 m-auto my-2`}>
-                <div className={`${classes.header} card-header-bg row jc-between ai-center px-2 py-2`}>
-                    <div className={`row jc-center ai-center mr-1`}>
-                        <span className={`px-3 py-1 rounded-5 cursor-pointer hover-text text-blue ${classes.title}`}>تومان</span>
-                        <span className={`px-3 py-1 rounded-5 cursor-pointer hover-text`}>تتر</span>
+                <div className={`${classes.header} card-header-bg row jc-between ai-center px-3 py-2`}>
+
+                    <div className={`row jc-center ai-baseline mr-05 ml-1 cursor-pointer hover-text`} onClick={()=>setActiveCurrency("")}>
+                        <h2 className={`ml-025`}>{t("market.title")}</h2>
+                        <span className={`fs-0-8 mr-025`}>( {t("marketInterval." + interval)} )</span>
                     </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 fs-01 flex" className={`mr-05`}/>
+                    <div className={`row jc-center ai-center mr-1 fs-0-8`}>
+                        {currencies?.map((currency) =>
+                            <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeCurrency === currency && classes.active}`} onClick={() => setActiveCurrency(currency)} key={currency}>{t("currency." + currency)}</span>
+                        )}
                     </div>
+
                 </div>
                 <div className={`${classes.content}`}>
-                    <MarketInfoTable data={marketData.sort((a , b) => b.marketCap - a.marketCap).slice(0 , 5)}/>
+                    {content()}
                 </div>
             </div>
 

src/main/Mobile/Pages/Landing/Sections/LandingContent/components/MarketInfo/MarketInfo.module.css

@@ -3,13 +3,19 @@
 }
 
 .header {
-    height: 11vh;
+    height: 9vh;
 }
 
 .content {
     /* height: 85%;*/
 }
 
-.title {
+/*.title {
     background-color: var(--cardHeaderAlpha);
-}
+}*/
+
+
+.active {
+    background-color: var(--activeTitle);
+    color: var(--activeTab);
+}

src/main/Mobile/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoCard/MarketInfoCard.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const MarketInfoCard = () => {
+    return (
+        <div>
+
+        </div>
+    );
+};
+
+export default MarketInfoCard;

src/main/Mobile/Pages/Landing/Sections/LandingContent/components/MarketInfo/components/MarketInfoTable/MarketInfoTable.js

@@ -2,45 +2,58 @@ import React from 'react';
 import classes from './MarketInfoTable.module.css'
 import {useTranslation} from "react-i18next";
 import {images} from "../../../../../../../../../../assets/images";
+import {Order, Panel} from "../../../../../../../../Routes/routes";
+import {useDispatch, useSelector} from "react-redux";
+import {useNavigate} from "react-router-dom";
+import {setActivePairInitiate} from "../../../../../../../../../../store/actions";
+import {BN} from "../../../../../../../../../../utils/utils";
+
+const MarketInfoTable = ({data, activeCurrency}) => {
 
-const MarketInfoTable = (props) => {
     const {t} = useTranslation();
+    const navigate = useNavigate();
+    const dispatch = useDispatch();
+    const allExchangeSymbols = useSelector((state) => state.exchange.symbols)
 
-    const {data, baseAsset, price, marketCap, lowPrice, highPrice, volume, pcp24h} = props
+    const navigateToPanel = (symbol) => {
+        const selectedPair = allExchangeSymbols.find( s => s.symbol === symbol)
+        dispatch(setActivePairInitiate(selectedPair, 0))
+        navigate(Order)
+    }
 
 
     let head = (
-        <div className="row text-color-gray px-2 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
-            <span className="width-40 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-30 flex jc-end ai-center">{t("MarketInfo.chart")}</span>
+        <div className="row text-color-gray px-4 py-2" style={{backgroundColor:"var(--tableHeader)"}}>
+            <span className="width-50 flex jc-start ai-center">{t("MarketInfo.name")}</span>
+            <span className="width-50 flex jc-end ai-center">{t("MarketInfo.lastPrice")}</span>
+            {/*<span className="width-30 flex jc-end ai-center">{t("MarketInfo.chart")}</span>*/}
         </div>
     );
 
     let body = (
         <>
             {data.map((tr, index) => {
                 return (
-                    <div className={`${classes.row} row fs-01 rounded-5 border-bottom cursor-pointer px-2 py-1`}>
-                        <span className="width-40 row jc-start ai-center">
-                            <img src={images[tr.baseAsset]} alt={tr.baseAsset}
-                             title={tr.baseAsset} className={`img-md ml-1`}/>
-                            <span className={`mr-1`}>{t("currency." + tr.baseAsset)}</span>
+                    <div className={`${classes.row} row fs-01 rounded-5 border-bottom cursor-pointer px-4 py-1`} onClick={() => navigateToPanel(tr.symbol)}>
+                        <span className="width-50 row jc-start ai-center">
+                            <img src={images[tr?.base]} alt={tr?.base}
+                             title={tr?.baseAsset} className={`img-md ml-1`}/>
+                            <span className={`mr-1`}>{activeCurrency ? t("currency." + tr?.base) : tr?.base + " / " + tr?.quote}</span>
                         </span>
 
-                        <span className={`width-30 column jc-start ai-start`}>
-                            <span className={` ${tr.pcp24h > 0 ? "text-green" : "text-red"}`}>{tr.price}</span>
-                            <span className={`fs-0-6 ${tr.pcp24h > 0 ? "text-green" : "text-red"}`}>{tr.pcp24h} %</span>
+                        <span className={`width-50 column jc-start ai-end`}>
+                            <span className={` ${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={`fs-0-6 ${tr.priceChange > 0 ? "text-green" : "text-red"}`}>{tr.priceChange} %</span>
                         </span>
 
-                        <span className="width-30 flex jc-end ai-center">
+                        {/*<span className="width-30 flex jc-end ai-center">
                             <img
                                 className="img-lg"
                                 src={images.chart}
                                 alt={""}
                                 title={""}
                             />
-                        </span>
+                        </span>*/}
                     </div>
                 )
             })}