feat: implement polling updates for limit order list (#8281)

src/components/MultiHopTrade/components/LimitOrder/components/CancelLimtOrder.tsx

@@ -17,6 +17,7 @@ import {
 import { SwapperName } from '@shapeshiftoss/swapper'
 import { TxStatus } from '@shapeshiftoss/unchained-client'
 import { bn, bnOrZero, fromBaseUnit } from '@shapeshiftoss/utils'
+import { useQueryClient } from '@tanstack/react-query'
 import { formatDistanceToNow } from 'date-fns'
 import { useCallback, useEffect, useMemo } from 'react'
 import { Amount } from 'components/Amount/Amount'
@@ -43,6 +44,7 @@ type CancelLimitOrderProps = {
 export const CancelLimitOrder = ({ orderToCancel, resetOrderToCancel }: CancelLimitOrderProps) => {
   const wallet = useWallet().state.wallet
   const { showErrorToast } = useErrorHandler()
+  const queryClient = useQueryClient()
 
   const [cancelLimitOrders, { error, isLoading, reset }] = useCancelLimitOrderMutation()
 
@@ -63,8 +65,14 @@ export const CancelLimitOrder = ({ orderToCancel, resetOrderToCancel }: CancelLi
     }
 
     await cancelLimitOrders({ wallet, ...orderToCancel })
+
+    // refetch the orders list for this account
+    queryClient.invalidateQueries({
+      queryKey: ['getLimitOrdersForAccount', orderToCancel.accountId],
+    })
+
     resetOrderToCancel()
-  }, [orderToCancel, wallet, cancelLimitOrders, resetOrderToCancel])
+  }, [orderToCancel, wallet, cancelLimitOrders, queryClient, resetOrderToCancel])
 
   const sellAsset = useSelectorWithArgs(selectAssetById, orderToCancel?.sellAssetId ?? '')
   const buyAsset = useSelectorWithArgs(selectAssetById, orderToCancel?.buyAssetId ?? '')

src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderConfirm.tsx

@@ -11,6 +11,7 @@ import {
 } from '@chakra-ui/react'
 import { SwapperName } from '@shapeshiftoss/swapper'
 import type { CowSwapError } from '@shapeshiftoss/types'
+import { useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
@@ -52,6 +53,7 @@ export const LimitOrderConfirm = () => {
   const wallet = useWallet().state.wallet
   const { confirmSubmit, setLimitOrderInitialized } = useActions(limitOrderSlice.actions)
   const { showErrorToast } = useErrorHandler()
+  const queryClient = useQueryClient()
 
   const activeQuote = useAppSelector(selectActiveQuote)
   const sellAsset = useAppSelector(selectActiveQuoteSellAsset)
@@ -88,15 +90,30 @@ export const LimitOrderConfirm = () => {
 
   const handleConfirm = useCallback(async () => {
     const quoteId = activeQuote?.response.id
-    if (!quoteId) {
+    const accountId = activeQuote?.params.accountId
+
+    if (!quoteId || !accountId) {
       return
     }
 
     // TEMP: Bypass allowance approvals and jump straight to placing the order
     setLimitOrderInitialized(quoteId)
     confirmSubmit(quoteId)
     await placeLimitOrder({ quoteId, wallet })
-  }, [activeQuote?.response.id, confirmSubmit, placeLimitOrder, setLimitOrderInitialized, wallet])
+    // refetch the orders list for this account
+    queryClient.invalidateQueries({
+      queryKey: ['getLimitOrdersForAccount', accountId],
+      refetchType: 'all',
+    })
+  }, [
+    activeQuote?.params.accountId,
+    activeQuote?.response.id,
+    confirmSubmit,
+    placeLimitOrder,
+    queryClient,
+    setLimitOrderInitialized,
+    wallet,
+  ])
 
   if (!activeQuote) {
     console.error('Attempted to submit an undefined limit order')

src/components/MultiHopTrade/components/LimitOrder/hooks/useGetLimitOrdersForAccountQuery.tsx

@@ -47,6 +47,7 @@ export const useGetLimitOrdersQuery = () => {
       .map(accountId => ({
         queryKey: getLimitOrdersForAccountQueryKey(accountId),
         queryFn: getQueryFn(accountId),
+        refetchInterval: 15_000,
       })),
     combine: queries => mergeQueryOutputs(queries, results => results.flat()),
   })