fix: cash buy button action

app/components/UI/TokenDetails/components/MoreTokenActionsMenu.tsx

@@ -16,7 +16,6 @@ import Routes from '../../../../constants/navigation/Routes';
 import Engine from '../../../../core/Engine';
 import NotificationManager from '../../../../core/NotificationManager';
 import { selectTokenList } from '../../../../selectors/tokenListController';
-import { selectChainId } from '../../../../selectors/networkController';
 import { getDecimalChainId } from '../../../../util/networks';
 import { getDetectedGeolocation } from '../../../../reducers/fiatOrders';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
@@ -65,7 +64,7 @@ const MoreTokenActionsMenu = () => {
     isBuyable,
     isNativeCurrency,
     asset,
-    onBuy: customOnBuy,
+    onBuy,
     onReceive,
   } = route.params;
 
@@ -75,7 +74,6 @@ const MoreTokenActionsMenu = () => {
   const rampsButtonClickData = useRampsButtonClickData();
   const rampGeodetectedRegion = useSelector(getDetectedGeolocation);
   const tokenList = useSelector(selectTokenList);
-  const chainId = useSelector(selectChainId);
   const explorer = useBlockExplorer(asset.chainId);
 
   const closeBottomSheetAndNavigate = useCallback(
@@ -101,74 +99,25 @@ const MoreTokenActionsMenu = () => {
     [closeBottomSheetAndNavigate, navigation],
   );
 
-  const getChainIdForAsset = useCallback(() => {
-    if (asset.chainId) {
-      if (typeof asset.chainId === 'string' && asset.chainId.startsWith('0x')) {
-        const parsed = parseInt(asset.chainId, 16);
-        return isNaN(parsed) ? getDecimalChainId(chainId) : parsed;
-      }
-      const parsed = parseInt(asset.chainId, 10);
-      return isNaN(parsed) ? getDecimalChainId(chainId) : parsed;
-    }
-    return getDecimalChainId(chainId);
-  }, [asset.chainId, chainId]);
-
-  // Fund action handlers (same as FundActionMenu)
-  const handleBuyUnified = useCallback(() => {
-    closeBottomSheetAndNavigate(() => {
-      if (customOnBuy) {
-        customOnBuy();
-      } else {
-        goToBuy({ assetId: asset.address });
-      }
-    });
-
-    if (!customOnBuy) {
-      trackEvent(
-        createEventBuilder(MetaMetricsEvents.RAMPS_BUTTON_CLICKED)
-          .addProperties({
-            text: 'Buy',
-            location: 'MoreTokenActionsMenu',
-            chain_id_destination: getChainIdForAsset(),
-            ramp_type: 'UNIFIED_BUY',
-            region: rampGeodetectedRegion,
-            ramp_routing: rampsButtonClickData.ramp_routing,
-            is_authenticated: rampsButtonClickData.is_authenticated,
-            preferred_provider: rampsButtonClickData.preferred_provider,
-            order_count: rampsButtonClickData.order_count,
-          })
-          .build(),
-      );
-    }
-  }, [
-    closeBottomSheetAndNavigate,
-    customOnBuy,
-    goToBuy,
-    asset.address,
-    trackEvent,
-    createEventBuilder,
-    getChainIdForAsset,
-    rampGeodetectedRegion,
-    rampsButtonClickData,
-  ]);
-
   const handleBuy = useCallback(() => {
     closeBottomSheetAndNavigate(() => {
-      if (customOnBuy) {
-        customOnBuy();
+      if (onBuy) {
+        onBuy();
+      } else if (rampUnifiedV1Enabled) {
+        goToBuy({ assetId: asset.address });
       } else {
         goToAggregator({ assetId: asset.address });
       }
     });
 
-    if (!customOnBuy) {
+    if (!onBuy) {
       trackEvent(
         createEventBuilder(MetaMetricsEvents.RAMPS_BUTTON_CLICKED)
           .addProperties({
             text: 'Buy',
             location: 'MoreTokenActionsMenu',
-            chain_id_destination: getChainIdForAsset(),
-            ramp_type: 'BUY',
+            chain_id_destination: getDecimalChainId(asset.chainId),
+            ramp_type: rampUnifiedV1Enabled ? 'UNIFIED_BUY' : 'BUY',
             region: rampGeodetectedRegion,
             ramp_routing: rampsButtonClickData.ramp_routing,
             is_authenticated: rampsButtonClickData.is_authenticated,
@@ -178,19 +127,23 @@ const MoreTokenActionsMenu = () => {
           .build(),
       );
 
-      trace({
-        name: TraceName.LoadRampExperience,
-        tags: { rampType: RampType.BUY },
-      });
+      if (!rampUnifiedV1Enabled) {
+        trace({
+          name: TraceName.LoadRampExperience,
+          tags: { rampType: RampType.BUY },
+        });
+      }
     }
   }, [
     closeBottomSheetAndNavigate,
-    customOnBuy,
+    onBuy,
+    rampUnifiedV1Enabled,
+    goToBuy,
     goToAggregator,
     asset.address,
+    asset.chainId,
     trackEvent,
     createEventBuilder,
-    getChainIdForAsset,
     rampGeodetectedRegion,
     rampsButtonClickData,
   ]);
@@ -251,7 +204,7 @@ const MoreTokenActionsMenu = () => {
                     token_standard: 'ERC20',
                     asset_type: 'token',
                     tokens: [`${tokenSymbol} - ${asset.address}`],
-                    chain_id: getDecimalChainId(chainId),
+                    chain_id: getDecimalChainId(asset.chainId),
                   })
                   .build(),
               );
@@ -270,7 +223,6 @@ const MoreTokenActionsMenu = () => {
     tokenList,
     trackEvent,
     createEventBuilder,
-    chainId,
   ]);
 
   const actionConfigs: ActionConfig[] = useMemo(() => {
@@ -297,7 +249,7 @@ const MoreTokenActionsMenu = () => {
         iconName: IconName.AttachMoney,
         testID: WalletActionsBottomSheetSelectorsIDs.BUY_BUTTON,
         isVisible: true,
-        onPress: rampUnifiedV1Enabled ? handleBuyUnified : handleBuy,
+        onPress: handleBuy,
       });
     }
 
@@ -334,10 +286,8 @@ const MoreTokenActionsMenu = () => {
     asset.chainId,
     asset.symbol,
     explorer,
-    rampUnifiedV1Enabled,
     onReceive,
     handleReceive,
-    handleBuyUnified,
     handleBuy,
     handleViewOnBlockExplorer,
     handleRemoveToken,

app/components/UI/TokenDetails/components/TokenDetailsActions.tsx

@@ -9,14 +9,16 @@ import { IconName } from '../../../../component-library/components/Icons/Icon';
 import { TokenOverviewSelectorsIDs } from '../../AssetOverview/TokenOverview.testIds';
 import { useSelector } from 'react-redux';
 import { selectCanSignTransactions } from '../../../../selectors/accountsController';
+import { getDetectedGeolocation } from '../../../../reducers/fiatOrders';
 import Routes from '../../../../constants/navigation/Routes';
 import { useMetrics } from '../../../hooks/useMetrics';
-import {
-  trackActionButtonClick,
-  ActionButtonType,
-  ActionLocation,
-  ActionPosition,
-} from '../../../../util/analytics/actionButtonTracking';
+import { useRampNavigation } from '../../Ramp/hooks/useRampNavigation';
+import useRampsUnifiedV1Enabled from '../../Ramp/hooks/useRampsUnifiedV1Enabled';
+import { useRampsButtonClickData } from '../../Ramp/hooks/useRampsButtonClickData';
+import { MetaMetricsEvents } from '../../../../core/Analytics';
+import { trace, TraceName } from '../../../../util/trace';
+import { RampType } from '../../../../reducers/fiatOrders/types';
+import { getDecimalChainId } from '../../../../util/networks';
 import { TokenI } from '../../Tokens/types';
 
 // Height of MainActionButton: paddingVertical (16 * 2) + Icon (24px) + label marginTop (2) + label lineHeight (~16)
@@ -91,9 +93,13 @@ export const TokenDetailsActions: React.FC<TokenDetailsActionsProps> = ({
 }) => {
   const { styles } = useStyles(styleSheet, {});
   const canSignTransactions = useSelector(selectCanSignTransactions);
+  const rampGeodetectedRegion = useSelector(getDetectedGeolocation);
   const navigation = useNavigation();
   const { navigate } = navigation;
   const { trackEvent, createEventBuilder } = useMetrics();
+  const { goToBuy, goToAggregator } = useRampNavigation();
+  const rampUnifiedV1Enabled = useRampsUnifiedV1Enabled();
+  const rampsButtonClickData = useRampsButtonClickData();
 
   // Prevent rapid navigation clicks - locks all buttons during navigation
   const navigationLockRef = useRef(false);
@@ -122,31 +128,51 @@ export const TokenDetailsActions: React.FC<TokenDetailsActionsProps> = ({
 
   const handleBuyPress = useCallback(() => {
     withNavigationLock(() => {
-      trackActionButtonClick(trackEvent, createEventBuilder, {
-        action_name: ActionButtonType.BUY,
-        action_position: ActionPosition.FIRST_POSITION,
-        button_label: strings('asset_overview.cash_buy_button'),
-        location: ActionLocation.HOME,
-      });
+      if (onBuy) {
+        onBuy();
+      } else if (rampUnifiedV1Enabled) {
+        goToBuy({ assetId: token.address });
+      } else {
+        goToAggregator({ assetId: token.address });
+      }
 
-      navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
-        screen: Routes.MODAL.FUND_ACTION_MENU,
-        params: {
-          onBuy,
-          asset: {
-            address: token.address,
-            chainId: token.chainId,
-          },
-        },
-      });
+      if (!onBuy) {
+        trackEvent(
+          createEventBuilder(MetaMetricsEvents.RAMPS_BUTTON_CLICKED)
+            .addProperties({
+              text: 'Buy',
+              location: 'TokenDetailsActions',
+              chain_id_destination: getDecimalChainId(token.chainId),
+              ramp_type: rampUnifiedV1Enabled ? 'UNIFIED_BUY' : 'BUY',
+              region: rampGeodetectedRegion,
+              ramp_routing: rampsButtonClickData.ramp_routing,
+              is_authenticated: rampsButtonClickData.is_authenticated,
+              preferred_provider: rampsButtonClickData.preferred_provider,
+              order_count: rampsButtonClickData.order_count,
+            })
+            .build(),
+        );
+
+        if (!rampUnifiedV1Enabled) {
+          trace({
+            name: TraceName.LoadRampExperience,
+            tags: { rampType: RampType.BUY },
+          });
+        }
+      }
     });
   }, [
     withNavigationLock,
+    onBuy,
+    rampUnifiedV1Enabled,
+    goToBuy,
+    goToAggregator,
+    token.address,
+    token.chainId,
     trackEvent,
     createEventBuilder,
-    navigate,
-    onBuy,
-    token,
+    rampGeodetectedRegion,
+    rampsButtonClickData,
   ]);
 
   const handleLongPress = useCallback(() => {
@@ -213,7 +239,7 @@ export const TokenDetailsActions: React.FC<TokenDetailsActionsProps> = ({
           iconName: IconName.AttachMoney,
           label: strings('asset_overview.cash_buy_button'),
           onPress: handleBuyPress,
-          isDisabled: !onBuy,
+          isDisabled: false,
           testID: TokenOverviewSelectorsIDs.BUY_BUTTON,
         });
       }
@@ -322,7 +348,6 @@ export const TokenDetailsActions: React.FC<TokenDetailsActionsProps> = ({
     handleReceivePress,
     handleMorePress,
     canSignTransactions,
-    onBuy,
     onLong,
     onShort,
   ]);