[pull] main from MetaMask:main#833
Merged
Merged
Conversation
<!-- 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 blocks the PR check. Sections without a directive are checked for structural presence only. --> ## **Description** Adds the initial implementation of **Price Alerts** behind the `priceAlertsEnabled` remote feature flag (version-gated). When enabled, a notification icon appears in the Token Details header for any token with a known price. Tapping it opens a manage view that either shows existing alerts or drops straight into the create flow if none exist yet. The create screen lets users set a target price via a keypad or quick-percentage pills (5/10/20/30%), toggle whether the alert repeats, and see a live ± % indicator against the current price. On save the alert is POSTed to `https://price-alerts.api.cx.metamask.io` using a bearer token from `AuthenticationController`. Delete and toggle-active actions in the manage view are stubbed for a follow-up PR, as is the "Price change" alert type tab. <!-- 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? --> ## **Changelog** <!-- mms-check: type=changelog required=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 price alerts basic setup ## **Related issues** <!-- mms-check: type=issue-link required=true --> Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3351 ## **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. --> ### **Before** No price alerts support ### **After** https://github.com/user-attachments/assets/142f2842-0cd5-4692-b013-00566257e36b ## **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`. --> - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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] > **Medium Risk** > New authenticated backend integration (bearer token) for user alert CRUD on token flows; mitigated by remote flag gating and incomplete manage mutations (delete/toggle TODO). > > **Overview** > Introduces **price alerts** behind the version-gated remote flag `priceAlertsEnabled`. When on, Token Details shows a notification control (only if price > 0 and CAIP-19 `assetId` resolves) that opens **manage** or **create** flows for that asset. > > **Create** supports “price reaches” with a keypad, quick ±5/10/20/30% pills, recurring toggle, and live % vs current price; saves via authenticated `POST` to the price-alerts API (`asset`, `threshold`, `recurring`). **Manage** loads alerts per asset (React Query), replaces into create when the list is empty or fetch fails, and lists thresholds with recurring/once labels—**delete** and **active toggle** are UI-only stubs. A second tab (“price change”) shows an under-development placeholder. > > Wiring adds `PRICE_ALERTS_API_URL` / `AppConstants.PRICE_ALERTS_API`, navigation routes and screens, i18n, feature-flag registry entry, and broad unit test coverage. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 8ee8d6b. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
…ken list (TSA-647) (#31459) ## **Description** <!-- mms-check: type=text required=true --> The Quick Buy sheet rendered its token icon + chain badge differently from the rest of the app: the network badge was the fixed-size, square-cornered `BadgeNetwork` from the design system package, oversized relative to the token avatar, and token artwork resolution missed the homepage's checksummed-address CDN fallback (so tokens like CAKE showed different artwork than the homepage token list). Fix — reuse the homepage Token list pattern (`TokenListItem` / `AssetLogo`) via a new shared `QuickBuyTokenIcon` component: - Fully round design-system `AvatarToken`, wrapped in the component-library `BadgeWrapper`/`Badge` (variant `Network`, circular, scaled to half the avatar, bottom-right) — exactly what `TokenListItem` uses. - Same data sources: `getNetworkImageSource` for the badge; token image → `getBridgeTokenImageSource` (keeps natives working via SLIP-44 asset ids) → `getFallbackAssetImageUrls` (lowercased + checksummed CDN variants), cycled by the shared `useSmartImageFallback` hook. - Adopted in the "Pay with / Receive" footer pill (size Sm) and the token-select rows (size Md); removed the now-dead `BadgeNetwork` plumbing. Note: one expected `@typescript-eslint/no-deprecated` warning for the component-library `Badge` — the homepage `TokenListItem` carries the identical unsuppressed warning; matching it is intentional. Jira: [TSA-647](https://consensyssoftware.atlassian.net/browse/TSA-647) ## **Changelog** <!-- mms-check: type=changelog required=true --> CHANGELOG entry: Fixed token icon and network badge styling in the Quick Buy sheet to match the wallet token list ## **Related issues** <!-- mms-check: type=issue-link required=true --> Fixes: [TSA-647](https://consensyssoftware.atlassian.net/browse/TSA-647) ## **Manual testing steps** <!-- mms-check: type=manual-testing required=true --> ```gherkin Feature: Quick Buy token icon and chain badge styles Scenario: user compares Quick Buy icons with the homepage token list Given the user holds CAKE on BNB Chain When the user opens the Quick Buy sheet and the "Pay with" picker Then the token icon is fully round with the same artwork as the homepage token list And the network badge is circular, smaller than the token icon, anchored bottom-right ``` ## **Screenshots/Recordings** <!-- mms-check: type=screenshot required=true --> ### **Before** NA ### **After** Tokens view: <img width="436" height="87" alt="Screenshot 2026-06-11 at 16 50 47" src="https://github.com/user-attachments/assets/20168d22-81a5-4564-9bd2-55a2b4b053f7" /> Quickbuy view: <img width="439" height="423" alt="Screenshot 2026-06-12 at 16 53 02" src="https://github.com/user-attachments/assets/8f88c9b4-9162-462c-8592-bc4b2fdf6176" /> <img width="418" height="383" alt="Screenshot 2026-06-11 at 16 51 51" src="https://github.com/user-attachments/assets/6f739090-579e-41ca-976e-941f1fc7c2b1" /> ## **Pre-merge author checklist** <!-- mms-check: type=checklist required=true --> - [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** - [ ] 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. <!-- Generated with the help of the pr-description AI skill --> [TSA-647]: https://consensyssoftware.atlassian.net/browse/TSA-647?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Scoped UI and image-resolution changes in Quick Buy plus a small, tested adjustment to the shared image-fallback hook; no auth, payments, or data-path changes. > > **Overview** > Aligns **Quick Buy** token icons and chain badges with the homepage token list (TSA-647) by introducing **`QuickBuyTokenIcon`**, used in the pay-with footer pill and pay-with rows instead of design-system `BadgeNetwork` + ad hoc `AvatarToken` wiring. > > The shared component uses component-library **`BadgeWrapper`/`Badge` (Network)** for the circular bottom-right chain badge, and resolves artwork like **`AssetLogo`**: token image → bridge/native source → **`getFallbackAssetImageUrls`** (including checksummed CDN), with **`useSmartImageFallback`** cycling on load errors. > > **`useSmartImageFallback`** now **resets the fallback index when the `sources` array changes**, so switching tokens after image errors does not stick on a stale fallback index; coverage is added in hook and component tests. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit ad88e1f. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com> Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Xavier Brochard <xavier-brochard@users.noreply.github.com> Co-authored-by: Antonio Regadas <antonio.regadas@consensys.net>
<!--
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 -->
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 : )