fix: limit order list crashes app on error (#8538)

* fix: dont crash app processing error responses in limit orders list query * fix: naming of useGetLimitOrdersQuery file * fix: root cause of type safety * fix: wrong type * fix: wrong naming
shapeshift · Jan 13, 2025 · b57d4b4 · b57d4b4
1 parent 3540abf
commit b57d4b4
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderList.tsx b/src/components/MultiHopTrade/components/LimitOrder/components/LimitOrderList.tsx
@@ -24,7 +24,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { Text } from 'components/Text'
 
 import { WithBackButton } from '../../WithBackButton'
-import { useGetLimitOrdersQuery } from '../hooks/useGetLimitOrdersForAccountQuery'
+import { useGetLimitOrdersQuery } from '../hooks/useGetLimitOrdersQuery'
 import type { OrderToCancel } from '../types'
 import { CancelLimitOrder } from './CancelLimitOrder'
 import { LimitOrderCard } from './LimitOrderCard'

diff --git a/...ooks/useGetLimitOrdersForAccountQuery.tsx → ...mitOrder/hooks/useGetLimitOrdersQuery.tsx b/...ooks/useGetLimitOrdersForAccountQuery.tsx → ...mitOrder/hooks/useGetLimitOrdersQuery.tsx
@@ -2,6 +2,7 @@ import type { AccountId } from '@shapeshiftoss/caip'
 import { fromAccountId } from '@shapeshiftoss/caip'
 import { assertGetCowNetwork, getCowNetwork } from '@shapeshiftoss/swapper'
 import type { Order } from '@shapeshiftoss/types'
+import { isSome } from '@shapeshiftoss/utils'
 import { useQueries } from '@tanstack/react-query'
 import axios from 'axios'
 import { getConfig } from 'config'
@@ -39,7 +40,7 @@ export const useGetLimitOrdersQuery = () => {
     [],
   )
 
-  const customTokenQueries = useQueries({
+  const limitOrdersQueries = useQueries({
     queries: evmAccountIds
       .filter(accountId => {
         const { chainId } = fromAccountId(accountId)
@@ -52,9 +53,9 @@ export const useGetLimitOrdersQuery = () => {
       })),
     combine: queries =>
       mergeQueryOutputs(queries, results =>
-        orderBy(results.flat(), ({ order }) => order.creationDate, 'desc'),
+        orderBy(results.flat().filter(isSome), ({ order }) => order.creationDate, 'desc'),
       ),
   })
 
-  return customTokenQueries
+  return limitOrdersQueries
 }
diff --git a/src/components/TradeAssetSearch/hooks/useGetCustomTokensQuery.tsx b/src/components/TradeAssetSearch/hooks/useGetCustomTokensQuery.tsx
@@ -30,7 +30,7 @@ const getCustomTokenQueryKey = (contractAddress: string, chainId: ChainId): Cust
 export const useGetCustomTokensQuery = ({
   contractAddress,
   chainIds,
-}: UseGetCustomTokensQueryProps): UseQueryResult<(TokenMetadata | null)[], Error[]> => {
+}: UseGetCustomTokensQueryProps): UseQueryResult<(TokenMetadata | undefined)[], Error[]> => {
   const customTokenImportEnabled = useFeatureFlag('CustomTokenImport')
 
   const getTokenMetadata = useCallback(

diff --git a/src/react-queries/helpers.ts b/src/react-queries/helpers.ts
@@ -9,7 +9,7 @@ import type { UseQueryResult } from '@tanstack/react-query'
  */
 export const mergeQueryOutputs = <QueryOutputType, QueryErrorType, MergedOutputType>(
   queryOutputs: UseQueryResult<QueryOutputType, QueryErrorType>[],
-  combineResults: (results: QueryOutputType[]) => MergedOutputType,
+  combineResults: (results: (QueryOutputType | undefined)[]) => MergedOutputType,
 ): UseQueryResult<MergedOutputType, QueryErrorType[]> => {
   const isLoading = queryOutputs.some(result => result.isLoading)
   const isPending = queryOutputs.some(result => result.isPending)
@@ -49,7 +49,7 @@ export const mergeQueryOutputs = <QueryOutputType, QueryErrorType, MergedOutputT
   }
 
   return {
-    data: combineResults(queryOutputs.map(result => result.data as QueryOutputType)),
+    data: combineResults(queryOutputs.map(result => result.data)),
     error,
     isLoading,
     isPending,