Refactor transactions history

public/assets/locales/en/translation.json

@@ -227,13 +227,13 @@
     "tradedAmount": "Traded",
     "avgTradedAmount": "Avg Traded Amount",
     "tradedPrice": "Traded Price",
-    "aliveOrder": "Live",
+    "liveOrders": "Live Orders",
+    "orderHistory": "Order History",
+    "tradeHistory": "Trade History",
     "stoppedOrder": "Stopped",
-    "orderHistory": "History",
     "stopOrderTime": "Stop Order Time",
     "startOrderTime": "Start Order Time",
     "cancelOrder": "Cancel Order",
-    "orders": "Orders",
     "cancelSuccess": "Order successfully canceled!",
     "cancelError": "Order not canceled"
   },
@@ -245,6 +245,21 @@
     "showZeroBalance": "Do not show zero balance.",
     "estimateAlert": "The equivalent amount is calculated based on the highest buy offer"
   },
+  "history": {
+    "title": "History",
+    "transactions": "Transactions",
+    "transactionsHistory": "Transactions History",
+    "deposit": "Deposit",
+    "withdraw": "Withdraw",
+    "balance": "Balance",
+    "balanceChange": "Balance Change",
+    "currency" : "Currency",
+    "category" : "Category",
+    "size" : "Size",
+    "period" : "Period",
+    "ascendingByTime" : "Ascending By Time",
+    "page": "Page {{page}}"
+  },
   "TransactionHistory": {
     "buyAndSell" : "Buy And Sell",
     "buyAndSellTx" : "Buy And Sell History",
@@ -270,10 +285,12 @@
     "ascendingByTime" : "Ascending By Time"
   },
   "TransactionCategory": {
-    "DEPOSIT": "Deposit",
-    "FEE": "Fee",
-    "TRADE": "Trade",
-    "WITHDRAW": "Withdraw",
+    "TRADE" : "Trade",
+    "FEE" : "Fee",
+    "DEPOSIT" : "Deposit",
+    "WITHDRAW" : "Withdraw",
+    "SYSTEM" : "System",
+
     "WITHDRAW_REQUEST" : "Withdraw Request",
     "WITHDRAW_ACCEPT" : "Withdraw Accept",
     "WITHDRAW_REJECT" : "Withdraw Reject",

public/assets/locales/fa/translation.json

@@ -227,13 +227,13 @@
     "tradedAmount": "مقدار معامله شده",
     "avgTradedAmount": "میانگین قیمت معامله",
     "tradedPrice": "مبلغ معامله شده",
-    "aliveOrder": "سفارش‌های جاری",
-    "stoppedOrder": "متوقف",
+    "liveOrders": "سفارش‌های جاری",
     "orderHistory": "تاریخچه سفارش‌ها",
+    "tradeHistory": " تاریخچه معامله‌ها",
+    "stoppedOrder": "متوقف",
     "stopOrderTime": "زمان آخرین معامله",
     "startOrderTime": "زمان ثبت سفارش",
     "cancelOrder": "لغو سفارش",
-    "orders": "معامله‌ها",
     "cancelSuccess": "سفارش با موفقیت لغو شد!",
     "cancelError": "خطا در لغو سفارش"
   },
@@ -245,6 +245,21 @@
     "showZeroBalance": "عدم نمایش موجودی صفر",
     "estimateAlert": "مبلغ دارایی معادل براساس بالاترین پیشنهاد خرید محاسبه شده"
   },
+  "history": {
+    "title": "تاریخچه",
+    "transactions": "تراکنش ها",
+    "transactionsHistory": "تاریخچه تراکنش ها",
+    "deposit": "واریز",
+    "withdraw": "برداشت",
+    "balance": "موجودی",
+    "balanceChange": "تغییر موجودی",
+    "currency" : "ارز",
+    "category" : "نوع تراکنش",
+    "size" : "تعداد",
+    "period" : "بازه زمانی",
+    "ascendingByTime" : "نمایش براساس جدیدترین",
+    "page": "صفحه {{page}}"
+  },
   "TransactionHistory": {
     "buyAndSell" : "خرید و فروش",
     "buyAndSellTx" : "تاریخچه خرید و فروش",
@@ -270,10 +285,12 @@
     "ascendingByTime" : "نمایش براساس جدیدترین"
   },
   "TransactionCategory": {
-    "DEPOSIT" : "واریز",
-    "FEE" : "کارمزد",
     "TRADE" : "معامله",
+    "FEE" : "کارمزد",
+    "DEPOSIT" : "واریز",
     "WITHDRAW" : "برداشت",
+    "SYSTEM" : "سیستم",
+
     "WITHDRAW_REQUEST" : "درخواست برداشت",
     "WITHDRAW_ACCEPT" : "برداشت موفق",
     "WITHDRAW_REJECT" : "رد درخواست برداشت",

src/components/Layout/LayoutHeader/LayoutHeader.js

@@ -53,7 +53,6 @@ const LayoutHeader = () => {
         });*/
     }
 
-
     const logOutHandler = async () => {
         logout().then(() => {
             toast.success(t("header.logOutSuccess"))
@@ -63,7 +62,6 @@ const LayoutHeader = () => {
         })
     }
 
-
     const menu = (
         <Menu
             style={{
@@ -75,7 +73,7 @@ const LayoutHeader = () => {
             onDeselect={()=>saveSelected()}
         >
 
-            <div className={`${classes.dropBox} column jc-center ai-center py-3  width-92 m-auto`}>
+            <div className={`${classes.dropBox} width-92 column jc-center ai-center py-3 m-auto`}>
                 <Icon
                     iconName={`text-white flex`}
                     customClass={`${classes.icon}  icon-user-circle-o flex mb-1`}
@@ -85,7 +83,8 @@ const LayoutHeader = () => {
                 </p>
             </div>
 
-            <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8`} onClick={()=>navigate(RoutesName.Transactions)}>{t("txHistory.title")}</div>
+            <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8`} onClick={()=>navigate(RoutesName.Wallet)}>{t("wallet.title")}</div>
+            <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8`} onClick={()=>navigate(RoutesName.History)}>{t("history.title")}</div>
             <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8`} onClick={()=>navigate(RoutesName.Settings)}>{t("settings.title")}</div>
             <div className={`my-3 px-1 menuItem cursor-pointer hover-text fs-0-8 text-red`} onClick={logOutHandler}>{t("signOut")}</div>
         </Menu>

src/components/TextInput/TextInput.js

@@ -71,7 +71,7 @@ const TextInput = (props) => {
         readOnly={readOnly}
         onChange={onchange}
         max={max}
-        className={`${classes.input}`}
+        className={`${classes.input} input`}
         style={{direction: ltr && 'ltr'}}
         {...other}
     />

src/main/Browser/Pages/Landing/components/MarketTitle/MarketTitle.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classes from './MarketTitle.module.css'
 import {useTranslation} from "react-i18next";
-import {Panel} from "../../../../Routes/routes";
+import {EasyTrading, Panel} from "../../../../Routes/routes";
 import {Link} from "react-router-dom";
 import Icon from "../../../../../../components/Icon/Icon";
 import Button from "../../../../../../components/Button/Button";
@@ -10,6 +10,8 @@ const MarketTitle = () => {
 
     const {t} = useTranslation();
 
+    const isDevelopment = window.env.REACT_APP_ENV === "development";
+
     const buttonTitle = <Icon iconName="icon-op-02 flex fs-04" customClass={`flex jc-center ai-center py-1`}/>
 
     return (
@@ -18,37 +20,25 @@ const MarketTitle = () => {
                 <span className={`text-orange fs-02`}>{t("title")}</span> {t("MarketTitle.content")}
             </p>
             <div className={`column`}>
-                {/*<div className={`row jc-start ai-center mb-1`}>
-                    <span className={`${classes.arrow} ml-05`}></span>
-                    <Link to={"#"} className={`mr-05 cursor-pointer hover-text hover-scale-01`}>{t("MarketTitle.easyTrading")}</Link>
-                </div>*/}
-                <div className={`row jc-start ai-center mt-1 ${classes.flashit}`}>
+                <div className={`row jc-start ai-center my-1 ${classes.flashit}`}>
                     <span className={`${classes.arrow} ml-05`}></span>
                     <Link to={Panel} className={`mr-05 cursor-pointer hover-text hover-scale-01`}>{t("MarketTitle.advancedTrading")}</Link>
                 </div>
-                {/*<Button
-                    buttonClass={`${classes.marketButton} ${classes.easyTradingButton} my-1`}
-                    type="button"
-                    onClick={() => navigate("", { replace: true })}
-                    buttonTitle={t("MarketTitle.easyTrading")}
-                />
-                <Button
-                    buttonClass={`${classes.marketButton} ${classes.advancedTradingButton} my-1`}
-                    type="button"
-                    onClick={() => navigate(Panel, { replace: true })}
-                    buttonTitle={t("MarketTitle.advancedTrading")}
-                />*/}
+                <div className={`row jc-start ai-center my-1`}>
+                    <span className={`${classes.arrow} ml-05`}></span>
+                    <Link to={EasyTrading} className={`mr-05 cursor-pointer hover-text hover-scale-01`}>{t("MarketTitle.easyTrading")}</Link>
+                </div>
             </div>
-            <div className={`row jc-start ai-center`}>
+            { isDevelopment && <div className={`row jc-start ai-center`}>
                 <Button
                     buttonClass={`${classes.thisButton} hover-text`}
                     type="button"
                     onClick={() => window.open(`https://github.com/opexdev`)}
                     buttonTitle={buttonTitle}
                 />
-            </div>
+            </div>}
         </div>
     );
 };
 
-export default MarketTitle;
+export default MarketTitle;

src/main/Browser/Pages/UserPanel/Sections/Content/Content.js

@@ -10,6 +10,8 @@ import Settings from "./components/Settings/Settings";
 import {useSelector} from "react-redux";
 import TechnicalChart from "./components/TechnicalChart/TechnicalChart";
 import Transactions from "./components/Transactions/Transactions";
+import {HistoryRelative} from "../../../../Routes/routes";
+import History from "./components/History/History";
 
 const Content = () => {
 
@@ -25,6 +27,7 @@ const Content = () => {
                     <Route path={RoutesName.SettingsRelative+"/*"} element={<Settings/>}/>
                     <Route path={RoutesName.TechnicalRelative} element={<TechnicalChart/>}/>
                     <Route path={RoutesName.TransactionsRelative} element={<Transactions/>}/>
+                    <Route path={RoutesName.HistoryRelative} element={<History/>}/>
                 </Route>
                 <Route
                     path={RoutesName.WalletRelative}

src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js

@@ -0,0 +1,39 @@
+import React, {useState} from 'react';
+import classes from './History.module.css';
+import {useTranslation} from "react-i18next";
+import Transactions from "./components/Transactions/Transactions";
+import DepositHistory from "../Transactions/components/DepositHistory/DepositHistory";
+import WithdrawHistory from "../Transactions/components/WithdrawHistory/WithdrawHistory";
+
+
+const History = () => {
+
+    const {t} = useTranslation();
+
+    const [activeTx, setActiveTx] = useState("transactions")
+
+    const content = () => {
+        if (activeTx === "transactions") return <Transactions/>
+        if (activeTx === "deposit") return <DepositHistory/>
+        if (activeTx === "withdraw") return <WithdrawHistory/>
+    }
+
+    return (
+        <>
+            <div className={`column px-1 pt-1`}>
+                <div className={`width-100 border card-bg px-2 py-2 rounded-8 column jc-start ai-center`}>
+                    <div className={`row jc-start ai-center width-100 ${classes.header}`}>
+                        <span className={`ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeTx === "transactions" && classes.active}`} onClick={()=>setActiveTx("transactions")}>{t("history.transactions")}</span>
+                        <span className={`ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeTx === "deposit" && classes.active}`} onClick={()=>setActiveTx("deposit")}>{t("history.deposit")}</span>
+                        <span className={`ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeTx === "withdraw" && classes.active}`} onClick={()=>setActiveTx("withdraw")}>{t("history.withdraw")}</span>
+                    </div>
+                    <div className={`${classes.content} width-100`}>
+                        {content()}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default History;

src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.module.css

@@ -0,0 +1,46 @@
+.thisInput :global(.lead) {
+    width: 30%;
+}
+.thisInput :global(.selectExternalClass) {
+    width: 70% !important;
+}
+
+.thisInput :global(.rmdp-container ) {
+    width: 70%;
+    height: 100%;
+}
+
+
+
+.thisButton {
+    background-color: var(--orange);
+    color: #000;
+}
+.disable:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardHeader);
+    background: var(--cardHeader);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
+
+.thisButton:disabled,.button[disabled] {
+    border: 0.3vh solid var(--cardHeader);
+    background: var(--cardHeader);
+    color: var(--textColor);
+    cursor: not-allowed;
+}
+
+
+
+.header {
+    height: 10vh;
+}
+
+/*.title {
+    background-color: var(--cardBodyAlpha);
+}*/
+
+.active {
+    background-color: var(--activeTitle);
+    color: var(--activeTab);
+}