[pull] main from MetaMask:main

.github/workflows/check-template-and-add-labels.yml

@@ -52,7 +52,6 @@ jobs:
       - name: Get access token
         id: get-token
         uses: MetaMask/github-tools/.github/actions/get-token@v1
-        continue-on-error: true
         with:
           token-exchange-url: ${{ vars.TOKEN_EXCHANGE_URL }}
           permissions: |
@@ -63,6 +62,6 @@ jobs:
       - name: Check template and add labels
         id: check-template-and-add-labels
         env:
-          LABEL_TOKEN: ${{ steps.get-token.outputs.token || secrets.LABEL_TOKEN }}
+          LABEL_TOKEN: ${{ steps.get-token.outputs.token }}
         run: npm run check-template-and-add-labels
         working-directory: '.github/scripts'

.github/workflows/nightly-build.yml

@@ -24,6 +24,7 @@ jobs:
       source_branch: main
       environment: exp
       testflight_group: 'MetaMask BETA & Release Candidates'
+      distribute_external: true
     secrets: inherit
 
   ios-rc:
@@ -34,6 +35,7 @@ jobs:
       source_branch: main
       environment: rc
       testflight_group: 'MetaMask BETA & Release Candidates'
+      distribute_external: true
     secrets: inherit
 
   android-exp-generate:

.js.env.example

@@ -135,6 +135,9 @@ export MM_MUSD_CONVERSION_MIN_ASSET_BALANCE_REQUIRED="0.01"
 
 # Money Hub
 export MM_MONEY_HUB_ENABLED="false"
+export MM_MONEY_PAYMENT_TOKENS_BLOCKLIST=""
+export MM_MONEY_DEPOSIT_NO_FEE_TOKENS=""
+export MM_MONEY_DEPOSIT_MIN_ASSET_BALANCE="0.01"
 
 # Activates remote feature flag override mode.
 # Remote feature flag values won't be updated,

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

@@ -6,7 +6,7 @@ import { View } from 'react-native';
 
 // External dependencies.
 import { useStyles } from '../../hooks';
-import Pressable from '../Pressable';
+import Pressable, { PressableVariant } from '../Pressable';
 import ListItem from '../../../component-library/components/List/ListItem/ListItem';
 
 // Internal dependencies.
@@ -49,6 +49,7 @@ const ListItemMultiSelectButton: React.FC<ListItemMultiSelectButtonProps> = ({
 
   return (
     <Pressable
+      variant={PressableVariant.Highlight}
       testID={ROW_TEST_ID}
       style={styles.container}
       disabled={isDisabled}

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

@@ -6,7 +6,7 @@ import { View } from 'react-native';
 
 // External dependencies.
 import { useStyles } from '../../hooks';
-import Pressable from '../Pressable';
+import Pressable, { PressableVariant } from '../Pressable';
 import ListItem from '../../../component-library/components/List/ListItem/ListItem';
 import Checkbox from '../../components/Checkbox';
 
@@ -46,6 +46,7 @@ const ListItemMultiSelectWithMenuButton: React.FC<
 
   return (
     <Pressable
+      variant={PressableVariant.Highlight}
       testID={ROW_TEST_ID}
       style={styles.container}
       disabled={isDisabled}

app/component-library/components-temp/Pressable/Pressable.stories.tsx

@@ -18,6 +18,7 @@ import { ThemeContext, useTheme } from '../../../util/theme';
 import { AppThemeKey } from '../../../util/theme/models';
 
 import Pressable from './Pressable';
+import { PressableVariant } from './Pressable.types';
 
 const layout = StyleSheet.create({
   page: { flex: 1, padding: 16, gap: 20 },
@@ -90,10 +91,17 @@ const PressMe = () => (
   </Text>
 );
 
-const PressableCard = ({ surfaceColor }: { surfaceColor: string }) => {
+const PressableCard = ({
+  surfaceColor,
+  variant,
+}: {
+  surfaceColor: string;
+  variant: PressableVariant;
+}) => {
   const { colors } = useTheme();
   return (
     <Pressable
+      variant={variant}
       onPress={() => undefined}
       style={[
         layout.card,
@@ -108,7 +116,7 @@ const PressableCard = ({ surfaceColor }: { surfaceColor: string }) => {
   );
 };
 
-const SurfaceCatalog = () => {
+const SurfaceCatalog = ({ variant }: { variant: PressableVariant }) => {
   const { colors } = useTheme();
   const surfaces = [
     { key: 'default', color: colors.background.default },
@@ -121,7 +129,7 @@ const SurfaceCatalog = () => {
       {surfaces.map((s) => (
         <Box key={s.key} twClassName="gap-1">
           <SurfaceLabel>background.{s.key}</SurfaceLabel>
-          <PressableCard surfaceColor={s.color} />
+          <PressableCard surfaceColor={s.color} variant={variant} />
         </Box>
       ))}
     </Box>
@@ -131,7 +139,15 @@ const SurfaceCatalog = () => {
 export const Default = {
   render: () => (
     <OSThemePane>
-      <SurfaceCatalog />
+      <SurfaceCatalog variant={PressableVariant.Default} />
+    </OSThemePane>
+  ),
+};
+
+export const Highlight = {
+  render: () => (
+    <OSThemePane>
+      <SurfaceCatalog variant={PressableVariant.Highlight} />
     </OSThemePane>
   ),
 };

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

@@ -4,27 +4,11 @@ import { fireEvent, render } from '@testing-library/react-native';
 
 import { mockTheme } from '../../../util/theme';
 
-import Pressable from './Pressable';
-
-interface AnyStyle {
-  [key: string]: unknown;
-}
-
-const flatten = (style: unknown): AnyStyle => {
-  if (Array.isArray(style)) {
-    return style.reduce<AnyStyle>(
-      (acc, item) => ({ ...acc, ...flatten(item) }),
-      {},
-    );
-  }
-  if (style && typeof style === 'object') {
-    return style as AnyStyle;
-  }
-  return {};
-};
+import Pressable, { PRESSED_OPACITY, pressedStyleFor } from './Pressable';
+import { PressableVariant } from './Pressable.types';
 
 const RESTING = mockTheme.colors.background.section;
-const PRESSED = mockTheme.colors.background.pressed;
+const PRESSED_BG = mockTheme.colors.background.pressed;
 
 const styles = StyleSheet.create({
   padded: { padding: 16, backgroundColor: RESTING },
@@ -91,9 +75,12 @@ describe('Pressable', () => {
       </Pressable>,
     );
 
-    const resting = flatten(getByTestId('p').props.style);
-    expect(resting.backgroundColor).toBe(RESTING);
-    expect(resting.padding).toBe(16);
+    const resting = getByTestId('p').props.style;
+    const flat = Array.isArray(resting)
+      ? Object.assign({}, ...resting.filter(Boolean))
+      : resting;
+    expect(flat.backgroundColor).toBe(RESTING);
+    expect(flat.padding).toBe(16);
   });
 
   it('forwards a ref to the underlying view', () => {
@@ -108,16 +95,29 @@ describe('Pressable', () => {
     expect(typeof ref.current?.measure).toBe('function');
   });
 
-  it('resolves a function-form caller style on render', () => {
-    const styleFn = jest.fn(() => ({ borderWidth: 1 }));
-    render(
-      <Pressable testID="p" style={styleFn} onPress={jest.fn()}>
-        <Text>x</Text>
-      </Pressable>,
-    );
-
-    expect(styleFn).toHaveBeenCalledWith(
-      expect.objectContaining({ pressed: expect.any(Boolean) }),
-    );
+  describe('pressedStyleFor', () => {
+    it('default variant returns subtree opacity dim', () => {
+      expect(pressedStyleFor(PressableVariant.Default, PRESSED_BG)).toEqual({
+        opacity: PRESSED_OPACITY,
+      });
+    });
+
+    it('highlight variant returns background.pressed overlay', () => {
+      expect(pressedStyleFor(PressableVariant.Highlight, PRESSED_BG)).toEqual({
+        backgroundColor: PRESSED_BG,
+      });
+    });
+
+    it('does not include both opacity and backgroundColor for either variant', () => {
+      const def = pressedStyleFor(PressableVariant.Default, PRESSED_BG);
+      const hi = pressedStyleFor(PressableVariant.Highlight, PRESSED_BG);
+      expect('backgroundColor' in def).toBe(false);
+      expect('opacity' in hi).toBe(false);
+    });
+
+    it('none variant returns an empty overlay (no opacity, no background)', () => {
+      const overlay = pressedStyleFor(PressableVariant.None, PRESSED_BG);
+      expect(overlay).toEqual({});
+    });
   });
 });

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

@@ -9,26 +9,62 @@ import {
 
 import { useTheme } from '../../../util/theme';
 
-import type { PressableProps } from './Pressable.types';
+import { PressableVariant, type PressableProps } from './Pressable.types';
+
+export const PRESSED_OPACITY = 0.7;
+
+/**
+ * Returns the pressed-state style overlay for the given variant. Exported
+ * for direct testing of the per-variant feedback model.
+ */
+export const pressedStyleFor = (
+  variant: PressableVariant,
+  pressedBackgroundColor: string,
+): ViewStyle => {
+  switch (variant) {
+    case PressableVariant.Highlight:
+      return { backgroundColor: pressedBackgroundColor };
+    case PressableVariant.None:
+      return {};
+    case PressableVariant.Default:
+    default:
+      return { opacity: PRESSED_OPACITY };
+  }
+};
 
 /**
  * Design-system Pressable.
  *
- * Replaces `TouchableOpacity` across the app. Instead of dimming the
- * entire subtree on press, this layers the semi-transparent
- * `background.pressed` token on top of whatever resting surface the
- * parent owns. The component itself never sets a resting background.
+ * Replaces `TouchableOpacity` across the app. The component supports two
+ * visual feedback modes via the `variant` prop:
+ *
+ * `default` (the default) dims the caller's subtree by lowering opacity to
+ * `PRESSED_OPACITY`. Mirrors the familiar `TouchableOpacity` model while
+ * keeping content visible under pure-black mode.
+ *
+ * `highlight` composites `background.pressed` over the caller's resting
+ * surface. Use for list rows, settings rows, and similar surfaces where a
+ * backdrop highlight is the established design pattern.
  */
 const Pressable = forwardRef<View, PressableProps>(
-  ({ style, accessibilityRole = 'button', children, ...props }, ref) => {
+  (
+    {
+      style,
+      accessibilityRole = 'button',
+      children,
+      variant = PressableVariant.Default,
+      ...props
+    },
+    ref,
+  ) => {
     const { colors } = useTheme();
 
     const composedStyle = useCallback(
       (state: PressableStateCallbackType): StyleProp<ViewStyle> => [
         typeof style === 'function' ? style(state) : style,
-        state.pressed && { backgroundColor: colors.background.pressed },
+        state.pressed && pressedStyleFor(variant, colors.background.pressed),
       ],
-      [style, colors.background.pressed],
+      [style, colors.background.pressed, variant],
     );
 
     return (

app/component-library/components-temp/Pressable/Pressable.types.ts

@@ -1,6 +1,34 @@
 import type { PressableProps as RNPressableProps } from 'react-native';
 import type { PressableProps as RNGHPressableProps } from 'react-native-gesture-handler';
 
-export type PressableProps = RNPressableProps;
+/**
+ * Visual feedback applied on press.
+ *
+ * `Default` dims the caller's subtree (matches the legacy `TouchableOpacity`
+ * behaviour with a gentler opacity that keeps content visible under
+ * pure-black mode). Use for the broad majority of touchable surfaces.
+ *
+ * `Highlight` composites the semantic `background.pressed` token over the
+ * caller's resting surface. Use for list rows, settings rows, and other
+ * surfaces where a backdrop highlight is the established design pattern.
+ *
+ * `None` applies no visual feedback. Use when the caller component already
+ * renders its own press-state styling (e.g. a button that maintains a
+ * `pressed` state internally and toggles its own background or border).
+ */
+export const PressableVariant = {
+  Default: 'default',
+  Highlight: 'highlight',
+  None: 'none',
+} as const;
 
-export type PressableGHProps = RNGHPressableProps;
+export type PressableVariant =
+  (typeof PressableVariant)[keyof typeof PressableVariant];
+
+export type PressableProps = RNPressableProps & {
+  variant?: PressableVariant;
+};
+
+export type PressableGHProps = RNGHPressableProps & {
+  variant?: PressableVariant;
+};

app/component-library/components-temp/Pressable/PressableGH.test.tsx

@@ -9,6 +9,7 @@ jest.mock('react-native-gesture-handler', () => {
 });
 
 import PressableGH from './PressableGH';
+import { PressableVariant } from './Pressable.types';
 
 describe('PressableGH', () => {
   it('renders children', () => {
@@ -75,4 +76,22 @@ describe('PressableGH', () => {
     expect(ref.current).not.toBeNull();
     expect(typeof ref.current?.measure).toBe('function');
   });
+
+  it('accepts the variant prop without crashing', () => {
+    expect(() =>
+      render(
+        <PressableGH variant={PressableVariant.Highlight} onPress={jest.fn()}>
+          <Text>x</Text>
+        </PressableGH>,
+      ),
+    ).not.toThrow();
+
+    expect(() =>
+      render(
+        <PressableGH variant={PressableVariant.Default} onPress={jest.fn()}>
+          <Text>x</Text>
+        </PressableGH>,
+      ),
+    ).not.toThrow();
+  });
 });