From c3124e3ec020d90f410b7cabaad15a427988776b Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 23 Sep 2024 18:15:13 +0330 Subject: [PATCH 1/3] #216: Change withdraw services --- public/assets/locales/fa/translation.json | 17 +++ .../Content/components/History/History.js | 4 +- .../WithdrawHistory/WithdrawHistory.js | 79 +++++------- .../WithdrawHistory.module.css | 14 ++ .../WithdrawHistoryTable.js | 121 ++++++++++-------- .../hooks/useGetTransactionsHistory.js | 2 + src/queries/hooks/useGetWithdrawHistory.js | 5 +- 7 files changed, 139 insertions(+), 103 deletions(-) diff --git a/public/assets/locales/fa/translation.json b/public/assets/locales/fa/translation.json index 29ac1950..de972114 100644 --- a/public/assets/locales/fa/translation.json +++ b/public/assets/locales/fa/translation.json @@ -252,14 +252,31 @@ "deposit": "واریز", "withdraw": "برداشت", "balance": "موجودی", + "amount": "مقدار", + "network": "شبکه", + "details": "جزئیات", + "fee": "کارمزد", + "destAddress": "آدرس مقصد", + "withdrawId": "شناسه برداشت", + "acceptDate": "تاریخ و زمان بررسی درخواست", + "transactionRef": "شناسه تراکنش", + "statusReason": "توضیح وضعیت", "balanceChange": "تغییر موجودی", "currency" : "ارز", "category" : "نوع تراکنش", "size" : "تعداد", "period" : "بازه زمانی", + "status" : "وضعیت", "ascendingByTime" : "نمایش براساس جدیدترین", "page": "صفحه {{page}}" }, + "withdrawStatus": { + "CREATED": "جاری شده", + "PROCESSING": "در حال انجام", + "CANCELED": "لغو شده", + "REJECTED": "رد شده", + "DONE": "انجام شده" + }, "TransactionHistory": { "buyAndSell" : "خرید و فروش", "buyAndSellTx" : "تاریخچه خرید و فروش", diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js index 4006d9f5..987df455 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js @@ -2,8 +2,8 @@ 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"; const History = () => { 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 index 7be73f96..315fd040 100644 --- 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 @@ -1,12 +1,11 @@ import React, {useEffect, useRef, useState} from 'react'; import classes from './WithdrawHistory.module.css' -import {useTranslation} from "react-i18next"; +import {Trans, useTranslation} from "react-i18next"; import {useSelector} from "react-redux"; -import {useGetBuyAndSellHistory, useGetWithdrawHistory} from "../../../../../../../../../../queries"; +import {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"; @@ -21,17 +20,19 @@ const WithdrawHistory = () => { 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} = useGetWithdrawHistory(query); + console.log("data in withdraw:" , data) + const pagination = { page: (query.offset / query.limit) + 1, isLastPage: data?.length < query.limit @@ -45,8 +46,9 @@ const WithdrawHistory = () => { 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) => { @@ -54,7 +56,7 @@ const WithdrawHistory = () => { }) coins.forEach((o) => { - coinsOptions.push({value: o, label: t('currency.' + o)}) + currenciesOptions.push({value: o, label: t('currency.' + o)}) }) @@ -129,56 +131,42 @@ const WithdrawHistory = () => {
- {/* setQuery({...query, coin: e.value, offset:0})} - customClass={`width-24 ${classes.thisInput}`} - /> 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}`} + /> { 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}`} /> - ]} - lead={t('TransactionHistory.period')} + lead={t('history.period')} type="input" onChange={startDateHandler} /*value={[query.startTime, query.endTime]}*/ @@ -188,34 +176,35 @@ const WithdrawHistory = () => { hideOnScroll dataPanelPosition="Bottom" position={`${i18n.language === "fa" ? "bottom-left" : "bottom-right" }`} - customClass={`width-30 ${classes.thisInput}`} + customClass={`width-20 ${classes.thisInput} ${classes.datePicker} `} /> - -
- {t("TransactionHistory.ascendingByTime")} +
+ {t("history.ascendingByTime")} setQuery(prevState => {return { ...prevState, ascendingByTime: !prevState.ascendingByTime }}) } - - /*onchange={()=> setQuery({ - ...query, - ascendingByTime: (prevState => !prevState)} - )}*/ checked={!query?.ascendingByTime}/>
-

{t("TransactionHistory.withdrawTx")}

-
+
{periodTextHandler()}
+ { data?.length !== 0 && + + }
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 index 7579db6f..ec46933b 100644 --- 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 @@ -14,4 +14,18 @@ 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/WithdrawHistoryTable/WithdrawHistoryTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/components/WithdrawHistoryTable/WithdrawHistoryTable.js index 62a7f34f..00aed449 100644 --- 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 @@ -1,101 +1,114 @@ -import React from 'react'; +import React, {useState} 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"; +import Icon from "../../../../../../../../../../components/Icon/Icon"; const WithdrawHistoryTable = ({txs, offset}) => { - const {t} = useTranslation(); + const [isOpen, setIsOpen] = useState(false); + - 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"); - } - }; + const {t} = useTranslation(); 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")} + {t("history.currency")} + + {t("DepositWithdraw.network")} + {t("history.amount")} + {t("history.fee")} + {t("history.status")} + + {t("history.destAddress")} + {t("history.withdrawId")} + {t("history.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} - +
isOpen === index ? setIsOpen(null) : setIsOpen(index)}> - + - {moment(tr.applyTime).format("HH:mm:ss")} - - - { t("TransactionCategory.WITHDRAW")} + {moment.utc(tr.createDate).local().format("HH:mm:ss")} - {t("currency." + tr.coin )} + {t("currency." + tr.destSymbol )} - - {tr.network} + + {tr.destNetwork} - - + {new BN(tr?.amount).toFormat()} - - {txStatus(tr.status)} + + {new BN(tr?.appliedFee).toFormat()} - - {tr.address} + + + {t("withdrawStatus." + tr.status )} - - {tr.txId} + + {tr.destAddress} + + + {tr.withdrawId} + + isOpen === index ? setIsOpen(null) : setIsOpen(index)}> + - - - -
+ {isOpen === index &&
+
+ {t("history.acceptDate")} + + { + tr.acceptDate ? <> + + - {moment.utc(tr.acceptDate).local().format("HH:mm:ss")} + : "- - -" + } + + +
+
+ {t("history.transactionRef")} + + {tr?.destTransactionRef ?? "- - -"} + +
+
+ {t("history.statusReason")} + + {tr?.statusReason ?? "- - -"} + +
+ +
} +
diff --git a/src/queries/hooks/useGetTransactionsHistory.js b/src/queries/hooks/useGetTransactionsHistory.js index 19f630c3..6f5d5d6c 100644 --- a/src/queries/hooks/useGetTransactionsHistory.js +++ b/src/queries/hooks/useGetTransactionsHistory.js @@ -2,6 +2,8 @@ import {useQuery} from "@tanstack/react-query"; import {getTransactionsHistory} from "js-api-client"; export const useGetTransactionsHistory = (query) => { + + console.log("query", query) return useQuery( ['transactionsHistory', query.currency, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime], () => getTransactionsHistoryFunc(query), diff --git a/src/queries/hooks/useGetWithdrawHistory.js b/src/queries/hooks/useGetWithdrawHistory.js index 281cb503..a488aa09 100644 --- a/src/queries/hooks/useGetWithdrawHistory.js +++ b/src/queries/hooks/useGetWithdrawHistory.js @@ -1,13 +1,14 @@ import {useQuery} from "@tanstack/react-query"; import {getBuyAndSellHistory, getWithdrawHistory} from "js-api-client/client/txs"; import {useSelector} from "react-redux"; +import axios from "axios"; export const useGetWithdrawHistory = (query) => { const user_id = useSelector((state) => state.auth.id) return useQuery( - ['withdrawHistory', user_id, query.coin, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime], + ['withdrawHistory', user_id, query.currency, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime], () => getWithdrawHistoryFunc(query), { retry: 1, @@ -17,6 +18,6 @@ export const useGetWithdrawHistory = (query) => { } const getWithdrawHistoryFunc = async (query) => { - const {data} = await getWithdrawHistory(query) + const {data} = await axios.post(`/wallet/withdraw/history`, query) return data; } From 2cbd352d60e8238acee445e49f675856af09ee2a Mon Sep 17 00:00:00 2001 From: Hossein Date: Mon, 23 Sep 2024 19:14:46 +0330 Subject: [PATCH 2/3] #216: Change deposit services --- public/assets/locales/fa/translation.json | 6 ++ .../DepositHistory/DepositHistory.js | 80 ++++++++----------- .../DepositHistory/DepositHistory.module.css | 13 +++ .../DepositHistoryTable.js | 60 +++++--------- .../WithdrawHistory/WithdrawHistory.js | 4 +- .../WithdrawHistory.module.css | 1 - .../WithdrawHistoryTable.js | 21 +---- .../DepositWithdraw/components/Withdrawal.js | 5 -- src/queries/hooks/useGetDepositHistory.js | 16 ++-- .../hooks/useGetTransactionsHistory.js | 2 - 10 files changed, 82 insertions(+), 126 deletions(-) diff --git a/public/assets/locales/fa/translation.json b/public/assets/locales/fa/translation.json index de972114..b5ddd99a 100644 --- a/public/assets/locales/fa/translation.json +++ b/public/assets/locales/fa/translation.json @@ -251,6 +251,8 @@ "transactionsHistory": "تاریخچه تراکنش ها", "deposit": "واریز", "withdraw": "برداشت", + "withdrawHistory" : "تاریخچه برداشت", + "depositHistory" : "تاریخچه واریز", "balance": "موجودی", "amount": "مقدار", "network": "شبکه", @@ -261,6 +263,7 @@ "acceptDate": "تاریخ و زمان بررسی درخواست", "transactionRef": "شناسه تراکنش", "statusReason": "توضیح وضعیت", + "type": "نوع واریز", "balanceChange": "تغییر موجودی", "currency" : "ارز", "category" : "نوع تراکنش", @@ -270,6 +273,9 @@ "ascendingByTime" : "نمایش براساس جدیدترین", "page": "صفحه {{page}}" }, + "depositStatus": { + "DONE": "انجام شده" + }, "withdrawStatus": { "CREATED": "جاری شده", "PROCESSING": "در حال انجام", 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 index 09ddbe81..465d475f 100644 --- 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 @@ -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,8 +45,9 @@ 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) => { @@ -56,7 +55,7 @@ const DepositHistory = () => { }) 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 = () => {
- {/* setQuery({...query, coin: e.value, offset:0})} - customClass={`width-24 ${classes.thisInput}`} - /> 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}`} + /> { 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}`} /> - ]} - 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} `} /> - -
- {t("TransactionHistory.ascendingByTime")} +
+ {t("history.ascendingByTime")} setQuery(prevState => {return { ...prevState, ascendingByTime: !prevState.ascendingByTime }}) } - - /*onchange={()=> setQuery({ - ...query, - ascendingByTime: (prevState => !prevState)} - )}*/ checked={!query?.ascendingByTime}/>
-
-

{t("TransactionHistory.depositTx")}

-
+

{t("history.depositHistory")}

+
{periodTextHandler()}
+ { data?.length !== 0 && + + }
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 index 7579db6f..cb90da0a 100644 --- 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 @@ -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; } \ 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 index ebe88ec9..1e070d7a 100644 --- 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 @@ -10,79 +10,55 @@ 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")} - + {t("history.currency")} + {t("DepositWithdraw.network")} + {t("history.amount")} + {t("history.status")} + {t("history.transactionRef")} + {t("history.type")}
); 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")} + {moment.utc(tr.createDate).local().format("HH:mm:ss")} - + {t("currency." + tr.currency )} - - {tr.network} + + {tr.network ?? "- - -"} - - + {new BN(tr?.amount).toFormat()} - - {t("orderStatus.DONE")} + + {t("depositStatus." + tr.status )} - - {tr.depositType} + + {tr?.transactionRef ?? "- - -"} + + + {tr.type} - - - - -
-
- - - ) })} 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 index 315fd040..0a5333e4 100644 --- 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 @@ -31,8 +31,6 @@ const WithdrawHistory = () => { const {data, isLoading, error, refetch} = useGetWithdrawHistory(query); - console.log("data in withdraw:" , data) - const pagination = { page: (query.offset / query.limit) + 1, isLastPage: data?.length < query.limit @@ -193,7 +191,7 @@ const WithdrawHistory = () => {
-

{t("TransactionHistory.withdrawTx")}

+

{t("history.withdrawHistory")}

{periodTextHandler()}
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 index ec46933b..cb90da0a 100644 --- 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 @@ -16,7 +16,6 @@ cursor: not-allowed; } - .thisInput :global(.lead) { width: 30%; } 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 index 00aed449..9d5d6b5e 100644 --- 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 @@ -1,7 +1,6 @@ import React, {useState} 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"; @@ -11,21 +10,17 @@ const WithdrawHistoryTable = ({txs, offset}) => { const [isOpen, setIsOpen] = useState(false); - const {t} = useTranslation(); let head = (
{t("date")} {t("time")} - {t("history.currency")} - {t("DepositWithdraw.network")} {t("history.amount")} {t("history.fee")} {t("history.status")} - {t("history.destAddress")} {t("history.withdrawId")} {t("history.details")} @@ -35,11 +30,8 @@ const WithdrawHistoryTable = ({txs, offset}) => { let body = ( <> {txs.map((tr, index) => { - return ( -
-
isOpen === index ? setIsOpen(null) : setIsOpen(index)}> @@ -49,7 +41,7 @@ const WithdrawHistoryTable = ({txs, offset}) => { - {t("currency." + tr.destSymbol )} + {t("currency." + tr.currency )} @@ -80,7 +72,6 @@ const WithdrawHistoryTable = ({txs, offset}) => {
- {isOpen === index &&
{t("history.acceptDate")} @@ -91,7 +82,6 @@ const WithdrawHistoryTable = ({txs, offset}) => { - {moment.utc(tr.acceptDate).local().format("HH:mm:ss")} : "- - -" } -
@@ -106,22 +96,13 @@ const WithdrawHistoryTable = ({txs, offset}) => { {tr?.statusReason ?? "- - -"}
-
} -
- - - ) })} ); - - - - return ( <> {head} diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Withdrawal.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Withdrawal.js index 89e7ec48..0ddfab92 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Withdrawal.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Withdrawal.js @@ -63,9 +63,6 @@ const Withdrawal = () => { } } - console.log("currencyInfo?.chains[networkName.value]?.network", currencyInfo?.chains[networkName.value]?.network) - console.log("currencyInfo?.chains[networkName.value]?.currency", currencyInfo?.chains[networkName.value]?.currency) - const sendWithdrawHandler = async (e) => { e.preventDefault() if (isLoading) return @@ -99,8 +96,6 @@ const Withdrawal = () => { getUserAssetsEstimatedValue() }) .catch((error) => { - - console.log("error", error) toast.error(t('error')); }) .finally(() => setIsLoading(false)) diff --git a/src/queries/hooks/useGetDepositHistory.js b/src/queries/hooks/useGetDepositHistory.js index f141ac9e..522709a3 100644 --- a/src/queries/hooks/useGetDepositHistory.js +++ b/src/queries/hooks/useGetDepositHistory.js @@ -1,11 +1,15 @@ import {useQuery} from "@tanstack/react-query"; import {getBuyAndSellHistory, getDepositHistory, getWithdrawHistory} from "js-api-client/client/txs"; +import axios from "axios"; +import {useSelector} from "react-redux"; -export const useGetDepositHistory = (user_id, query) => { +export const useGetDepositHistory = (query) => { + + const user_id = useSelector((state) => state.auth.id) return useQuery( - ['depositHistory', user_id, query.coin, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime], - () => getDepositHistoryFunc(user_id, query), + ['depositHistory', user_id, query.currency, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime], + () => getDepositHistoryFunc(query), { retry: 1, staleTime: 5000, @@ -13,7 +17,7 @@ export const useGetDepositHistory = (user_id, query) => { }); } -const getDepositHistoryFunc = async (user_id, query) => { - const {data} = await getDepositHistory(user_id, query) - return data?.deposits; +const getDepositHistoryFunc = async (query) => { + const {data} = await axios.post(`/wallet/v1/deposit/history`, query) + return data; } diff --git a/src/queries/hooks/useGetTransactionsHistory.js b/src/queries/hooks/useGetTransactionsHistory.js index 6f5d5d6c..19f630c3 100644 --- a/src/queries/hooks/useGetTransactionsHistory.js +++ b/src/queries/hooks/useGetTransactionsHistory.js @@ -2,8 +2,6 @@ import {useQuery} from "@tanstack/react-query"; import {getTransactionsHistory} from "js-api-client"; export const useGetTransactionsHistory = (query) => { - - console.log("query", query) return useQuery( ['transactionsHistory', query.currency, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime], () => getTransactionsHistoryFunc(query), From 6b7586a7347b3a6478f1808b71f95381b3ebfa18 Mon Sep 17 00:00:00 2001 From: Hossein Date: Tue, 24 Sep 2024 16:48:55 +0330 Subject: [PATCH 3/3] #216: Change deposit and withdraw txs comp --- public/assets/locales/en/translation.json | 34 +++- public/assets/locales/fa/translation.json | 27 ++- .../UserPanel/Sections/Content/Content.js | 7 +- .../Content/components/History/History.js | 35 +++- .../WithdrawHistoryTable.js | 4 +- .../Content/components/Wallet/Wallet.js | 6 +- .../Wallet/components/DepositTx/DepositTx.js | 63 +++++++ .../components/DepositTx/DepositTx.module.css | 4 + .../DepositTxTable/DepositTxTable.js | 85 +++++++++ .../DepositTxTable/DepositTxTable.module.css | 6 + .../DepositWithdraw/components/Withdrawal.js | 19 +- .../DepositWithdrawTx/DepositWithdrawTx.js | 39 +--- .../components/WithdrawTx/WithdrawTx.js | 63 +++++++ .../WithdrawTx/WithdrawTx.module.css | 4 + .../WithdrawTxTable/WithdrawTxTable.js | 172 ++++++++++++++++++ .../WithdrawTxTable.module.css | 11 ++ .../Pages/UserPanel/Sections/Header/Header.js | 2 +- .../UserPanel/Sections/MainMenu/MainMenu.js | 33 +--- src/main/Browser/Pages/UserPanel/UserPanel.js | 2 +- src/main/Browser/Routes/routes.js | 11 +- src/queries/hooks/useGetDepositHistory.js | 2 +- src/queries/hooks/useGetWithdrawHistory.js | 2 +- yarn.lock | 4 +- 23 files changed, 539 insertions(+), 96 deletions(-) create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTx/DepositTx.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTx/DepositTx.module.css create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTxTable/DepositTxTable.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTxTable/DepositTxTable.module.css create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx.module.css create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTxTable/WithdrawTxTable.js create mode 100644 src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTxTable/WithdrawTxTable.module.css diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json index ae4efc8a..0d783c70 100644 --- a/public/assets/locales/en/translation.json +++ b/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", diff --git a/public/assets/locales/fa/translation.json b/public/assets/locales/fa/translation.json index b5ddd99a..a93a1eaf 100644 --- a/public/assets/locales/fa/translation.json +++ b/public/assets/locales/fa/translation.json @@ -254,6 +254,14 @@ "withdrawHistory" : "تاریخچه برداشت", "depositHistory" : "تاریخچه واریز", "balance": "موجودی", + "balanceChange": "تغییر موجودی", + "currency" : "ارز", + "category" : "نوع تراکنش", + "size" : "تعداد", + "period" : "بازه زمانی", + "status" : "وضعیت", + "ascendingByTime" : "نمایش براساس جدیدترین", + "page": "صفحه {{page}}", "amount": "مقدار", "network": "شبکه", "details": "جزئیات", @@ -263,15 +271,7 @@ "acceptDate": "تاریخ و زمان بررسی درخواست", "transactionRef": "شناسه تراکنش", "statusReason": "توضیح وضعیت", - "type": "نوع واریز", - "balanceChange": "تغییر موجودی", - "currency" : "ارز", - "category" : "نوع تراکنش", - "size" : "تعداد", - "period" : "بازه زمانی", - "status" : "وضعیت", - "ascendingByTime" : "نمایش براساس جدیدترین", - "page": "صفحه {{page}}" + "type": "نوع واریز" }, "depositStatus": { "DONE": "انجام شده" @@ -391,6 +391,15 @@ "cancel": "لغو", "cancelPayment": "عملیات واریز لغو شد!" }, + "DepositTx": { + "title": "10 تراکنش آخر واریز {{currency}}", + "showAll": "نمایش همه" + }, + "WithdrawTx": { + "title": "10 تراکنش آخر برداشت {{currency}}", + "cancelWithdrawReq": "لغو درخواست برداشت", + "cancelWithdrawReqSuccess": "درخواست برداشت با موفقیت لغو شد" + }, "transactionType": { "deposit": "واریز", "withdrawal": "برداشت", diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js b/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js index 57a27cdf..92d2cf38 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/Content.js @@ -26,14 +26,17 @@ const Content = () => { }/> }/> }/> - }/> - }/> + }/> } /> + } + /> } diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js index 987df455..257071bd 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/History/History.js @@ -4,6 +4,10 @@ import {useTranslation} from "react-i18next"; import Transactions from "./components/Transactions/Transactions"; 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 = () => {
- setActiveTx("transactions")}>{t("history.transactions")} - setActiveTx("deposit")}>{t("history.deposit")} - setActiveTx("withdraw")}>{t("history.withdraw")} + + 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")} + + + 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")} + + + 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")} +
- {content()} + + }/> + }/> + }/> + }/> +
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 index 9d5d6b5e..e80af9c9 100644 --- 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 @@ -17,7 +17,7 @@ const WithdrawHistoryTable = ({txs, offset}) => { {t("date")} {t("time")} {t("history.currency")} - {t("DepositWithdraw.network")} + {t("history.network")} {t("history.amount")} {t("history.fee")} {t("history.status")} @@ -72,7 +72,7 @@ const WithdrawHistoryTable = ({txs, offset}) => {
- {isOpen === index &&
+ {isOpen === index &&
{t("history.acceptDate")} diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/Wallet.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/Wallet.js index 224c779b..8db18ea2 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/Wallet.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/Wallet.js @@ -17,12 +17,12 @@ const Wallet = () => {
-
+ {id === "IRT" ?

{t("DepositWithdrawTx.title")}

- {id === "IRT" ? : } -
+ +
: }
diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTx/DepositTx.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTx/DepositTx.js new file mode 100644 index 00000000..ffed24e3 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTx/DepositTx.js @@ -0,0 +1,63 @@ +import React from 'react'; +import classes from './DepositTx.module.css'; +import {Link, useParams} from "react-router-dom"; +import {Trans, useTranslation} from "react-i18next"; +import {useGetDepositHistory} from "../../../../../../../../../../queries"; +import Loading from "../../../../../../../../../../components/Loading/Loading"; +import Error from "../../../../../../../../../../components/Error/Error"; +import DepositTxTable from "../DepositTxTable/DepositTxTable"; +import * as Routes from "../../../../../../../../Routes/routes"; +import Icon from "../../../../../../../../../../components/Icon/Icon"; +import i18n from "i18next"; + +const DepositTx = () => { + + const {id} = useParams(); + const {t} = useTranslation(); + + const query = { + "currency": id, // 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(query); + + + const content = () => { + if (isLoading) return
+ if (error) return
+ if (data?.length === 0) return
{t("noTx")}
+ else return <> + + + } + + return ( +
+
+

+ +

+ + {t("DepositTx.showAll")} + + +
+ {content()} +
+ ); +}; + +export default DepositTx; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTx/DepositTx.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTx/DepositTx.module.css new file mode 100644 index 00000000..c2fab059 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTx/DepositTx.module.css @@ -0,0 +1,4 @@ +.container { + /*height: 60vh;*/ + border-radius: 9px; +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTxTable/DepositTxTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTxTable/DepositTxTable.js new file mode 100644 index 00000000..84fe5a5b --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTxTable/DepositTxTable.js @@ -0,0 +1,85 @@ +import React, {useState} from 'react'; +import classes from './DepositTxTable.module.css'; +import {useTranslation} from "react-i18next"; +import Date from "../../../../../../../../../../components/Date/Date"; +import moment from "moment-jalaali"; +import {BN} from "../../../../../../../../../../utils/utils"; +import Icon from "../../../../../../../../../../components/Icon/Icon"; + +const DepositTxTable = ({txs}) => { + + const {t} = useTranslation(); + + const [isOpen, setIsOpen] = useState(false); + + let head = ( +
+ {t("date")} + {t("time")} + {t("history.network")} + {t("history.amount")} + {t("history.status")} + {t("history.details")} + +
+ ); + let body = ( + <> + {txs.map((tr, index) => { + return ( +
+ +
isOpen === index ? setIsOpen(null) : setIsOpen(index)}> + + + + + {moment.utc(tr.createDate).local().format("HH:mm:ss")} + + + + {tr.network ?? "- - -"} + + + + {new BN(tr?.amount).toFormat()} + + + + {t("depositStatus." + tr.status )} + + isOpen === index ? setIsOpen(null) : setIsOpen(index)}> + + +
+ {isOpen === index &&
+
+ {t("history.transactionRef")} + + {tr?.transactionRef ?? "- - -"} + +
+
+ {t("history.type")} + + {tr.type} + +
+
} +
+ ) + })} + + ); + + return ( + <> + {head} + {body} + + ); +}; + +export default DepositTxTable; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTxTable/DepositTxTable.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTxTable/DepositTxTable.module.css new file mode 100644 index 00000000..c6570126 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositTxTable/DepositTxTable.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/Wallet/components/DepositWithdraw/components/Withdrawal.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Withdrawal.js index 0ddfab92..9922bf73 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Withdrawal.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdraw/components/Withdrawal.js @@ -13,7 +13,7 @@ import {useGetUserAccount} from "../../../../../../../../../../../queries/hooks/ import { useGetCurrencyInfo, useGetUserAssets, - useGetUserAssetsEstimatedValue, + useGetUserAssetsEstimatedValue, useGetWithdrawHistory, useWithdrawTxs } from "../../../../../../../../../../../queries"; import Loading from "../../../../../../../../../../../components/Loading/Loading"; @@ -36,10 +36,22 @@ const Withdrawal = () => { }, [id]); const {refetch: getUserAccount} = useGetUserAccount(); - const {refetch: getWithdrawTxs} = useWithdrawTxs(id); + /*const {refetch: getWithdrawTxs} = useWithdrawTxs(id);*/ const {refetch: getUserAssets} = useGetUserAssets("IRT"); const {refetch: getUserAssetsEstimatedValue} = useGetUserAssetsEstimatedValue("IRT"); + const query = { + "currency": id, // 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 {refetch: getWithdrawHistory} = useGetWithdrawHistory(query); + const {data: userAccount} = useGetUserAccount() const freeAmount = userAccount?.wallets[id]?.free || 0 @@ -91,7 +103,8 @@ const Withdrawal = () => { }} />); getUserAccount() - getWithdrawTxs() + /*getWithdrawTxs()*/ + getWithdrawHistory() getUserAssets() getUserAssetsEstimatedValue() }) diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdrawTx/DepositWithdrawTx.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdrawTx/DepositWithdrawTx.js index 08cc8753..dcfd74f6 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdrawTx/DepositWithdrawTx.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/DepositWithdrawTx/DepositWithdrawTx.js @@ -1,38 +1,13 @@ -import React, {useLayoutEffect, useState} from "react"; -import {useTranslation} from "react-i18next"; -import ScrollBar from "../../../../../../../../../../components/ScrollBar"; -import {useParams} from "react-router-dom"; -import Loading from "../../../../../../../../../../components/Loading/Loading"; -import Error from "../../../../../../../../../../components/Error/Error"; -import DepositWithdrawTxTables from "./components/DepositWithdrawTxTables/DepositWithdrawTxTables"; -import {useDepositTxs, useWithdrawTxs} from "../../../../../../../../../../queries"; +import React from "react"; +import DepositTx from "../DepositTx/DepositTx"; +import WithdrawTx from "../WithdrawTx/WithdrawTx"; const DepositWithdrawTx = () => { - const {id} = useParams(); - const {t} = useTranslation(); - const [txs, setTxs] = useState([]); - - const {data: deposit, isLoading: depositIsLoading, error: depositError} = useDepositTxs(id); - const {data: withdraw, isLoading: withdrawIsLoading, error: withdrawError} = useWithdrawTxs(id); - - useLayoutEffect(() => { - if (!deposit || !withdraw) { - return - } - const newTxs = [...deposit, ...withdraw]; - setTxs(newTxs.sort((a, b) => b.time - a.time)) - - }, [deposit, withdraw]); - - if (depositIsLoading || withdrawIsLoading) return - if (depositError || withdrawError) return - - if (txs.length === 0) return
{t("noTx")}
- return ( - - - +
+ + +
) }; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx.js new file mode 100644 index 00000000..1fac782a --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx.js @@ -0,0 +1,63 @@ +import React from 'react'; +import classes from './WithdrawTx.module.css'; +import {Link, useParams} from "react-router-dom"; +import {Trans, useTranslation} from "react-i18next"; +import {useGetDepositHistory, useGetWithdrawHistory} from "../../../../../../../../../../queries"; +import Loading from "../../../../../../../../../../components/Loading/Loading"; +import Error from "../../../../../../../../../../components/Error/Error"; +import DepositTxTable from "../DepositTxTable/DepositTxTable"; +import WithdrawTxTable from "../WithdrawTxTable/WithdrawTxTable"; +import * as Routes from "../../../../../../../../Routes/routes"; +import Icon from "../../../../../../../../../../components/Icon/Icon"; +import i18n from "i18next"; + +const WithdrawTx = () => { + + const {id} = useParams(); + const {t} = useTranslation(); + + const query = { + "currency": id, // 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 content = () => { + if (isLoading) return
+ if (error) return
+ if (data?.length === 0) return
{t("noTx")}
+ else return <> + + + } + + return ( +
+
+

+ +

+ + {t("DepositTx.showAll")} + + +
+ {content()} +
+ ); +}; + +export default WithdrawTx; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx.module.css new file mode 100644 index 00000000..c2fab059 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx.module.css @@ -0,0 +1,4 @@ +.container { + /*height: 60vh;*/ + border-radius: 9px; +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTxTable/WithdrawTxTable.js b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTxTable/WithdrawTxTable.js new file mode 100644 index 00000000..19113641 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTxTable/WithdrawTxTable.js @@ -0,0 +1,172 @@ +import React, {useState} from 'react'; +import classes from './WithdrawTxTable.module.css'; +import {useTranslation} from "react-i18next"; +import Date from "../../../../../../../../../../components/Date/Date"; +import moment from "moment-jalaali"; +import {BN} from "../../../../../../../../../../utils/utils"; +import Icon from "../../../../../../../../../../components/Icon/Icon"; +import Button from "../../../../../../../../../../components/Button/Button"; +import {images} from "../../../../../../../../../../assets/images"; +import {cancelWithdrawReq} from "js-api-client/client/withdraw"; +import toast from "react-hot-toast"; +import {useGetWithdrawHistory} from "../../../../../../../../../../queries"; +import {useParams} from "react-router-dom"; + +const WithdrawTxTable = ({txs}) => { + + const {t} = useTranslation(); + + const [isOpen, setIsOpen] = useState(false); + + const [isLoading, setIsLoading] = useState(false) + + + const {id} = useParams(); + + const query = { + "currency": id, // 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 {refetch} = useGetWithdrawHistory(query); + + + const cancelWithdrawReqButtonTextHandler = () => { + if (isLoading) return linearLoading + return t('WithdrawTx.cancelWithdrawReq') + } + + const cancelWithdrawReqFunc = (withdrawId) => { + + if (isLoading) return + setIsLoading(true) + + cancelWithdrawReq(withdrawId) + .then(() => { + toast.success(t('WithdrawTx.cancelWithdrawReqSuccess')); + refetch() + }) + .catch((error) => { + toast.error(t('error')); + }) + .finally(() => setIsLoading(false)) + + } + + let head = ( +
+ {t("date")} + {t("time")} + {t("history.network")} + {t("history.amount")} + {t("history.status")} + {t("history.details")} + +
+ ); + let body = ( + <> + {txs.map((tr, index) => { + return ( +
+ +
isOpen === index ? setIsOpen(null) : setIsOpen(index)}> + + + + + {moment.utc(tr.createDate).local().format("HH:mm:ss")} + + + + {tr.destNetwork ?? "- - -"} + + + + + + {new BN(tr?.amount).toFormat()} + + + + {t("withdrawStatus." + tr.status )} + + isOpen === index ? setIsOpen(null) : setIsOpen(index)}> + + +
+ {isOpen === index &&
+
+ {t("history.fee")} + + {new BN(tr?.appliedFee).toFormat()} + +
+
+ {t("history.destAddress")} + + {tr.destAddress} + +
+
+ {t("history.withdrawId")} + + {tr.withdrawId} + +
+
+ {t("history.acceptDate")} + + { + tr.acceptDate ? <> + + - {moment.utc(tr.acceptDate).local().format("HH:mm:ss")} + : "- - -" + } + +
+
+ {t("history.transactionRef")} + + {tr?.destTransactionRef ?? "- - -"} + +
+
+ {t("history.statusReason")} + + {tr?.statusReason ?? "- - -"} + +
+ { tr.status === "CREATED" &&
+
} +
} +
+ ) + })} + + ); + + + return ( + <> + {head} + {body} + + ); +}; + +export default WithdrawTxTable; diff --git a/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTxTable/WithdrawTxTable.module.css b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTxTable/WithdrawTxTable.module.css new file mode 100644 index 00000000..2271d245 --- /dev/null +++ b/src/main/Browser/Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTxTable/WithdrawTxTable.module.css @@ -0,0 +1,11 @@ +.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; +} + +.thisButton { + width: 100%; + background-color: var(--darkRed); +} \ No newline at end of file diff --git a/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js b/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js index 329c13c3..0b3036de 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js +++ b/src/main/Browser/Pages/UserPanel/Sections/Header/Header.js @@ -39,7 +39,7 @@ const Header = () => { }> {t("txHistory.title")}}/> - {t("history.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 b5653996..f612debb 100644 --- a/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js +++ b/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js @@ -25,20 +25,6 @@ const MainMenu = () => {
- {/* - isActive ? classes.selected : undefined - } - onClick={() => setShowMessages(false)} - data-tooltip-id="opex-tooltip" - data-tooltip-place="left" - data-tooltip-float={true} - data-tooltip-html={`${t( - "home", - )}`}> - - */} { )}`}> - - {/* - isActive ? classes.selected : undefined - } - onClick={() => setShowMessages(false)} - data-tooltip-id="opex-tooltip" - data-tooltip-place="left" - data-tooltip-float={true} - data-tooltip-html={` - ${t( - "txHistory.title", - )}`}> - - */} - @@ -142,7 +111,7 @@ const MainMenu = () => { data-tooltip-id="opex-tooltip" data-tooltip-place="left" data-tooltip-float={true} data-tooltip-html={`${t("messages.title")}`}> */} isActive ? classes.selected : undefined } diff --git a/src/main/Browser/Pages/UserPanel/UserPanel.js b/src/main/Browser/Pages/UserPanel/UserPanel.js index a0230016..c43f5955 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.History) + const isTxHistoryPage = useMatch(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 6e077fc1..7ece26c0 100644 --- a/src/main/Browser/Routes/routes.js +++ b/src/main/Browser/Routes/routes.js @@ -1,3 +1,5 @@ +import WithdrawTx from "../Pages/UserPanel/Sections/Content/components/Wallet/components/WithdrawTx/WithdrawTx"; + export const Landing = "/"; export const Panel = "/panel"; export const Login = "/login"; @@ -19,11 +21,16 @@ export const UserForgetPasswordRelative = "forget-password"; export const TxHistory = "/panel/transaction-history"; 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 Transactions = "/panel/history/transactions"; +export const TransactionsRelative = "/transactions"; +export const Withdraw = "/panel/history/withdraw"; +export const WithdrawRelative = "/withdraw"; +export const Deposit = "/panel/history/deposit"; +export const DepositRelative = "/deposit"; diff --git a/src/queries/hooks/useGetDepositHistory.js b/src/queries/hooks/useGetDepositHistory.js index 522709a3..17488820 100644 --- a/src/queries/hooks/useGetDepositHistory.js +++ b/src/queries/hooks/useGetDepositHistory.js @@ -18,6 +18,6 @@ export const useGetDepositHistory = (query) => { } const getDepositHistoryFunc = async (query) => { - const {data} = await axios.post(`/wallet/v1/deposit/history`, query) + const {data} = await getDepositHistory(query) return data; } diff --git a/src/queries/hooks/useGetWithdrawHistory.js b/src/queries/hooks/useGetWithdrawHistory.js index a488aa09..56de52bb 100644 --- a/src/queries/hooks/useGetWithdrawHistory.js +++ b/src/queries/hooks/useGetWithdrawHistory.js @@ -18,6 +18,6 @@ export const useGetWithdrawHistory = (query) => { } const getWithdrawHistoryFunc = async (query) => { - const {data} = await axios.post(`/wallet/withdraw/history`, query) + const {data} = await getWithdrawHistory(query) return data; } diff --git a/yarn.lock b/yarn.lock index fe54d3d7..245ad7d2 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=217ac93076c92fcedc157de8c949a9fdf7e9829d" - checksum: d9e88f2be37d4e8501d48a9986ea7e7d2ef4320752c92bcc12ed98d4bcaca3bb813bbc7cbc65a4f0ad9757b1cb181293c2c780201e787624d7f83fb37f70ce35 + resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=c352c8f2dc8f7d225090061d519ae579278ae960" + checksum: 61b0c4519dfd1dd0092d417d6cc28e7b97c0c425da37506c2a7c35d94db72e57bf1956787614cbc7059111f8438675a3b3745e50e5dd0b68b027ff8032d07069 languageName: node linkType: hard