From a5cab1a1915ca05c4fae67b03508244cbc94d132 Mon Sep 17 00:00:00 2001 From: Hossein Date: Tue, 3 Sep 2024 16:06:44 +0330 Subject: [PATCH 1/4] Check env in market title comp --- .../components/MarketTitle/MarketTitle.js | 32 +++++++------------ 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/src/main/Browser/Pages/Landing/components/MarketTitle/MarketTitle.js b/src/main/Browser/Pages/Landing/components/MarketTitle/MarketTitle.js index 4be96886..988ff984 100644 --- a/src/main/Browser/Pages/Landing/components/MarketTitle/MarketTitle.js +++ b/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 = return ( @@ -18,37 +20,25 @@ const MarketTitle = () => { {t("title")} {t("MarketTitle.content")}

- {/*
- - {t("MarketTitle.easyTrading")} -
*/} -
+
{t("MarketTitle.advancedTrading")}
- {/*
-
+ { isDevelopment &&
+
}
); }; -export default MarketTitle; +export default MarketTitle; \ No newline at end of file From 6d0a496fe5d03480a6a6ea4f29288aa7a828c4b8 Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 8 Sep 2024 15:21:53 +0330 Subject: [PATCH 2/4] #216: Refactor transactions history --- public/assets/locales/en/translation.json | 31 +- public/assets/locales/fa/translation.json | 27 +- .../Layout/LayoutHeader/LayoutHeader.js | 5 +- src/components/TextInput/TextInput.js | 2 +- .../UserPanel/Sections/Content/Content.js | 3 + .../Content/components/History/History.js | 40 +++ .../components/History/History.module.css | 46 +++ .../DepositHistory/DepositHistory.js | 280 +++++++++++++++++ .../DepositHistory/DepositHistory.module.css | 17 + .../DepositHistoryTable.js | 99 ++++++ .../DepositHistoryTable.module.css | 6 + .../components/Transactions/Transactions.js | 291 ++++++++++++++++++ .../Transactions/Transactions.module.css | 31 ++ .../TransactionsTable/TransactionsTable.js | 93 ++++++ .../TransactionsTable.module.css | 6 + .../WithdrawHistory/WithdrawHistory.js | 279 +++++++++++++++++ .../WithdrawHistory.module.css | 17 + .../WithdrawHistoryTable.js | 120 ++++++++ .../WithdrawHistoryTable.module.css | 6 + .../Market/components/MyOrders/MyOrders.js | 4 +- .../TransactionHistory/TransactionHistory.js | 2 +- .../components/BuyAndSell/BuyAndSell.js | 5 +- .../Pages/UserPanel/Sections/Header/Header.js | 1 + .../UserPanel/Sections/MainMenu/MainMenu.js | 18 +- src/main/Browser/Pages/UserPanel/UserPanel.js | 2 +- src/main/Browser/Routes/routes.js | 3 + .../hooks/useGetTransactionsHistory.js | 21 ++ src/queries/hooks/useTransactionHistory.js | 20 -- src/queries/index.js | 3 +- 29 files changed, 1433 insertions(+), 45 deletions(-) create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.module.css create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.module.css create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.module.css create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.module.css create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.module.css create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.module.css create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.module.css create mode 100644 src/queries/hooks/useGetTransactionsHistory.js delete mode 100644 src/queries/hooks/useTransactionHistory.js diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json index 337d0789..ae4efc8a 100644 --- a/public/assets/locales/en/translation.json +++ b/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", diff --git a/public/assets/locales/fa/translation.json b/public/assets/locales/fa/translation.json index 801deefb..29ac1950 100644 --- a/public/assets/locales/fa/translation.json +++ b/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" : "رد درخواست برداشت", diff --git a/src/components/Layout/LayoutHeader/LayoutHeader.js b/src/components/Layout/LayoutHeader/LayoutHeader.js index fb122cb4..107f7192 100644 --- a/src/components/Layout/LayoutHeader/LayoutHeader.js +++ b/src/components/Layout/LayoutHeader/LayoutHeader.js @@ -75,7 +75,7 @@ const LayoutHeader = () => { onDeselect={()=>saveSelected()} > -
+
{

-
navigate(RoutesName.Transactions)}>{t("txHistory.title")}
+
navigate(RoutesName.Wallet)}>{t("wallet.title")}
+
navigate(RoutesName.History)}>{t("history.title")}
navigate(RoutesName.Settings)}>{t("settings.title")}
{t("signOut")}
diff --git a/src/components/TextInput/TextInput.js b/src/components/TextInput/TextInput.js index 83dddf61..5cca9b97 100644 --- a/src/components/TextInput/TextInput.js +++ b/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} /> diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js b/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js index decaa2eb..57a27cdf 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js +++ b/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 = () => { }/> }/> }/> + }/> { + + const {t} = useTranslation(); + + const [activeTx, setActiveTx] = useState("transactions") + + + const content = () => { + if (activeTx === "transactions") return + if (activeTx === "deposit") return + if (activeTx === "withdraw") return + } + + return ( + <> +
+
+
+ setActiveTx("transactions")}>{t("history.transactions")} + setActiveTx("deposit")}>{t("history.deposit")} + setActiveTx("withdraw")}>{t("history.withdraw")} +
+
+ {content()} +
+
+
+ + ); +}; + +export default History; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.module.css new file mode 100644 index 00000000..768e1319 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.js new file mode 100644 index 00000000..09ddbe81 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.js @@ -0,0 +1,280 @@ +import React, {useEffect, useRef, useState} from 'react'; +import {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"; +import DatePanel from "react-multi-date-picker/plugins/date_panel"; +import i18n from "i18next"; +import ToggleSwitch from "../../../../../../../../../../components/ToggleSwitch/ToggleSwitch"; +import Button from "../../../../../../../../../../components/Button/Button"; +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 + "category": null, // optional [DEPOSIT, FEE, TRADE, WITHDRAW, ORDER_CANCEL, ORDER_CREATE, ORDER_FINALIZED] + "startTime": null, + "endTime": null, + "ascendingByTime": false, + "limit": 10, + "offset": 0 + }); + + const {data, isLoading, error, refetch} = useGetDepositHistory(user_id, query); + + const pagination = { + page: (query.offset / query.limit) + 1, + isLastPage: data?.length < query.limit + } + + const isFirst = useRef(true); + + useEffect(() => { + if (!isFirst.current) scrollRef.current?.scrollIntoView({behavior: 'smooth'}); + }, [data]); + + const categories = ['DEPOSIT', 'FEE', 'TRADE', 'WITHDRAW', 'ORDER_CANCEL', 'ORDER_CREATE', 'ORDER_FINALIZED']; + + const coinsOptions = [{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)}) + }) + + + const scrollRef = useRef(null); + + + const pageSizeHandler = (e) => { + setQuery({ + ...query, + limit: e.value, + offset: 0 + }) + } + + const firstPage = () => { + setQuery({ + ...query, + offset: 0 + }) + } + const nextPage = () => { + isFirst.current = false; + setQuery({ + ...query, + offset: query.offset + query.limit + }) + } + const prevPage = () => { + setQuery({ + ...query, + offset: query.offset - query.limit + }) + } + const startDateHandler = (dateRange) => { + const start = dateRange[0] ? moment.unix(dateRange[0].toUnix()).startOf("day").valueOf() : null; + const end = dateRange[1] ? moment.unix(dateRange[1].toUnix()).endOf("day").valueOf() : null; + setQuery({ + ...query, + startTime: start, + endTime: end + }) + } + + + const content = () => { + if (isLoading) return
+ if (error) return
+ if (data?.length === 0) return
{t("noTx")}
+ else return <> + + + } + + const periodTextHandler = () => { + if (query?.startTime && query?.endTime) return <> + {t("from")} + + {t("until")} + + + if (query?.startTime) return <> + {t("from")} + + {t("until")} + + + } + + + return ( +
+ +
+ {/* setQuery({...query, coin: e.value, offset:0})} + customClass={`width-24 ${classes.thisInput}`} + /> + setQuery({...query, category: e.value, offset:0})} + customClass={`width-24 ${classes.thisInput}`} + />*/} + { + return {label: s, value: s} + })} + lead={t('TransactionHistory.size')} + type="select" + value={{ + value: query?.limit, + label: query?.limit, + }} + onchange={pageSizeHandler} + customClass={`width-30 ${classes.thisInput}`} + /> + + + ]} + lead={t('TransactionHistory.period')} + type="input" + onChange={startDateHandler} + /*value={[query.startTime, query.endTime]}*/ + value={[query.startTime, query.endTime]} + dateSeparator={" " + t('to') + " "} + range + hideOnScroll + dataPanelPosition="Bottom" + position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`} + customClass={`width-30 ${classes.thisInput}`} + /> + +
+ {t("TransactionHistory.ascendingByTime")} + setQuery(prevState => {return { + ...prevState, + ascendingByTime: !prevState.ascendingByTime + }}) } + + /*onchange={()=> setQuery({ + ...query, + ascendingByTime: (prevState => !prevState)} + )}*/ + checked={!query?.ascendingByTime}/> +
+ +
+ +
+
+
+

{t("TransactionHistory.depositTx")}

+
+ {periodTextHandler()} +
+
+ +
+
+ +
+
+ {content()} +
+
+
+ +
+ +
+ ); +}; + +export default DepositHistory; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.module.css new file mode 100644 index 00000000..7579db6f --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistory/DepositHistory.module.css @@ -0,0 +1,17 @@ +.thisButton { + background-color: var(--orange); + color: #000; +} +.disable:disabled,.button[disabled] { + border: 0.3vh solid var(--cardBodyAlpha); + background: var(--cardBodyAlpha); + color: var(--textColor); + cursor: not-allowed; +} + +.thisButton:disabled,.button[disabled] { + border: 0.3vh solid var(--cardBodyAlpha); + background: var(--cardBodyAlpha); + color: var(--textColor); + cursor: not-allowed; +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.js new file mode 100644 index 00000000..ebe88ec9 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.js @@ -0,0 +1,99 @@ +import React from 'react'; +import classes from './DepositHistoryTable.module.css' +import {useTranslation} from "react-i18next"; +import {useSelector} from "react-redux"; +import Date from "../../../../../../../../../../components/Date/Date"; +import moment from "moment-jalaali"; +import {BN} from "../../../../../../../../../../utils/utils"; + +const DepositHistoryTable = ({txs, offset}) => { + + const {t} = useTranslation(); + + const id = useSelector(state => state.auth.id); + + let head = ( +
+ {t("row")} + {t("date")} + {t("time")} + {t("TransactionHistory.category")} + {t("TransactionHistory.coin")} + {t("DepositWithdraw.network")} + {t("volume")} + {t("status")} + {t("TransactionHistory.txType")} + +
+ ); + let body = ( + <> + {txs.map((tr, index) => { + + const isMaker = tr?.additionalData?.makerUuid === id + const isTaker = tr?.additionalData?.takerUuid === id + + const isSelfTrade = (((tr?.additionalData?.takerDirection === "ASK") || ( tr?.additionalData?.makerDirection === "BID")) && isTaker && isMaker) + + return ( + +
+ +
+ + {index + offset + 1} + + + + + + {moment(tr.createDate).format("HH:mm:ss")} + + + { t("TransactionCategory.DEPOSIT")} + + + + {t("currency." + tr.currency )} + + + + {tr.network} + + + + + {new BN(tr?.amount).toFormat()} + + + + {t("orderStatus.DONE")} + + + {tr.depositType} + + + + + + +
+ +
+ + + + ) + })} + + ); + + return ( + <> + {head} + {body} + + ); +}; + +export default DepositHistoryTable; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.module.css new file mode 100644 index 00000000..c6570126 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/DepositHistoryTable/DepositHistoryTable.module.css @@ -0,0 +1,6 @@ +.striped:nth-child(even) { + background-color: var(--tableRow); + -webkit-transition: background-color 0.4s; + -o-transition: background-color 0.4s; + transition: background-color 0.4s; +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js new file mode 100644 index 00000000..b1e18b3c --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js @@ -0,0 +1,291 @@ +import React, {useEffect, useRef, useState} from 'react'; +import {Trans, useTranslation} from "react-i18next"; +import {useSelector} from "react-redux"; +import moment from "moment-jalaali"; +import Loading from "../../../../../../../../../../components/Loading/Loading"; +import Error from "../../../../../../../../../../components/Error/Error"; +import Date from "../../../../../../../../../../components/Date/Date"; +import TextInput from "../../../../../../../../../../components/TextInput/TextInput"; +import classes from "./Transactions.module.css"; +import DatePanel from "react-multi-date-picker/plugins/date_panel"; +import i18n from "i18next"; +import ToggleSwitch from "../../../../../../../../../../components/ToggleSwitch/ToggleSwitch"; +import Button from "../../../../../../../../../../components/Button/Button"; +import TransactionsTable from "../TransactionsTable/TransactionsTable"; +import {useGetTransactionsHistory} from "../../../../../../../../../../queries"; + +const Transactions = () => { + + const {t} = useTranslation(); + const user_id = useSelector((state) => state.auth.id) + const coins = useSelector((state) => state.exchange.assets) + + const [query, setQuery] = useState({ + "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 + }); + + const {data, isLoading, error, refetch} = useGetTransactionsHistory(query); + + console.log("data: ", data) + + const pagination = { + page: (query.offset / query.limit) + 1, + isLastPage: data?.length < query.limit + } + + const isFirst = useRef(true); + + useEffect(() => { + if (!isFirst.current) scrollRef.current?.scrollIntoView({behavior: 'smooth'}); + }, [data]); + + const categories = ['TRADE', 'DEPOSIT', 'WITHDRAW', 'FEE', 'SYSTEM']; + + 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) => { + currenciesOptions.push({value: o, label: t('currency.' + o)}) + }) + + + const scrollRef = useRef(null); + + + const pageSizeHandler = (e) => { + setQuery({ + ...query, + limit: e.value, + offset: 0 + }) + } + + const firstPage = () => { + setQuery({ + ...query, + offset: 0 + }) + } + const nextPage = () => { + isFirst.current = false; + setQuery({ + ...query, + offset: query.offset + query.limit + }) + } + const prevPage = () => { + setQuery({ + ...query, + offset: query.offset - query.limit + }) + } + const startDateHandler = (dateRange) => { + const start = dateRange[0] ? moment.unix(dateRange[0].toUnix()).startOf("day").valueOf() : null; + const end = dateRange[1] ? moment.unix(dateRange[1].toUnix()).endOf("day").valueOf() : null; + setQuery({ + ...query, + startTime: start, + endTime: end + }) + } + + + const content = () => { + if (isLoading) return
+ if (error) return
+ if (data?.length === 0) return
{t("noTx")}
+ else return <> + + + } + + const periodTextHandler = () => { + if (query?.startTime && query?.endTime) return <> + {t("from")} + + {t("until")} + + + if (query?.startTime) return <> + {t("from")} + + {t("until")} + + + } + + + return ( +
+ +
+ setQuery({...query, currency: e.value, offset:0})} + customClass={`width-20 ${classes.thisInput}`} + /> + setQuery({...query, category: e.value, offset:0})} + customClass={`width-20 ${classes.thisInput}`} + /> + { + return {label: s, value: s} + })} + lead={t('history.size')} + type="select" + value={{ + value: query?.limit, + label: query?.limit, + }} + onchange={pageSizeHandler} + customClass={`width-20 ${classes.thisInput}`} + /> + + + ]} + lead={t('history.period')} + type="input" + onChange={startDateHandler} + /*value={[query.startTime, query.endTime]}*/ + value={[query.startTime, query.endTime]} + dateSeparator={" " + t('to') + " "} + range + hideOnScroll + dataPanelPosition="Bottom" + position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`} + customClass={`width-20 ${classes.thisInput} ${classes.datePicker} `} + /> + +
+ {t("history.ascendingByTime")} + setQuery(prevState => {return { + ...prevState, + ascendingByTime: !prevState.ascendingByTime + }}) } + + /*onchange={()=> setQuery({ + ...query, + ascendingByTime: (prevState => !prevState)} + )}*/ + checked={!query?.ascendingByTime}/> +
+ +
+ +
+
+
+

{t("history.transactionsHistory")}

+
+ {periodTextHandler()} +
+ { data?.length !== 0 && + + } +
+ + + + +
+
+ +
+
+ {content()} +
+
+
+ +
+ +
+ ); +}; + +export default Transactions; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.module.css new file mode 100644 index 00000000..ec46933b --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.module.css @@ -0,0 +1,31 @@ +.thisButton { + background-color: var(--orange); + color: #000; +} +.disable:disabled,.button[disabled] { + border: 0.3vh solid var(--cardBodyAlpha); + background: var(--cardBodyAlpha); + color: var(--textColor); + cursor: not-allowed; +} + +.thisButton:disabled,.button[disabled] { + border: 0.3vh solid var(--cardBodyAlpha); + 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; +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js new file mode 100644 index 00000000..5cc9dd74 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js @@ -0,0 +1,93 @@ +import React from 'react'; +import classes from './TransactionsTable.module.css'; +import {useTranslation} from "react-i18next"; +import {useSelector} from "react-redux"; +import Date from "../../../../../../../../../../components/Date/Date"; +import moment from "moment-jalaali"; +import {BN} from "../../../../../../../../../../utils/utils"; + +const TransactionsTable = ({txs, offset}) => { + const {t} = useTranslation(); + + const id = useSelector(state => state.auth.id); + + let head = ( +
+ {/*{t("row")}*/} + {t("date")} + {t("time")} + {t("history.category")} + {t("history.currency")} + {t("history.balanceChange")} + {t("history.balance")} + {/*{t("details")}*/} + +
+ ); + + let body = ( + <> + {txs.map((tr, index) => { + + const isMaker = tr?.additionalData?.makerUuid === id + const isTaker = tr?.additionalData?.takerUuid === id + + const isSelfTrade = (((tr?.additionalData?.takerDirection === "ASK") || ( tr?.additionalData?.makerDirection === "BID")) && isTaker && isMaker) + + return ( + +
+ +
+ {/* + {index + offset + 1} + */} + + + + + {moment.utc(tr.date).local().format("HH:mm:ss")} + + + {t("TransactionCategory." + tr.category )} + + + + {t("currency." + tr.currency )} + + + + {new BN(tr?.balanceChange).toFormat()} + + + + {new BN(tr?.balance).toFormat()} + + + + + + + + + +
+ +
+ + + + ) + })} + + ); + + return ( + <> + {head} + {body} + + ); +}; + +export default TransactionsTable; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.module.css new file mode 100644 index 00000000..c6570126 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.module.css @@ -0,0 +1,6 @@ +.striped:nth-child(even) { + background-color: var(--tableRow); + -webkit-transition: background-color 0.4s; + -o-transition: background-color 0.4s; + transition: background-color 0.4s; +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.js new file mode 100644 index 00000000..7be73f96 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.js @@ -0,0 +1,279 @@ +import React, {useEffect, useRef, useState} from 'react'; +import classes from './WithdrawHistory.module.css' +import {useTranslation} from "react-i18next"; +import {useSelector} from "react-redux"; +import {useGetBuyAndSellHistory, useGetWithdrawHistory} from "../../../../../../../../../../queries"; +import moment from "moment-jalaali"; +import Loading from "../../../../../../../../../../components/Loading/Loading"; +import Error from "../../../../../../../../../../components/Error/Error"; +import BuyAndSellTable from "../BuyAndSellTable/BuyAndSellTable"; +import Date from "../../../../../../../../../../components/Date/Date"; +import TextInput from "../../../../../../../../../../components/TextInput/TextInput"; +import DatePanel from "react-multi-date-picker/plugins/date_panel"; +import i18n from "i18next"; +import ToggleSwitch from "../../../../../../../../../../components/ToggleSwitch/ToggleSwitch"; +import Button from "../../../../../../../../../../components/Button/Button"; +import WithdrawHistoryTable from "../WithdrawHistoryTable/WithdrawHistoryTable"; + +const WithdrawHistory = () => { + + const {t} = useTranslation(); + const coins = useSelector((state) => state.exchange.assets) + + const [query, setQuery] = useState({ + "coin": 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 + }); + + const {data, isLoading, error, refetch} = useGetWithdrawHistory(query); + + const pagination = { + page: (query.offset / query.limit) + 1, + isLastPage: data?.length < query.limit + } + + const isFirst = useRef(true); + + useEffect(() => { + if (!isFirst.current) scrollRef.current?.scrollIntoView({behavior: 'smooth'}); + }, [data]); + + const categories = ['DEPOSIT', 'FEE', 'TRADE', 'WITHDRAW', 'ORDER_CANCEL', 'ORDER_CREATE', 'ORDER_FINALIZED']; + + const coinsOptions = [{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)}) + }) + + + const scrollRef = useRef(null); + + + const pageSizeHandler = (e) => { + setQuery({ + ...query, + limit: e.value, + offset: 0 + }) + } + + const firstPage = () => { + setQuery({ + ...query, + offset: 0 + }) + } + const nextPage = () => { + isFirst.current = false; + setQuery({ + ...query, + offset: query.offset + query.limit + }) + } + const prevPage = () => { + setQuery({ + ...query, + offset: query.offset - query.limit + }) + } + const startDateHandler = (dateRange) => { + const start = dateRange[0] ? moment.unix(dateRange[0].toUnix()).startOf("day").valueOf() : null; + const end = dateRange[1] ? moment.unix(dateRange[1].toUnix()).endOf("day").valueOf() : null; + setQuery({ + ...query, + startTime: start, + endTime: end + }) + } + + + const content = () => { + if (isLoading) return
+ if (error) return
+ if (data?.length === 0) return
{t("noTx")}
+ else return <> + + + } + + const periodTextHandler = () => { + if (query?.startTime && query?.endTime) return <> + {t("from")} + + {t("until")} + + + if (query?.startTime) return <> + {t("from")} + + {t("until")} + + + } + + + + return ( +
+ +
+ {/* setQuery({...query, coin: e.value, offset:0})} + customClass={`width-24 ${classes.thisInput}`} + /> + setQuery({...query, category: e.value, offset:0})} + customClass={`width-24 ${classes.thisInput}`} + />*/} + { + return {label: s, value: s} + })} + lead={t('TransactionHistory.size')} + type="select" + value={{ + value: query?.limit, + label: query?.limit, + }} + onchange={pageSizeHandler} + customClass={`width-30 ${classes.thisInput}`} + /> + + + ]} + lead={t('TransactionHistory.period')} + type="input" + onChange={startDateHandler} + /*value={[query.startTime, query.endTime]}*/ + value={[query.startTime, query.endTime]} + dateSeparator={" " + t('to') + " "} + range + hideOnScroll + dataPanelPosition="Bottom" + position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`} + customClass={`width-30 ${classes.thisInput}`} + /> + +
+ {t("TransactionHistory.ascendingByTime")} + setQuery(prevState => {return { + ...prevState, + ascendingByTime: !prevState.ascendingByTime + }}) } + + /*onchange={()=> setQuery({ + ...query, + ascendingByTime: (prevState => !prevState)} + )}*/ + checked={!query?.ascendingByTime}/> +
+ +
+ +
+
+
+

{t("TransactionHistory.withdrawTx")}

+
+ {periodTextHandler()} +
+
+ +
+
+ +
+
+ {content()} +
+
+
+ +
+ +
+ ); +}; + +export default WithdrawHistory; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.module.css new file mode 100644 index 00000000..7579db6f --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistory/WithdrawHistory.module.css @@ -0,0 +1,17 @@ +.thisButton { + background-color: var(--orange); + color: #000; +} +.disable:disabled,.button[disabled] { + border: 0.3vh solid var(--cardBodyAlpha); + background: var(--cardBodyAlpha); + color: var(--textColor); + cursor: not-allowed; +} + +.thisButton:disabled,.button[disabled] { + border: 0.3vh solid var(--cardBodyAlpha); + background: var(--cardBodyAlpha); + color: var(--textColor); + cursor: not-allowed; +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.js new file mode 100644 index 00000000..62a7f34f --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.js @@ -0,0 +1,120 @@ +import React from 'react'; +import classes from './WithdrawHistoryTable.module.css' +import {useTranslation} from "react-i18next"; +import {useSelector} from "react-redux"; +import Date from "../../../../../../../../../../components/Date/Date"; +import moment from "moment-jalaali"; +import {BN} from "../../../../../../../../../../utils/utils"; + +const WithdrawHistoryTable = ({txs, offset}) => { + + const {t} = useTranslation(); + + const id = useSelector(state => state.auth.id); + + const txStatus = (status) => { + switch (status) { + case 0: + return t("orderStatus.NEW"); + case 1: + return t("orderStatus.DONE"); + case 2: + return t("orderStatus.REJECTED"); + default: + return t("orderStatus.NEW"); + } + }; + + let head = ( +
+ {t("row")} + {t("date")} + {t("time")} + {t("TransactionHistory.category")} + {t("TransactionHistory.coin")} + {t("DepositWithdraw.network")} + {t("volume")} + {t("status")} + {t("TransactionHistory.destAddress")} + {t("DepositWithdrawTx.transactionId")} + +
+ ); + let body = ( + <> + {txs.map((tr, index) => { + + const isMaker = tr?.additionalData?.makerUuid === id + const isTaker = tr?.additionalData?.takerUuid === id + + const isSelfTrade = (((tr?.additionalData?.takerDirection === "ASK") || ( tr?.additionalData?.makerDirection === "BID")) && isTaker && isMaker) + + return ( + +
+ +
+ + {index + offset + 1} + + + + + + {moment(tr.applyTime).format("HH:mm:ss")} + + + { t("TransactionCategory.WITHDRAW")} + + + + {t("currency." + tr.coin )} + + + + {tr.network} + + + + + {new BN(tr?.amount).toFormat()} + + + + {txStatus(tr.status)} + + + {tr.address} + + + {tr.txId} + + + + + + +
+ +
+ + + + ) + })} + + ); + + + + + + return ( + <> + {head} + {body} + + ); +}; + +export default WithdrawHistoryTable; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.module.css new file mode 100644 index 00000000..c6570126 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.module.css @@ -0,0 +1,6 @@ +.striped:nth-child(even) { + background-color: var(--tableRow); + -webkit-transition: background-color 0.4s; + -o-transition: background-color 0.4s; + transition: background-color 0.4s; +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/MyOrders/MyOrders.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/MyOrders/MyOrders.js index e17c2ae2..b5c145d4 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/MyOrders/MyOrders.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Market/components/MyOrders/MyOrders.js @@ -21,10 +21,10 @@ const MyOrders = () => {
const data = [ - {id: 1, title: t("myOrders.aliveOrder"), body: isLogin ? : LoginText}, + {id: 1, title: t("myOrders.liveOrders"), body: isLogin ? : LoginText}, //{id: 2, title: t("myOrders.stoppedOrder"), body: props.auth.isLogin ? StopTable : LoginText}, {id: 3, title: t("myOrders.orderHistory"), body: isLogin ? : LoginText}, - {id: 4, title: t("myOrders.orders"), body: isLogin ? : LoginText}, + {id: 4, title: t("myOrders.tradeHistory"), body: isLogin ? : LoginText}, ]; return ( diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/TransactionHistory/TransactionHistory.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/TransactionHistory/TransactionHistory.js index adbaf0d5..9ed59db9 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/TransactionHistory/TransactionHistory.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/TransactionHistory/TransactionHistory.js @@ -3,7 +3,7 @@ import classes from './TransactionHistory.module.css'; import {useSelector} from "react-redux"; import {useTranslation} from "react-i18next"; import moment from "moment-jalaali"; -import {useTransactionHistory} from "../../../../../../../../queries/hooks/useTransactionHistory"; +import {useTransactionHistory} from "../../../../../../../../queries/hooks/useGetTransactionsHistory"; import Loading from "../../../../../../../../components/Loading/Loading"; import Error from "../../../../../../../../components/Error/Error"; import TextInput from "../../../../../../../../components/TextInput/TextInput"; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Transactions/components/BuyAndSell/BuyAndSell.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Transactions/components/BuyAndSell/BuyAndSell.js index 026e6bf1..a440fec5 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Transactions/components/BuyAndSell/BuyAndSell.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Transactions/components/BuyAndSell/BuyAndSell.js @@ -2,7 +2,7 @@ import React, {useEffect, useRef, useState} from 'react'; import classes from './BuyAndSell.module.css'; import {useTranslation} from "react-i18next"; import {useSelector} from "react-redux"; -import {useTransactionHistory} from "../../../../../../../../../../queries/hooks/useTransactionHistory"; +import {useTransactionHistory} from "../../../../../../../../../../queries/hooks/useGetTransactionsHistory"; import {useGetBuyAndSellHistory} from "../../../../../../../../../../queries"; import TextInput from "../../../../../../../../../../components/TextInput/TextInput"; import DatePanel from "react-multi-date-picker/plugins/date_panel"; @@ -127,9 +127,6 @@ const BuyAndSell = () => { } - - - return (
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js b/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js index b5f65d7c..329c13c3 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js @@ -39,6 +39,7 @@ const Header = () => { }> {t("txHistory.title")}}/> + {t("history.title")}}/> }/> }/> diff --git a/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js b/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js index 4623198b..b5653996 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js +++ b/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js @@ -101,7 +101,7 @@ const MainMenu = () => { - isActive ? classes.selected : undefined @@ -115,6 +115,22 @@ const MainMenu = () => { "txHistory.title", )}`}> + */} + + + isActive ? classes.selected : undefined + } + onClick={() => setShowMessages(false)} + data-tooltip-id="opex-tooltip" + data-tooltip-place="left" + data-tooltip-float={true} + data-tooltip-html={` + ${t( + "history.title", + )}`}> +
diff --git a/src/main/Browser/Pages/UserPanel/UserPanel.js b/src/main/Browser/Pages/UserPanel/UserPanel.js index bf98ff6a..9d655bd8 100644 --- a/src/main/Browser/Pages/UserPanel/UserPanel.js +++ b/src/main/Browser/Pages/UserPanel/UserPanel.js @@ -13,7 +13,7 @@ import {Transactions} from "../../Routes/routes"; const UserPanel = () => { const isLogin = useSelector((state) => state.auth.isLogin) - const isTxHistoryPage = useMatch(RoutesName.Transactions) + const isTxHistoryPage = useMatch(RoutesName.History || RoutesName.History) const isTechnicalPage = useMatch(RoutesName.Technical) const hasSubMenu = !(isTxHistoryPage || isTechnicalPage); diff --git a/src/main/Browser/Routes/routes.js b/src/main/Browser/Routes/routes.js index b40f668f..6e077fc1 100644 --- a/src/main/Browser/Routes/routes.js +++ b/src/main/Browser/Routes/routes.js @@ -22,6 +22,9 @@ export const TxHistoryRelative = "/transaction-history"; export const Transactions = "/panel/transactions"; export const TransactionsRelative = "/transactions"; +export const History = "/panel/history"; +export const HistoryRelative = "/history"; + export const Wallet = "/panel/wallet"; diff --git a/src/queries/hooks/useGetTransactionsHistory.js b/src/queries/hooks/useGetTransactionsHistory.js new file mode 100644 index 00000000..e3b2b788 --- /dev/null +++ b/src/queries/hooks/useGetTransactionsHistory.js @@ -0,0 +1,21 @@ +import {useQuery} from "@tanstack/react-query"; +import axios from "axios"; +import {getTransactionHistory} from "js-api-client/client/txs"; + +export const useGetTransactionsHistory = (query) => { + + return useQuery( + ['transactionsHistory', query.currency, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime], + () => getTransactionsHistoryFunc(query), + { + retry: 1, + staleTime: 5000, + refetchInterval: 10000, + }); +} + +const getTransactionsHistoryFunc = async (query) => { + + const {data} = await axios.post(`/wallet/v2/transaction`, query) + return data; +} diff --git a/src/queries/hooks/useTransactionHistory.js b/src/queries/hooks/useTransactionHistory.js deleted file mode 100644 index 2468d045..00000000 --- a/src/queries/hooks/useTransactionHistory.js +++ /dev/null @@ -1,20 +0,0 @@ -import {useQuery} from "@tanstack/react-query"; -import axios from "axios"; -import {getTransactionHistory} from "js-api-client/client/txs"; - -export const useTransactionHistory = (user_id, query) => { - - return useQuery( - ['allTxHistory', user_id, query.coin, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime], - () => getWithdrawTxsFunc(user_id, query), - { - retry: 1, - staleTime: 5000, - refetchInterval: 10000, - }); -} - -const getWithdrawTxsFunc = async (user_id, query) => { - const {data} = await getTransactionHistory(user_id, query) - return data; -} diff --git a/src/queries/index.js b/src/queries/index.js index 591985ef..b4d09d5b 100644 --- a/src/queries/index.js +++ b/src/queries/index.js @@ -24,4 +24,5 @@ export {useGetUserAssets} from "./hooks/useGetUserAssets"; export {useGetUserAssetsEstimatedValue} from "./hooks/useGetUserAssetsEstimatedValue"; export {useGetBuyAndSellHistory} from "./hooks/useGetBuyAndSellHistory"; export {useGetWithdrawHistory} from "./hooks/useGetWithdrawHistory"; -export {useGetDepositHistory} from "./hooks/useGetDepositHistory"; \ No newline at end of file +export {useGetDepositHistory} from "./hooks/useGetDepositHistory"; +export {useGetTransactionsHistory} from "./hooks/useGetTransactionsHistory"; \ No newline at end of file From 2c5027c37b0ed1858cfedb9510aef18f405b5118 Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 8 Sep 2024 15:30:23 +0330 Subject: [PATCH 3/4] #216: Get transactions history func from api package --- src/queries/hooks/useGetTransactionsHistory.js | 7 ++----- yarn.lock | 4 ++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/queries/hooks/useGetTransactionsHistory.js b/src/queries/hooks/useGetTransactionsHistory.js index e3b2b788..19f630c3 100644 --- a/src/queries/hooks/useGetTransactionsHistory.js +++ b/src/queries/hooks/useGetTransactionsHistory.js @@ -1,9 +1,7 @@ import {useQuery} from "@tanstack/react-query"; -import axios from "axios"; -import {getTransactionHistory} from "js-api-client/client/txs"; +import {getTransactionsHistory} from "js-api-client"; export const useGetTransactionsHistory = (query) => { - return useQuery( ['transactionsHistory', query.currency, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime], () => getTransactionsHistoryFunc(query), @@ -15,7 +13,6 @@ export const useGetTransactionsHistory = (query) => { } const getTransactionsHistoryFunc = async (query) => { - - const {data} = await axios.post(`/wallet/v2/transaction`, query) + const {data} = await getTransactionsHistory(query) return data; } diff --git a/yarn.lock b/yarn.lock index 12244150..9a2658f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9486,8 +9486,8 @@ __metadata: "js-api-client@https://github.com/opexdev/js-api-client.git#develop": version: 1.0.0-beta2 - resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=0516bb9eaf9233cb04157df3623262630022e432" - checksum: 2bdaadfede60fda2b60807895cfccd459f2d5a6587e0f1c08292384ac2b60e86bb105357f4bd91b68e80c717254fa50fa4e76465086e8089d950dca69abb6b4f + resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=0a3cb3b1a8cc9bfea52d8a13b469bcd676923c37" + checksum: 46415811da888600ce149284d02e7cec2bbfffea73bc80ff16406447466c0abb5ac6a21ff82eb8cb48d61c25d65d673b4afeb44afc906d9d7d51f04e7f9b80fe languageName: node linkType: hard From 2187fd7f0eb8c84d522e63c2e104259c596cce3c Mon Sep 17 00:00:00 2001 From: Hossein Date: Sun, 8 Sep 2024 15:45:38 +0330 Subject: [PATCH 4/4] Clean history comp --- .../Layout/LayoutHeader/LayoutHeader.js | 2 -- .../Content/components/History/History.js | 1 - .../components/Transactions/Transactions.js | 21 ------------ .../TransactionsTable/TransactionsTable.js | 34 +------------------ 4 files changed, 1 insertion(+), 57 deletions(-) diff --git a/src/components/Layout/LayoutHeader/LayoutHeader.js b/src/components/Layout/LayoutHeader/LayoutHeader.js index 107f7192..40f5d0f5 100644 --- a/src/components/Layout/LayoutHeader/LayoutHeader.js +++ b/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 = ( { const [activeTx, setActiveTx] = useState("transactions") - const content = () => { if (activeTx === "transactions") return if (activeTx === "deposit") return diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js index b1e18b3c..933d0064 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/Transactions/Transactions.js @@ -17,7 +17,6 @@ import {useGetTransactionsHistory} from "../../../../../../../../../../queries"; const Transactions = () => { const {t} = useTranslation(); - const user_id = useSelector((state) => state.auth.id) const coins = useSelector((state) => state.exchange.assets) const [query, setQuery] = useState({ @@ -32,8 +31,6 @@ const Transactions = () => { const {data, isLoading, error, refetch} = useGetTransactionsHistory(query); - console.log("data: ", data) - const pagination = { page: (query.offset / query.limit) + 1, isLastPage: data?.length < query.limit @@ -59,10 +56,8 @@ const Transactions = () => { currenciesOptions.push({value: o, label: t('currency.' + o)}) }) - const scrollRef = useRef(null); - const pageSizeHandler = (e) => { setQuery({ ...query, @@ -100,7 +95,6 @@ const Transactions = () => { }) } - const content = () => { if (isLoading) return
if (error) return
@@ -128,7 +122,6 @@ const Transactions = () => { return (
-
{ onchange={pageSizeHandler} customClass={`width-20 ${classes.thisInput}`} /> - { position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`} customClass={`width-20 ${classes.thisInput} ${classes.datePicker} `} /> -
{t("history.ascendingByTime")} { ...prevState, ascendingByTime: !prevState.ascendingByTime }}) } - - /*onchange={()=> setQuery({ - ...query, - ascendingByTime: (prevState => !prevState)} - )}*/ checked={!query?.ascendingByTime}/>
-
@@ -227,9 +212,6 @@ const Transactions = () => { }
- - -
-
{content()} @@ -281,9 +262,7 @@ const Transactions = () => { onClick={nextPage} />
- - ); }; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js index 5cc9dd74..d434f2c9 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/TransactionsTable/TransactionsTable.js @@ -1,47 +1,30 @@ import React from 'react'; import classes from './TransactionsTable.module.css'; import {useTranslation} from "react-i18next"; -import {useSelector} from "react-redux"; import Date from "../../../../../../../../../../components/Date/Date"; import moment from "moment-jalaali"; import {BN} from "../../../../../../../../../../utils/utils"; -const TransactionsTable = ({txs, offset}) => { +const TransactionsTable = ({txs}) => { const {t} = useTranslation(); - const id = useSelector(state => state.auth.id); - let head = (
- {/*{t("row")}*/} {t("date")} {t("time")} {t("history.category")} {t("history.currency")} {t("history.balanceChange")} {t("history.balance")} - {/*{t("details")}*/} -
); let body = ( <> {txs.map((tr, index) => { - - const isMaker = tr?.additionalData?.makerUuid === id - const isTaker = tr?.additionalData?.takerUuid === id - - const isSelfTrade = (((tr?.additionalData?.takerDirection === "ASK") || ( tr?.additionalData?.makerDirection === "BID")) && isTaker && isMaker) - return ( -
-
- {/* - {index + offset + 1} - */} @@ -51,32 +34,17 @@ const TransactionsTable = ({txs, offset}) => { {t("TransactionCategory." + tr.category )} - {t("currency." + tr.currency )} - {new BN(tr?.balanceChange).toFormat()} - {new BN(tr?.balance).toFormat()} - - - - - - - -
-
- - - ) })}