Cherry-picking commits from main to release/7.78.0 for PR #30196#30212
Closed
runway-github[bot] wants to merge 1 commit into
Closed
Cherry-picking commits from main to release/7.78.0 for PR #30196#30212runway-github[bot] wants to merge 1 commit into
runway-github[bot] wants to merge 1 commit into
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.
-->
## **Description**
> **Section header spacing alignment:**
[`CampaignsPreview.tsx`](app/components/UI/Rewards/components/Campaigns/CampaignsPreview.tsx)
— the campaigns preview **header row** now uses **`gap-1`** instead of
**`gap-2`** between the title row items (spinner when shown, heading,
chevron), matching the **Benefits** preview header spacing on the
Rewards dashboard.
The Rewards dashboard **Benefits** preview header previously used a
numeric `BadgeCount` beside the section title. This change replaces it
with a design-system **`Tag`** (`TagSeverity.Neutral`) that shows how
many benefits are available using the localized string
`rewards.benefits.available_count` (e.g. `%{count} available` in
English). Counts above 99 display as `99+`.
The header row is full width with **`justifyContent: space-between`**:
the title and chevron stay on the leading side; the tag sits on the
**trailing** edge so it matches the intended layout. Spacing uses
`gap-1` between the title and chevron. The empty-state header no longer
renders a redundant null badge slot.
**Motivation:** Align with design (muted pill copy and alignment) and
keep copy in i18n for the translation pipeline (English source string
only in `en.json`).
**Automated tests:** `yarn jest
app/components/UI/Rewards/components/Benefits/BenefitsPreview.test.tsx`
## **Changelog**
CHANGELOG entry: Updated the Rewards benefits preview header to show how
many benefits are available using a tag label next to the section title;
aligned campaigns preview section header spacing with the benefits
preview (`gap-1`).
## **Related issues**
Fixes:
## **Manual testing steps**
```gherkin
Feature: Rewards benefits preview header
Scenario: User sees benefits count when they have benefits
Given the user is opted into Rewards and the benefits API returns at least one benefit
When user opens the Rewards dashboard (home) and scrolls to the Benefits preview
Then a neutral tag shows the correct count and available wording for the current locale
And the tag is aligned to the far right of the header row with the title and chevron grouped on the left
And tapping the header row still navigates to the full benefits view
Scenario: User has no benefits
Given the user has no benefits in the list
When user opens the Rewards dashboard and views the Benefits preview
Then the count tag is not shown and the empty state behaves as before
Feature: Rewards campaigns preview header spacing
Scenario: User compares section headers on Rewards home
Given the user is on the Rewards dashboard home tab
When user views the Campaigns preview section header
Then the title row uses gap-1 between the title row elements, matching the Benefits preview header spacing
```
## **Screenshots/Recordings**
### **Before**
Numeric badge style (`BadgeCount`) adjacent to the Benefits title
(previous implementation).
### **After**
<img width="413" height="827" alt="image"
src="https://github.com/user-attachments/assets/bd00ee97-2ae3-4ccb-b924-51ba6d0ca677"
/>
Neutral `Tag` with “{count} available” (per locale), title + chevron on
the left, tag aligned to the trailing edge. (Screenshot also attached in
an earlier PR update.)
## **Pre-merge author checklist**
<!--
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)
- [ ] I've tested on Android
- Ideally on a mid-range device; emulator is acceptable
- [ ] 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
- [ ] 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**
> Low risk UI/i18n change with unit test updates; primary risk is minor
layout/regression in rewards preview headers and count formatting around
the 99/99+ boundary.
>
> **Overview**
> The Benefits preview header now replaces the numeric `BadgeCount` with
a neutral design-system `Tag` that shows a localized
`rewards.benefits.available_count` label (capped to `99+`), and adjusts
header layout to keep the title+chevron grouped left with the tag
right-aligned.
>
> Campaigns preview header spacing is tightened (`gap-1`), and tests
were expanded to cover the new benefits count behavior (including empty
state and 99/99+ cases) plus treating `undefined` campaigns as an empty
list. Adds the new English i18n key `rewards.benefits.available_count`.
>
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
5ece706. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
metamaskbotv2
Bot
added
the
team-bots
Contributor
🔍 Smart E2E Test Selection⏭️ Smart E2E selection skipped - PR targets a release branch (release/*) All E2E tests pre-selected. |
|
Contributor
The committed fixture schema is out of date. To update, comment: |
Contributor
|
close in favour of #30211 |
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.
2 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.
Description
The Rewards dashboard Benefits preview header previously used a
numeric
BadgeCountbeside the section title. This change replaces itwith a design-system
Tag(TagSeverity.Neutral) that shows howmany benefits are available using the localized string
rewards.benefits.available_count(e.g.%{count} availableinEnglish). Counts above 99 display as
99+.The header row is full width with
justifyContent: space-between:the title and chevron stay on the leading side; the tag sits on the
trailing edge so it matches the intended layout. Spacing uses
gap-1between the title and chevron. The empty-state header no longerrenders a redundant null badge slot.
Motivation: Align with design (muted pill copy and alignment) and
keep copy in i18n for the translation pipeline (English source string
only in
en.json).Automated tests:
yarn jest app/components/UI/Rewards/components/Benefits/BenefitsPreview.test.tsxChangelog
CHANGELOG entry: Updated the Rewards benefits preview header to show how
many benefits are available using a tag label next to the section title;
aligned campaigns preview section header spacing with the benefits
preview (
gap-1).Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
Numeric badge style (
BadgeCount) adjacent to the Benefits title(previous implementation).
After
Neutral
Tagwith “{count} available” (per locale), title + chevron onthe left, tag aligned to the trailing edge. (Screenshot also attached in
an earlier PR update.)
Pre-merge author checklist
Docs and MetaMask Mobile
Coding
Standards.
if applicable
guidelines).
Not required for external contributors.
Performance checks (if applicable)
SRPs
to import wallets with many accounts and tokens
performance metrics
trace()for usage andaddTokenfor an example
For performance guidelines and tooling, see the Performance
Guide.
Pre-merge reviewer checklist
app, test code being changed).
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
Note
Low Risk
Low risk UI/i18n change with unit test updates; primary risk is minor
layout/regression in rewards preview headers and count formatting around
the 99/99+ boundary.
Overview
The Benefits preview header now replaces the numeric
BadgeCountwitha neutral design-system
Tagthat shows a localizedrewards.benefits.available_countlabel (capped to99+), and adjustsheader layout to keep the title+chevron grouped left with the tag
right-aligned.
Campaigns preview header spacing is tightened (
gap-1), and testswere expanded to cover the new benefits count behavior (including empty
state and 99/99+ cases) plus treating
undefinedcampaigns as an emptylist. Adds the new English i18n key
rewards.benefits.available_count.Reviewed by Cursor Bugbot for commit
5ece706. Bugbot is set up for automated
code reviews on this repo. Configure
here.