Add getSupportedPlugins API

Author: samholmes

docs/ramp-plugin-migration-guide.md

@@ -234,6 +234,60 @@ if (deniedPermission) {
 
 Note the inverted boolean logic: `!success` becomes `deniedPermission`.
 
+### Asset Discovery
+
+**Before:**
+```typescript
+const assets = await provider.getSupportedAssets({
+  direction: 'buy',
+  paymentTypes: ['credit', 'bank'],
+  regionCode: { countryCode: 'US', stateCode: 'CA' }
+})
+```
+
+**After:**
+```typescript
+const assets = await plugin.getSupportedAssets({
+  direction: 'buy',
+  paymentTypes: ['credit', 'bank'],
+  regionCode: { countryCode: 'US', stateCode: 'CA' }
+})
+```
+
+The API remains the same, maintaining compatibility with existing code. Note that the method returns the asset map for the first supported payment type from the provided array.
+
+## Asset Discovery Integration
+
+The ramp plugin architecture includes a `getSupportedAssets` method that allows the UI to check which plugins support specific crypto/fiat/region combinations:
+
+```typescript
+// Usage in TradeCreateScene via custom hook
+import { useSupportedPlugins } from '../../hooks/useSupportedPlugins'
+
+const { 
+  data: supportedPlugins = [], 
+  isLoading: isCheckingSupport 
+} = useSupportedPlugins({
+  selectedWallet,
+  selectedCrypto,
+  selectedCryptoCurrencyCode,
+  selectedFiatCurrencyCode,
+  countryCode,
+  stateProvinceCode
+})
+
+// Only query supported plugins for quotes
+const quotePromises = supportedPlugins.map(async (plugin) => {
+  return await plugin.fetchQuote(rampQuoteRequest)
+})
+```
+
+The `useSupportedPlugins` hook:
+- Checks all payment types for comprehensive support
+- Caches results for 5 minutes to avoid excessive API calls
+- Filters plugins based on crypto/fiat/region support
+- Returns loading state for UI feedback
+
 ## Benefits
 
 - **Reduced abstraction**: Direct usage of APIs makes code easier to understand

src/components/scenes/TradeCreateScene.tsx

@@ -11,6 +11,7 @@ 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 { useSupportedPlugins } from '../../hooks/useSupportedPlugins'
 import { useWatch } from '../../hooks/useWatch'
 import { lstrings } from '../../locales/strings'
 import type { RampQuoteRequest } from '../../plugins/ramps/rampPluginTypes'
@@ -70,8 +71,6 @@ export const TradeCreateScene = (props: Props): React.ReactElement => {
   const [selectedFiatCurrencyCode, setSelectedFiatCurrencyCode] =
     useState<string>(defaultFiat)
 
-  const rampPlugins = useSelector(state => state.rampPlugins.plugins)
-
   // Get first wallet as default if no forcedWalletResult
   const firstWallet = React.useMemo((): WalletListWalletResult | undefined => {
     const walletIds = Object.keys(currencyWallets)
@@ -125,6 +124,17 @@ export const TradeCreateScene = (props: Props): React.ReactElement => {
   const shouldShowRegionSelect =
     initialRegionCode == null && (countryCode === '' || countryData == null)
 
+  // Use the custom hook for supported plugins
+  const { data: supportedPlugins = {}, isLoading: isCheckingSupport } =
+    useSupportedPlugins({
+      selectedWallet,
+      selectedCrypto,
+      selectedCryptoCurrencyCode,
+      selectedFiatCurrencyCode,
+      countryCode: countryCode || 'US',
+      stateProvinceCode
+    })
+
   const getRegionText = (): string => {
     if (countryCode === '' || countryData == null) {
       return lstrings.buy_sell_crypto_select_country_button
@@ -204,7 +214,7 @@ export const TradeCreateScene = (props: Props): React.ReactElement => {
     errors: quoteErrors
   } = useRampQuotes({
     rampQuoteRequest,
-    plugins: rampPlugins
+    plugins: supportedPlugins
   })
 
   // Get the best quote
@@ -531,8 +541,30 @@ export const TradeCreateScene = (props: Props): React.ReactElement => {
           </ExchangeRateContainer>
         )}
 
-        {/* Error Alert */}
-        {!isLoadingQuotes &&
+        {/* Support Check Loading */}
+        {isCheckingSupport && selectedWallet != null && (
+          <LoadingContainer>
+            <ActivityIndicator size="small" color={theme.primaryText} />
+            <EdgeText>{lstrings.loading}</EdgeText>
+          </LoadingContainer>
+        )}
+
+        {/* No Plugin Support Alert */}
+        {!isCheckingSupport &&
+        !isLoadingQuotes &&
+        selectedWallet != null &&
+        selectedCryptoCurrencyCode != null &&
+        Object.keys(supportedPlugins).length === 0 ? (
+          <AlertCardUi4
+            type="warning"
+            title={lstrings.trade_buy_unavailable_title}
+            body={lstrings.buy_sell_crypto_no_provider_region}
+          />
+        ) : null}
+
+        {/* Error Alert for Failed Quotes */}
+        {!isCheckingSupport &&
+        !isLoadingQuotes &&
         quoteErrors.length > 0 &&
         sortedQuotes.length === 0 ? (
           <AlertCardUi4
@@ -556,6 +588,7 @@ export const TradeCreateScene = (props: Props): React.ReactElement => {
               selectedCryptoCurrencyCode == null ||
               userInput === '' ||
               lastUsedInput === null ||
+              isCheckingSupport ||
               isLoadingQuotes ||
               sortedQuotes.length === 0
           }}

src/hooks/useSupportedPlugins.ts

@@ -0,0 +1,127 @@
+import { useQuery, type UseQueryResult } from '@tanstack/react-query'
+import type { EdgeCurrencyWallet } from 'edge-core-js'
+
+import type { WalletListWalletResult } from '../components/modals/WalletListModal'
+import type { FiatPaymentType } from '../plugins/gui/fiatPluginTypes'
+import type {
+  RampPlugin,
+  RampSupportedAssetsRequest
+} from '../plugins/ramps/rampPluginTypes'
+import { useSelector } from '../types/reactRedux'
+
+interface UseSupportedPluginsParams {
+  selectedWallet: EdgeCurrencyWallet | undefined
+  selectedCrypto: WalletListWalletResult | undefined
+  selectedCryptoCurrencyCode: string | undefined
+  selectedFiatCurrencyCode: string
+  countryCode: string
+  stateProvinceCode?: string
+}
+
+export const useSupportedPlugins = ({
+  selectedWallet,
+  selectedCrypto,
+  selectedCryptoCurrencyCode,
+  selectedFiatCurrencyCode,
+  countryCode,
+  stateProvinceCode
+}: UseSupportedPluginsParams): UseQueryResult<Record<string, RampPlugin>> => {
+  const rampPlugins = useSelector(state => state.rampPlugins.plugins)
+
+  // Get all possible payment types
+  const allPaymentTypes: FiatPaymentType[] = [
+    'ach',
+    'applepay',
+    'colombiabank',
+    'credit',
+    'directtobank',
+    'fasterpayments',
+    'googlepay',
+    'iach',
+    'ideal',
+    'interac',
+    'iobank',
+    'mexicobank',
+    'payid',
+    'paypal',
+    'pix',
+    'pse',
+    'revolut',
+    'sepa',
+    'spei',
+    'turkishbank',
+    'venmo',
+    'wire'
+  ]
+
+  return useQuery({
+    queryKey: [
+      'supportedRampPlugins',
+      selectedWallet?.id,
+      selectedCrypto?.tokenId,
+      selectedFiatCurrencyCode,
+      countryCode,
+      stateProvinceCode
+    ],
+    queryFn: async (): Promise<Record<string, RampPlugin>> => {
+      if (!selectedWallet || !selectedCryptoCurrencyCode || !selectedCrypto) {
+        return {}
+      }
+
+      const supportRequest: RampSupportedAssetsRequest = {
+        direction: 'buy',
+        paymentTypes: allPaymentTypes,
+        regionCode: {
+          countryCode: countryCode || 'US',
+          stateProvinceCode
+        }
+      }
+
+      // Fetch support from all plugins in parallel
+      const supportPromises = Object.entries(rampPlugins).map(
+        async ([pluginId, plugin]) => {
+          try {
+            const assetMap = await plugin.getSupportedAssets(supportRequest)
+            return { pluginId, plugin, assetMap }
+          } catch (error) {
+            console.error(
+              `Failed to get supported assets for ${pluginId}:`,
+              error
+            )
+            return { pluginId, plugin, assetMap: null }
+          }
+        }
+      )
+
+      const results = await Promise.all(supportPromises)
+
+      // Filter to only supported plugins
+      return results
+        .filter(({ assetMap }) => {
+          if (!assetMap) return false
+
+          // Check crypto support
+          const pluginCurrencyCode = selectedWallet.currencyInfo.pluginId
+          const cryptoSupported = assetMap.crypto[pluginCurrencyCode]?.some(
+            token => token.tokenId === (selectedCrypto.tokenId ?? null)
+          )
+
+          // Check fiat support
+          const fiatSupported =
+            assetMap.fiat[`iso:${selectedFiatCurrencyCode}`] === true
+
+          return cryptoSupported && fiatSupported
+        })
+        .reduce<Record<string, RampPlugin>>((plugins, { plugin }) => {
+          plugins[plugin.pluginId] = plugin
+          return plugins
+        }, {})
+    },
+    enabled:
+      !!selectedWallet &&
+      !!selectedCryptoCurrencyCode &&
+      Object.keys(rampPlugins).length > 0,
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+    gcTime: 10 * 60 * 1000 // Keep in cache for 10 minutes
+  })
+}