fixup! Add RampPluginManager service and RampPluginReducer

Remove RampPluginManager and Redux state management for ramp plugins

Author: samholmes

src/__tests__/reducers/__snapshots__/RootReducer.test.ts.snap

@@ -60,10 +60,6 @@ exports[`initialState 1`] = `
     "contacts": "denied",
     "location": "denied",
   },
-  "rampPlugins": {
-    "isLoading": true,
-    "plugins": {},
-  },
   "sortedWalletList": [],
   "staking": {
     "walletStakingMap": {},

src/components/scenes/TradeCreateScene.tsx

@@ -10,11 +10,15 @@ 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 { useRampPlugins } from '../../hooks/useRampPlugins'
 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'
+import type {
+  RampPlugin,
+  RampQuoteRequest
+} from '../../plugins/ramps/rampPluginTypes'
 import { getDefaultFiat } from '../../selectors/SettingsSelectors'
 import { useDispatch, useSelector } from '../../types/reactRedux'
 import type { BuyTabSceneProps, NavigationBase } from '../../types/routerTypes'
@@ -124,9 +128,16 @@ export const TradeCreateScene = (props: Props): React.ReactElement => {
   const shouldShowRegionSelect =
     initialRegionCode == null && (countryCode === '' || countryData == null)
 
-  // Get ramp plugins directly from Redux
-  const rampPlugins = useSelector(state => state.rampPlugins.plugins)
-  const isPluginsLoading = useSelector(state => state.rampPlugins.isLoading)
+  // Get ramp plugins
+  const { data: rampPluginArray = [], isLoading: isPluginsLoading } =
+    useRampPlugins({ account })
+  const rampPlugins = React.useMemo(() => {
+    const map: Record<string, RampPlugin> = {}
+    for (const plugin of rampPluginArray) {
+      map[plugin.pluginId] = plugin
+    }
+    return map
+  }, [rampPluginArray])
 
   // Use supported plugins hook
   const { supportedPlugins, isLoading: isCheckingSupport } =

src/components/scenes/TradeOptionSelectScene.tsx

@@ -4,10 +4,12 @@ import { sprintf } from 'sprintf-js'
 
 // TradeOptionSelectScene - Updated layout for design requirements
 import paymentTypeLogoApplePay from '../../assets/images/paymentTypes/paymentTypeLogoApplePay.png'
+import { useRampPlugins } from '../../hooks/useRampPlugins'
 import { useRampQuotes } from '../../hooks/useRampQuotes'
 import { useSupportedPlugins } from '../../hooks/useSupportedPlugins'
 import { lstrings } from '../../locales/strings'
 import type {
+  RampPlugin,
   RampQuoteRequest,
   RampQuoteResult,
   SettlementRange
@@ -42,8 +44,17 @@ export const TradeOptionSelectScene = (props: Props): React.JSX.Element => {
   const { rampQuoteRequest, quotes: precomputedQuotes } = route.params
 
   const theme = useTheme()
-  const rampPlugins = useSelector(state => state.rampPlugins.plugins)
-  const isPluginsLoading = useSelector(state => state.rampPlugins.isLoading)
+  const account = useSelector(state => state.core.account)
+  // Get ramp plugins
+  const { data: rampPluginArray = [], isLoading: isPluginsLoading } =
+    useRampPlugins({ account })
+  const rampPlugins = React.useMemo(() => {
+    const map: Record<string, RampPlugin> = {}
+    for (const plugin of rampPluginArray) {
+      map[plugin.pluginId] = plugin
+    }
+    return map
+  }, [rampPluginArray])
 
   // Use supported plugins hook only if no precomputed quotes
   const { supportedPlugins } = useSupportedPlugins({

src/components/services/RampPluginManager.tsx

@@ -44,7 +44,6 @@ import { NetworkActivity } from './NetworkActivity'
 import { NotificationService } from './NotificationService'
 import { PasswordReminderService } from './PasswordReminderService'
 import { PermissionsManager } from './PermissionsManager'
-import { RampPluginManager } from './RampPluginManager'
 import { SortedWalletList } from './SortedWalletList'
 import { WalletConnectService } from './WalletConnectService'
 import { WalletLifecycle } from './WalletLifecycle'
@@ -242,7 +241,6 @@ export function Services(props: Props) {
         <FioService account={account} navigation={navigation} />
       )}
       <PermissionsManager />
-      <RampPluginManager navigation={navigation} />
       {startLoanManager ? <LoanManagerService account={account} /> : null}
       <NetworkActivity />
       <PasswordReminderService />

src/components/services/Services.tsx

@@ -0,0 +1,71 @@
+import type { EdgeAccount } from 'edge-core-js'
+import * as React from 'react'
+
+import { pluginFactories } from '../plugins/ramps/allRampPlugins'
+import type { RampPlugin } from '../plugins/ramps/rampPluginTypes'
+
+interface UseRampPluginsOptions {
+  account: EdgeAccount
+}
+
+export function useRampPlugins({ account }: UseRampPluginsOptions) {
+  const [plugins, setPlugins] = React.useState<RampPlugin[]>([])
+  const [isLoading, setIsLoading] = React.useState(true)
+  const [error, setError] = React.useState<Error | null>(null)
+
+  React.useEffect(() => {
+    let mounted = true
+
+    const loadPlugins = async () => {
+      try {
+        setIsLoading(true)
+        setError(null)
+
+        const loadedPlugins: RampPlugin[] = []
+
+        for (const [pluginId, factory] of Object.entries(pluginFactories)) {
+          try {
+            // Create a minimal config for the plugin
+            const config = {
+              initOptions: {},
+              account,
+              navigation: null as any, // Navigation will be provided by components that need it
+              onLogEvent: () => {},
+              disklet: account.disklet
+            }
+
+            const plugin = factory(config)
+            loadedPlugins.push(plugin)
+          } catch (error) {
+            console.warn(`Failed to load plugin ${pluginId}:`, error)
+          }
+        }
+
+        if (mounted) {
+          setPlugins(loadedPlugins)
+          setIsLoading(false)
+        }
+      } catch (err) {
+        if (mounted) {
+          setError(
+            err instanceof Error ? err : new Error('Failed to load plugins')
+          )
+          setIsLoading(false)
+        }
+      }
+    }
+
+    loadPlugins().catch(console.error)
+
+    return () => {
+      mounted = false
+    }
+  }, [account])
+
+  return {
+    data: plugins,
+    isLoading,
+    error,
+    isError: error != null
+  }
+}

src/hooks/useRampPlugins.ts

@@ -21,7 +21,6 @@ import { account, type AccountState } from './AccountReducer'
 import { core, type CoreState } from './CoreReducer'
 import { network, type NetworkState } from './NetworkReducer'
 import { permissions, type PermissionsState } from './PermissionsReducer'
-import { rampPlugins, type RampPluginState } from './RampPluginReducer'
 import { staking, type StakingState } from './StakingReducer'
 import { ui, type UiState } from './uiReducer'
 
@@ -48,7 +47,6 @@ export interface RootState {
   readonly actionQueue: ActionQueueState
   readonly core: CoreState
   readonly loanManager: LoanManagerState
-  readonly rampPlugins: RampPluginState
   readonly staking: StakingState
   readonly permissions: PermissionsState
   readonly ui: UiState
@@ -139,7 +137,6 @@ export const rootReducer = combineReducers<RootState, Action>({
   core,
   loanManager,
   permissions,
-  rampPlugins,
   staking,
   ui,
   network

src/reducers/RampPluginReducer.ts

@@ -16,7 +16,6 @@ import type {
 import type { SortOption } from '../components/modals/WalletListSortModal'
 import type { ActionQueueAction } from '../controllers/action-queue/redux/actions'
 import type { LoanManagerActions } from '../controllers/loan-manager/redux/actions'
-import type { RampPlugin } from '../plugins/ramps/rampPluginTypes'
 import type { CcWalletMap } from '../reducers/FioReducer'
 import type { PermissionsState } from '../reducers/PermissionsReducer'
 import type {
@@ -187,10 +186,6 @@ export type Action =
       data: { fioAddress: string; ccWalletMap: CcWalletMap }
     }
   | { type: 'FIO/SET_FIO_DOMAINS'; data: { fioDomains: FioDomain[] } }
-  | {
-      type: 'RAMP_PLUGINS/LOADING_COMPLETE'
-      data: { plugins: Record<string, RampPlugin> }
-    }
   /*
    Self-Contained Package Actions: