fix: OrderDetails hydration fallback and remove debug instrumentation

- Pass providerCode and walletAddress from BuildQuote to OrderDetails
  so it can fetch the order from the API when not yet in state
- Add hydration effect in OrderDetails that calls refreshOrder when
  order is missing but fallback params are available
- Show loading spinner and error states during hydration
- Remove all debug instrumentation (rampsDebugLog) from BuildQuote,
  OrderDetails, and Checkout

Made-with: Cursor

Author: lorenzosantos

app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx

@@ -67,8 +67,6 @@ import TruncatedError from '../../components/TruncatedError';
 import { PROVIDER_LINKS } from '../../Aggregator/types';
 import InAppBrowser from 'react-native-inappbrowser-reborn';
 import Device from '../../../../../util/device';
-import { rampsDebugLog } from '../../debug/rampsDebugLogger';
-
 export interface BuildQuoteParams {
   assetId?: string;
   nativeFlowError?: string;
@@ -527,18 +525,6 @@ function BuildQuote() {
       );
       const providerCode = normalizeProviderCode(selectedQuote.provider);
 
-      // #region agent log
-      rampsDebugLog({
-        location: 'BuildQuote.tsx:handleContinuePress',
-        message: 'handleContinuePress START',
-        data: {
-          providerCode,
-          isCustomAction,
-          hasBuyURL: Boolean(selectedQuote.quote?.buyURL),
-        },
-      });
-      // #endregion
-
       // TODO: remove all [Ramp][Debug] logging after PayPal redirect is verified
       Logger.log('[Ramp][Debug] === handleContinuePress START ===');
       Logger.log('[Ramp][Debug] provider:', selectedQuote.provider);
@@ -587,18 +573,6 @@ function BuildQuote() {
 
       Logger.log('[Ramp][Debug] calling getBuyWidgetData...');
       const buyWidget = await getBuyWidgetData(quoteForWidget);
-      // #region agent log
-      rampsDebugLog({
-        location: 'BuildQuote.tsx:getBuyWidgetData',
-        message: 'getBuyWidgetData result',
-        data: {
-          hasUrl: Boolean(buyWidget?.url),
-          url: buyWidget?.url?.slice(0, 80),
-          browser: buyWidget?.browser,
-          orderId: buyWidget?.orderId,
-        },
-      });
-      // #endregion
       Logger.log(
         '[Ramp][Debug] getBuyWidgetData result:',
         JSON.stringify(buyWidget),
@@ -625,18 +599,6 @@ function BuildQuote() {
           Logger.log('[Ramp][Debug] effectiveWallet:', effectiveWallet);
 
           if (effectiveOrderId && effectiveWallet) {
-            // #region agent log
-            rampsDebugLog({
-              location: 'BuildQuote.tsx:addPrecreatedOrder',
-              message: 'addPrecreatedOrder before external browser',
-              data: {
-                orderId: effectiveOrderId,
-                providerCode,
-                walletAddress: effectiveWallet,
-                chainId: network,
-              },
-            });
-            // #endregion
             Logger.log('[Ramp][Debug] calling addPrecreatedOrder...');
             addPrecreatedOrder({
               orderId: effectiveOrderId,
@@ -670,17 +632,6 @@ function BuildQuote() {
                 buyWidget.url,
                 deeplinkRedirectUrl,
               );
-              // #region agent log
-              rampsDebugLog({
-                location: 'BuildQuote.tsx:InAppBrowser.openAuth',
-                message: 'InAppBrowser returned',
-                data: {
-                  resultType: result.type,
-                  hasUrl: Boolean(result.url),
-                  url: result.url?.slice(0, 100),
-                },
-              });
-              // #endregion
               Logger.log(
                 '[Ramp][Debug] InAppBrowser result:',
                 JSON.stringify(result),
@@ -703,13 +654,6 @@ function BuildQuote() {
             const orderCode = effectiveOrderId.includes('/orders/')
               ? effectiveOrderId.split('/orders/')[1]
               : effectiveOrderId;
-            // #region agent log
-            rampsDebugLog({
-              location: 'BuildQuote.tsx:navigateToOrderDetails',
-              message: 'navigating to RAMPS_ORDER_DETAILS after PayPal return',
-              data: { orderCode, effectiveOrderId },
-            });
-            // #endregion
             Logger.log(
               '[Ramp][Debug] navigating to RAMPS_ORDER_DETAILS with orderCode:',
               orderCode,
@@ -725,6 +669,8 @@ function BuildQuote() {
                   params: {
                     orderId: orderCode,
                     showCloseButton: true,
+                    providerCode,
+                    walletAddress: effectiveWallet || undefined,
                   },
                 },
               ],

app/components/UI/Ramp/Views/Checkout/Checkout.tsx

@@ -43,8 +43,6 @@ import {
   getCheckoutCallback,
   removeCheckoutCallback,
 } from '../../utils/checkoutCallbackRegistry';
-import { rampsDebugLog } from '../../debug/rampsDebugLogger';
-
 interface CheckoutParams {
   url: string;
   providerName: string;
@@ -176,18 +174,6 @@ const Checkout = () => {
     const canRegister =
       effectiveOrderId && providerCode && walletAddress && network;
     if (!canRegister) return;
-    // #region agent log
-    rampsDebugLog({
-      location: 'Checkout.tsx:addPrecreatedOrder',
-      message: 'addPrecreatedOrder (WebView flow)',
-      data: {
-        orderId: effectiveOrderId,
-        providerCode,
-        walletAddress,
-        network,
-      },
-    });
-    // #endregion
     addPrecreatedOrder({
       orderId: effectiveOrderId,
       providerCode: normalizeProviderCode(providerCode),
@@ -214,18 +200,6 @@ const Checkout = () => {
       }
       isRedirectionHandledRef.current = true;
 
-      // #region agent log
-      rampsDebugLog({
-        location: 'Checkout.tsx:handleNavigationStateChange',
-        message: 'callback URL detected',
-        data: {
-          url: navState.url?.slice(0, 120),
-          providerCode,
-          walletAddress,
-        },
-      });
-      // #endregion
-
       try {
         const parsedUrl = parseUrl(navState.url);
         if (Object.keys(parsedUrl.query).length === 0) {
@@ -244,18 +218,6 @@ const Checkout = () => {
           walletAddress,
         );
 
-        // #region agent log
-        rampsDebugLog({
-          location: 'Checkout.tsx:getOrderFromCallback',
-          message: 'getOrderFromCallback result',
-          data: {
-            hasOrder: Boolean(rampsOrder),
-            providerOrderId: rampsOrder?.providerOrderId,
-            status: rampsOrder?.status,
-          },
-        });
-        // #endregion
-
         if (!rampsOrder) {
           throw new Error('Order could not be retrieved from callback');
         }

app/components/UI/Ramp/Views/OrderDetails/OrderDetails.tsx

@@ -35,11 +35,13 @@ import { useRampsOrders } from '../../hooks/useRampsOrders';
 import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { RampsOrderDetailsSelectorsIDs } from './OrderDetails.testIds';
-import { rampsDebugLog } from '../../debug/rampsDebugLogger';
-
 interface RampsOrderDetailsParams {
   orderId: string;
   showCloseButton?: boolean;
+  /** Optional: needed when order is not yet in controller state (e.g. race after PayPal return). */
+  providerCode?: string;
+  /** Optional: needed with providerCode to fetch order from API when not in state. */
+  walletAddress?: string;
 }
 
 export const createRampsOrderDetailsNavDetails =
@@ -74,23 +76,9 @@ const OrderDetails = () => {
   const order = getOrderById(params.orderId);
   const isPending = order ? PENDING_STATUSES.has(order.status) : false;
 
-  // #region agent log
-  useEffect(() => {
-    rampsDebugLog({
-      location: 'OrderDetails.tsx:mount',
-      message: 'OrderDetails mounted',
-      data: {
-        orderId: params.orderId,
-        hasOrder: Boolean(order),
-        status: order?.status,
-        isPending,
-      },
-    });
-  }, [params.orderId, order, isPending]);
-  // #endregion
-
   const [isLoading, setIsLoading] = useState(isPending);
   const [error, setError] = useState<string | null>(null);
+  const [hydrationAttempted, setHydrationAttempted] = useState(false);
   const theme = useTheme();
   const { colors } = theme;
   const navigation = useNavigation();
@@ -139,32 +127,11 @@ const OrderDetails = () => {
       setError(null);
       setIsRefreshing(true);
       const providerCode = normalizeProviderCode(order.provider?.id ?? '');
-      // #region agent log
-      rampsDebugLog({
-        location: 'OrderDetails.tsx:handleOnRefresh',
-        message: 'refreshing order',
-        data: {
-          providerOrderId: order.providerOrderId,
-          providerCode,
-          currentStatus: order.status,
-        },
-      });
-      // #endregion
-      const updatedOrder = await refreshOrder(
+      await refreshOrder(
         providerCode,
         order.providerOrderId,
         order.walletAddress,
       );
-      // #region agent log
-      rampsDebugLog({
-        location: 'OrderDetails.tsx:handleOnRefresh',
-        message: 'refresh complete',
-        data: {
-          providerOrderId: order.providerOrderId,
-          newStatus: updatedOrder?.status,
-        },
-      });
-      // #endregion
     } catch (fetchError) {
       Logger.error(fetchError as Error, {
         message: 'FiatOrders::RampsOrderDetails error while refreshing order',
@@ -190,7 +157,81 @@ const OrderDetails = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // When order is missing but we have providerCode/wallet (e.g. race after PayPal return),
+  // fetch from API to hydrate controller state.
+  useEffect(() => {
+    if (
+      order ||
+      hydrationAttempted ||
+      !params.providerCode ||
+      !params.walletAddress ||
+      !params.orderId
+    ) {
+      return;
+    }
+    setHydrationAttempted(true);
+    setIsLoading(true);
+    const providerCode = normalizeProviderCode(params.providerCode);
+    refreshOrder(providerCode, params.orderId, params.walletAddress)
+      .then(() => {
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        setError(
+          err instanceof Error
+            ? err.message
+            : strings('ramps_order_details.error_message'),
+        );
+        setIsLoading(false);
+      });
+  }, [
+    order,
+    hydrationAttempted,
+    params.providerCode,
+    params.walletAddress,
+    params.orderId,
+    refreshOrder,
+  ]);
+
   if (!order) {
+    if (isLoading) {
+      return (
+        <ScreenLayout>
+          <ScreenLayout.Body>
+            <ScreenLayout.Content>
+              <ActivityIndicator />
+            </ScreenLayout.Content>
+          </ScreenLayout.Body>
+        </ScreenLayout>
+      );
+    }
+    if (error && hydrationAttempted) {
+      return (
+        <ScreenLayout>
+          <ScreenLayout.Body>
+            <Box twClassName="flex-1 items-center justify-center px-16 py-16">
+              <Icon
+                name={IconName.Danger}
+                size={IconSize.Xl}
+                twClassName="text-error-default mb-2"
+              />
+              <Text
+                variant={TextVariant.HeadingSm}
+                fontWeight={FontWeight.Bold}
+              >
+                {strings('ramps_order_details.error_title')}
+              </Text>
+              <Text
+                variant={TextVariant.BodyMd}
+                twClassName="text-alternative text-center mb-8"
+              >
+                {error}
+              </Text>
+            </Box>
+          </ScreenLayout.Body>
+        </ScreenLayout>
+      );
+    }
     return <ScreenLayout />;
   }