fix(ramps): route external-browser callbacks through order details

georgeweiler · georgeweiler · commit 2f282b9622fa · 2026-03-23T07:39:21.000-06:00
diff --git a/app/components/UI/Ramp/Views/BuildQuote/BuildQuote.test.tsx b/app/components/UI/Ramp/Views/BuildQuote/BuildQuote.test.tsx
@@ -476,12 +476,6 @@ describe('BuildQuote', () => {
         type: 'success',
         url: 'metamask://on-ramp/providers/moonpay?orderId=ord-123',
       });
-      mockGetOrderFromCallback.mockResolvedValue({
-        providerOrderId: 'ord-123',
-        status: 'Pending',
-        cryptoAmount: '0.05',
-        cryptoCurrency: { symbol: 'ETH' },
-      });
       mockGetBuyWidgetData.mockResolvedValue({
         url: 'https://widget.example.com/checkout',
         browser: 'IN_APP_OS_BROWSER',
@@ -497,14 +491,18 @@ describe('BuildQuote', () => {
       });
 
       await waitFor(() => {
-        expect(mockAddOrder).toHaveBeenCalled();
+        expect(mockAddOrder).not.toHaveBeenCalled();
+        expect(mockGetOrderFromCallback).not.toHaveBeenCalled();
         expect(mockNavigationReset).toHaveBeenCalledWith({
           index: 0,
           routes: [
             {
               name: Routes.RAMP.RAMPS_ORDER_DETAILS,
               params: {
-                orderId: 'ord-123',
+                callbackUrl:
+                  'metamask://on-ramp/providers/moonpay?orderId=ord-123',
+                providerCode: 'moonpay',
+                walletAddress: '0x1234567890123456789012345678901234567890',
                 showCloseButton: true,
               },
             },
diff --git a/app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx b/app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx
@@ -20,7 +20,6 @@ import {
   getWidgetRedirectConfig,
 } from '../../utils/buildQuoteWithRedirectUrl';
 import { computeAmountUpdate } from '../../utils/computeAmountUpdate';
-import { extractOrderCode } from '../../utils/extractOrderCode';
 import { getRampCallbackBaseUrl } from '../../utils/getRampCallbackBaseUrl';
 import { getNavigateAfterExternalBrowserRoutes } from '../../utils/rampsNavigation';
 import { reportRampsError } from '../../utils/reportRampsError';
@@ -176,8 +175,6 @@ function BuildQuote() {
     paymentMethods,
     getBuyWidgetData,
     addPrecreatedOrder,
-    addOrder,
-    getOrderFromCallback,
     paymentMethodsLoading,
     paymentMethodsFetching,
     paymentMethodsStatus,
@@ -683,36 +680,17 @@ function BuildQuote() {
             return;
           }
 
-          try {
-            const order = await getOrderFromCallback(
-              providerCode,
-              result.url,
-              effectiveWallet,
-            );
-
-            if (!order || isBailedOrderStatus(order.status)) {
-              navigateAfterExternalBrowser({ returnDestination: 'buildQuote' });
-              return;
-            }
-
-            addOrder(order);
-
-            const rawOrderId = order.providerOrderId ?? effectiveOrderId;
-            if (!rawOrderId) {
-              navigateAfterExternalBrowser({ returnDestination: 'buildQuote' });
-              return;
-            }
-
-            const orderCode = extractOrderCode(rawOrderId);
-            navigateAfterExternalBrowser({
-              returnDestination: 'order',
-              orderCode,
-              providerCode,
-              walletAddress: effectiveWallet || undefined,
-            });
-          } catch {
+          if (!effectiveWallet) {
             navigateAfterExternalBrowser({ returnDestination: 'buildQuote' });
+            return;
           }
+
+          navigateAfterExternalBrowser({
+            returnDestination: 'order',
+            callbackUrl: result.url,
+            providerCode,
+            walletAddress: effectiveWallet,
+          });
         } finally {
           InAppBrowser.closeAuth();
         }
@@ -757,8 +735,6 @@ function BuildQuote() {
     navigation,
     getBuyWidgetData,
     addPrecreatedOrder,
-    getOrderFromCallback,
-    addOrder,
     navigateAfterExternalBrowser,
   ]);
 
diff --git a/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.test.tsx b/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.test.tsx
@@ -11,21 +11,29 @@ import { RampsOrderStatus } from '@metamask/ramps-controller';
 
 const mockSetOptions = jest.fn();
 const mockNavigate = jest.fn();
+const mockSetParams = jest.fn();
+const mockReset = jest.fn();
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({
     setOptions: mockSetOptions,
     navigate: mockNavigate,
     goBack: jest.fn(),
+    setParams: mockSetParams,
+    reset: mockReset,
   }),
 }));
 
 const mockGetOrderById = jest.fn();
 const mockRefreshOrder = jest.fn();
+const mockGetOrderFromCallback = jest.fn();
+const mockAddOrder = jest.fn();
 jest.mock('../../hooks/useRampsOrders', () => ({
   useRampsOrders: () => ({
     getOrderById: mockGetOrderById,
     refreshOrder: mockRefreshOrder,
+    getOrderFromCallback: mockGetOrderFromCallback,
+    addOrder: mockAddOrder,
   }),
 }));
 
@@ -187,4 +195,32 @@ describe('OrderDetails', () => {
     const result = createRampsOrderDetailsNavDetails();
     expect(result[0]).toBe(Routes.RAMP.RAMPS_ORDER_DETAILS);
   });
+
+  it('shows error state with retry when initial callback fetch fails', async () => {
+    mockUseParams.mockReturnValue({
+      callbackUrl: 'metamask://on-ramp/providers/paypal?orderId=abc',
+      providerCode: 'paypal',
+      walletAddress: '0x123',
+    });
+    mockGetOrderById.mockReturnValue(undefined);
+    mockGetOrderFromCallback.mockRejectedValue(
+      new Error('Network request failed'),
+    );
+
+    const { getByText } = render();
+
+    await waitFor(() => {
+      expect(getByText('Network request failed')).toBeOnTheScreen();
+    });
+    expect(getByText('ramps_order_details.try_again')).toBeOnTheScreen();
+
+    fireEvent.press(getByText('ramps_order_details.try_again'));
+    expect(mockGetOrderFromCallback).toHaveBeenCalledTimes(2);
+    expect(mockGetOrderFromCallback).toHaveBeenNthCalledWith(
+      2,
+      'paypal',
+      'metamask://on-ramp/providers/paypal?orderId=abc',
+      '0x123',
+    );
+  });
 });
diff --git a/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.tsx b/app/components/UI/Ramp/Views/OrderDetails/OrderDetails.tsx
@@ -15,7 +15,9 @@ import {
   normalizeProviderCode,
   RampsOrderStatus,
 } from '@metamask/ramps-controller';
+import { isBailedOrderStatus } from '../BuildQuote/BuildQuote';
 import { extractOrderCode } from '../../utils/extractOrderCode';
+import { getNavigateAfterExternalBrowserRoutes } from '../../utils/rampsNavigation';
 import Button, {
   ButtonVariants,
   ButtonSize,
@@ -37,8 +39,11 @@ import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { RampsOrderDetailsSelectorsIDs } from './OrderDetails.testIds';
 interface RampsOrderDetailsParams {
-  orderId: string;
+  orderId?: string;
   showCloseButton?: boolean;
+  callbackUrl?: string;
+  providerCode?: string;
+  walletAddress?: string;
 }
 
 export const createRampsOrderDetailsNavDetails =
@@ -69,19 +74,75 @@ const styles = StyleSheet.create({
 
 const OrderDetails = () => {
   const params = useParams<RampsOrderDetailsParams>();
-  const { getOrderById, refreshOrder } = useRampsOrders();
+  const { getOrderById, refreshOrder, getOrderFromCallback, addOrder } =
+    useRampsOrders();
   const orderCode = params.orderId ? extractOrderCode(params.orderId) : '';
   const order = getOrderById(orderCode);
   const isPending = order ? PENDING_STATUSES.has(order.status) : false;
+  const hasCallbackParams = Boolean(
+    params.callbackUrl && params.providerCode && params.walletAddress,
+  );
 
-  const [isLoading, setIsLoading] = useState(isPending);
+  const [isLoading, setIsLoading] = useState(isPending || hasCallbackParams);
   const [error, setError] = useState<string | null>(null);
   const theme = useTheme();
   const { colors } = theme;
   const navigation = useNavigation();
   const { trackEvent, createEventBuilder } = useAnalytics();
 
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const hasFetchedFromCallback = useRef(false);
+
+  const handleRetryCallbackFetch = useCallback(async () => {
+    if (!params.callbackUrl || !params.providerCode || !params.walletAddress) {
+      return;
+    }
+    try {
+      setError(null);
+      setIsLoading(true);
+      const fetchedOrder = await getOrderFromCallback(
+        params.providerCode,
+        params.callbackUrl,
+        params.walletAddress,
+      );
+      if (!fetchedOrder || isBailedOrderStatus(fetchedOrder.status)) {
+        navigation.reset({
+          index: 0,
+          routes: getNavigateAfterExternalBrowserRoutes({
+            returnDestination: 'buildQuote',
+          }),
+        });
+        return;
+      }
+      addOrder(fetchedOrder);
+      navigation.setParams({
+        orderId: fetchedOrder.providerOrderId,
+        callbackUrl: undefined,
+        providerCode: undefined,
+        walletAddress: undefined,
+      });
+    } catch (fetchError) {
+      Logger.error(fetchError as Error, {
+        message:
+          'RampsOrderDetails: error fetching order from callback URL (retry)',
+        callbackUrl: params.callbackUrl,
+      });
+      setError(
+        fetchError instanceof Error && fetchError.message
+          ? fetchError.message
+          : strings('ramps_order_details.error_message'),
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    params.callbackUrl,
+    params.providerCode,
+    params.walletAddress,
+    getOrderFromCallback,
+    addOrder,
+    navigation,
+  ]);
 
   useEffect(() => {
     navigation.setOptions(
@@ -148,12 +209,79 @@ const OrderDetails = () => {
   }, [order, refreshOrder]);
 
   useEffect(() => {
-    if (isPending) {
+    if (isPending && !hasCallbackParams) {
       handleOnRefresh();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (
+      !hasCallbackParams ||
+      hasFetchedFromCallback.current ||
+      !params.callbackUrl ||
+      !params.providerCode ||
+      !params.walletAddress
+    ) {
+      return;
+    }
+    hasFetchedFromCallback.current = true;
+
+    const providerCode = params.providerCode;
+    const callbackUrl = params.callbackUrl;
+    const walletAddress = params.walletAddress;
+    if (!providerCode || !callbackUrl || !walletAddress) return;
+
+    const fetchFromCallback = async () => {
+      try {
+        setError(null);
+        const fetchedOrder = await getOrderFromCallback(
+          providerCode,
+          callbackUrl,
+          walletAddress,
+        );
+        if (!fetchedOrder || isBailedOrderStatus(fetchedOrder.status)) {
+          navigation.reset({
+            index: 0,
+            routes: getNavigateAfterExternalBrowserRoutes({
+              returnDestination: 'buildQuote',
+            }),
+          });
+          return;
+        }
+        addOrder(fetchedOrder);
+        navigation.setParams({
+          orderId: fetchedOrder.providerOrderId,
+          callbackUrl: undefined,
+          providerCode: undefined,
+          walletAddress: undefined,
+        });
+      } catch (fetchError) {
+        Logger.error(fetchError as Error, {
+          message: 'RampsOrderDetails: error fetching order from callback URL',
+          callbackUrl,
+        });
+        setError(
+          fetchError instanceof Error && fetchError.message
+            ? fetchError.message
+            : strings('ramps_order_details.error_message'),
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchFromCallback();
+  }, [
+    hasCallbackParams,
+    params.callbackUrl,
+    params.providerCode,
+    params.walletAddress,
+    getOrderFromCallback,
+    addOrder,
+    navigation,
+  ]);
+
   if (isLoading) {
     return (
       <ScreenLayout>
@@ -166,11 +294,10 @@ const OrderDetails = () => {
     );
   }
 
-  if (!order) {
-    return <ScreenLayout />;
-  }
-
   if (error) {
+    const onRetry = hasCallbackParams
+      ? handleRetryCallbackFetch
+      : handleOnRefresh;
     return (
       <ScreenLayout>
         <ScreenLayout.Body>
@@ -198,14 +325,18 @@ const OrderDetails = () => {
               size={ButtonSize.Lg}
               width={ButtonWidthTypes.Full}
               label={strings('ramps_order_details.try_again')}
-              onPress={handleOnRefresh}
+              onPress={onRetry}
             />
           </Box>
         </ScreenLayout.Body>
       </ScreenLayout>
     );
   }
 
+  if (!order) {
+    return <ScreenLayout />;
+  }
+
   return (
     <ScreenLayout testID={RampsOrderDetailsSelectorsIDs.CONTAINER}>
       <ScrollView
diff --git a/app/components/UI/Ramp/utils/rampsNavigation.test.ts b/app/components/UI/Ramp/utils/rampsNavigation.test.ts
diff --git a/app/components/UI/Ramp/utils/rampsNavigation.ts b/app/components/UI/Ramp/utils/rampsNavigation.ts
