[pull] main from MetaMask:main#394
Merged
Merged
Conversation
## **Description** Fix UI discrepancies in Perps Home screen to match design specifications. Changes include: - Add background styling to positions/orders rows (matching watchlist/explore sections) - Replace "See all" text with ">" arrow icons for Watchlist/Explore/Activity sections - Keep "..." icon for Positions/Orders sections (opens action sheets) - Make full header rows pressable for navigation - Standardize all section titles to use HeadingMD font - Consistent 8px spacing between section headers and content - Align PerpsHomeHeader with PerpsMarketListHeader for consistent title styling ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2190 ## **Manual testing steps** ```gherkin Feature: Perps Home Screen UI Consistency Scenario: User views positions and orders with background styling Given the user has open positions or orders When user navigates to the Perps Home screen Then positions and orders rows display with section background styling Scenario: User taps section headers to navigate Given the user is on the Perps Home screen When user taps the Watchlist/Explore/Activity section header Then user navigates to the corresponding list view Scenario: User taps Positions/Orders header for actions Given the user has open positions or orders When user taps the Positions or Orders section header Then the Close All/Cancel All action sheet appears ``` ## **Screenshots/Recordings** ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> <img width="1206" height="2622" alt="Simulator Screenshot - iPhone16Pro-Delta - 2025-12-04 at 19 55 54" src="https://github.com/user-attachments/assets/6bd4675d-5dbb-4580-891e-1f390f4da058" /> ## **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] > Aligns Perps Home UI with design: pressable section headers with icons, styled positions/orders containers, configurable header action buttons, and corresponding test updates. > > - **Perps Home View (UX/logic)**: > - Use `HOME_SCREEN_CONFIG.SHOW_HEADER_ACTION_BUTTONS` to render Add Funds/Withdraw in header area; hide fixed footer when enabled. > - Positions/Orders sections use new `positionsOrdersContainer` styling; section headers trigger action sheets via `onActionPress`. > - **Section headers/navigation (Watchlist/Markets/Activity)**: > - Replace "See All" text with chevron icons; make entire headers pressable to navigate. > - Update styles for consistent spacing (`HeadingMD`, tighter margins) and add `titleRow` groupings. > - **PerpsHomeSection component**: > - Simplify API (remove `actionLabel`/`showActionIcon`); header becomes pressable when `onActionPress` is provided; shows `MoreHorizontal` icon; spacing tweaks. > - **PerpsHomeHeader**: > - Replace `ButtonIcon` back button with `TouchableOpacity` + `Icon`; adjust title container and right-side buttons layout. > - **PerpsMarketBalanceActions**: > - Minor spacing tweaks; action buttons spacing; uses config flag; i18n text now "available". > - **Styles**: > - Add background/padding for Positions/Orders; reduce `PerpsCard` vertical padding; unify section header margins across components. > - **Config/i18n**: > - Add `SHOW_HEADER_ACTION_BUTTONS` and `DEFAULT_ICON_SIZE` to `HOME_SCREEN_CONFIG`; change `perps.available` to "available". > - **Tests**: > - Update mocks and assertions for pressable headers (`section-header-button`), removed action label/icon props, and new navigation behavior across related components. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 84320a6. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
<!--
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**
Renames and simplifies the bug report stage dropdown:
before:
```
label: Detection stage
description: At what stage was the bug detected?
options:
- In production (default)
- In public beta
- During release testing
- On main branch
- On a feature branch
```
New:
```
label: Where was this bug found?
description: Help us understand where this bug was encountered.
options:
- Live version (from official store)
- Internal release testing
```
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->
## **Changelog**
<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`
If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`
(This helps the Release Engineer do their job more quickly and
accurately)
-->
CHANGELOG entry:
## **Related issues**
Fixes:
## **Manual testing steps**
```gherkin
Feature: my feature name
Scenario: user [verb for user action]
Given [describe expected initial app state]
When user [verb for user action]
Then [describe expected outcome]
```
## **Screenshots/Recordings**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
<!-- [screenshots/recordings] -->
### **After**
<!-- [screenshots/recordings] -->
## **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
- [ ] I’ve included tests if applicable
- [ ] 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]
> Renames and simplifies the bug report stage dropdown and updates
action scripts to parse the new field and map to streamlined regression
labels.
>
> - **Issue Template (`.github/ISSUE_TEMPLATE/bug-report.yml`)**:
> - Rename `Detection stage` to `Where was this bug found?`; reword
description.
> - Reduce options to `Live version (from official store)` and `Internal
release testing`.
> - **Actions Script
(`.github/scripts/check-template-and-add-labels.ts`)**:
> - Update regex to match new stage heading and parse answers.
> - Map `Live version...` -> `Production`, `Internal release testing` ->
`Testing`; remove other mappings.
> - **Labeling (`.github/scripts/shared/label.ts`)**:
> - Remove `DevelopmentFeature` and `DevelopmentMain` from
`RegressionStage`.
> - Drop related cases in `craftRegressionLabel`; keep `Testing`,
`Beta`, `Production` and default.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d283c26. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
<!-- 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** fix stable coin chart <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: fix stable coin chart ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-1772 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <img width="448" height="912" alt="Screenshot 2025-11-24 at 00 48 13" src="https://github.com/user-attachments/assets/fcb6b801-b68f-439a-a496-635b8c9353a0" /> <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [ ] 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). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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] > Detects stablecoins in PriceChart and applies a constrained, padded Y-axis range for clearer visualization. > > - **PriceChart (`app/components/UI/AssetOverview/PriceChart/PriceChart.tsx`)**: > - Detect stablecoins via median price (0.9–1.1) and compute `yMin`/`yMax` using an effective range (min 2% of median) with 20% padding, centered on the median. > - Apply `yMin`/`yMax` to `AreaChart` when stablecoin data is present. > - Add `useMemo` to efficiently derive stablecoin state and axis bounds. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 6111a54. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
…p-7.61.0 (#23786) <!-- 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** Add support for sports betting markets with proper sorting and formatting: - Detect sports events via tags and handle spread markets specially - Sort sports markets by type priority (moneyline > spreads > totals) - Within each type group, sort by liquidity + volume descending - Format spread market titles with line values (e.g., "Team -5", "Team +5") - Sort outcome tokens to show team A first for spread markets Add flexible market sorting based on event configuration: - Support sortBy field on events ('price', 'ascending', 'descending') - Sort by outcome price, or groupItemThreshold ascending/descending - Default to price sorting for non-sports markets Improve outcome title display across components: - Derive outcome side text from token title instead of position field - Fall back to outcome.title when groupItemTitle is undefined - Ensures displayed outcome matches actual token held by user Update Polymarket API types with new fields: - groupItemThreshold, sportsMarketType, line for market sorting - sortBy for event-level sort configuration - liquidity on market for sorting calculations <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/PRED-329?atlOrigin=eyJpIjoiODI4NGFmMzI3NWNkNDU2NTk0MmIyYThmMDljZjhjMmMiLCJwIjoiaiJ9 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings** https://www.loom.com/share/c8a9e862aa9e4b3eb151d6601412c385 <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> ## **Pre-merge author checklist** - [ ] 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). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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] > Adds sports-aware market sorting/grouping and enhanced Polymarket parsing, while UI derives outcome side from token titles and falls back to outcome title when needed. > > - **Predict utils (Polymarket)**: > - Add sports detection/sorting: `isSportEvent`, `isSpreadMarket`, `sortSportMarkets` (moneyline > spreads > totals; rank by liquidity+volume). > - Add flexible sorting: `sortMarketsByField('price'|'ascending'|'descending')`, `sortMarkets`; honor `event.sortBy`; default to price sorting in fetch. > - New parsing helpers: `parsePolymarketMarket` (formats spreads, orders tokens, image fallback), internal outcome formatting/sorting. > - Update `parsePolymarketEvents` to use new sort/parse pipeline. > - **Types**: > - Extend `PolymarketApiMarket` with `liquidity`, `groupItemThreshold?`, `sportsMarketType?`, `line?`. > - Extend `PolymarketApiEvent` with `sortBy?`. > - **UI**: > - Resolved outcome header shows `outcome.groupItemTitle ?? outcome.title`. > - Position detail and sell preview derive outcome side from matching token title; keep group title fallback. > - **Tests**: > - Add/expand unit tests covering sports sorting, field-based sorting, market parsing (spreads/ordering), and updated UI behavior. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 1db3f1e. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
<!-- 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 extracts the `OutputAmountTag` component for mUSD conversion flows, separating it from [rewards-related functionality](#23145) that has a blocker. **Changes included:** 1. **OutputAmountTag component** - A standalone generic tag component that displays output amounts with symbols in conversion flows (e.g., "100.57 mUSD") 2. **useCustomAmount hook** - Simplified hook that only handles output amount logic for mUSD conversions: - `shouldShowOutputAmountTag` - Whether to display the tag - `outputAmount` - Formatted amount with 2 decimal places - `outputSymbol` - Token symbol (mUSD) 3. **Removed rewards-related code** that had a blocker: - Removed `RewardsTag` component (empty directory cleaned up) - Removed `RewardsTooltipBottomSheet` component (empty directory cleaned up) - Removed `useRewardsAccountOptedIn` hook - Removed `useCustomAmountRewards` hook - Removed rewards-related properties from tests (`shouldShowRewardsTag`, `estimatedPoints`, `onRewardsTagPress`, `renderRewardsTooltip`) 4. **Test cleanup** - Updated test files to remove references to non-existent rewards functionality: - `useCustomAmount.test.ts` - Removed rewards opt-in tests, points calculation tests, and tooltip tests - `musd-conversion-info.test.tsx` - Fixed import names and mock values <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/MUSD-101 ## **Manual testing steps** ```gherkin Feature: mUSD Conversion Output Amount Display Scenario: user views output amount during mUSD conversion Given user is on the mUSD conversion confirmation screen And mUSD feature flag is enabled When user enters an amount to convert Then the OutputAmountTag displays the formatted output amount with "mUSD" symbol## **Screenshots/Recordings** ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <img width="120" alt="Simulator Screenshot - iPhone 17 Pro - 2025-12-05 at 12 45 45" src="https://github.com/user-attachments/assets/056d19c6-d039-4b2c-8cd4-2c9760e8a3a1" /> <img width="120" alt="Simulator Screenshot - iPhone 17 Pro - 2025-12-05 at 12 45 37" src="https://github.com/user-attachments/assets/1953feed-1b35-4995-a370-94face16305d" /> <!-- [screenshots/recordings] --> ## **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] > Introduces OutputAmountTag and useCustomAmount, and integrates them into mUSD conversion via a new overrideContent in CustomAmountInfo with accompanying tests. > > - **UI/Components**: > - **OutputAmountTag** (`app/components/UI/Earn/components/OutputAmountTag`): New pill tag to display formatted `amount` with optional `symbol` and background. > - **CustomAmountInfo**: Adds `overrideContent(amountHuman)` prop to replace default content (hides `PayTokenAmount`, `PayWithRow`, and `children`). > - **MusdConversionInfo**: Renders `MusdOverrideContent` using `useCustomAmount` to show `OutputAmountTag` (mUSD) and conditionally `PayWithRow`; ensures mUSD token is added per `outputChainId`. > - **Hooks**: > - **useCustomAmount** (`hooks/earn`): Determines when to show output tag for `musdConversion`, formats amount to 2 decimals, and sets `mUSD` symbol based on feature flag and transaction type. > - **Tests**: > - Adds tests for `OutputAmountTag` and `useCustomAmount`. > - Updates `custom-amount-info` and `musd-conversion-info` tests to validate `overrideContent`, labels, and token availability behavior. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e9b4de8. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
<!--
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**
**WebdriverIO/Playwright POC**
Adds an appium framework that leverages `@playwright/test` as a test
runner.
**Key Features**
- Is ready to me migrated to Appium 3 and its respective drivers
- Uses local driver management via yarn dependency
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->
## **Changelog**
<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`
If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`
(This helps the Release Engineer do their job more quickly and
accurately)
-->
CHANGELOG entry:
## **Related issues**
Fixes:
## **Manual testing steps**
```gherkin
Feature: my feature name
Scenario: user [verb for user action]
Given [describe expected initial app state]
When user [verb for user action]
Then [describe expected outcome]
```
## **Screenshots/Recordings**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
<!-- [screenshots/recordings] -->
### **After**
<!-- [screenshots/recordings] -->
## **Pre-merge author checklist**
- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]
> Introduce a unified E2E framework adding an Appium/WebdriverIO
(Playwright runner) stack with element encapsulation, providers, config,
and supporting utilities/fixtures.
>
> - **E2E Framework (new)**
> - Add `FrameworkDetector` and `PlatformDetector` for runtime
framework/platform selection.
> - Introduce `EncapsulatedElement` + helpers (`encapsulated`,
`asPlaywrightElement`, `asDetoxElement`) for cross-Detox/Appium
locators; comprehensive tests added.
> - **Playwright/WebdriverIO layer (new)**
> - Add `PlaywrightAdapter` (`PlaywrightElement`, `$`, `$$`,
`wrapElement`), `PlaywrightMatchers`, and `PlaywrightGestures`.
> - `Utilities` gains `boxedStep` (Playwright reporting) and
`getDriver`.
> - **Config & Fixtures (Playwright)**
> - Add Playwright config wrapper (`config/ConfigHandler.ts`,
`config/index.ts`), global setup (`config/global.setup.ts`), and test
`fixture/index.ts` to create and manage `driver` per test.
> - Update fixtures (`FixtureHelper.ts`, `FixtureUtils.ts`) to use
platform detection and support Appium/Playwright (adb reverse, dynamic
ports, BrowserStack handling).
> - **Services/Providers (new)**
> - Add Appium server controls and providers factory.
> - Implement `EmulatorProvider` + `EmulatorConfigBuilder` and
`BrowserStackProvider` + `BrowserStackConfigBuilder` + `BrowserStackAPI`
(session status sync).
> - **Exports & Docs**
> - Extend `framework/index.ts` exports; add
`UNIFIED_E2E_ARCHIITECTURE.md`.
> - **Config files**
> - Add `e2e/playwright.config.ts` sample projects.
> - **Dependencies**
> - Add `@playwright/test` and `webdriverio`; update lockfile.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
321c405. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
<!--
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**
Moved timer start to avoid counting the time that appium takes to locate
an element
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->
## **Changelog**
<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`
If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`
(This helps the Release Engineer do their job more quickly and
accurately)
-->
CHANGELOG entry:
## **Related issues**
Fixes:
## **Manual testing steps**
```gherkin
Feature: my feature name
Scenario: user [verb for user action]
Given [describe expected initial app state]
When user [verb for user action]
Then [describe expected outcome]
```
## **Screenshots/Recordings**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
<!-- [screenshots/recordings] -->
### **After**
<!-- [screenshots/recordings] -->
## **Pre-merge author checklist**
- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]
> <sup>[Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) is
generating a summary for commit
cdf1513. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
<!--
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**
The purpose of this PR is to set `@MetaMask:predictGTMModalShown `to
true in e2e/framework/fixtures/FixtureBuilder.ts default async state to
prevent the Predict GTM modal during tests.
## **Changelog**
<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`
If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`
(This helps the Release Engineer do their job more quickly and
accurately)
-->
CHANGELOG entry:
## **Related issues**
Fixes:
## **Manual testing steps**
```gherkin
Feature: my feature name
Scenario: user [verb for user action]
Given [describe expected initial app state]
When user [verb for user action]
Then [describe expected outcome]
```
## **Screenshots/Recordings**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
<!-- [screenshots/recordings] -->
### **After**
<!-- [screenshots/recordings] -->
## **Pre-merge author checklist**
- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]
> Sets `@MetaMask:predictGTMModalShown` to `true` in
`e2e/framework/fixtures/FixtureBuilder.ts` default async state to
prevent the Predict GTM modal during tests.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
0d80f91. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
## **Description** Fixes TAT-2134: Incorrect color for Long/Short buttons in A/B test. 1. **Added A/B test support to PerpsOrderBookView**: The Long/Short buttons in `PerpsOrderBookView.tsx` were always rendering as monochrome, ignoring the A/B test configuration. Added the same `usePerpsABTest` hook and conditional rendering that exists in `PerpsMarketDetailsView.tsx` and `PerpsOrderView.tsx`. 2. **Fixed dark/light mode theming for monochrome variant**: Changed monochrome buttons from `ButtonVariants.Secondary` to `ButtonVariants.Primary` across all three views. This provides proper theme-aware styling: - Dark mode: White/light buttons with dark text - Light mode: Dark buttons with light text This matches the styling of the "Set leverage" button in `PerpsLeverageBottomSheet.tsx`. ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2134 - #23804 ## **Manual testing steps** ```gherkin Feature: A/B Test Button Colors Consistency Scenario: User sees consistent button colors across all Perps trading screens Given user has Perps feature enabled And A/B test is configured in LaunchDarkly When user navigates to PerpsMarketDetailsView Then Long/Short buttons match the assigned A/B test variant (colored or monochrome) When user navigates to PerpsOrderBookView Then Long/Short buttons match the same A/B test variant as PerpsMarketDetailsView When user navigates to PerpsOrderView Then Place Order button matches the same A/B test variant Scenario: Monochrome buttons have correct dark mode styling Given user has dark mode enabled And A/B test assigns "monochrome" variant When user views any Perps trading screen with Long/Short buttons Then buttons should have white/light background with dark text And buttons should be clearly visible against dark background ``` ## **Screenshots/Recordings** ### **Before** - Monochrome buttons showed dark background on dark mode (low contrast) - PerpsOrderBookView always showed secondary buttons regardless of A/B test ### **After** - Monochrome buttons show white/light background on dark mode (proper contrast) - All three views (PerpsMarketDetailsView, PerpsOrderView, PerpsOrderBookView) respect A/B test variant https://github.com/user-attachments/assets/d17cfd45-2a03-479c-8cc2-d9022001fa53 ## **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. --- ## MetaMetrics Integration (A/B Test Tracking) The button color A/B test (TAT-1937) is connected to MetaMetrics via the `ab_test_button_color` property. ### Property to Validate | Property | Values | Description | |----------|--------|-------------| | `ab_test_button_color` | `'control'` \| `'monochrome'` | Variant assigned by LaunchDarkly | ### Events That Include This Property 1. **`PERPS_SCREEN_VIEWED`** (baseline exposure) - Sent when user views `PerpsMarketDetailsView` (asset details screen) - Includes `ab_test_button_color` when test is enabled - Used to count how many users were exposed to each variant 2. **`PERPS_UI_INTERACTION`** (engagement) - Sent when user taps Long/Short button - Includes `ab_test_button_color` + `interaction_type: 'tap'` + `direction: 'long'|'short'` - Used to measure which variant drives more button presses ### How to Validate in Analytics (Amplitude/Segment) ``` Engagement Rate = Count(PERPS_UI_INTERACTION where ab_test_button_color = 'X') / Count(PERPS_SCREEN_VIEWED where ab_test_button_color = 'X') ``` Compare engagement rates between `control` (green/red buttons) and `monochrome` (white buttons) variants. ### Code References - Property constant: `PerpsEventProperties.AB_TEST_BUTTON_COLOR` in `app/components/UI/Perps/constants/eventNames.ts:111` - Screen view tracking: `PerpsMarketDetailsView.tsx:454-467` - LaunchDarkly flag: `perps-abtest-button-color` → Redux: `perpsAbtestButtonColor` --- ## Files Changed - `app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx` - Changed monochrome Long/Short buttons from `ButtonVariants.Secondary` to `ButtonVariants.Primary` - `app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx` - Changed monochrome Place Order button from `ButtonVariants.Secondary` to `ButtonVariants.Primary` - `app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.tsx` - Added A/B test support and changed monochrome Long/Short buttons from `ButtonVariants.Secondary` to `ButtonVariants.Primary` <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Switches monochrome CTA buttons to `Primary`, adds button-color A/B test with tracking to Order Book and Place Order, adjusts Order Book footer for safe area, and updates MetaMetrics docs. > > - **UI** > - `PerpsMarketDetailsView.tsx`: Monochrome `Long/Short` buttons now use `ButtonVariants.Primary`. > - `PerpsOrderBookView.tsx`: > - Adds button-color A/B test (`usePerpsABTest`); conditionally renders `Button` vs `ButtonSemantic` for `Long/Short`. > - Monochrome variant uses `ButtonVariants.Primary`. > - Footer `paddingBottom` computed with safe area insets. > - `PerpsOrderBookView.styles.ts`: Moves footer `paddingBottom` to be dynamic (via component). > - `PerpsOrderView.tsx`: Monochrome `Place Order` uses `ButtonVariants.Primary`; integrates A/B test context. > - **Analytics** > - Tracks `ab_test_button_color` on `Long/Short` and `Place Order` taps; includes on relevant screen views where enabled. > - **Docs** > - Updates `perps-metametrics-reference.md` to include `ab_test_button_color` for `Long/Short` and `Place Order` engagement and dual-tracking guidance. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 3a5c8c2. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
<!--
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**
Perps test fixed and working
Asset balance scenario to check aggregated value is stabilized done
## **Changelog**
<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`
If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`
(This helps the Release Engineer do their job more quickly and
accurately)
-->
CHANGELOG entry:
## **Related issues**
Fixes:
## **Manual testing steps**
```gherkin
Feature: my feature name
Scenario: user [verb for user action]
Given [describe expected initial app state]
When user [verb for user action]
Then [describe expected outcome]
```
## **Screenshots/Recordings**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
<!-- [screenshots/recordings] -->
### **After**
<!-- [screenshots/recordings] -->
## **Pre-merge author checklist**
- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]
> Enables the perps onboarding performance test and refactors the asset
balance test to time until balance stabilization using new screen-object
utilities, plus adds a transaction fee visibility check.
>
> - **Performance tests**:
> - **Asset balances
(`appwright/tests/performance/login/asset-balances.spec.js`)**:
> - Simplifies scenario and measures time until aggregated balance
stabilizes via `WalletMainScreen.waitForBalanceToStabilize`.
> - Replaces manual polling/annotations with a single timer
(`balanceStableTimer`).
> - **Perps onboarding
(`appwright/tests/performance/onboarding/perps-onboarding.spec.js`)**:
> - Unskips and runs the flow; adjusts amount to `2` USD.
> - Verifies transaction fee visibility instead of canceling.
> - **Screen objects**:
> - **`wdio/screen-objects/WalletMainScreen.js`**: Adds
`getTotalBalanceText` and `waitForBalanceToStabilize` utilities.
> - **`wdio/screen-objects/PerpsDepositScreen.js`**: Adds
`checkTransactionFeeIsVisible` (uses `expect` from `appwright`).
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
a980c4b. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
## **Description** The ESLint config has been updated to use string rather than numeric values for the rule severity, which is easier to read. ## **Changelog** CHANGELOG entry: null ## **Related issues** N/A ## **Manual testing steps** N/A ## **Screenshots/Recordings** N/A ## **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] > Replaces numeric ESLint rule severities with string equivalents across `.eslintrc.js`, including overrides, for consistent readability. > > - **ESLint Config (`.eslintrc.js`)**: > - Convert numeric severities (e.g., `0/1/2`) to string values (`off/warn/error`) across root `rules` and file-specific `overrides`. > - Preserve existing rule configurations and exceptions; no substantive rule behavior changes aside from severity notation. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 0737e15. 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.
9 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 : )