Implement useRampQuotes for quote refetching

Author: samholmes

src/components/scenes/TradeCreateScene.tsx

@@ -1,4 +1,3 @@
-import { useQuery } from '@tanstack/react-query'
 import { div, mul } from 'biggystring'
 import * as React from 'react'
 import { useState } from 'react'
@@ -11,16 +10,14 @@ import { showCountrySelectionModal } from '../../actions/CountryListActions'
 import { FLAG_LOGO_URL } from '../../constants/CdnConstants'
 import { COUNTRY_CODES, FIAT_COUNTRY } from '../../constants/CountryConstants'
 import { useHandler } from '../../hooks/useHandler'
+import { useRampQuotes } from '../../hooks/useRampQuotes'
 import { useWatch } from '../../hooks/useWatch'
 import { lstrings } from '../../locales/strings'
-import type {
-  RampQuoteRequest,
-  RampQuoteResult
-} from '../../plugins/ramps/rampPluginTypes'
+import type { RampQuoteRequest } from '../../plugins/ramps/rampPluginTypes'
 import { getDefaultFiat } from '../../selectors/SettingsSelectors'
 import { useDispatch, useSelector } from '../../types/reactRedux'
 import type { BuyTabSceneProps, NavigationBase } from '../../types/routerTypes'
-import type { GuiFiatType, NotOK, Ok, Result } from '../../types/types'
+import type { GuiFiatType } from '../../types/types'
 import { getCurrencyCode } from '../../util/CurrencyInfoHelpers'
 import { DECIMAL_PRECISION } from '../../util/utils'
 import { DropDownInputButton } from '../buttons/DropDownInputButton'
@@ -49,12 +46,6 @@ export interface TradeCreateParams {
   regionCode?: string
 }
 
-interface QuoteError {
-  pluginId: string
-  pluginDisplayName: string
-  error: unknown
-}
-
 interface Props extends BuyTabSceneProps<'pluginListBuy'> {}
 
 export const TradeCreateScene = (props: Props): React.ReactElement => {
@@ -206,67 +197,16 @@ export const TradeCreateScene = (props: Props): React.ReactElement => {
     stateProvinceCode
   ])
 
-  // Fetch quotes when rampQuoteRequest is valid
-  const { data: quoteResults = [], isLoading: isLoadingQuotes } = useQuery<
-    Array<Result<RampQuoteResult[], QuoteError>>
-  >({
-    queryKey: ['rampQuotes', rampQuoteRequest],
-    queryFn: async () => {
-      if (!rampQuoteRequest || Object.keys(rampPlugins).length === 0) {
-        return []
-      }
-
-      const quotePromises = Object.values(rampPlugins).map(
-        async (plugin): Promise<Result<RampQuoteResult[], QuoteError>> => {
-          try {
-            const quotes = await plugin.fetchQuote(rampQuoteRequest)
-            return { ok: true, value: quotes }
-          } catch (error) {
-            return {
-              ok: false,
-              error: {
-                pluginId: plugin.pluginId,
-                pluginDisplayName: plugin.rampInfo.pluginDisplayName,
-                error
-              }
-            }
-          }
-        }
-      )
-
-      return await Promise.all(quotePromises)
-    },
-    enabled: !!rampQuoteRequest,
-    staleTime: 30000,
-    gcTime: 300000
+  // Fetch quotes using the custom hook
+  const {
+    quotes: sortedQuotes,
+    isLoading: isLoadingQuotes,
+    errors: quoteErrors
+  } = useRampQuotes({
+    rampQuoteRequest,
+    plugins: rampPlugins
   })
 
-  // Separate successful and unsuccessful quotes
-  const successfulQuotes = React.useMemo(() => {
-    return quoteResults.filter(
-      (result): result is Ok<RampQuoteResult[]> => result.ok
-    )
-  }, [quoteResults])
-  const unsuccessfulQuotes = React.useMemo(() => {
-    return quoteResults.filter(
-      (result): result is NotOK<QuoteError> => !result.ok
-    )
-  }, [quoteResults])
-
-  // Sort all successful quotes by best rate
-  const sortedQuotes = React.useMemo(() => {
-    const allQuotes: RampQuoteResult[] = successfulQuotes.flatMap(
-      result => result.value
-    )
-
-    // Sort by best rate (lowest fiat amount for same crypto amount)
-    return allQuotes.sort((a, b) => {
-      const rateA = parseFloat(a.fiatAmount) / parseFloat(a.cryptoAmount)
-      const rateB = parseFloat(b.fiatAmount) / parseFloat(b.cryptoAmount)
-      return rateA - rateB
-    })
-  }, [successfulQuotes])
-
   // Get the best quote
   const bestQuote = sortedQuotes[0]
 
@@ -593,8 +533,8 @@ export const TradeCreateScene = (props: Props): React.ReactElement => {
 
         {/* Error Alert */}
         {!isLoadingQuotes &&
-        unsuccessfulQuotes.length > 0 &&
-        successfulQuotes.length === 0 ? (
+        quoteErrors.length > 0 &&
+        sortedQuotes.length === 0 ? (
           <AlertCardUi4
             type="error"
             title={lstrings.trade_buy_unavailable_title}
@@ -616,7 +556,8 @@ export const TradeCreateScene = (props: Props): React.ReactElement => {
               selectedCryptoCurrencyCode == null ||
               userInput === '' ||
               lastUsedInput === null ||
-              (!isLoadingQuotes && sortedQuotes.length === 0)
+              isLoadingQuotes ||
+              sortedQuotes.length === 0
           }}
         />
       </SceneContainer>

src/components/scenes/TradeOptionSelectScene.tsx

@@ -1,10 +1,10 @@
-import { useQuery } from '@tanstack/react-query'
 import * as React from 'react'
-import { Image, View } from 'react-native'
+import { ActivityIndicator, Image, View } from 'react-native'
 import { sprintf } from 'sprintf-js'
 
 // TradeOptionSelectScene - Updated layout for design requirements
 import paymentTypeLogoApplePay from '../../assets/images/paymentTypes/paymentTypeLogoApplePay.png'
+import { useRampQuotes } from '../../hooks/useRampQuotes'
 import { lstrings } from '../../locales/strings'
 import type {
   RampQuoteRequest,
@@ -13,11 +13,11 @@ import type {
 } from '../../plugins/ramps/rampPluginTypes'
 import { useSelector } from '../../types/reactRedux'
 import type { BuyTabSceneProps } from '../../types/routerTypes'
-import type { Result } from '../../types/types'
 import { getPaymentTypeIcon } from '../../util/paymentTypeIcons'
 import { getPaymentTypeDisplayName } from '../../util/paymentTypeUtils'
 import { AlertCardUi4 } from '../cards/AlertCard'
 import { PaymentOptionCard } from '../cards/PaymentOptionCard'
+import { EdgeAnim } from '../common/EdgeAnim'
 import { SceneWrapper } from '../common/SceneWrapper'
 import { SectionHeader } from '../common/SectionHeader'
 import { styled } from '../hoc/styled'
@@ -34,61 +34,24 @@ export interface RampSelectOptionParams {
 
 interface Props extends BuyTabSceneProps<'rampSelectOption'> {}
 
-// Define error type for failed quotes
-interface QuoteError {
-  pluginId: string
-  pluginDisplayName: string
-  error: unknown
-}
-
 export const TradeOptionSelectScene = (props: Props): React.JSX.Element => {
   const { route } = props
   const { rampQuoteRequest, quotes: precomputedQuotes } = route.params
 
+  const theme = useTheme()
   const rampPlugins = useSelector(state => state.rampPlugins.plugins)
   const isPluginsLoading = useSelector(state => state.rampPlugins.isLoading)
 
-  // Use TanStack Query to fetch quotes only if not provided
-  const { data: quoteResults = [], isLoading: isLoadingQuotes } = useQuery<
-    Array<Result<RampQuoteResult[], QuoteError>>
-  >({
-    queryKey: ['rampQuotes', rampQuoteRequest],
-    queryFn: async () => {
-      // Skip fetching if we already have quotes
-      if (precomputedQuotes && precomputedQuotes.length > 0) {
-        return []
-      }
-
-      if (Object.keys(rampPlugins).length === 0) {
-        return []
-      }
-
-      const quotePromises = Object.values(rampPlugins).map(
-        async (plugin): Promise<Result<RampQuoteResult[], QuoteError>> => {
-          try {
-            const quotes = await plugin.fetchQuote(rampQuoteRequest)
-            return { ok: true, value: quotes }
-          } catch (error) {
-            console.warn(`Failed to get quote from ${plugin.pluginId}:`, error)
-            return {
-              ok: false,
-              error: {
-                pluginId: plugin.pluginId,
-                pluginDisplayName: plugin.rampInfo.pluginDisplayName,
-                error
-              }
-            }
-          }
-        }
-      )
-
-      return await Promise.all(quotePromises)
-    },
-    refetchOnMount: 'always',
-    refetchInterval: 60000,
-    enabled: !precomputedQuotes || precomputedQuotes.length === 0,
-    staleTime: 30000, // Consider data stale after 30 seconds
-    gcTime: 300000 // Keep in cache for 5 minutes
+  // Use the new hook with precomputed quotes
+  const {
+    quotes: allQuotes,
+    isLoading: isLoadingQuotes,
+    isFetching: isFetchingQuotes,
+    errors: failedQuotes
+  } = useRampQuotes({
+    rampQuoteRequest,
+    plugins: rampPlugins,
+    precomputedQuotes
   })
 
   const handleQuotePress = async (quote: RampQuoteResult) => {
@@ -101,24 +64,6 @@ export const TradeOptionSelectScene = (props: Props): React.JSX.Element => {
     }
   }
 
-  // Use precomputed quotes if available, otherwise use fetched quotes
-  const allQuotes: RampQuoteResult[] = React.useMemo(() => {
-    if (precomputedQuotes && precomputedQuotes.length > 0) {
-      return precomputedQuotes
-    }
-
-    return quoteResults
-      .filter(
-        (result): result is { ok: true; value: RampQuoteResult[] } => result.ok
-      )
-      .flatMap(result => result.value)
-      .sort((a, b) => {
-        const rateA = parseFloat(a.fiatAmount) / parseFloat(a.cryptoAmount)
-        const rateB = parseFloat(b.fiatAmount) / parseFloat(b.cryptoAmount)
-        return rateA - rateB
-      })
-  }, [precomputedQuotes, quoteResults])
-
   // Get the best quote overall
   const bestQuoteOverall = allQuotes[0]
 
@@ -133,7 +78,7 @@ export const TradeOptionSelectScene = (props: Props): React.JSX.Element => {
     })
 
     // Sort quotes within each payment type group
-    grouped.forEach((quotes, paymentType) => {
+    grouped.forEach(quotes => {
       quotes.sort((a, b) => {
         const rateA = parseFloat(a.fiatAmount) / parseFloat(a.cryptoAmount)
         const rateB = parseFloat(b.fiatAmount) / parseFloat(b.cryptoAmount)
@@ -144,18 +89,24 @@ export const TradeOptionSelectScene = (props: Props): React.JSX.Element => {
     return grouped
   }, [allQuotes])
 
-  // Get failed quotes for error display
-  const failedQuotes = quoteResults.filter(
-    (result): result is { ok: false; error: QuoteError } => !result.ok
-  )
+  // Only show loading state if we have no quotes to display
+  const showLoadingState =
+    isPluginsLoading || (isLoadingQuotes && allQuotes.length === 0)
 
   return (
     <SceneWrapper scroll hasTabs>
       <SceneContainer headerTitle={lstrings.trade_option_buy_title}>
         <SectionHeader
           leftTitle={lstrings.trade_option_select_payment_method}
+          rightNode={
+            isFetchingQuotes ? (
+              <EdgeAnim enter={{ type: 'fadeIn', delay: 200 }}>
+                <ActivityIndicator size="small" color={theme.primaryText} />
+              </EdgeAnim>
+            ) : undefined
+          }
         />
-        {isPluginsLoading || isLoadingQuotes ? (
+        {showLoadingState ? (
           <>
             <ShimmerCard>
               <Shimmer />
@@ -192,19 +143,19 @@ export const TradeOptionSelectScene = (props: Props): React.JSX.Element => {
                 />
               )
             )}
-            {failedQuotes.map(result => {
+            {failedQuotes.map(error => {
               const errorMessage =
-                result.error.error instanceof Error
-                  ? result.error.error.message
-                  : String(result.error.error)
+                error.error instanceof Error
+                  ? error.error.message
+                  : String(error.error)
 
               return (
                 <AlertCardUi4
-                  key={`error-${result.error.pluginId}`}
+                  key={`error-${error.pluginId}`}
                   type="error"
                   title={sprintf(
                     lstrings.trade_option_provider_failed_s,
-                    result.error.pluginDisplayName
+                    error.pluginDisplayName
                   )}
                   body={errorMessage}
                   marginRem={[0.5, 0.5]}
@@ -247,9 +198,8 @@ const QuoteResult: React.FC<{
   const icon = paymentTypeIcon ?? { uri: selectedQuote.partnerIcon }
 
   // Determine custom title rendering
-  const paymentType = selectedQuote.paymentType
-  const customTitleKey = paymentTypeToCustomTitleKey[paymentType]
-  const defaultTitle = getPaymentTypeDisplayName(paymentType)
+  const customTitleKey = paymentTypeToCustomTitleKey[selectedQuote.paymentType]
+  const defaultTitle = getPaymentTypeDisplayName(selectedQuote.paymentType)
 
   // Render custom title based on payment type
   let titleComponent: React.ReactNode