Skip to content

Commit ca846b2

Browse files
authored
feat: add suggestions to watchlist on marketlist UI (MetaMask#31650)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until this PR meets the canonical Definition of Ready For Review in `docs/readme/ready-for-review.md`. In short: the template must be materially complete (not just section titles present), all status checks must be currently passing, and the only expected follow-up commits must be reviewer-driven. --> <!-- mms-check directive vocabulary — read by .github/scripts/shared/pr-template-checks.ts at module load to build the validation plan. Directives are invisible in rendered markdown and must NOT be removed or edited without updating the validator registry. type=text Section must contain non-placeholder prose. type=changelog Section must have a valid CHANGELOG entry: line. type=issue-link Section must have a Fixes:/Closes:/Refs: line with a value. type=manual-testing Section must have real testing steps or an explicit N/A. type=screenshot Section must have evidence (image/URL) or an explicit N/A. type=checklist Section must have all checkboxes consciously checked. required=true|false Whether a missing/invalid section runs the validator at all. blocking=true|false Whether a failure of this check fails the CI workflow. Default: false — failures are shown as warnings in the sticky comment but do not block the PR. Sections without a directive are checked for structural presence only. --> ## **Description** <!-- mms-check: type=text required=true --> <!-- 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? --> Add suggestions to the watchlist on market list UI. Should match behavior on Perps Home, minus the collapsible "show more" button. Fixes back navigation from asset details screen so that it navigates correctly to Perps Home, or Market List, contextually. Fixes search bar functionality on Market List Watchlist ## **Changelog** <!-- mms-check: type=changelog required=true blocking=true --> <!-- 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: add suggested markets to watchlist on marketlist UI ## **Related issues** <!-- mms-check: type=issue-link required=true --> Fixes: n/a ## **Manual testing steps** <!-- mms-check: type=manual-testing required=true --> ```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** <!-- mms-check: type=screenshot required=true --> <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> https://github.com/user-attachments/assets/c1001aba-5bfc-49d9-8e6f-da359f1b1ef9 ## **Pre-merge author checklist** <!-- mms-check: type=checklist required=true --> <!-- Every checklist item must be consciously assessed before marking this PR as "Ready for review". A checked box means you deliberately considered that responsibility, not that you literally performed every action listed. Unchecked boxes are ambiguous: they are not an implicit "N/A" and they are not a silent "skip". See `docs/readme/ready-for-review.md` for the full checklist semantics. --> - [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. #### Performance checks (if applicable) - [x] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [x] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [x] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **Pre-merge reviewer checklist** <!-- Reviewer checklist items follow the same semantics as the author checklist: an unchecked box is ambiguous, a checked box means the reviewer consciously assessed that responsibility. See `docs/readme/ready-for-review.md`. --> - [ ] 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** > UI-only perps market list and watchlist component changes behind the existing watchlist flag, with broad test coverage and no auth or data-layer changes. > > **Overview** > **Perps market list watchlist mode** now mirrors Perps Home: when the watchlist feature flag is on and the watchlist filter is active, the screen always renders `PerpsWatchlistMarkets` with saved markets **and** suggested markets—not only when the watchlist is empty. The list view passes `enableShowMore={false}`, `showHeader={false}`, and wires row taps through the existing `handleMarketPress` so `onMarketSelect`, `navigateToMarketDetails`, and route `transactionActiveAbTests` behave like the main market list. > > **`PerpsWatchlistMarkets`** gains optional **`onMarketPress`** (parent-owned navigation instead of internal `navigation.navigate`) and **`enableShowMore`** (default `true`; when `false`, all watchlist rows show with no expand/collapse). Both V1 and V2 honor `onMarketPress`. > > Tests cover the new market-list watchlist flows and the new component props. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 6ffb46b. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 73f97de commit ca846b2

5 files changed

Lines changed: 832 additions & 28 deletions

File tree

app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.styles.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,12 @@ const styleSheet = (params: { theme: Theme }) => {
135135
animatedListContainer: {
136136
flex: 1,
137137
},
138+
watchlistScrollContainer: {
139+
flex: 1,
140+
},
141+
watchlistScrollContent: {
142+
paddingBottom: 120,
143+
},
138144
searchBarRow: {
139145
paddingHorizontal: 16,
140146
paddingBottom: 8,

0 commit comments

Comments
 (0)