{
+
+ const {t} = useTranslation();
+
+ const [activeTx, setActiveTx] = useState("buyAndSell")
+
+
+ const content = () => {
+ if (activeTx === "buyAndSell") return
+ if (activeTx === "deposit") return
+ if (activeTx === "withdraw") return
+ }
+
+ return (<>
+
+
+
+
+
+
+
+ setActiveTx("buyAndSell")}>{t("TransactionHistory.buyAndSell")}
+ setActiveTx("deposit")}>{t("TransactionCategory.DEPOSIT")}
+ setActiveTx("withdraw")}>{t("TransactionCategory.WITHDRAW")}
+
+
+
+ {content()}
+
+
+
+
+
+
+
+
+
+ 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.buyAndSellTx")}
+
+ {periodTextHandler()}
+
+
+
+
+
+
+
+
+
+
+
+ {content()}
+
+
+
+
+
+
+
+
+
+
+ {t("row")}
+ {t("date")}
+ {t("time")}
+ {t("TransactionHistory.category")}
+ {t("TransactionHistory.coin")}
+ {t("pricePerUnit")}
+ {t("volume")}
+ {t("totalPrice")}
+ {t("TransactionCategory.FEE")}
+ {/*{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(tr.createDate).format("HH:mm:ss")}
+
+
+ {tr?.side === "BID" && t("buy")}
+ {tr?.side === "ASK" && t("sell")}
+
+
+
+ {t("currency." + tr.symbol )}
+
+
+ {new BN(tr?.matchedPrice).toFormat()}
+
+
+ {new BN(tr?.volume).toFormat()}
+
+
+ {new BN(tr?.transactionPrice).toFormat()}
+
+
+ {new BN(tr?.fee).toFormat()}
+
+
+
+
+
+
+
+
+
+ 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()}
+
+
+
+
+
+
+
+
+
+
+ {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}
+
+
+
+
+
+
+
+
+
+ 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()}
+
+
+
+
+
+
+
+
+
+
+ {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}
+
+
+
+
+
+
+
+
+
}>
- {t("txHistory.title")}}/>
+ {t("txHistory.title")}}/>
}/>
}/>
diff --git a/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js b/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js
index cb76f448..12055d07 100644
--- a/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js
+++ b/src/main/Browser/Pages/UserPanel/Sections/MainMenu/MainMenu.js
@@ -6,6 +6,7 @@ import {useTranslation} from "react-i18next";
import MessagesSubMenu from "../SubMenu/components/MessagesSubMenu/MessagesSubMenu";
import Icon from "../../../../../../components/Icon/Icon";
import {toAbsoluteUrl} from "../../../../../../utils/utils";
+import {Transactions} from "../../../../Routes/routes";
const MainMenu = () => {
@@ -85,7 +86,7 @@ const MainMenu = () => {
isActive ? classes.selected : undefined
}
diff --git a/src/main/Browser/Pages/UserPanel/UserPanel.js b/src/main/Browser/Pages/UserPanel/UserPanel.js
index 84ce174e..bf98ff6a 100644
--- a/src/main/Browser/Pages/UserPanel/UserPanel.js
+++ b/src/main/Browser/Pages/UserPanel/UserPanel.js
@@ -8,11 +8,12 @@ import Info from "../../../../components/Info/Info";
import Content from "./Sections/Content/Content";
import {useSelector} from "react-redux";
import classes from "./UserPanel.module.css"
+import {Transactions} from "../../Routes/routes";
const UserPanel = () => {
const isLogin = useSelector((state) => state.auth.isLogin)
- const isTxHistoryPage = useMatch(RoutesName.TxHistory)
+ const isTxHistoryPage = useMatch(RoutesName.Transactions)
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 8554edd0..b40f668f 100644
--- a/src/main/Browser/Routes/routes.js
+++ b/src/main/Browser/Routes/routes.js
@@ -19,6 +19,9 @@ 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 Wallet = "/panel/wallet";
diff --git a/src/queries/hooks/useGetBuyAndSellHistory.js b/src/queries/hooks/useGetBuyAndSellHistory.js
new file mode 100644
index 00000000..46a384d1
--- /dev/null
+++ b/src/queries/hooks/useGetBuyAndSellHistory.js
@@ -0,0 +1,19 @@
+import {useQuery} from "@tanstack/react-query";
+import {getBuyAndSellHistory} from "js-api-client/client/txs";
+
+export const useGetBuyAndSellHistory = (user_id, query) => {
+
+ return useQuery(
+ ['buyAndSellHistory', user_id, query.coin, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime],
+ () => getBuyAndSellHistoryFunc(user_id, query),
+ {
+ retry: 1,
+ staleTime: 5000,
+ refetchInterval: 10000,
+ });
+}
+
+const getBuyAndSellHistoryFunc = async (user_id, query) => {
+ const {data} = await getBuyAndSellHistory(user_id, query)
+ return data?.transactions;
+}
diff --git a/src/queries/hooks/useGetDepositHistory.js b/src/queries/hooks/useGetDepositHistory.js
new file mode 100644
index 00000000..6a7f1552
--- /dev/null
+++ b/src/queries/hooks/useGetDepositHistory.js
@@ -0,0 +1,23 @@
+import {useQuery} from "@tanstack/react-query";
+import {getBuyAndSellHistory, getDepositHistory, getWithdrawHistory} from "js-api-client/client/txs";
+
+export const useGetDepositHistory = (user_id, query) => {
+
+ console.log("first query", query)
+
+ return useQuery(
+ ['depositHistory', user_id, query.coin, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime],
+ () => getDepositHistoryFunc(user_id, query),
+ {
+ retry: 1,
+ staleTime: 5000,
+ refetchInterval: 10000,
+ });
+}
+
+const getDepositHistoryFunc = async (user_id, query) => {
+
+ console.log("second query", query)
+ const {data} = await getDepositHistory(user_id, query)
+ return data?.deposits;
+}
diff --git a/src/queries/hooks/useGetWithdrawHistory.js b/src/queries/hooks/useGetWithdrawHistory.js
new file mode 100644
index 00000000..257b1702
--- /dev/null
+++ b/src/queries/hooks/useGetWithdrawHistory.js
@@ -0,0 +1,18 @@
+import {useQuery} from "@tanstack/react-query";
+import {getBuyAndSellHistory, getWithdrawHistory} from "js-api-client/client/txs";
+
+export const useGetWithdrawHistory = (user_id, query) => {
+ return useQuery(
+ ['withdrawHistory', user_id, query.coin, query.category, query.endTime, query.startTime, query.limit, query.offset, query.ascendingByTime],
+ () => getWithdrawHistoryFunc(user_id, query),
+ {
+ retry: 1,
+ staleTime: 5000,
+ refetchInterval: 10000,
+ });
+}
+
+const getWithdrawHistoryFunc = async (user_id, query) => {
+ const {data} = await getWithdrawHistory(user_id, query)
+ return data;
+}
diff --git a/src/queries/index.js b/src/queries/index.js
index 6af95379..591985ef 100644
--- a/src/queries/index.js
+++ b/src/queries/index.js
@@ -21,4 +21,7 @@ export {useGetUserOtpStatus} from "./hooks/useGetUserOtpStatus";
export {useGetKycStatus} from "./hooks/useGetKycStatus";
export {useGetFeeForSymbol} from "./hooks/useGetFeeForSymbol";
export {useGetUserAssets} from "./hooks/useGetUserAssets";
-export {useGetUserAssetsEstimatedValue} from "./hooks/useGetUserAssetsEstimatedValue";
\ No newline at end of file
+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
diff --git a/yarn.lock b/yarn.lock
index a831b18a..e8f8324f 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=754533374a6d8c61a80fe95122810b33229815d0"
- checksum: a97c02196681a0538c164fb3e0c8348eeee1a8a0fd984441ab257b9187675a4d7b71b16153dfc4f7399c7554fc94d1bdbb29d6422fd9c783b34130f1acd882e2
+ resolution: "js-api-client@https://github.com/opexdev/js-api-client.git#commit=f656e7d42c77db27600a6715dd21247f42e46317"
+ checksum: 9a1466e5bdd5c99c17bdfadb829ec9f1363eef1824c9769423ffaed1c84d97bf83d12f8fee61c2e468c5abd100206a65086d2173dcb9220c316524c7a3bbfae3
languageName: node
linkType: hard