ProviderSelectionModal.tsx

import React, { useCallback, useMemo, useRef } from 'react';
import { useWindowDimensions, View } from 'react-native';
import type { CaipChainId } from '@metamask/utils';
import type { Provider } from '@metamask/ramps-controller';
import { useSelector } from 'react-redux';
import {
  BottomSheet,
  type BottomSheetRef,
} from '@metamask/design-system-react-native';
import { useNavigation, useNavigationState } from '@react-navigation/native';
import {
  createNavigationDetails,
  useParams,
} from '../../../../../../util/navigation/navUtils';
import Routes from '../../../../../../constants/navigation/Routes';
import ProviderSelection from './ProviderSelection';
import { useRampsController } from '../../../hooks/useRampsController';
import { useRampsQuotes } from '../../../hooks/useRampsQuotes';
import useRampAccountAddress from '../../../hooks/useRampAccountAddress';
import { getRampCallbackBaseUrl } from '../../../utils/getRampCallbackBaseUrl';
import { getOrdersProviders } from '../../../../../../reducers/fiatOrders';
import { selectRampsOrdersForSelectedAccountGroup } from '../../../../../../selectors/rampsController';
import { completedOrdersFromRampsOrders } from '../../../utils/determinePreferredProvider';
import { providerSupportsAsset } from '../../../utils/providerSupportsAsset';
import { parseUserFacingError } from '../../../utils/parseUserFacingError';
import { useStyles } from '../../../../../hooks/useStyles';
import styleSheet from './ProviderSelectionModal.styles';
import { useAnalytics } from '../../../../../hooks/useAnalytics/useAnalytics';
import { MetaMetricsEvents } from '../../../../../../core/Analytics';
import { strings } from '../../../../../../../locales/i18n';

export interface ProviderSelectionModalParams {
  amount?: number;
  assetId?: string;
  skipQuotes?: boolean;
}

export const createProviderSelectionModalNavigationDetails =
  createNavigationDetails<ProviderSelectionModalParams>(
    Routes.RAMP.MODALS.ID,
    Routes.RAMP.MODALS.PROVIDER_SELECTION,
  );

const DEFAULT_QUOTE_AMOUNT = 100;

function ProviderSelectionModal() {
  const { trackEvent, createEventBuilder } = useAnalytics();
  const sheetRef = useRef<BottomSheetRef>(null);
  const { height: screenHeight } = useWindowDimensions();
  const { styles } = useStyles(styleSheet, { screenHeight });
  const navigation = useNavigation();
  const {
    amount: routeAmount,
    assetId: paramAssetId,
    skipQuotes = false,
  } = useParams<ProviderSelectionModalParams>();

  const {
    providers,
    selectedProvider,
    setSelectedProvider,
    selectedPaymentMethod,
    selectedToken,
  } = useRampsController();

  const legacyOrdersProviders = useSelector(getOrdersProviders);
  const controllerOrders = useSelector(
    selectRampsOrdersForSelectedAccountGroup,
  );

  const ordersProviders = useMemo(() => {
    const v2ProviderIds = completedOrdersFromRampsOrders(controllerOrders).map(
      (o) => o.providerId,
    );
    return Array.from(new Set([...legacyOrdersProviders, ...v2ProviderIds]));
  }, [legacyOrdersProviders, controllerOrders]);

  const hasPaymentModalInStack = useNavigationState((state) =>
    state.routes.some(
      (route) => route.name === Routes.RAMP.MODALS.PAYMENT_SELECTION,
    ),
  );

  const amount = routeAmount ?? DEFAULT_QUOTE_AMOUNT;
  const walletAddress =
    useRampAccountAddress((selectedToken?.chainId as CaipChainId) ?? null) ??
    '';
  const assetId = paramAssetId ?? selectedToken?.assetId ?? '';

  /**
   * Only list (and quote) providers that support the effective asset. Uses the
   * same id as `getQuotes` (`paramAssetId ?? selectedToken?.assetId`), so flows
   * without route `assetId` still filter when `selectedToken` is set.
   */
  const displayProviders = useMemo(() => {
    if (!assetId) {
      return providers;
    }
    return providers.filter((p) => providerSupportsAsset(p, assetId));
  }, [providers, assetId]);

  const providerIds = useMemo(
    () => displayProviders.map((p) => p.id),
    [displayProviders],
  );

  const quoteFetchParams = useMemo(
    () =>
      !skipQuotes &&
      amount > 0 &&
      walletAddress &&
      assetId &&
      selectedPaymentMethod
        ? {
            amount,
            walletAddress,
            assetId,
            redirectUrl: getRampCallbackBaseUrl(),
            providers: providerIds,
            paymentMethods: [selectedPaymentMethod.id],
          }
        : null,
    [
      skipQuotes,
      amount,
      walletAddress,
      assetId,
      providerIds,
      selectedPaymentMethod,
    ],
  );

  const {
    data: quotes,
    loading: quotesLoading,
    error: quotesError,
  } = useRampsQuotes(quoteFetchParams);

  const handleDismiss = useCallback(
    (hasPendingAction?: boolean) => {
      if (!hasPendingAction && skipQuotes) {
        navigation.navigate(Routes.RAMP.TOKEN_SELECTION, {
          screen: Routes.RAMP.TOKEN_SELECTION,
        });
      }
    },
    [navigation, skipQuotes],
  );

  const handleBack = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  const handleProviderSelect = useCallback(
    (provider: Provider) => {
      trackEvent(
        createEventBuilder(MetaMetricsEvents.RAMPS_PROVIDER_SELECTED)
          .addProperties({
            provider: provider.name,
            previous_provider: selectedProvider?.name,
            location: 'Amount Input',
            ramp_type: 'UNIFIED_BUY_2',
          })
          .build(),
      );
      setSelectedProvider(provider);
      navigation.goBack();
    },
    [
      setSelectedProvider,
      navigation,
      selectedProvider?.name,
      trackEvent,
      createEventBuilder,
    ],
  );

  return (
    <BottomSheet
      ref={sheetRef}
      goBack={navigation.goBack}
      onClose={handleDismiss}
    >
      <View style={styles.container}>
        <ProviderSelection
          providers={displayProviders}
          quotes={quotes}
          quotesLoading={quotesLoading}
          quotesError={
            quotesError
              ? parseUserFacingError(
                  quotesError,
                  strings('fiat_on_ramp.no_quotes_available'),
                )
              : null
          }
          showQuotes={!skipQuotes && amount > 0 && !!selectedPaymentMethod}
          showBackButton={hasPaymentModalInStack}
          ordersProviders={ordersProviders.filter(
            (id): id is string => id != null,
          )}
          onBack={handleBack}
          onProviderSelect={handleProviderSelect}
        />
      </View>
    </BottomSheet>
  );
}

export default ProviderSelectionModal;