From af5bf9743a4b0859dce76fa5ddfa947eb5d1165c Mon Sep 17 00:00:00 2001 From: saidam90 Date: Wed, 24 Jul 2024 00:06:28 +0400 Subject: [PATCH 1/8] Add toggle element --- src/app/components/AccountHistory.tsx | 49 +++++++++++++++++++++++++-- src/app/state/accountHistorySlice.ts | 6 ++++ 2 files changed, 53 insertions(+), 2 deletions(-) diff --git a/src/app/components/AccountHistory.tsx b/src/app/components/AccountHistory.tsx index aa634525..a2b702d1 100644 --- a/src/app/components/AccountHistory.tsx +++ b/src/app/components/AccountHistory.tsx @@ -28,6 +28,8 @@ import { calculateTotalFees, } from "../utils"; +import { setHideOtherPairs } from "../state/accountHistorySlice"; + function createOrderReceiptAddressLookup( pairsList: PairInfo[] ): Record { @@ -198,6 +200,19 @@ function DisplayTable() { ); const openOrders = useAppSelector(selectOpenOrders); const orderHistory = useAppSelector(selectOrderHistory); + const dispatch = useAppDispatch(); + const hideOtherPairs = useAppSelector( + (state) => state.accountHistory.hideOtherPairs + ); + const selectedPair = useAppSelector((state) => state.pairSelector.name); + + // console.log("orderHistory:", orderHistory); + // console.log("hideOtherPairs:", hideOtherPairs); + + const handleToggleChange = (e: React.ChangeEvent) => { + // console.log("Toggle Change:", e.target.checked); + dispatch(setHideOtherPairs(e.target.checked)); + }; const tableToShow = useMemo(() => { switch (selectedTable) { @@ -208,9 +223,12 @@ function DisplayTable() { }; case Tables.ORDER_HISTORY: + const filteredRows = hideOtherPairs + ? orderHistory + : orderHistory.filter((order) => order.pairAddress === selectedPair); return { headers: headers[Tables.ORDER_HISTORY], - rows: , + rows: , }; default: @@ -219,10 +237,37 @@ function DisplayTable() { rows: <>, }; } - }, [openOrders, orderHistory, selectedTable]); + }, [openOrders, orderHistory, selectedTable, hideOtherPairs, selectedPair]); return (
+
+ +
diff --git a/src/app/state/accountHistorySlice.ts b/src/app/state/accountHistorySlice.ts index 0980f06e..4154facc 100644 --- a/src/app/state/accountHistorySlice.ts +++ b/src/app/state/accountHistorySlice.ts @@ -31,6 +31,7 @@ export interface AccountHistoryState { selectedTable: Tables; tables: Tables[]; selectedOrdersToCancel: Record; // the key is `${orderRecieptAddress}_${nftRecieptId}` + hideOtherPairs: boolean; } // INITIAL STATE @@ -40,6 +41,7 @@ const initialState: AccountHistoryState = { selectedTable: Tables.OPEN_ORDERS, tables: Object.values(Tables), selectedOrdersToCancel: {}, + hideOtherPairs: true, }; // ASYNC THUNKS @@ -170,6 +172,9 @@ export const accountHistorySlice = createSlice({ resetSelectedOrdersToCancel: (state) => { state.selectedOrdersToCancel = {}; }, + setHideOtherPairs: (state, action: PayloadAction) => { + state.hideOtherPairs = action.payload; + }, }, extraReducers: (builder) => { @@ -213,3 +218,4 @@ export const selectOrderHistory = createSelector( ); export const selectTables = (state: RootState) => state.accountHistory.tables; +export const { setHideOtherPairs } = accountHistorySlice.actions; From 1c1274fbb3313f3aaf02e48fe705bb358073d707 Mon Sep 17 00:00:00 2001 From: saidam90 Date: Wed, 24 Jul 2024 14:29:46 +0400 Subject: [PATCH 2/8] Add logic to show all trades in all pairs --- src/app/components/AccountHistory.tsx | 37 ++++++++--- src/app/state/accountHistorySlice.ts | 91 +++++++++++++++++++++++++-- 2 files changed, 115 insertions(+), 13 deletions(-) diff --git a/src/app/components/AccountHistory.tsx b/src/app/components/AccountHistory.tsx index a2b702d1..9054c3b1 100644 --- a/src/app/components/AccountHistory.tsx +++ b/src/app/components/AccountHistory.tsx @@ -28,7 +28,11 @@ import { calculateTotalFees, } from "../utils"; -import { setHideOtherPairs } from "../state/accountHistorySlice"; +import { + setHideOtherPairs, + selectCombinedOrderHistory, + fetchAccountHistoryAllPairs, +} from "../state/accountHistorySlice"; function createOrderReceiptAddressLookup( pairsList: PairInfo[] @@ -204,13 +208,26 @@ function DisplayTable() { const hideOtherPairs = useAppSelector( (state) => state.accountHistory.hideOtherPairs ); - const selectedPair = useAppSelector((state) => state.pairSelector.name); + const combinedOrderHistory = useAppSelector(selectCombinedOrderHistory); + + useEffect(() => { + const showAllPairs = !hideOtherPairs; + if (showAllPairs) { + dispatch(fetchAccountHistoryAllPairs()); + } + + const intervalId = setInterval(() => { + if (showAllPairs) { + dispatch(fetchAccountHistoryAllPairs()); + } + }, 120000); // Dispatch every 2 mins (120 seconds) + + return () => clearInterval(intervalId); // Cleanup interval on component unmount + }, [dispatch, hideOtherPairs]); - // console.log("orderHistory:", orderHistory); - // console.log("hideOtherPairs:", hideOtherPairs); + // console.log("combinedOrderHistory:", combinedOrderHistory); const handleToggleChange = (e: React.ChangeEvent) => { - // console.log("Toggle Change:", e.target.checked); dispatch(setHideOtherPairs(e.target.checked)); }; @@ -225,7 +242,7 @@ function DisplayTable() { case Tables.ORDER_HISTORY: const filteredRows = hideOtherPairs ? orderHistory - : orderHistory.filter((order) => order.pairAddress === selectedPair); + : combinedOrderHistory; return { headers: headers[Tables.ORDER_HISTORY], rows: , @@ -237,7 +254,13 @@ function DisplayTable() { rows: <>, }; } - }, [openOrders, orderHistory, selectedTable, hideOtherPairs, selectedPair]); + }, [ + openOrders, + orderHistory, + selectedTable, + hideOtherPairs, + combinedOrderHistory, + ]); return (
diff --git a/src/app/state/accountHistorySlice.ts b/src/app/state/accountHistorySlice.ts index 4154facc..b1e327ec 100644 --- a/src/app/state/accountHistorySlice.ts +++ b/src/app/state/accountHistorySlice.ts @@ -32,6 +32,7 @@ export interface AccountHistoryState { tables: Tables[]; selectedOrdersToCancel: Record; // the key is `${orderRecieptAddress}_${nftRecieptId}` hideOtherPairs: boolean; + orderHistoryAllPairs: adex.OrderReceipt[]; } // INITIAL STATE @@ -42,6 +43,7 @@ const initialState: AccountHistoryState = { tables: Object.values(Tables), selectedOrdersToCancel: {}, hideOtherPairs: true, + orderHistoryAllPairs: [], }; // ASYNC THUNKS @@ -67,6 +69,51 @@ export const fetchAccountHistory = createAsyncThunk< } }); +export const fetchAccountHistoryAllPairs = createAsyncThunk< + SdkResult, + undefined, + { state: RootState } +>("accountHistory/fetchAccountHistoryAllPairs", async (_, thunkAPI) => { + const state = thunkAPI.getState(); + const pairAddresses = state.pairSelector.pairsList.map( + (pairInfo) => pairInfo.address + ); + const account = state.radix?.walletData.accounts[0]?.address || ""; + + try { + const orderHistoryPromises = pairAddresses.map((pairAddress) => + adex.getAccountOrders(account, pairAddress, 0) + ); + + const apiResponses = await Promise.all(orderHistoryPromises); + const allOrders: adex.OrderReceipt[] = []; + + apiResponses.forEach((apiResponse) => { + const plainApiResponse: SdkResult = JSON.parse( + JSON.stringify(apiResponse) + ); + + if (plainApiResponse.status === "SUCCESS") { + allOrders.push(...plainApiResponse.data.orders); + } else { + console.error( + `Error fetching orders for pair: ${plainApiResponse.message}` + ); + } + }); + + return { + status: "SUCCESS", + data: allOrders, + } as SdkResult; + } catch (error) { + return { + status: "ERROR", + message: "Failed to fetch account history", + } as SdkResult; + } +}); + export const batchCancel = createAsyncThunk< Order[], // return value Order[], // input @@ -178,12 +225,25 @@ export const accountHistorySlice = createSlice({ }, extraReducers: (builder) => { - builder.addCase(fetchAccountHistory.fulfilled, (state, action) => { - state.orderHistory = action.payload.data.orders; - }); - builder.addCase(batchCancel.fulfilled, (state) => { - state.selectedOrdersToCancel = {}; - }); + builder + .addCase(fetchAccountHistory.fulfilled, (state, action) => { + state.orderHistory = action.payload.data.orders; + }) + .addCase(batchCancel.fulfilled, (state) => { + state.selectedOrdersToCancel = {}; + }) + .addCase( + fetchAccountHistoryAllPairs.fulfilled, + (state, action: PayloadAction) => { + if (action.payload.status === "SUCCESS") { + state.orderHistoryAllPairs = action.payload.data; + } else { + console.error( + `Failed to fetch account history: ${action.payload.message}` + ); + } + } + ); }, }); @@ -217,5 +277,24 @@ export const selectOrderHistory = createSelector( (orderHistory) => orderHistory.filter((order) => order.status !== "PENDING") ); +export const selectCurrentPairAddress = (state: RootState) => + state.pairSelector.address; + +export const selectCombinedOrderHistory = createSelector( + (state: RootState) => state.accountHistory.orderHistory, + (state: RootState) => state.accountHistory.orderHistoryAllPairs, + (state: RootState) => state.accountHistory.hideOtherPairs, + (state: RootState) => selectCurrentPairAddress(state), + (orderHistory, orderHistoryAllPairs, hideOtherPairs) => { + if (hideOtherPairs) { + return orderHistory; + } else { + return [...orderHistoryAllPairs]; + } + } +); + export const selectTables = (state: RootState) => state.accountHistory.tables; + export const { setHideOtherPairs } = accountHistorySlice.actions; +export const { actions, reducer } = accountHistorySlice; From 6449698483593fdd3eb9ad52afc327e55d50fabc Mon Sep 17 00:00:00 2001 From: saidam90 Date: Thu, 25 Jul 2024 02:11:25 +0400 Subject: [PATCH 3/8] Make improvements --- src/app/state/accountHistorySlice.ts | 73 ++++++++++++---------------- 1 file changed, 32 insertions(+), 41 deletions(-) diff --git a/src/app/state/accountHistorySlice.ts b/src/app/state/accountHistorySlice.ts index b1e327ec..7a5af980 100644 --- a/src/app/state/accountHistorySlice.ts +++ b/src/app/state/accountHistorySlice.ts @@ -33,6 +33,8 @@ export interface AccountHistoryState { selectedOrdersToCancel: Record; // the key is `${orderRecieptAddress}_${nftRecieptId}` hideOtherPairs: boolean; orderHistoryAllPairs: adex.OrderReceipt[]; + error: string | null; + loading: boolean; } // INITIAL STATE @@ -44,6 +46,8 @@ const initialState: AccountHistoryState = { selectedOrdersToCancel: {}, hideOtherPairs: true, orderHistoryAllPairs: [], + error: null, + loading: false, }; // ASYNC THUNKS @@ -70,7 +74,7 @@ export const fetchAccountHistory = createAsyncThunk< }); export const fetchAccountHistoryAllPairs = createAsyncThunk< - SdkResult, + adex.OrderReceipt[], undefined, { state: RootState } >("accountHistory/fetchAccountHistoryAllPairs", async (_, thunkAPI) => { @@ -80,38 +84,26 @@ export const fetchAccountHistoryAllPairs = createAsyncThunk< ); const account = state.radix?.walletData.accounts[0]?.address || ""; - try { - const orderHistoryPromises = pairAddresses.map((pairAddress) => - adex.getAccountOrders(account, pairAddress, 0) - ); + const orderHistoryPromises = pairAddresses.map((pairAddress) => + adex.getAccountOrders(account, pairAddress, 0) + ); + + const apiResponses = await Promise.all(orderHistoryPromises); + const allOrders: adex.OrderReceipt[] = []; - const apiResponses = await Promise.all(orderHistoryPromises); - const allOrders: adex.OrderReceipt[] = []; + apiResponses.forEach((apiResponse) => { + const plainApiResponse: SdkResult = JSON.parse(JSON.stringify(apiResponse)); - apiResponses.forEach((apiResponse) => { - const plainApiResponse: SdkResult = JSON.parse( - JSON.stringify(apiResponse) + if (plainApiResponse.status === "SUCCESS") { + allOrders.push(...plainApiResponse.data.orders); + } else { + console.error( + `Error fetching orders for pair: ${plainApiResponse.message}` ); + } + }); - if (plainApiResponse.status === "SUCCESS") { - allOrders.push(...plainApiResponse.data.orders); - } else { - console.error( - `Error fetching orders for pair: ${plainApiResponse.message}` - ); - } - }); - - return { - status: "SUCCESS", - data: allOrders, - } as SdkResult; - } catch (error) { - return { - status: "ERROR", - message: "Failed to fetch account history", - } as SdkResult; - } + return allOrders; }); export const batchCancel = createAsyncThunk< @@ -229,21 +221,20 @@ export const accountHistorySlice = createSlice({ .addCase(fetchAccountHistory.fulfilled, (state, action) => { state.orderHistory = action.payload.data.orders; }) + .addCase(fetchAccountHistory.pending, (state) => { + state.loading = true; + state.error = null; + }) + .addCase(fetchAccountHistory.rejected, (state, action) => { + state.loading = false; + state.error = action.error.message || "Failed to fetch account history"; + }) .addCase(batchCancel.fulfilled, (state) => { state.selectedOrdersToCancel = {}; }) - .addCase( - fetchAccountHistoryAllPairs.fulfilled, - (state, action: PayloadAction) => { - if (action.payload.status === "SUCCESS") { - state.orderHistoryAllPairs = action.payload.data; - } else { - console.error( - `Failed to fetch account history: ${action.payload.message}` - ); - } - } - ); + .addCase(fetchAccountHistoryAllPairs.fulfilled, (state, action) => { + state.orderHistoryAllPairs = action.payload; + }); }, }); From 2681441546edbfd55132d06564fba356a6f659bf Mon Sep 17 00:00:00 2001 From: saidam90 Date: Thu, 25 Jul 2024 23:28:09 +0400 Subject: [PATCH 4/8] Fix the cases in extraReducers --- src/app/state/accountHistorySlice.ts | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/src/app/state/accountHistorySlice.ts b/src/app/state/accountHistorySlice.ts index 7a5af980..7e509804 100644 --- a/src/app/state/accountHistorySlice.ts +++ b/src/app/state/accountHistorySlice.ts @@ -33,8 +33,6 @@ export interface AccountHistoryState { selectedOrdersToCancel: Record; // the key is `${orderRecieptAddress}_${nftRecieptId}` hideOtherPairs: boolean; orderHistoryAllPairs: adex.OrderReceipt[]; - error: string | null; - loading: boolean; } // INITIAL STATE @@ -46,8 +44,6 @@ const initialState: AccountHistoryState = { selectedOrdersToCancel: {}, hideOtherPairs: true, orderHistoryAllPairs: [], - error: null, - loading: false, }; // ASYNC THUNKS @@ -221,19 +217,14 @@ export const accountHistorySlice = createSlice({ .addCase(fetchAccountHistory.fulfilled, (state, action) => { state.orderHistory = action.payload.data.orders; }) - .addCase(fetchAccountHistory.pending, (state) => { - state.loading = true; - state.error = null; - }) - .addCase(fetchAccountHistory.rejected, (state, action) => { - state.loading = false; - state.error = action.error.message || "Failed to fetch account history"; - }) .addCase(batchCancel.fulfilled, (state) => { state.selectedOrdersToCancel = {}; }) .addCase(fetchAccountHistoryAllPairs.fulfilled, (state, action) => { state.orderHistoryAllPairs = action.payload; + }) + .addCase(fetchAccountHistoryAllPairs.rejected, (state, action) => { + console.error("Failed to fetch account history:", action.error.message); }); }, }); From b7c5c649112170d03942c33817d5861f3461103e Mon Sep 17 00:00:00 2001 From: saidam90 Date: Sat, 27 Jul 2024 22:55:33 +0400 Subject: [PATCH 5/8] Fix filtering in Order History and Open Orders --- src/app/components/AccountHistory.tsx | 30 ++++++-------------- src/app/state/accountHistorySlice.ts | 40 +++++++++++++++++---------- src/app/trade/page.tsx | 24 +++++++++++++++- 3 files changed, 58 insertions(+), 36 deletions(-) diff --git a/src/app/components/AccountHistory.tsx b/src/app/components/AccountHistory.tsx index 9054c3b1..2e7bb9e4 100644 --- a/src/app/components/AccountHistory.tsx +++ b/src/app/components/AccountHistory.tsx @@ -31,7 +31,7 @@ import { import { setHideOtherPairs, selectCombinedOrderHistory, - fetchAccountHistoryAllPairs, + selectCombinedOpenOrders, } from "../state/accountHistorySlice"; function createOrderReceiptAddressLookup( @@ -209,23 +209,7 @@ function DisplayTable() { (state) => state.accountHistory.hideOtherPairs ); const combinedOrderHistory = useAppSelector(selectCombinedOrderHistory); - - useEffect(() => { - const showAllPairs = !hideOtherPairs; - if (showAllPairs) { - dispatch(fetchAccountHistoryAllPairs()); - } - - const intervalId = setInterval(() => { - if (showAllPairs) { - dispatch(fetchAccountHistoryAllPairs()); - } - }, 120000); // Dispatch every 2 mins (120 seconds) - - return () => clearInterval(intervalId); // Cleanup interval on component unmount - }, [dispatch, hideOtherPairs]); - - // console.log("combinedOrderHistory:", combinedOrderHistory); + const combinedOpenOrders = useAppSelector(selectCombinedOpenOrders); const handleToggleChange = (e: React.ChangeEvent) => { dispatch(setHideOtherPairs(e.target.checked)); @@ -234,18 +218,21 @@ function DisplayTable() { const tableToShow = useMemo(() => { switch (selectedTable) { case Tables.OPEN_ORDERS: + const filteredRowsForOpenOrders = hideOtherPairs + ? openOrders + : combinedOpenOrders; return { headers: headers[Tables.OPEN_ORDERS], - rows: , + rows: , }; case Tables.ORDER_HISTORY: - const filteredRows = hideOtherPairs + const filteredRowsForOrderHistory = hideOtherPairs ? orderHistory : combinedOrderHistory; return { headers: headers[Tables.ORDER_HISTORY], - rows: , + rows: , }; default: @@ -260,6 +247,7 @@ function DisplayTable() { selectedTable, hideOtherPairs, combinedOrderHistory, + combinedOpenOrders, ]); return ( diff --git a/src/app/state/accountHistorySlice.ts b/src/app/state/accountHistorySlice.ts index 7e509804..76d59862 100644 --- a/src/app/state/accountHistorySlice.ts +++ b/src/app/state/accountHistorySlice.ts @@ -75,9 +75,10 @@ export const fetchAccountHistoryAllPairs = createAsyncThunk< { state: RootState } >("accountHistory/fetchAccountHistoryAllPairs", async (_, thunkAPI) => { const state = thunkAPI.getState(); - const pairAddresses = state.pairSelector.pairsList.map( - (pairInfo) => pairInfo.address - ); + const pairAddresses = state.pairSelector.pairsList + .map((pairInfo) => pairInfo.address) + .filter((pairAddress) => pairAddress !== state.pairSelector.address); + const account = state.radix?.walletData.accounts[0]?.address || ""; const orderHistoryPromises = pairAddresses.map((pairAddress) => @@ -259,20 +260,31 @@ export const selectOrderHistory = createSelector( (orderHistory) => orderHistory.filter((order) => order.status !== "PENDING") ); -export const selectCurrentPairAddress = (state: RootState) => - state.pairSelector.address; - export const selectCombinedOrderHistory = createSelector( (state: RootState) => state.accountHistory.orderHistory, (state: RootState) => state.accountHistory.orderHistoryAllPairs, - (state: RootState) => state.accountHistory.hideOtherPairs, - (state: RootState) => selectCurrentPairAddress(state), - (orderHistory, orderHistoryAllPairs, hideOtherPairs) => { - if (hideOtherPairs) { - return orderHistory; - } else { - return [...orderHistoryAllPairs]; - } + (orderHistory, orderHistoryAllPairs) => { + const filteredOrderHistory = orderHistory.filter( + (order) => order.status !== "PENDING" + ); + const filteredOrderHistoryAllPairs = orderHistoryAllPairs.filter( + (order) => order.status !== "PENDING" + ); + return [...filteredOrderHistoryAllPairs, ...filteredOrderHistory]; + } +); + +export const selectCombinedOpenOrders = createSelector( + (state: RootState) => state.accountHistory.orderHistory, + (state: RootState) => state.accountHistory.orderHistoryAllPairs, + (orderHistory, orderHistoryAllPairs) => { + const filteredOrderHistory = orderHistory.filter( + (order) => order.status === "PENDING" + ); + const filteredOrderHistoryAllPairs = orderHistoryAllPairs.filter( + (order) => order.status === "PENDING" + ); + return [...filteredOrderHistoryAllPairs, ...filteredOrderHistory]; } ); diff --git a/src/app/trade/page.tsx b/src/app/trade/page.tsx index 000e56fa..4bbe307f 100644 --- a/src/app/trade/page.tsx +++ b/src/app/trade/page.tsx @@ -11,7 +11,10 @@ import { AccountHistory } from "../components/AccountHistory"; import { PriceInfo } from "../components/PriceInfo"; import { fetchBalances, selectPair } from "state/pairSelectorSlice"; import { useAppDispatch, useAppSelector } from "../hooks"; -import { fetchAccountHistory } from "../state/accountHistorySlice"; +import { + fetchAccountHistory, + fetchAccountHistoryAllPairs, +} from "../state/accountHistorySlice"; import { PromoBannerCarousel } from "../components/PromoBannerCarousel"; @@ -22,6 +25,10 @@ export default function Trade() { const pairName = pairSelector.name; const pairsList = pairSelector.pairsList; + const hideOtherPairs = useAppSelector( + (state) => state.accountHistory.hideOtherPairs + ); + // Detect changes in selected pair and adjust pagetitle useEffect(() => { document.title = pairName ? `DeXter • ${pairName.toUpperCase()}` : "DeXter"; @@ -51,6 +58,21 @@ export default function Trade() { return () => clearInterval(intervalId); // Cleanup interval on component unmount }, [dispatch]); + useEffect(() => { + const showAllPairs = !hideOtherPairs; + if (showAllPairs) { + dispatch(fetchAccountHistoryAllPairs()); + } + + const intervalId = setInterval(() => { + if (showAllPairs) { + dispatch(fetchAccountHistoryAllPairs()); + } + }, 120000); // Dispatch every 2 mins (120 seconds) + + return () => clearInterval(intervalId); // Cleanup interval on component unmount + }, [dispatch, hideOtherPairs]); + return (
Date: Fri, 2 Aug 2024 23:29:49 +0400 Subject: [PATCH 6/8] Add a filter for selectors and sorting by id and fix the issue with duplicates --- src/app/state/accountHistorySlice.ts | 125 ++++++++++++++++++++------- 1 file changed, 95 insertions(+), 30 deletions(-) diff --git a/src/app/state/accountHistorySlice.ts b/src/app/state/accountHistorySlice.ts index 76d59862..2d963ac4 100644 --- a/src/app/state/accountHistorySlice.ts +++ b/src/app/state/accountHistorySlice.ts @@ -75,9 +75,10 @@ export const fetchAccountHistoryAllPairs = createAsyncThunk< { state: RootState } >("accountHistory/fetchAccountHistoryAllPairs", async (_, thunkAPI) => { const state = thunkAPI.getState(); - const pairAddresses = state.pairSelector.pairsList - .map((pairInfo) => pairInfo.address) - .filter((pairAddress) => pairAddress !== state.pairSelector.address); + const pairAddresses = state.pairSelector.pairsList.map( + (pairInfo) => pairInfo.address + ); + // .filter((pairAddress) => pairAddress !== state.pairSelector.address); const account = state.radix?.walletData.accounts[0]?.address || ""; @@ -231,8 +232,12 @@ export const accountHistorySlice = createSlice({ }); // SELECTORS -export const { setSelectedTable, selectOrderToCancel, deselectOrderToCancel } = - accountHistorySlice.actions; +export const { + setSelectedTable, + selectOrderToCancel, + deselectOrderToCancel, + resetAccountHistory, +} = accountHistorySlice.actions; // TODO: possibly remove, as this selector seems to not be used anywhere in the code export const selectFilteredData = createSelector( @@ -260,33 +265,93 @@ export const selectOrderHistory = createSelector( (orderHistory) => orderHistory.filter((order) => order.status !== "PENDING") ); -export const selectCombinedOrderHistory = createSelector( - (state: RootState) => state.accountHistory.orderHistory, - (state: RootState) => state.accountHistory.orderHistoryAllPairs, - (orderHistory, orderHistoryAllPairs) => { - const filteredOrderHistory = orderHistory.filter( - (order) => order.status !== "PENDING" - ); - const filteredOrderHistoryAllPairs = orderHistoryAllPairs.filter( - (order) => order.status !== "PENDING" - ); - return [...filteredOrderHistoryAllPairs, ...filteredOrderHistory]; - } -); +// A function that checks an order against a filter condition and returns TRUE if it matches, FALSE otherwise +type FilterFunction = (order: adex.OrderReceipt) => boolean; -export const selectCombinedOpenOrders = createSelector( - (state: RootState) => state.accountHistory.orderHistory, - (state: RootState) => state.accountHistory.orderHistoryAllPairs, - (orderHistory, orderHistoryAllPairs) => { - const filteredOrderHistory = orderHistory.filter( - (order) => order.status === "PENDING" - ); - const filteredOrderHistoryAllPairs = orderHistoryAllPairs.filter( - (order) => order.status === "PENDING" - ); - return [...filteredOrderHistoryAllPairs, ...filteredOrderHistory]; - } +let selectCombinedOrders = (filterFunction: FilterFunction) => + createSelector( + (state: RootState) => state.accountHistory.orderHistory, + (state: RootState) => state.accountHistory.orderHistoryAllPairs, + (orderHistory, orderHistoryAllPairs) => { + // Create a Map to handle duplicates + const orderMap = new Map(); + + // Add orders from orderHistory + orderHistory.forEach((order) => { + orderMap.set(order.id, order); + }); + + // Add orders from orderHistoryAllPairs, will overwrite any duplicates from orderHistory + orderHistoryAllPairs.forEach((order) => { + orderMap.set(order.id, order); + }); + + return Array.from(orderMap.values()) + .filter(filterFunction) + .sort((a, b) => { + const timeDifference = + new Date(b.timeSubmitted).getTime() - + new Date(a.timeSubmitted).getTime(); + if (timeDifference !== 0) { + return timeDifference; + } else { + return b.id - a.id; + } + }); + } + ); + +// create aliases for calling the selector with different filtering functions +export const selectCombinedOrderHistory = selectCombinedOrders( + (order) => order.status !== "PENDING" ); +export const selectCombinedOpenOrders = selectCombinedOrders( + (order) => order.status === "PENDING" +); + +// export const selectCombinedOrderHistory = createSelector( +// (state: RootState) => state.accountHistory.orderHistory, +// (state: RootState) => state.accountHistory.orderHistoryAllPairs, +// (orderHistory, orderHistoryAllPairs) => { +// const combinedOrderHistory = [ +// ...orderHistory.filter((order) => order.status !== "PENDING"), +// ...orderHistoryAllPairs.filter((order) => order.status !== "PENDING"), +// ]; + +// return combinedOrderHistory.sort((a, b) => { +// const timeDifference = +// new Date(b.timeSubmitted).getTime() - +// new Date(a.timeSubmitted).getTime(); +// if (timeDifference !== 0) { +// return timeDifference; +// } else { +// return b.id - a.id; +// } +// }); +// } +// ); + +// export const selectCombinedOpenOrders = createSelector( +// (state: RootState) => state.accountHistory.orderHistory, +// (state: RootState) => state.accountHistory.orderHistoryAllPairs, +// (orderHistory, orderHistoryAllPairs) => { +// const combinedOpenOrders = [ +// ...orderHistory.filter((order) => order.status === "PENDING"), +// ...orderHistoryAllPairs.filter((order) => order.status === "PENDING"), +// ]; + +// return combinedOpenOrders.sort((a, b) => { +// const timeDifference = +// new Date(b.timeSubmitted).getTime() - +// new Date(a.timeSubmitted).getTime(); +// if (timeDifference !== 0) { +// return timeDifference; +// } else { +// return b.id - a.id; +// } +// }); +// } +// ); export const selectTables = (state: RootState) => state.accountHistory.tables; From cfc5ccdae8b74ed33dc10ef4009585f3283e0f32 Mon Sep 17 00:00:00 2001 From: saidam90 Date: Sat, 3 Aug 2024 00:23:46 +0400 Subject: [PATCH 7/8] Fix issues with dublicates and sorting --- src/app/trade/page.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/trade/page.tsx b/src/app/trade/page.tsx index 2e6471f5..fe8e2ee6 100644 --- a/src/app/trade/page.tsx +++ b/src/app/trade/page.tsx @@ -53,6 +53,7 @@ export default function Trade() { const intervalId = setInterval(() => { dispatch(fetchBalances()); dispatch(fetchAccountHistory()); + // console.log("5 seconds"); }, 5000); // Dispatch every 5000 milliseconds (5 second) return () => clearInterval(intervalId); // Cleanup interval on component unmount @@ -68,6 +69,7 @@ export default function Trade() { if (showAllPairs) { dispatch(fetchAccountHistoryAllPairs()); } + // console.log("120 seconds"); }, 120000); // Dispatch every 2 mins (120 seconds) return () => clearInterval(intervalId); // Cleanup interval on component unmount From 50d85972623387792ef68f0040d69c91a3f092ed Mon Sep 17 00:00:00 2001 From: saidam90 Date: Sun, 4 Aug 2024 11:15:06 +0400 Subject: [PATCH 8/8] Add unique order id and remove outcommented code --- src/app/state/accountHistorySlice.ts | 55 ++++------------------------ src/app/trade/page.tsx | 4 +- 2 files changed, 9 insertions(+), 50 deletions(-) diff --git a/src/app/state/accountHistorySlice.ts b/src/app/state/accountHistorySlice.ts index 2d963ac4..97b5e3b9 100644 --- a/src/app/state/accountHistorySlice.ts +++ b/src/app/state/accountHistorySlice.ts @@ -78,7 +78,6 @@ export const fetchAccountHistoryAllPairs = createAsyncThunk< const pairAddresses = state.pairSelector.pairsList.map( (pairInfo) => pairInfo.address ); - // .filter((pairAddress) => pairAddress !== state.pairSelector.address); const account = state.radix?.walletData.accounts[0]?.address || ""; @@ -274,16 +273,20 @@ let selectCombinedOrders = (filterFunction: FilterFunction) => (state: RootState) => state.accountHistory.orderHistoryAllPairs, (orderHistory, orderHistoryAllPairs) => { // Create a Map to handle duplicates - const orderMap = new Map(); + const orderMap = new Map(); + + // Generate unique orderId helper + const getUniqueOrderId = (order: adex.OrderReceipt) => + `${order.pairName}_${order.id}`; // Add orders from orderHistory orderHistory.forEach((order) => { - orderMap.set(order.id, order); + orderMap.set(getUniqueOrderId(order), order); }); // Add orders from orderHistoryAllPairs, will overwrite any duplicates from orderHistory orderHistoryAllPairs.forEach((order) => { - orderMap.set(order.id, order); + orderMap.set(getUniqueOrderId(order), order); }); return Array.from(orderMap.values()) @@ -309,50 +312,6 @@ export const selectCombinedOpenOrders = selectCombinedOrders( (order) => order.status === "PENDING" ); -// export const selectCombinedOrderHistory = createSelector( -// (state: RootState) => state.accountHistory.orderHistory, -// (state: RootState) => state.accountHistory.orderHistoryAllPairs, -// (orderHistory, orderHistoryAllPairs) => { -// const combinedOrderHistory = [ -// ...orderHistory.filter((order) => order.status !== "PENDING"), -// ...orderHistoryAllPairs.filter((order) => order.status !== "PENDING"), -// ]; - -// return combinedOrderHistory.sort((a, b) => { -// const timeDifference = -// new Date(b.timeSubmitted).getTime() - -// new Date(a.timeSubmitted).getTime(); -// if (timeDifference !== 0) { -// return timeDifference; -// } else { -// return b.id - a.id; -// } -// }); -// } -// ); - -// export const selectCombinedOpenOrders = createSelector( -// (state: RootState) => state.accountHistory.orderHistory, -// (state: RootState) => state.accountHistory.orderHistoryAllPairs, -// (orderHistory, orderHistoryAllPairs) => { -// const combinedOpenOrders = [ -// ...orderHistory.filter((order) => order.status === "PENDING"), -// ...orderHistoryAllPairs.filter((order) => order.status === "PENDING"), -// ]; - -// return combinedOpenOrders.sort((a, b) => { -// const timeDifference = -// new Date(b.timeSubmitted).getTime() - -// new Date(a.timeSubmitted).getTime(); -// if (timeDifference !== 0) { -// return timeDifference; -// } else { -// return b.id - a.id; -// } -// }); -// } -// ); - export const selectTables = (state: RootState) => state.accountHistory.tables; export const { setHideOtherPairs } = accountHistorySlice.actions; diff --git a/src/app/trade/page.tsx b/src/app/trade/page.tsx index fe8e2ee6..63ccd1d5 100644 --- a/src/app/trade/page.tsx +++ b/src/app/trade/page.tsx @@ -49,16 +49,17 @@ export default function Trade() { } }, [pairsList, dispatch, searchParams]); + // Update orders of selected pair every 5 seconds useEffect(() => { const intervalId = setInterval(() => { dispatch(fetchBalances()); dispatch(fetchAccountHistory()); - // console.log("5 seconds"); }, 5000); // Dispatch every 5000 milliseconds (5 second) return () => clearInterval(intervalId); // Cleanup interval on component unmount }, [dispatch]); + // Update orders of all pairs every 2 mins (if selected) useEffect(() => { const showAllPairs = !hideOtherPairs; if (showAllPairs) { @@ -69,7 +70,6 @@ export default function Trade() { if (showAllPairs) { dispatch(fetchAccountHistoryAllPairs()); } - // console.log("120 seconds"); }, 120000); // Dispatch every 2 mins (120 seconds) return () => clearInterval(intervalId); // Cleanup interval on component unmount