opexdev · Hossein-ab99 · Aug 15, 2022 · Aug 14, 2022 · Aug 15, 2022
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opex",
-  "version": "0.1.1",
+  "version": "v2.0.0-beta.2",
   "homepage": "",
   "private": true,
   "dependencies": {
@@ -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#develop",
+    "js-api-client": "https://github.com/opexdev/js-api-client.git",
     "jwt-decode": "^3.1.2",
     "lightweight-charts": "^3.8.0",
     "moment-jalaali": "^0.9.2",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -69,6 +69,11 @@
     "TBUSD": "TBUSD",
     "BCH": "BCH"
   },
+  "marketInterval": {
+    "24h": "24 H",
+    "7d": "7 D",
+    "1M": "30 D"
+  },
   "routes": {
     "/panel/settings/profile": "User Profile",
     "/panel/settings/security": "Security",
@@ -499,6 +504,40 @@
     "success": "Email verified successfully.",
     "failed": "Verification failed, please try again!"
   },
+  "Landing": {
+    "title": "Cryptocurrency Exchange Platform"
+  },
+  "MarketTitle": {
+    "content": "Designed specifically to meet your needs.",
+    "advancedTrading": "Advanced Trading",
+    "easyTrading": "Easy Trading"
+  },
+  "GeneralInfo": {
+    "activeUsers": "Active Users",
+    "totalOrders": "Total Orders",
+    "totalTrades": "Total Trades"
+  },
+  "MarketInfo": {
+    "showAllMarket": "Show All Market",
+    "name": "Name",
+    "cryptocurrency": "Cryptocurrency",
+    "lastPrice": "Last Price",
+    "lowPrice": "Low Price",
+    "highPrice": "High Price",
+    "priceChange": "Price Change",
+    "chart": "Chart",
+    "volume": "Volume",
+    "details": "Details",
+    "trade": "Trade",
+    "marketCap": "Market Cap"
+  },
+  "MarketView": {
+    "title": "Market Stats ( 24H )",
+    "mostIncreased": "Most Increased",
+    "mostDecreased": "Most Decreased",
+    "mostTrades": "Most Trades",
+    "mostVolume": "Most Volume"
+  },
   "footer": {
     "darkMode": "Dark Mode",
     "aboutUs" : "About Us",

diff --git a/public/locales/fa/translation.json b/public/locales/fa/translation.json
@@ -69,6 +69,11 @@
     "TBUSD": "دلار بایننس(ت)",
     "BCH": "بیتکوین کش"
   },
+  "marketInterval": {
+    "24h": "24 ساعت",
+    "7d": "7 روز",
+    "1M": "30 روز"
+  },
   "routes": {
     "/panel/settings/profile": "مشخصات کاربری",
     "/panel/settings/security": "امنیت",
@@ -499,19 +504,30 @@
     "success": "ایمیل با موفقیت تائید شد.",
     "failed": "ایمیل تائید نشد، دوباره تلاش کنید!"
   },
+  "Landing": {
+    "title": "پلتفرم تبادل ارزهای دیجیتال"
+  },
+  "MarketTitle": {
+    "content": "به طور خاص برای رفع نیازهای شما طراحی شده است.",
+    "advancedTrading": "معامله حرفه‌ای",
+    "easyTrading": "معامله آسان"
+  },
+  "GeneralInfo": {
+    "activeUsers": "کاربر فعال",
+    "totalOrders": "سفارش ثبت شده",
+    "totalTrades": "معامله انجام شده"
+  },
   "MarketInfo": {
-    "title": "نمای بازار",
+    "showAllMarket": "نمایش تمام بازار",
     "name": "نام",
     "cryptocurrency": "رمزارز",
     "lastPrice": "آخرین قیمت",
-    "pcp24h": "24 ساعت %",
-    "pcp7d": "7 روز %",
-    "7chart": "روند 7 روزه",
+    "lowPrice": "کمترین قیمت",
+    "highPrice": "بیشترین قیمت",
+    "priceChange": "تعییر قیمت",
     "chart": "نمودار",
     "volume": "حجم معاملات",
     "details": "جزئیات",
-    "lowPrice": "حداقل",
-    "highPrice": "حداکثر",
     "trade": "معامله",
     "marketCap": "ارزش بازار"
   },
@@ -520,11 +536,7 @@
     "mostIncreased": "بیشترین افزایش",
     "mostDecreased": "بیشترین کاهش",
     "mostTrades": "بیشترین تعداد معامله",
-    "mostVolume": "بیشترین حجم معامله",
-    "MinTransactionVolume": "کمترین حجم معامله"
-  },
-  "MarketTitle": {
-    "content": "به طور خاص برای رفع نیازهای شما طراحی شده است."
+    "mostVolume": "بیشترین حجم معامله"
   },
   "footer": {
     "darkMode": "تم تاریک",

diff --git a/src/index.css b/src/index.css
@@ -422,6 +422,11 @@ body {
   -ms-flex-align: end;
   align-items: flex-end !important;
 }
+.ai-baseline {
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
 
 .img-vsm {
   width: 1vw;
@@ -1153,6 +1158,10 @@ table {
   margin-right: 1vw;
   margin-left: 1vw;
 }
+.mx-2 {
+  margin-right: 2vw;
+  margin-left: 2vw;
+}
 .my-2 {
   margin-top: 2vh;
   margin-bottom: 2vh;

diff --git a/src/main/Browser/Pages/AllMarket/AllMarket.js b/src/main/Browser/Pages/AllMarket/AllMarket.js
@@ -10,9 +10,7 @@ const AllMarket = () => {
         <div className={`container ${classes.container} move-image column text-color`} style={{backgroundImage: `url("${images.spaceStar}")`}}>
             <AllMarketHeader/>
             <AllMarketContent/>
-
         </div>
-
     );
 }
 

diff --git a/src/main/Browser/Pages/AllMarket/AllMarket.module.css b/src/main/Browser/Pages/AllMarket/AllMarket.module.css
@@ -1,4 +1,4 @@
-.container{
+.container {
     height: 100vh;
     background-color: var(--mainContent);
     position: relative;

diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/AllMarketContent.js b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/AllMarketContent.js
@@ -9,33 +9,23 @@ import VolumeInfo from "./components/VolumeInfo/VolumeInfo";
 
 const AllMarketContent = () => {
 
-
     return (
         <div className={`${classes.container} container column`}>
             <ScrollBar>
-                <div className={`row jc-between ai-center width-90 m-auto`} style={{height:"40vh"}}>
+                <div className={`row jc-between ai-center width-90 m-auto`} style={{height: "40vh"}}>
                     <div className={`width-35 flex `}>
                         <PriceInfo/>
                     </div>
-
-                    {/*style={{position: "fixed", right: "37.5%"}}*/}
-
-                    <div className={`width-25 flex jc-center ai-start`} >
+                    <div className={`width-25 flex jc-center ai-start`}>
                         <Swing/>
                     </div>
                     <div className={`width-35 flex`}>
                         <VolumeInfo/>
-
                     </div>
                 </div>
-
-                <div className={`flex jc-center`} style={{height:"" , backgroundColor: "var(--mainContent)"}}>
+                <div className={`flex jc-center`} style={{height: "", backgroundColor: "var(--mainContent)"}}>
                     <AllMarketInfo/>
-
                 </div>
-
-
-
                 <Footer/>
             </ScrollBar>
         </div>

diff --git a/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/AllMarketContent.module.css b/src/main/Browser/Pages/AllMarket/Sections/AllMarketContent/AllMarketContent.module.css
@@ -1,3 +1,3 @@
-.container{
+.container {
     height: 88vh;
 }
diff --git a/...owser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.js b/...owser/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.js
@@ -3,46 +3,65 @@ import classes from './AllMarketInfo.module.css'
 import Icon from "../../../../../../../../components/Icon/Icon";
 import AllMarketInfoCard from "./components/AllMarketInfoCard/AllMarketInfoCard";
 import AllMarketInfoTable from "./components/AllMarketInfoTable/AllMarketInfoTable";
+import {useOverview} from "../../../../../../../../queries";
+import {useDispatch, useSelector} from "react-redux";
+import Loading from "../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../components/Error/Error";
+import {setMarketInterval} from "../../../../../../../../store/actions";
+import {useTranslation} from "react-i18next";
 
 const AllMarketInfo = () => {
 
+    const {t} = useTranslation();
+    const interval = useSelector((state) => state.global.marketInterval)
+    const {data:overview, isLoading, error} = useOverview(null , interval)
     const [card, setCard] = useState(false)
+    const [IRT, setIRT] = useState(true)
+    const allSymbols = useSelector((state) => state.exchange.symbols)
+    const dispatch = useDispatch();
 
+    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)
+        IRTMarket = overviewWithPair.filter(s => s.symbol.includes("IRT")).sort((a , b) => b.lastPrice * b.volume - a.lastPrice * a.volume)
+    }
 
-    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"},
-
-    ]
+    const content = () => {
+        if (isLoading) return <div style={{height: "40vh"}}><Loading/></div>
+        if (error) return <div style={{height: "40vh"}}><Error/></div>
+        else return <>
+            {card ?
+                <AllMarketInfoCard data={ IRT ? IRTMarket : USDTMarket}/>
+                :
+                <AllMarketInfoTable data={ IRT ? IRTMarket : USDTMarket}/>
+            }
+        </>
+    }
 
     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>
-
+                    <h1 className={`mr-1 ml-1`}>{t("market.title")}</h1>
+                    <div className={`row jc-center ai-center font-size-sm-plus mr-1`}>
+                        <span className={`px-1 py-1 rounded cursor-pointer hover-text ${interval === "24h" && classes.active}`} onClick={()=>dispatch(setMarketInterval("24h"))}>{t("marketInterval.24h")}</span>
+                        <span className={`px-1 py-1 rounded cursor-pointer hover-text ${interval === "7d" && classes.active}`} onClick={()=>dispatch(setMarketInterval("7d"))}>{t("marketInterval.7d")}</span>
+                        <span className={`px-1 py-1 rounded cursor-pointer hover-text ${interval === "1M" && classes.active}`} onClick={()=>dispatch(setMarketInterval("1M"))}>{t("marketInterval.1M")}</span>
+                    </div>
                 </div>
-
                 <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={`pr-2 py-1 rounded cursor-pointer hover-text`}>تتر</span>
+                    <span className={`px-2 py-1 rounded cursor-pointer hover-text ${IRT && classes.active}`} onClick={()=>setIRT(true)}>{t("currency.IRT")}</span>
+                    <span className={`px-2 py-1 rounded cursor-pointer hover-text ${!IRT && classes.active}`} onClick={()=>setIRT(false)}>{t("currency.USDT")}</span>
                 </div>
             </div>
             <div className={`${classes.content}`}>
-                {card ?
-                    <AllMarketInfoCard data={marketData.sort((a , b) => b.marketCap - a.marketCap)}/>
-                    :
-                    <AllMarketInfoTable data={marketData.sort((a , b) => b.marketCap - a.marketCap)}/>
-                }
+                {content()}
             </div>
         </div>
     );

diff --git a/...ges/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.module.css b/...ges/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.module.css
@@ -1,15 +1,12 @@
-.container {
-
-}
-
 .header {
     height: 10vh;
 }
 
-.content {
-    /* height: 85%;*/
+.title {
+    background-color: var(--cardHeaderAlpha);
 }
 
-.title {
+.active {
     background-color: var(--cardHeaderAlpha);
+    color: var(--activeTab);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,9 +10,7 @@ const AllMarket = () => { @@
             <div className={`container ${classes.container} move-image column text-color`} style={{backgroundImage: `url("${images.spaceStar}")`}}>
                 <AllMarketHeader/>
                 <AllMarketContent/>
             </div>
         );
     }
@@ Expand Down @@