Change deposit and withdraw txs

public/assets/locales/en/translation.json

@@ -251,14 +251,37 @@
     "transactionsHistory": "Transactions History",
     "deposit": "Deposit",
     "withdraw": "Withdraw",
+    "withdrawHistory" : "Withdraw History",
+    "depositHistory" : "Deposit History",
     "balance": "Balance",
     "balanceChange": "Balance Change",
     "currency" : "Currency",
     "category" : "Category",
     "size" : "Size",
     "period" : "Period",
+    "status" : "Status",
     "ascendingByTime" : "Ascending By Time",
-    "page": "Page {{page}}"
+    "page": "Page {{page}}",
+    "amount": "Amount",
+    "network": "Network",
+    "details": "Details",
+    "fee": "Fee",
+    "destAddress": "Dest Address",
+    "withdrawId": "Withdraw ID",
+    "acceptDate": "Date and time of request review",
+    "transactionRef": "Transaction Ref",
+    "statusReason": "Status Reason",
+    "type": "Type"
+  },
+  "depositStatus": {
+    "DONE": "Done"
+  },
+  "withdrawStatus": {
+    "CREATED": "Created",
+    "PROCESSING": "Processing",
+    "CANCELED": "Canceled",
+    "REJECTED": "Rejected",
+    "DONE": "Done"
   },
   "TransactionHistory": {
     "buyAndSell" : "Buy And Sell",
@@ -368,6 +391,15 @@
     "cancel": "cancel",
     "cancelPayment": "Payment operation canceled!"
   },
+  "DepositTx": {
+    "title": "Last 10 {{currency}} deposit transactions.",
+    "showAll": "Show All"
+  },
+  "WithdrawTx": {
+    "title": "Last 10 {{currency}} withdraw transactions.",
+    "cancelWithdrawReq": "Cancel withdrawal request",
+    "cancelWithdrawReqSuccess": "Withdrawal request has been successfully canceled"
+  },
   "transactionType": {
     "deposit": "Deposit",
     "withdrawal": "Withdrawal",

public/assets/locales/fa/translation.json

@@ -251,14 +251,37 @@
     "transactionsHistory": "تاریخچه تراکنش ها",
     "deposit": "واریز",
     "withdraw": "برداشت",
+    "withdrawHistory" : "تاریخچه برداشت",
+    "depositHistory" : "تاریخچه واریز",
     "balance": "موجودی",
     "balanceChange": "تغییر موجودی",
     "currency" : "ارز",
     "category" : "نوع تراکنش",
     "size" : "تعداد",
     "period" : "بازه زمانی",
+    "status" : "وضعیت",
     "ascendingByTime" : "نمایش براساس جدیدترین",
-    "page": "صفحه {{page}}"
+    "page": "صفحه {{page}}",
+    "amount": "مقدار",
+    "network": "شبکه",
+    "details": "جزئیات",
+    "fee": "کارمزد",
+    "destAddress": "آدرس مقصد",
+    "withdrawId": "شناسه برداشت",
+    "acceptDate": "تاریخ و زمان بررسی درخواست",
+    "transactionRef": "شناسه تراکنش",
+    "statusReason": "توضیح وضعیت",
+    "type": "نوع واریز"
+  },
+  "depositStatus": {
+    "DONE": "انجام شده"
+  },
+  "withdrawStatus": {
+    "CREATED": "جاری شده",
+    "PROCESSING": "در حال انجام",
+    "CANCELED": "لغو شده",
+    "REJECTED": "رد شده",
+    "DONE": "انجام شده"
   },
   "TransactionHistory": {
     "buyAndSell" : "خرید و فروش",
@@ -368,6 +391,15 @@
     "cancel": "لغو",
     "cancelPayment": "عملیات واریز لغو شد!"
   },
+  "DepositTx": {
+    "title": "10 تراکنش آخر واریز {{currency}}",
+    "showAll": "نمایش همه"
+  },
+  "WithdrawTx": {
+    "title": "10 تراکنش آخر برداشت {{currency}}",
+    "cancelWithdrawReq": "لغو درخواست برداشت",
+    "cancelWithdrawReqSuccess": "درخواست برداشت با موفقیت لغو شد"
+  },
   "transactionType": {
     "deposit": "واریز",
     "withdrawal": "برداشت",

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

@@ -26,14 +26,17 @@ const Content = () => {
                     <Route path={RoutesName.WalletRelative+"/:id"} element={<Wallet/>}/>
                     <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 path={RoutesName.HistoryRelative+"/*"} element={<History/>}/>
                 </Route>
                 <Route
                     path={RoutesName.WalletRelative}
                     element={<Navigate to={RoutesName.Wallet + "/" + defaultWallet} replace />}
                 />
 
+                <Route
+                    path={RoutesName.HistoryRelative}
+                    element={<Navigate to={RoutesName.Transactions} replace />}
+                />
                 <Route
                     path={RoutesName.SettingsRelative}
                     element={<Navigate to={RoutesName.Security} replace />}

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

@@ -2,8 +2,12 @@ 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";
+import DepositHistory from "./components/DepositHistory/DepositHistory";
+import WithdrawHistory from "./components/WithdrawHistory/WithdrawHistory";
+import {Navigate, NavLink, Route, Routes} from "react-router-dom";
+import * as RoutesName from "../../../../../../Routes/routes";
+import {DepositRelative} from "../../../../../../Routes/routes";
+
 
 
 const History = () => {
@@ -23,12 +27,35 @@ const History = () => {
             <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>
+                        <NavLink
+                            className={({ isActive }) =>
+                                isActive ? "ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text "+classes.active : "ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text"
+                            }
+                            to={RoutesName.Transactions}>
+                            {t("history.transactions")}
+                        </NavLink>
+                        <NavLink
+                            className={({ isActive }) =>
+                                isActive ? "ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text "+classes.active : "ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text"
+                            }
+                            to={RoutesName.Deposit}>
+                            {t("history.deposit")}
+                        </NavLink>
+                        <NavLink
+                            className={({ isActive }) =>
+                                isActive ? "ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text "+classes.active : "ml-1 px-2 py-1 rounded-5 cursor-pointer hover-text"
+                            }
+                            to={RoutesName.Withdraw}>
+                            {t("history.withdraw")}
+                        </NavLink>
                     </div>
                     <div className={`${classes.content} width-100`}>
-                        {content()}
+                        <Routes>
+                            <Route path={RoutesName.History} element={<Navigate to={{pathname: `${RoutesName.Transactions}`}} replace/>}/>
+                            <Route path={RoutesName.TransactionsRelative} element={<Transactions/>}/>
+                            <Route path={RoutesName.DepositRelative} element={<DepositHistory/>}/>
+                            <Route path={RoutesName.WithdrawRelative} element={<WithdrawHistory/>}/>
+                        </Routes>
                     </div>
                 </div>
             </div>

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

@@ -1,11 +1,10 @@
 import React, {useEffect, useRef, useState} from 'react';
-import {useTranslation} from "react-i18next";
+import {Trans, useTranslation} from "react-i18next";
 import {useSelector} from "react-redux";
 import {useGetDepositHistory} from "../../../../../../../../../../queries";
 import moment from "moment-jalaali";
 import Loading from "../../../../../../../../../../components/Loading/Loading";
 import Error from "../../../../../../../../../../components/Error/Error";
-import WithdrawHistoryTable from "../WithdrawHistoryTable/WithdrawHistoryTable";
 import Date from "../../../../../../../../../../components/Date/Date";
 import TextInput from "../../../../../../../../../../components/TextInput/TextInput";
 import classes from "./DepositHistory.module.css";
@@ -19,20 +18,19 @@ import DepositHistoryTable from "../DepositHistoryTable/DepositHistoryTable";
 const DepositHistory = () => {
 
     const {t} = useTranslation();
-    const user_id = useSelector((state) => state.auth.id)
     const coins = useSelector((state) => state.exchange.assets)
 
     const [query, setQuery] = useState({
-        "coin": null, // optional
+        "currency": null, // optional
         "category": null, // optional [DEPOSIT, FEE, TRADE, WITHDRAW, ORDER_CANCEL, ORDER_CREATE, ORDER_FINALIZED]
         "startTime": null,
         "endTime": null,
         "ascendingByTime": false,
         "limit": 10,
-        "offset": 0
+        "offset": 0,
     });
 
-    const {data, isLoading, error, refetch} = useGetDepositHistory(user_id, query);
+    const {data, isLoading, error, refetch} = useGetDepositHistory(query);
 
     const pagination = {
         page: (query.offset / query.limit) + 1,
@@ -47,16 +45,17 @@ const DepositHistory = () => {
 
     const categories = ['DEPOSIT', 'FEE', 'TRADE', 'WITHDRAW', 'ORDER_CANCEL', 'ORDER_CREATE', 'ORDER_FINALIZED'];
 
-    const coinsOptions = [{value: null, label: t('all')}]
+    const currenciesOptions = [{value: null, label: t('all')}]
     const categoryOptions = [{value: null, label: t('all')}]
+
     const size = [10, 20, 30, 40, 50]
 
     categories.forEach((o) => {
         categoryOptions.push({value: o, label: t('TransactionCategory.' + o)})
     })
 
     coins.forEach((o) => {
-        coinsOptions.push({value: o, label: t('currency.' + o)})
+        currenciesOptions.push({value: o, label: t('currency.' + o)})
     })
 
 
@@ -130,56 +129,42 @@ const DepositHistory = () => {
         <div className={`width-100 column my-3`} ref={scrollRef}>
 
             <div className={`width-100 row jc-between ai-center`}>
-                {/*<TextInput
-                    select={true}
-                    placeholder={t('TransactionHistory.coin')}
-                    options={coinsOptions}
-                    lead={t('TransactionHistory.coin')}
-                    type="select"
-                    value={{
-                        value: query?.coin,
-                        label:  query?.coin ? t('currency.'+ query?.coin) : t('all'),
-                    }}
-                    onchange={(e) => setQuery({...query, coin: e.value, offset:0})}
-                    customClass={`width-24 ${classes.thisInput}`}
-                />
                 <TextInput
                     select={true}
-                    placeholder={t('TransactionHistory.category')}
-                    options={categoryOptions}
-                    lead={t('TransactionHistory.category')}
+                    placeholder={t('history.currency')}
+                    options={currenciesOptions}
+                    lead={t('history.currency')}
                     type="select"
                     value={{
-                        value: query?.category,
-                        label: query?.category ? t('TransactionCategory.'+ query?.category) : t('all'),
+                        value: query?.currency,
+                        label:  query?.currency ? t('currency.'+ query?.currency) : t('all'),
                     }}
-                    onchange={(e) => setQuery({...query, category: e.value, offset:0})}
-                    customClass={`width-24 ${classes.thisInput}`}
-                />*/}
+                    onchange={(e) => setQuery({...query, currency: e.value, offset:0})}
+                    customClass={`width-20 ${classes.thisInput}`}
+                />
                 <TextInput
                     select={true}
-                    placeholder={t('TransactionHistory.size')}
+                    placeholder={t('history.size')}
                     options={size?.map(s => {
                         return {label: s, value: s}
                     })}
-                    lead={t('TransactionHistory.size')}
+                    lead={t('history.size')}
                     type="select"
                     value={{
                         value: query?.limit,
                         label: query?.limit,
                     }}
                     onchange={pageSizeHandler}
-                    customClass={`width-30 ${classes.thisInput}`}
+                    customClass={`width-20 ${classes.thisInput}`}
                 />
-
                 <TextInput
                     datePicker={true}
-                    //placeholder={t('TransactionHistory.size')}
+                    //placeholder={t('history.size')}
                     //numberOfMonths={2}
                     plugins={[
                         <DatePanel />
                     ]}
-                    lead={t('TransactionHistory.period')}
+                    lead={t('history.period')}
                     type="input"
                     onChange={startDateHandler}
                     /*value={[query.startTime, query.endTime]}*/
@@ -189,34 +174,35 @@ const DepositHistory = () => {
                     hideOnScroll
                     dataPanelPosition="Bottom"
                     position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`}
-                    customClass={`width-30 ${classes.thisInput}`}
+                    customClass={`width-20 ${classes.thisInput} ${classes.datePicker} `}
                 />
-
-                <div className={`width-30 row jc-end ai-center fs-0-8`}>
-                    <span className={`fs-0-8 ml-1`}>{t("TransactionHistory.ascendingByTime")}</span>
+                <div className={`width-15 row jc-end ai-center fs-0-8`}>
+                    <span className={`fs-0-8 ml-1`}>{t("history.ascendingByTime")}</span>
                     <ToggleSwitch
 
                         onchange={ () => setQuery(prevState => {return {
                             ...prevState,
                             ascendingByTime: !prevState.ascendingByTime
                         }}) }
-
-                        /*onchange={()=> setQuery({
-                            ...query,
-                            ascendingByTime: (prevState => !prevState)}
-                        )}*/
                         checked={!query?.ascendingByTime}/>
                 </div>
-
             </div>
 
             <div className={`card-bg card-border width-100 my-4`} >
                 <div className={`card-header-bg row jc-between ai-center px-2 py-5`}>
                     <div className={`row jc-center ai-center`}>
-                        <h3 className={``}>{t("TransactionHistory.depositTx")}</h3>
-                        <div className={`row mr-1 text-gray`}>
+                        <h3 className={``}>{t("history.depositHistory")}</h3>
+                        <div className={`row mx-1 text-gray`}>
                             {periodTextHandler()}
                         </div>
+                        { data?.length !== 0 && <span className={`fs-0-9 flx jc-center ai-center text-gray`}>
+                            <Trans
+                                i18nKey="history.page"
+                                values={{
+                                    page: (query?.offset / query?.limit) + 1,
+                                }}
+                            />
+                        </span>}
                     </div>
 
                     <div className={`row jc-start ai-center `}>

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

@@ -14,4 +14,17 @@
     background: var(--cardBodyAlpha);
     color: var(--textColor);
     cursor: not-allowed;
+}
+
+.thisInput :global(.lead) {
+    width: 30%;
+}
+.thisInput :global(.selectExternalClass) {
+    width: 70%;
+}
+.thisInput :global(.rmdp-container ) {
+    width: 70%;
+}
+.thisInput.datePicker :global(.rmdp-container ) {
+    font-size: 0.85rem;
 }