Merge branch 'main' into wsun/eas-updates

Author: weitingsun

.github/workflows/update-release-changelog.yml

@@ -1,5 +1,7 @@
-# On every push to a release branch (Version-v* or release/*), this workflow rebuilds the matching
+# On every push to a release branch (release/x.y.z format), this workflow rebuilds the matching
 # changelog branch, re-runs the auto-changelog script, and either updates or recreates the changelog PR.
+# Note: This workflow validates the branch name to ensure it matches the semantic versioning pattern
+# (release/x.y.z) and skips execution for other branch names like release/x.y.z-Changelog.
 name: Update Release Changelog PR
 
 on:
@@ -12,7 +14,34 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
+  validate-branch:
+    name: Validate release branch format
+    runs-on: ubuntu-latest
+    outputs:
+      is-valid-release: ${{ steps.check.outputs.is-valid }}
+      version: ${{ steps.check.outputs.version }}
+    steps:
+      - name: Check if branch matches release/x.y.z pattern
+        id: check
+        run: |
+          BRANCH_NAME="${{ github.ref_name }}"
+          echo "Checking branch: $BRANCH_NAME"
+          
+          # Validate branch matches release/x.y.z format (semantic versioning)
+          if [[ "$BRANCH_NAME" =~ ^release/[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            VERSION="${BRANCH_NAME#release/}"
+            echo "Valid release branch detected: $BRANCH_NAME (version: $VERSION)"
+            echo "is-valid=true" >> "$GITHUB_OUTPUT"
+            echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+          else
+            echo "Branch '$BRANCH_NAME' does not match release/x.y.z pattern. Skipping changelog update."
+            echo "is-valid=false" >> "$GITHUB_OUTPUT"
+          fi
+
   refresh-changelog:
+    name: Update changelog
+    needs: validate-branch
+    if: needs.validate-branch.outputs.is-valid-release == 'true'
     permissions:
       contents: write
       pull-requests: write

.js.env.example

@@ -165,9 +165,10 @@ export MM_PERPS_ENABLED="true"
 export MM_PERPS_SERVICE_INTERRUPTION_BANNER_ENABLED="false"
 export MM_PERPS_BLOCKED_REGIONS="US,CA-ON,GB,BE"
 export MM_PERPS_GTM_MODAL_ENABLED="true"
-# HIP-3 Feature Flags
-export MM_PERPS_EQUITY_ENABLED="false"
-export MM_PERPS_ENABLED_DEXS=""
+# HIP-3 Feature Flags (remote override with local fallback)
+export MM_PERPS_HIP3_ENABLED="true"
+export MM_PERPS_HIP3_ALLOWLIST_MARKETS=""  # Allowlist: Empty = enable all markets. Examples: "xyz:XYZ100,xyz:TSLA" or "xyz:*,abc:TSLA"
+export MM_PERPS_HIP3_BLOCKLIST_MARKETS=""  # Blocklist: Empty = no blocking. Examples: "BTC,ETH" or "xyz:*"
 
 ## Card
 export MM_CARD_BAANX_API_CLIENT_KEY_DEV=""

.storybook/storybook.requires.js

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Box, BoxFlexDirection } from '@metamask/design-system-react-native';
+
+import ButtonFilter from './ButtonFilter';
+import { ButtonFilterProps } from './ButtonFilter.types';
+
+const ButtonFilterMeta = {
+  title: 'Components Temp / Buttons / ButtonFilter',
+  component: ButtonFilter,
+  argTypes: {
+    isActive: {
+      control: 'boolean',
+    },
+    children: {
+      control: 'text',
+    },
+  },
+  args: {
+    children: 'Filter',
+    onPress: () => {
+      // For demo purposes only
+    },
+  },
+};
+
+export default ButtonFilterMeta;
+
+export const Default = {};
+
+export const Active = {
+  args: {
+    isActive: true,
+  },
+};
+
+export const FilterGroup = {
+  render: (args: ButtonFilterProps) => (
+    <Box flexDirection={BoxFlexDirection.Row} gap={3}>
+      <ButtonFilter {...args} isActive>
+        All
+      </ButtonFilter>
+      <ButtonFilter {...args}>Purchased</ButtonFilter>
+      <ButtonFilter {...args}>Sold</ButtonFilter>
+    </Box>
+  ),
+};

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import ButtonFilter from './ButtonFilter';
+
+describe('ButtonFilter', () => {
+  const defaultProps = {
+    children: 'All',
+    onPress: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with children prop', () => {
+    const { getByRole } = render(<ButtonFilter {...defaultProps} />);
+
+    expect(getByRole('button')).toBeOnTheScreen();
+  });
+
+  it('renders correctly in active state', () => {
+    const { toJSON } = render(<ButtonFilter {...defaultProps} isActive />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly in inactive state', () => {
+    const { toJSON } = render(
+      <ButtonFilter {...defaultProps} isActive={false} />,
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('calls onPress when pressed', () => {
+    const mockOnPress = jest.fn();
+    const { getByRole } = render(
+      <ButtonFilter {...defaultProps} onPress={mockOnPress} />,
+    );
+
+    const button = getByRole('button');
+    fireEvent.press(button);
+
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('verifies disabled state prevents interaction', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <ButtonFilter
+        {...defaultProps}
+        testID="filter-button"
+        onPress={mockOnPress}
+        isDisabled
+      />,
+    );
+
+    const button = getByTestId('filter-button');
+    expect(button).toBeDisabled();
+
+    fireEvent.press(button);
+    expect(mockOnPress).not.toHaveBeenCalled();
+  });
+
+  it('uses custom accessibility label when provided', () => {
+    const { getByTestId } = render(
+      <ButtonFilter
+        {...defaultProps}
+        testID="filter-button"
+        accessibilityLabel="Filter by all"
+      />,
+    );
+
+    const button = getByTestId('filter-button');
+    expect(button).toHaveAccessibleName('Filter by all');
+  });
+
+  it('spreads additional props to ButtonBase', () => {
+    const customStyle = { marginTop: 20 };
+
+    const { getByTestId } = render(
+      <ButtonFilter
+        {...defaultProps}
+        testID="filter-button"
+        style={customStyle}
+      />,
+    );
+
+    const button = getByTestId('filter-button');
+    expect(button).toBeOnTheScreen();
+    expect(button).toHaveStyle(customStyle);
+  });
+});

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

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+
+import { ButtonBase } from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+
+import { ButtonFilterProps } from './ButtonFilter.types';
+
+const ButtonFilter = ({
+  children,
+  isActive = false,
+  textClassName,
+  style,
+  ...props
+}: ButtonFilterProps) => {
+  const tw = useTailwind();
+
+  const getTextClassName = useCallback(
+    () => (isActive ? 'text-icon-inverse' : 'text-default'),
+    [isActive],
+  );
+
+  const getStyle = useCallback(
+    ({ pressed }: { pressed: boolean }) => [
+      tw.style(isActive ? 'bg-icon-default' : 'bg-background-muted'),
+      typeof style === 'function' ? style({ pressed }) : style,
+    ],
+    [tw, isActive, style],
+  );
+
+  return (
+    <ButtonBase
+      textClassName={textClassName || getTextClassName}
+      {...props}
+      style={getStyle}
+    >
+      {children}
+    </ButtonBase>
+  );
+};
+
+export default ButtonFilter;

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

@@ -0,0 +1,11 @@
+import { ButtonBaseProps } from '@metamask/design-system-react-native';
+
+/**
+ * ButtonFilter component props.
+ */
+export interface ButtonFilterProps extends ButtonBaseProps {
+  /**
+   * Whether the button is in an active state.
+   */
+  isActive?: boolean;
+}

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

@@ -0,0 +1,72 @@
+# ButtonFilter
+
+`ButtonFilter` is a reusable filter button component that displays an active or inactive state. It's commonly used for filtering lists or toggling between different views.
+
+## Props
+
+This component extends `ButtonBaseProps` from `@metamask/design-system-react-native`, so all ButtonBase props are available.
+
+### Required
+
+- **`children`** (string | ReactNode): The content to display in the button.
+- **`onPress`** (function): Function to trigger when pressing the button.
+
+### Optional
+
+- **`isActive`** (boolean): Whether the button is in an active state. Defaults to `false`.
+- **`size`** (ButtonSize): The size of the button. Defaults to `Md`.
+- **`isDisabled`** (boolean): Whether the button is disabled.
+- **`isLoading`** (boolean): Whether the button is in a loading state.
+- **`startIconName`** (IconName): Icon to display before the content.
+- **`endIconName`** (IconName): Icon to display after the content.
+- **`...ButtonBaseProps`**: All other props from ButtonBase (including `testID`, `accessibilityLabel`, etc.)
+
+## Usage
+
+```tsx
+import ButtonFilter from 'app/component-library/components-temp/ButtonFilter';
+
+const MyComponent = () => {
+  const [filter, setFilter] = useState('all');
+
+  return (
+    <ButtonFilter
+      isActive={filter === 'all'}
+      onPress={() => setFilter('all')}
+    >
+      All
+    </ButtonFilter>
+  );
+};
+```
+
+## Styling
+
+The component uses Tailwind CSS via the `useTailwind` hook and follows the MetaMask Design System styling patterns:
+
+- **Active state**: Uses `bg-icon-default` background with `text-icon-inverse` text color
+- **Inactive state**: Uses `bg-background-muted` background with `text-default` text color
+- **Pressed state**: Applies `opacity-70` for visual feedback
+
+## Example
+
+```tsx
+<Box flexDirection={BoxFlexDirection.Row} gap={3}>
+  <ButtonFilter
+    label="All"
+    isActive={currentFilter === 'all'}
+    onPress={() => setCurrentFilter('all')}
+  />
+  <ButtonFilter
+    label="Purchased"
+    isActive={currentFilter === 'purchased'}
+    onPress={() => setCurrentFilter('purchased')}
+  />
+  <ButtonFilter
+    label="Sold"
+    isActive={currentFilter === 'sold'}
+    onPress={() => setCurrentFilter('sold')}
+  />
+</Box>
+```
+