feat(home): add homepage 8-button action grid AB test

app/components/UI/Bridge/hooks/useSwapBridgeNavigation/index.ts

@@ -135,6 +135,7 @@ export const useSwapBridgeNavigation = ({
   transactionActiveAbTests,
   skipLocationUpdate = false,
   swapButtonEventLocationOverride,
+  skipActionButtonClickTracking = false,
 }: {
   location: SwapBridgeNavigationLocation;
   sourcePage: string;
@@ -161,6 +162,11 @@ export const useSwapBridgeNavigation = ({
   swapButtonEventLocationOverride?:
     | ActionLocation
     | SwapBridgeNavigationLocation;
+  /**
+   * When true, skip consolidated ACTION_BUTTON_CLICKED from this hook so the
+   * caller can emit it with the correct location / position (e.g. homepage grid).
+   */
+  skipActionButtonClickTracking?: boolean;
 }) => {
   const navigation = useNavigation();
   const dispatch = useDispatch();
@@ -370,20 +376,26 @@ export const useSwapBridgeNavigation = ({
       }
 
       // Track Swap button click with new consolidated event
-      const isFromNavbar = location === SwapBridgeNavigationLocation.MainView;
-      const actionButtonProps = {
-        action_name: ActionButtonType.SWAP,
-        // Omit action_position for navbar to avoid confusion with main action buttons
-        ...(isFromNavbar
-          ? {}
-          : { action_position: ActionPosition.SECOND_POSITION }),
-        button_label: buttonLabel ?? strings('asset_overview.swap'),
-        location: isFromNavbar
-          ? ActionLocation.NAVBAR
-          : ActionLocation.ASSET_DETAILS,
-      };
-
-      trackActionButtonClick(trackEvent, createEventBuilder, actionButtonProps);
+      if (!skipActionButtonClickTracking) {
+        const isFromNavbar = location === SwapBridgeNavigationLocation.MainView;
+        const actionButtonProps = {
+          action_name: ActionButtonType.SWAP,
+          // Omit action_position for navbar to avoid confusion with main action buttons
+          ...(isFromNavbar
+            ? {}
+            : { action_position: ActionPosition.SECOND_POSITION }),
+          button_label: buttonLabel ?? strings('asset_overview.swap'),
+          location: isFromNavbar
+            ? ActionLocation.NAVBAR
+            : ActionLocation.ASSET_DETAILS,
+        };
+
+        trackActionButtonClick(
+          trackEvent,
+          createEventBuilder,
+          actionButtonProps,
+        );
+      }
 
       const swapEventProperties = {
         location:
@@ -421,6 +433,7 @@ export const useSwapBridgeNavigation = ({
       getIsBridgeEnabledSource,
       skipLocationUpdate,
       swapButtonEventLocationOverride,
+      skipActionButtonClickTracking,
       transactionActiveAbTests,
       isBasicFunctionalityEnabled,
       prefetchPopularTokens,

app/components/Views/Homepage/abTestConfig.ts

@@ -282,3 +282,60 @@ export function getHomepageDiscoveryPillsTransactionActiveAbTests(
     createActiveABTestAssignment(HOMEPAGE_DISCOVERY_PILLS_AB_KEY, variantName),
   ];
 }
+
+// ─── Homepage action buttons 2×4 grid (TMCU-1103) ────────────────────────────
+
+/**
+ * LaunchDarkly / remote flag key. Pattern: `{team}{TICKET}Abtest{Name}` — keep in
+ * sync with the flag in LD (team `home`, ticket TMCU-1103).
+ */
+export const HOMEPAGE_ACTION_BUTTONS_GRID_AB_KEY =
+  'homeTMCU1103AbtestActionButtonsGrid';
+
+export enum HomepageActionButtonsGridVariant {
+  Control = 'control',
+  Row1Top = 'row1Top',
+  Row2Top = 'row2Top',
+}
+
+export type HomepageActionButtonsGridRowOrder = 'row1Top' | 'row2Top';
+
+type HomepageActionButtonsGridVariantConfig =
+  | { layout: 'fourSquare' }
+  | {
+      layout: 'eightCircular';
+      rowOrder: HomepageActionButtonsGridRowOrder;
+    };
+
+export const HOMEPAGE_ACTION_BUTTONS_GRID_VARIANTS: Record<
+  HomepageActionButtonsGridVariant,
+  HomepageActionButtonsGridVariantConfig
+> = {
+  [HomepageActionButtonsGridVariant.Control]: {
+    layout: 'fourSquare',
+  },
+  [HomepageActionButtonsGridVariant.Row1Top]: {
+    layout: 'eightCircular',
+    rowOrder: 'row1Top',
+  },
+  [HomepageActionButtonsGridVariant.Row2Top]: {
+    layout: 'eightCircular',
+    rowOrder: 'row2Top',
+  },
+};
+
+export const HOMEPAGE_ACTION_BUTTONS_GRID_AB_TEST_EXPOSURE_OPTIONS = {
+  experimentName: 'Homepage action buttons 2x4 grid',
+  variationNames: {
+    control: '4 square action buttons',
+    row1Top: '8 circular buttons, Row 1 top',
+    row2Top: '8 circular buttons, Row 2 top',
+  },
+} as const;
+
+export const HOMEPAGE_ACTION_BUTTONS_GRID_AB_TEST_ANALYTICS_MAPPING: ABTestAnalyticsMapping =
+  {
+    flagKey: HOMEPAGE_ACTION_BUTTONS_GRID_AB_KEY,
+    validVariants: Object.values(HomepageActionButtonsGridVariant),
+    eventNames: [EVENT_NAME.HOME_VIEWED, EVENT_NAME.ACTION_BUTTON_CLICKED],
+  };

app/components/Views/Homepage/components/HomepageActionButtonsGrid/HomepageActionButton.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Animated, Pressable } from 'react-native';
+import {
+  Box,
+  BoxAlignItems,
+  BoxJustifyContent,
+  FontWeight,
+  Icon,
+  IconColor,
+  IconName,
+  IconSize,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { useAnimatedPressable } from '../../../../../component-library/hooks';
+
+export interface HomepageActionButtonProps {
+  iconName: IconName;
+  label: string;
+  onPress: () => void;
+  isDisabled?: boolean;
+  /** When true, label wraps to 2 lines before tail ellipsis. */
+  allowTwoLineLabel?: boolean;
+  testID?: string;
+}
+
+/**
+ * Presentation-only circular action button (icon pill + label).
+ * Navigation and analytics live in each `buttons/*Button.tsx` caller.
+ * Press feedback: slight scale-down + muted → muted-pressed pill background.
+ */
+const HomepageActionButton = ({
+  iconName,
+  label,
+  onPress,
+  isDisabled = false,
+  allowTwoLineLabel = false,
+  testID,
+}: HomepageActionButtonProps) => {
+  const tw = useTailwind();
+  const labelNumberOfLines = allowTwoLineLabel ? 2 : 1;
+  const { scaleAnim, handlePressIn, handlePressOut } = useAnimatedPressable();
+
+  return (
+    <Animated.View
+      style={[
+        tw.style('min-w-0 flex-1'),
+        { transform: [{ scale: scaleAnim }] },
+      ]}
+    >
+      <Pressable
+        accessibilityRole="button"
+        accessibilityState={{ disabled: isDisabled }}
+        disabled={isDisabled}
+        onPress={isDisabled ? undefined : onPress}
+        onPressIn={isDisabled ? undefined : handlePressIn}
+        onPressOut={isDisabled ? undefined : handlePressOut}
+        style={tw.style(
+          'w-full items-center',
+          isDisabled ? 'opacity-50' : 'opacity-100',
+        )}
+        testID={testID}
+      >
+        {({ pressed }) => (
+          <>
+            <Box
+              alignItems={BoxAlignItems.Center}
+              justifyContent={BoxJustifyContent.Center}
+              twClassName={`h-14 w-14 rounded-full border border-muted ${
+                pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted'
+              }`}
+            >
+              <Icon
+                color={IconColor.IconAlternative}
+                name={iconName}
+                size={IconSize.Lg}
+              />
+            </Box>
+            <Text
+              color={TextColor.TextDefault}
+              ellipsizeMode="tail"
+              fontWeight={FontWeight.Medium}
+              numberOfLines={labelNumberOfLines}
+              twClassName={
+                allowTwoLineLabel
+                  ? 'mt-2 min-h-[40px] w-full text-center'
+                  : 'mt-2 w-full text-center'
+              }
+              variant={TextVariant.BodySm}
+            >
+              {label}
+            </Text>
+          </>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+export default HomepageActionButton;