5/user-panel-market-components

package.json

@@ -41,6 +41,9 @@
     "redux-saga": "^1.1.3",
     "web-vitals": "^0.2.4"
   },
+  "resolutions": {
+    "react-error-overlay": "6.0.9"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

public/assets/locales/en/translation.json

@@ -75,6 +75,11 @@
     "7d": "7 days",
     "1M": "30 days"
   },
+  "marketIntervalMini": {
+    "24h": "24 h",
+    "7d": "7 d",
+    "1M": "30 d"
+  },
   "routes": {
     "/panel/settings/profile": "User Profile",
     "/panel/settings/security": "Security",

public/assets/locales/fa/translation.json

@@ -75,6 +75,11 @@
     "7d": "7 روز",
     "1M": "30 روز"
   },
+  "marketIntervalMini": {
+    "24h": "24 س",
+    "7d": "7 ر",
+    "1M": "30 ر"
+  },
   "routes": {
     "/panel/settings/profile": "مشخصات کاربری",
     "/panel/settings/security": "امنیت",

src/components/Date/Date.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import moment from "moment-jalaali";
+
+const Date = ({date}) => {
+
+    const calendar = () => {
+        const type = window.env.REACT_APP_CALENDAR_TYPE
+        switch (type) {
+            case "Jalali":
+                return moment(date).format("jYY/jMM/jDD");
+            case "Hijri":
+                return moment(date).format("YY/MM/DD");
+            case "Georgian":
+                return moment(date).format("iYY/iMM/iDD");
+            default:
+                return moment(date).format("YY/MM/DD");
+        }
+    };
+
+    return calendar();
+};
+
+export default Date;

src/main/Mobile/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoTable/AllMarketInfoTable.js

@@ -15,6 +15,7 @@ import {LeadingActions, SwipeableList, SwipeableListItem, SwipeAction, TrailingA
 const AllMarketInfoTable = ({data, activeCurrency}) => {
 
     const {t} = useTranslation();
+
     const navigate = useNavigate();
     const dispatch = useDispatch();
     const allExchangeSymbols = useSelector((state) => state.exchange.symbols)
@@ -32,9 +33,13 @@ const AllMarketInfoTable = ({data, activeCurrency}) => {
         <LeadingActions>
             <SwipeAction
                 onClick={() => {
-
-                    if (swipLeft === index) return setSwipLeft(null)
-                    return setSwipRight(prevState => prevState === index ? null : index)
+                    if (i18n.language === "fa") {
+                        if (swipLeft === index) return setSwipLeft(null)
+                        return setSwipRight(prevState => prevState === index ? null : index)
+                    } else {
+                        if (swipRight === index) return setSwipRight(null)
+                        return setSwipLeft(prevState => prevState === index ? null : index)
+                    }
                 }}
             />
         </LeadingActions>
@@ -45,8 +50,13 @@ const AllMarketInfoTable = ({data, activeCurrency}) => {
             <SwipeAction
                 destructive={false}
                 onClick={() => {
-                    if (swipRight === index) return setSwipRight(null)
-                    return setSwipLeft(prevState => prevState === index ? null : index)
+                    if (i18n.language === "fa") {
+                        if (swipRight === index) return setSwipRight(null)
+                        return setSwipLeft(prevState => prevState === index ? null : index)
+                    } else {
+                        if (swipLeft === index) return setSwipLeft(null)
+                        return setSwipRight(prevState => prevState === index ? null : index)
+                    }
                 }}
             />
         </TrailingActions>

src/main/Mobile/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/components/AllMarketInfoTable/AllMarketInfoTable.module.css

@@ -11,10 +11,18 @@
     transform: translateX(25vw);
     transition: transform 0.5s ease-out;
 }
+:global(.ltr) .activeSwipRight {
+    transform: translateX(-25vw);
+    transition: transform 0.5s ease-out;
+}
 .activeSwipLeft {
     transform: translateX(-32vw);
     transition: transform 0.5s ease-out;
 }
+:global(.ltr) .activeSwipLeft {
+    transform: translateX(32vw);
+    transition: transform 0.5s ease-out;
+}
 
 .hideSwip {
     transform: translateX(0vw);

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

@@ -26,7 +26,7 @@ const MarketStats = () => {
     const mostVolume = stats?.mostVolume
     const mostTrades = stats?.mostTrades
 
-    if(!isLoading && mostVolume !== null && mostTrades !== null) {
+    if(!isLoading && !error && mostIncreasedPrice) {
         mostIncreasedPrice.pairInfo = allSymbols.find(s => s.symbol === (mostIncreasedPrice?.symbol))
         mostDecreasedPrice.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol))
         mostVolume.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol))

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

@@ -35,7 +35,7 @@ const MostDecreasedPrice = ({mostDecreasedPrice}) => {
                     <span className={`${i18n.language !== "fa" ? 'mL-025' : 'mr-025'} fs-01`}>{new BN(mostDecreasedPrice?.lastPrice).toFormat()}</span>
                 </div>
                 <div className={`row jc-end ai-center width-100 text-green mt-05`}>
-                    <span>% {new BN(mostDecreasedPrice?.mostDecreasedPrice).toFormat(2)}+</span>
+                    <span>% {new BN(mostDecreasedPrice?.priceChangePercent).toFormat(2)}+</span>
                 </div>
             </div>
 

src/main/Mobile/Pages/AllMarket/Sections/AllMarketContent/components/MarketStats/components/StatsCard/StatsCard.module.css

@@ -5,6 +5,10 @@
 .container:last-child{
     margin-left: initial;
 }
+:global(.ltr) .container:last-child{
+    margin-left: 5vw;
+    margin-right: initial;
+}
 
 .header {
     height: 33%;

src/main/Mobile/Pages/AllMarket/Sections/AllMarketHeader/AllMarketHeader.js

@@ -18,11 +18,11 @@ const AllMarketHeader = () => {
                 <h2 className={`ml-2`}>{t("market.title")}</h2>
                 {/*<span className={`fs-0-8 mr-025`}>( {t("marketInterval." + interval)} )</span>*/}
 
-                <div className={`mr-2 fs-0-7`}>
+                <div className={`mr-2 fs-0-8`}>
 
-                    <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${interval === "24h" && classes.active}`} onClick={()=>dispatch(setMarketInterval("24h"))}>{t("marketInterval.24h")}</span>
-                    <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${interval === "7d" && classes.active}`} onClick={()=>dispatch(setMarketInterval("7d"))}>{t("marketInterval.7d")}</span>
-                    <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${interval === "1M" && classes.active}`} onClick={()=>dispatch(setMarketInterval("1M"))}>{t("marketInterval.1M")}</span>
+                    <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${interval === "24h" && classes.active}`} onClick={()=>dispatch(setMarketInterval("24h"))}>{t("marketIntervalMini.24h")}</span>
+                    <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${interval === "7d" && classes.active}`} onClick={()=>dispatch(setMarketInterval("7d"))}>{t("marketIntervalMini.7d")}</span>
+                    <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${interval === "1M" && classes.active}`} onClick={()=>dispatch(setMarketInterval("1M"))}>{t("marketIntervalMini.1M")}</span>
 
 
                 </div>

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

@@ -9,6 +9,7 @@ import {setActivePairInitiate} from "../../../../../../../../../../store/actions
 import {BN} from "../../../../../../../../../../utils/utils";
 import {LeadingActions, SwipeableList, SwipeableListItem, SwipeAction, TrailingActions} from "react-swipeable-list";
 import Button from "../../../../../../../../../../components/Button/Button";
+import i18n from "i18next";
 
 const MarketInfoTable = ({data, activeCurrency}) => {
 
@@ -31,9 +32,13 @@ const MarketInfoTable = ({data, activeCurrency}) => {
         <LeadingActions>
             <SwipeAction
                 onClick={() => {
-
-                    if (swipLeft === index) return setSwipLeft(null)
-                    return setSwipRight(prevState => prevState === index ? null : index)
+                    if (i18n.language === "fa") {
+                        if (swipLeft === index) return setSwipLeft(null)
+                        return setSwipRight(prevState => prevState === index ? null : index)
+                    } else {
+                        if (swipRight === index) return setSwipRight(null)
+                        return setSwipLeft(prevState => prevState === index ? null : index)
+                    }
                 }}
             />
         </LeadingActions>
@@ -44,8 +49,13 @@ const MarketInfoTable = ({data, activeCurrency}) => {
             <SwipeAction
                 destructive={false}
                 onClick={() => {
-                    if (swipRight === index) return setSwipRight(null)
-                    return setSwipLeft(prevState => prevState === index ? null : index)
+                    if (i18n.language === "fa") {
+                        if (swipRight === index) return setSwipRight(null)
+                        return setSwipLeft(prevState => prevState === index ? null : index)
+                    } else {
+                        if (swipLeft === index) return setSwipLeft(null)
+                        return setSwipRight(prevState => prevState === index ? null : index)
+                    }
                 }}
             />
         </TrailingActions>

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

@@ -18,7 +18,7 @@ const MarketView = () => {
     const mostVolume = stats?.mostVolume
     const mostTrades = stats?.mostTrades
 
-    if (!isLoading && mostVolume !== null && mostTrades !== null) {
+    if (!isLoading && !error && mostIncreasedPrice) {
         mostIncreasedPrice.pairInfo = allSymbols.find(s => s.symbol === (mostIncreasedPrice?.symbol))
         mostDecreasedPrice.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol))
         mostVolume.pairInfo = allSymbols.find(s => s.symbol === (mostDecreasedPrice?.symbol))

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/Sections/LastTradesSection/LastTradesSection.js

@@ -1,13 +1,11 @@
 import React from 'react';
+import LastTrades from "../../components/LastTrades/LastTrades";
 
 const LastTradesSection = () => {
     return (
         <>
-            <div className={`width-100 col-49`}>
-
-            </div>
-            <div className={`width-100 col-49`}>
-
+            <div className={`width-100 col-100`}>
+                <LastTrades/>
             </div>
         </>
     );

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/Sections/MyOrderSection/MyOrderSection.js

@@ -1,13 +1,11 @@
 import React from 'react';
+import MyOrder from "../../components/MyOrder/MyOrder";
 
 const MyOrderSection = () => {
     return (
         <>
-            <div className={`width-100 col-49`}>
-
-            </div>
-            <div className={`width-100 col-49`}>
-
+            <div className={`width-100 col-100`}>
+                <MyOrder/>
             </div>
         </>
     );

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/LastTrades/LastTrades.js

@@ -1,13 +1,47 @@
 import React from "react";
 import classes from "./LastTrades.module.css";
+import {useTranslation} from "react-i18next";
+import {useDispatch, useSelector} from "react-redux";
+import {setLastTradePrice} from "../../../../../../../../../../store/actions";
+import {useLastTrades} from "../../../../../../../../../../queries";
+import Error from "../../../../../../../../../../components/Error/Error";
+import Loading from "../../../../../../../../../../components/Loading/Loading";
+import LastTradesTable from "./components/LastTradesTable/LastTradesTable";
 
 
 const LastTrades = () => {
 
-    return (
-        <div className={`width-100`}>
+    const {t} = useTranslation();
+    const dispatch = useDispatch();
+
+    const activePair = useSelector((state) => state.exchange.activePair)
+    const onSuccess = (data) => {
+        if (data.length) dispatch(setLastTradePrice(data[0].price))
+    }
+    const {data: lastTrades, isLoading, error} = useLastTrades(activePair.symbol, onSuccess)
+
+
+    const content = () => {
+        if (error) return <span className={`width-100`}><Error/></span>
+        if (isLoading) return <Loading/>
+        if (lastTrades.length > 0) return <LastTradesTable data={lastTrades}/>
+        return <div className="width-100 column ai-center jc-center" style={{height: "100%"}}>
+            <p>{t('noData')}</p>
+        </div>
+    }
 
 
+    return (
+        <div
+            className={`width-100 card-bg card-border column ${classes.container}`}>
+            <div className={`column border-bottom jc-center card-header-bg ${classes.header}`}>
+                <div className="row jc-center ">
+                    <h3>{t("LastTrades.title")}</h3>
+                </div>
+            </div>
+            <div className={`row width-100 ${classes.content}`}>
+                {content()}
+            </div>
         </div>
     );
 };

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/LastTrades/LastTrades.module.css

@@ -0,0 +1,14 @@
+.container {
+    height: 100%;
+}
+.header {
+    height: 10%;
+    padding: 1vh 1vw;
+}
+.header span {
+    width: 50%;
+    text-align: center;
+}
+.content {
+    height: 90%;
+}

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/LastTrades/components/LastTradesTable/LastTradesTable.js

@@ -0,0 +1,60 @@
+import React from "react";
+import classes from "./LastTradesTable.module.css";
+import {useTranslation} from "react-i18next";
+import moment from "moment-jalaali";
+import {connect} from "react-redux";
+import ScrollBar from "../../../../../../../../../../../../components/ScrollBar";
+import {BN} from "../../../../../../../../../../../../utils/utils";
+import Date from "../../../../../../../../../../../../components/Date/Date";
+
+const LastTradesTable = (props) => {
+    const {t} = useTranslation();
+    const {activePair, data} = props
+
+    return (
+        <div className={`column width-100 ${classes.container}`}>
+            <ScrollBar>
+                <table className="text-center" cellSpacing="0" cellPadding="0">
+                    <thead>
+                    <tr>
+                        <th>{t("date")}</th>
+                        <th>{t("time")}</th>
+                        <th>
+                            {t("volume")}({activePair.baseAsset})
+                        </th>
+                        <th>
+                            {t("price")}({activePair.quoteAsset})
+                        </th>
+                        <th>{t("totalPrice")}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {data.map((tr, index) => {
+                        const pricePerUnit = new BN(tr.price)
+                        const amount = new BN(tr.qty)
+                        const totalPrice = pricePerUnit.multipliedBy(amount)
+
+                        return (
+                            <tr key={index} style={{color: tr.isBuyerMaker === true ? "var(--green)" : "var(--red)",}}>
+                                <td><Date date={tr.time}/></td>
+                                <td>{moment(tr.time).format("HH:mm:ss")}</td>
+                                <td>{amount.decimalPlaces(activePair.baseAssetPrecision).toFormat()}</td>
+                                <td>{pricePerUnit.decimalPlaces(activePair.quoteAssetPrecision).toFormat()}</td>
+                                <td>{totalPrice.decimalPlaces(activePair.quoteAssetPrecision).toFormat()}</td>
+                            </tr>
+                        );
+                    })}
+                    </tbody>
+                </table>
+            </ScrollBar>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        activePair: state.exchange.activePair,
+    };
+};
+
+export default connect(mapStateToProps, null)(LastTradesTable);

src/main/Mobile/Pages/UserPanel/Secttions/Content/components/Market/components/LastTrades/components/LastTradesTable/LastTradesTable.module.css

@@ -0,0 +1,4 @@
+.container tr:nth-child(even) td {
+  background-color: var(--tableRow);
+  transition: background-color 0.4s;
+}