Refactor "My Trades" and "All Trades" to use react-query instead of redux

[evgenyboxer]

We are in the process of moving data fetching to use react-query instead of handling it in redux (via sagas). Please checkout the docs for it - https://github.com/tannerlinsley/react-query If you are new to sagas, its basically a way to handle side effects in redux, similarly to what redux-thunk gives us (but way more robust). Our use of sagas is fairly simple, so migrating it to react-query is trivial.

Currently, both "My Trades" and "All Trades" use sagas whereas the recently added "Options Trade" view is using react-query. Its a great reference on how to use it in our codebase.

The trade view located here - https://synthetix.exchange/#/trade/sBTC-sUSD (under the chart/order card). You need to be logged in to view "My Trades".

Options trade view - https://synthetix.exchange/#/options/0xa59a361e670ca290b5821bbc7b83fe0ed14791d2 (under chart/order card). In the "Recent/Your" activity tabs.

The PR should be on the dev branch.

Let us know if you got any questions!

[jwineman]

I'm planning on PRing <MyTrades/> tomorrow with the following react-query logic:

1. useQuery for snxData.exchanger.exchangeEntriesSettled with refetchInterval: REFRESH_INTERVAL
2. useQuery for snxData.exchanges.since with enabled set to the data of step 1.

I assume this logic should move into the second hook/component now right based off the data from the preceeding two useQuerys?

            normalizedTrades.forEach((trade, idx) => {
                // if the input size gets large, a binary search could be used.
                const settledTrade = settledTrades.find(
                    (settledTrade) =>
                        trade.timestamp === settledTrade.exchangeTimestamp &&
                        settledTrade.dest === trade.toCurrencyKey &&
                        settledTrade.src === trade.fromCurrencyKey &&
                        trade.fromAmount === settledTrade.amount
                );

                normalizedTrades[idx].isSettled = false;

                if (settledTrade) {
                    normalizedTrades[idx].rebate = settledTrade.rebate;
                    normalizedTrades[idx].reclaim = settledTrade.reclaim;

                    // special case for when the currency is priced in sUSD
                    const feeReclaimRebateAmount =
                        trade.toCurrencyKey === SYNTHS_MAP.sUSD
                            ? settledTrade.rebate - settledTrade.reclaim
                            : settledTrade.reclaim - settledTrade.rebate;

                    // ( shiftAmount / amount ) * price -> gets us the price shift
                    // to get the new price, we just add the price shift (which might be a negative or positive number)
                    normalizedTrades[idx].settledPrice =
                        (feeReclaimRebateAmount / trade.toAmount) * trade.price + trade.price;
                    normalizedTrades[idx].isSettled = true;
                    normalizedTrades[idx].amount = Math.abs(feeReclaimRebateAmount);
                }

I'm not sure how to type settledTrades yet and I'm having trouble getting react-querys enabled to work correctly right now.