[pull] main from MetaMask:main

android/app/build.gradle

@@ -179,7 +179,7 @@ android {
         applicationId "io.metamask"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionName "7.79.0"
+        versionName "7.80.0"
         versionCode 4532
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

app/actions/user/index.ts

@@ -28,6 +28,7 @@ import {
   type ClearMusdConversionAssetDetailCtasSeenAction,
   type SetMoneyOnboardingSeenAction,
   type SetTokenOverviewChartTypeAction,
+  type SetOnboardingStepperStepAction,
   UserActionType,
 } from './types';
 
@@ -250,3 +251,18 @@ export function setTokenOverviewChartType(
     payload: { chartType },
   };
 }
+
+/**
+ * Action to set the current step for a named onboarding stepper.
+ * Keyed by stepperId to support multiple independent steppers without
+ * adding new Redux fields per product.
+ */
+export function setOnboardingStepperStep(
+  stepperId: string,
+  step: number,
+): SetOnboardingStepperStepAction {
+  return {
+    type: UserActionType.SET_ONBOARDING_STEPPER_STEP,
+    payload: { stepperId, step },
+  };
+}

app/actions/user/types.ts

@@ -31,6 +31,7 @@ export enum UserActionType {
   CLEAR_MUSD_CONVERSION_ASSET_DETAIL_CTAS_SEEN = 'CLEAR_MUSD_CONVERSION_ASSET_DETAIL_CTAS_SEEN',
   SET_MONEY_ONBOARDING_SEEN = 'SET_MONEY_ONBOARDING_SEEN',
   SET_TOKEN_OVERVIEW_CHART_TYPE = 'SET_TOKEN_OVERVIEW_CHART_TYPE',
+  SET_ONBOARDING_STEPPER_STEP = 'SET_ONBOARDING_STEPPER_STEP',
 }
 
 // User actions
@@ -124,6 +125,11 @@ export type SetTokenOverviewChartTypeAction =
     payload: { chartType: ChartType };
   };
 
+export type SetOnboardingStepperStepAction =
+  Action<UserActionType.SET_ONBOARDING_STEPPER_STEP> & {
+    payload: { stepperId: string; step: number };
+  };
+
 /**
  * User actions union type
  */
@@ -154,4 +160,5 @@ export type UserAction =
   | SetMusdConversionAssetDetailCtaSeenAction
   | ClearMusdConversionAssetDetailCtasSeenAction
   | SetMoneyOnboardingSeenAction
-  | SetTokenOverviewChartTypeAction;
+  | SetTokenOverviewChartTypeAction
+  | SetOnboardingStepperStepAction;

app/component-library/components-temp/ActionListItem/ActionListItem.tsx

@@ -18,6 +18,7 @@ import {
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 
 // Internal dependencies
+import { useElevatedSurface } from '../../../util/theme/themeUtils';
 import { ActionListItemProps } from './ActionListItem.types';
 
 /**
@@ -38,6 +39,7 @@ const ActionListItem: React.FC<ActionListItemProps> = ({
   ...pressableProps
 }) => {
   const tw = useTailwind();
+  const surfaceClass = useElevatedSurface();
 
   // Render label based on type
   const renderLabel = () => {
@@ -98,11 +100,11 @@ const ActionListItem: React.FC<ActionListItemProps> = ({
   const getStyle = useCallback(
     ({ pressed }: { pressed: boolean }) =>
       tw.style(
-        'bg-default px-4 py-3',
+        `${surfaceClass} px-4 py-3`,
         pressed && !isDisabled && 'bg-default-pressed',
         isDisabled && 'opacity-50',
       ),
-    [tw, isDisabled],
+    [tw, isDisabled, surfaceClass],
   );
 
   return (

app/component-library/components-temp/ListItemMultiSelectButton/ListItemMultiSelectButton.styles.ts

@@ -3,6 +3,7 @@ import { StyleSheet, ViewStyle } from 'react-native';
 
 // External dependencies.
 import { Theme } from '../../../util/theme/models';
+import { getElevatedSurfaceColor } from '../../../util/theme/themeUtils';
 
 // Internal dependencies.
 import { ListItemMultiSelectButtonStyleSheetVars } from './ListItemMultiSelectButton.types';
@@ -57,7 +58,7 @@ const styleSheet = (params: {
     container: {
       backgroundColor: isSelected
         ? colors.background.muted
-        : colors.background.default,
+        : getElevatedSurfaceColor(theme),
       flexDirection: 'row',
       alignItems: 'center',
     },

app/component-library/components-temp/SegmentedProgressBar/SegmentedProgressBar.test.tsx

@@ -0,0 +1,51 @@
+// Third party dependencies.
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+// Internal dependencies.
+import SegmentedProgressBar from './SegmentedProgressBar';
+
+describe('SegmentedProgressBar', () => {
+  it('renders the outer track with the provided testID', () => {
+    const { getByTestId } = render(
+      <SegmentedProgressBar current={1} total={3} testID="progress" />,
+    );
+    expect(getByTestId('progress')).toBeOnTheScreen();
+  });
+
+  it('renders the correct number of segment children for a given total', () => {
+    const total = 4;
+    const { getByTestId } = render(
+      <SegmentedProgressBar current={1} total={total} testID="progress" />,
+    );
+    expect(getByTestId('progress').children).toHaveLength(total);
+  });
+
+  it('renders no segments when total is 0', () => {
+    const { getByTestId } = render(
+      <SegmentedProgressBar current={0} total={0} testID="progress" />,
+    );
+    expect(getByTestId('progress').children).toHaveLength(0);
+  });
+
+  it('renders all segments when current is 0', () => {
+    const total = 3;
+    const { getByTestId } = render(
+      <SegmentedProgressBar current={0} total={total} testID="progress" />,
+    );
+    expect(getByTestId('progress').children).toHaveLength(total);
+  });
+
+  it('renders all segments when current equals total', () => {
+    const total = 3;
+    const { getByTestId } = render(
+      <SegmentedProgressBar current={total} total={total} testID="progress" />,
+    );
+    expect(getByTestId('progress').children).toHaveLength(total);
+  });
+
+  it('renders without a testID when testID prop is omitted', () => {
+    const { toJSON } = render(<SegmentedProgressBar current={1} total={2} />);
+    expect(toJSON()).not.toBeNull();
+  });
+});

app/component-library/components-temp/SegmentedProgressBar/SegmentedProgressBar.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box } from '@metamask/design-system-react-native';
+
+export interface SegmentedProgressBarProps {
+  /**
+   * 1-based count of completed steps used to compute the filled segments.
+   */
+  current: number;
+  /**
+   * Total number of steps. Guarded against non-positive values to avoid
+   * divide-by-zero when the caller hasn't wired this yet.
+   */
+  total: number;
+  /**
+   * Optional testID forwarded to the outer track.
+   */
+  testID?: string;
+}
+
+enum SegmentState {
+  Completed = 'completed',
+  Upcoming = 'upcoming',
+}
+
+const Segment = ({ state }: { state: SegmentState }) => (
+  <Box
+    twClassName={`flex-1 h-1 rounded-lg ${state === SegmentState.Completed ? 'bg-success-default' : 'bg-muted-hover'}`}
+  />
+);
+
+const SegmentedProgressBar = ({
+  current,
+  total,
+  testID,
+}: SegmentedProgressBarProps) => (
+  <Box twClassName="flex-row gap-1" testID={testID}>
+    {Array.from({ length: total }, (_, index) => (
+      <Segment
+        key={index}
+        state={index < current ? SegmentState.Completed : SegmentState.Upcoming}
+      />
+    ))}
+  </Box>
+);
+
+export default SegmentedProgressBar;

app/component-library/components-temp/SegmentedProgressBar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SegmentedProgressBar';
+export type { SegmentedProgressBarProps } from './SegmentedProgressBar';