[pull] main from MetaMask:main#561
Merged
Merged
Conversation
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** This PR adds **HeaderStandardAnimated**, a scroll-driven animated header component to `app/component-library/components-temp/`. The header shows a full title section (e.g. with `TitleStandard`) when at the top of the scroll, and animates to a compact center title when the user scrolls past that section. **Reason for change:** Screens with a large title block (e.g. Perps market detail) need a header that stays visible and collapses to a compact title as the user scrolls. This component provides that pattern with Reanimated-driven animation tied to scroll position. **What changed:** 1. **HeaderStandardAnimated** (`app/component-library/components-temp/HeaderStandardAnimated/`) - New component that extends the header pattern from `HeaderCompactStandard` and requires `scrollY` and `titleSectionHeight` shared values to drive the center-title animation. - Renders a `HeaderBase` with optional back/close buttons, title, subtitle, or custom children. The center content is wrapped in an `Animated.View` whose opacity and translateY are derived from scroll (compact title appears when `scrollY >= titleSectionHeight`). - Props: `scrollY`, `titleSectionHeight` (required), plus title/subtitle/children, `onBack`/`backButtonProps`, `onClose`/`closeButtonProps`, `startButtonIconProps`/`endButtonIconProps`, `testID`, `twClassName`, and other `HeaderBase` props. 2. **useHeaderStandardAnimated** - New hook that returns `scrollY`, `titleSectionHeightSv`, `setTitleSectionHeight`, and `onScroll` for use with `HeaderStandardAnimated` and a `ScrollView`. Consumers call `setTitleSectionHeight` from the title section’s `onLayout` and pass `onScroll` to the `ScrollView`. 3. **Stories** - `HeaderStandardAnimated.stories.tsx`: Default (title + back) and WithSubtitle, both with scrollable content and the hook wiring. 4. **Unit tests** - `HeaderStandardAnimated.test.tsx`: Rendering (title, subtitle, children, testIDs via child prop objects), back/close button behavior and callbacks, and `startButtonIconProps` priority. Uses mocked Reanimated and safe area; shared values use a full `SharedValue<number>`-shaped mock. - `useHeaderStandardAnimated.test.ts`: Return shape, initial values, and that `setTitleSectionHeight` and `onScroll` update the shared values. 5. **Storybook** - `HeaderStandardAnimated` stories registered in `.storybook/storybook.requires.js`. ## **Changelog** This PR is not end-user-facing; it adds a new internal header component for scroll-driven screens. CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-287?atlOrigin=eyJpIjoiZThjYTU4Y2UyODcwNDJlMWJjMWQ0ZTQ1YmI0NjVhMGUiLCJwIjoiaiJ9 ## **Manual testing steps** ```gherkin Feature: HeaderStandardAnimated component Scenario: Default header with scroll shows compact title when scrolled Given the app is open with Storybook or a screen using HeaderStandardAnimated When the user views the header with a scrollable list below a title section Then the full title section is visible at the top When the user scrolls down past the title section Then a compact center title appears in the header and the transition is animated Scenario: Back and close buttons work Given a HeaderStandardAnimated with onBack and onClose When the user taps the back button Then onBack is invoked When the user taps the close button Then onClose is invoked ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> N/A – new component. ### **After** <!-- [screenshots/recordings] --> https://github.com/user-attachments/assets/85c5f28c-86f4-4efb-89bf-26223de637f3 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk because this is additive and isolated to the component library (`components-temp`) plus Storybook registration, with unit tests covering basic rendering and button-callback behavior. > > **Overview** > Adds `HeaderStandardAnimated`, a new `components-temp` header wrapper around `HeaderCompactStandard` that animates the centered title/subtitle in based on `scrollY` and a measured `titleSectionHeight` shared value. > > Introduces `useHeaderStandardAnimated` to provide the required Reanimated `SharedValue`s and `onScroll` handler, along with Storybook stories demonstrating the scroll behavior and unit tests validating rendering and back/close/start-button callback precedence. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e06f5c5. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
## **Description** Updates the `/create-bug` Claude Code skill command to include a full root cause analysis workflow (Step 6) with three phases: - **6a**: Investigate root cause — trace through the code to identify exact files, lines, and logic - **6b**: Identify regression PRs — check git history against previous releases - **6c**: Scope analysis — search for same pattern across codebase, file separate bugs for other affected features Also updates the comment format to include all required sections. ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: [MMQA-1523](https://consensyssoftware.atlassian.net/browse/MMQA-1523) ## **Manual testing steps** ```gherkin Feature: Create Bug Skill Root Cause Analysis Scenario: user runs /create-bug and opts into root cause investigation Given user has Claude Code open in the metamask-mobile repo When user runs /create-bug and files a bug report And user opts into root cause investigation Then Claude performs root cause investigation (6a) And Claude identifies regression PRs by comparing release branches (6b) And Claude performs scope analysis to find same pattern elsewhere (6c) And Claude posts a comment with summary, regression PRs, error flow, scope of impact, key files, suggested fix, and related bug links ``` ## **Screenshots/Recordings** ### **Before** N/A ### **After** Run `/create-bug` in Claude Code terminal and opt into root cause investigation to see the full 3-phase workflow. ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. [MMQA-1523]: https://consensyssoftware.atlassian.net/browse/MMQA-1523?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
## **Description** Phase 3 analytics migration (Batch 3-17): migrate Sample Feature's components and hooks from `useMetrics`/`MetricsEventBuilder` to the new `useAnalytics`/`AnalyticsEventBuilder` analytics system. **Reason**: Deprecate MetaMetrics in favour of the shared analytics utility and AnalyticsController. **Changes**: `SamplePetNamesForm`, `SampleCounterPane`, and `SampleFeatureDevSettingsEntryPoint` now use `useAnalytics()` from `app/components/hooks/useAnalytics/useAnalytics` and `createEventBuilder` from the hook instead of `useMetrics()` and `MetricsEventBuilder`; test mocks updated to mock the `useAnalytics` hook with a chainable builder instead of `useMetrics`. ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/MCWP-302 (Batch 3-17) ## **Manual testing steps** ```gherkin Feature: Sample Feature analytics Scenario: user triggers a Sample Feature flow event Given app is open and user is in a Sample Feature flow When user performs an action that triggers analytics (e.g. increment counter, add pet name, navigate to sample feature) Then the event is tracked on Mixpanel ``` ## **Screenshots/Recordings** N/A – analytics migration, no UI change. ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk: this is a refactor of analytics event building/tracking in a non-production sample feature, with corresponding unit test updates. Main risk is mis-tracked or missing events due to the new builder/mocking semantics. > > **Overview** > Updates SampleFeature event tracking to use `useAnalytics()` and its `createEventBuilder` instead of `useMetrics()`/`MetricsEventBuilder` in `SampleCounterPane`, `SamplePetNamesForm`, and the dev-settings entry point. > > Adjusts analytics event definitions (`analytics/events.ts`) and rewrites unit tests to mock/verify the new `useAnalytics` hook and builder chaining, plus updates SampleFeature docs/e2e docs to refer to **Analytics** (not MetaMetrics). > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 2dce2e4. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )