Add toggle to show all trades in Account Hisotry

[dcts]

Currently, the Account Hisotry only shows trades that are related to the currently selected pair. We'd like to introduce a toggle on the top right corner of the AccountHistory component with the label "hide other pairs" which is turned on by default. The user should be able to unselect the toggle, which should then show all trades in all pairs.

Design Mock

Design Figma File

https://www.figma.com/design/Zjff03BX35fREatqzcWDS7/DeXter-UI?node-id=825-6498&t=gGYTb36pl7VTuLuV-1

[saidam90]

Could you assign me for this one?

[dcts]

We need to adapt the data fetching strategy to make this feature work. Given this discussion on discord, I suggest the following strategy:

1. Create a new field in the AccountHistoryState named orderHistoryAllPairs: adex.orderReceipt[], which will hold all orderReceipt's for all pairs.

2. Create an additional asyncThunk named fetchAccountHistoryAllPairs, that mimicks the fetchAccountHistory function, but asynchronously fetches orders for all pairs. This means we need to call adex.getAccountOrders(account, pairAddress) as many times as we have pairAddresses. You can get an array of all pairAddresses using

   const state = thunkAPI.getState();
   const pairAddresses = state.pairSelector.pairsList.map(pairInfo => pairInfo.address);

   The orders should be aggregated into a single array of adex.orderReceipt and stored inside the state variable orderHistoryAllPairs.

3. The fetching of account history data should only be done when the user untoggles "hide other pairs". During that process there should be a loading indication. We probably want to keep track of the state of the toggle inside redux (maybe inside a bool hideOtherPairs which is true by default.

4. Currently we use a polling strategy to keep account history in sync, see code here: https://github.com/DeXter-on-Radix/website/blob/044c41443def76677961c5b95da33664dcc0328c/src/app/trade/page.tsx#L45-L52 We should implement something similar, but I suggest having a longer timeframe (e.g. 2 mins):

   useEffect(() => {
   const intervalId = setInterval(() => {
     const showAllPairs = !hideOtherPairs;
     if (showAllPairs) {
       dispatch(fetchAccountHistoryAllPairs());
     }
   }, 120000); // Dispatch every 2 mins (120 seconds)
   
   return () => clearInterval(intervalId); // Cleanup interval on component unmount
   }, [dispatch, hideOtherPairs]);

5. Update the accountHistory component logic:

   • If hideOtherPairs is true, use the existing logic (state.accountHistory.orderHistory) to display orders.
   • If hideOtherPairs is false, combine orderHistory and orderHistoryAllPairs, filtering out orders for the currently selected pair from orderHistoryAllPairs and merging them with orderHistory.