Description

Surface the provider/company name on the benefit card and benefit detail page so users can tell at a glance who is offering the benefit, instead of inferring it from the description.

• Card: render companyName opposite the title in the header row.
• Detail (BenefitFullView): render By {companyName} opposite the remaining-time row.
• Null/empty/whitespace companyName renders nothing (no placeholder, no "By ").
• Title and company text are single-line and constrained (title flex-1, company max-w-[40%] on the card, max-w-[55%] on the detail) so long names cannot push the title or overflow.

Depends on the companion backend change exposing companyName on BenefitDto: consensys-vertical-apps/va-mmcx-rewards#560.

Changelog

CHANGELOG entry: Added the provider company name to benefit cards and the benefit detail page.

Related issues

Fixes:

Manual testing steps

Feature: Benefit company name

  Scenario: Benefit with companyName is displayed on card and detail
    Given the backend returns a benefit with companyName "Pudgy Penguins"
    When the user opens the Benefits list
    Then the benefit card shows "Pudgy Penguins" opposite the title

    When the user taps the benefit
    Then the detail page shows "By Pudgy Penguins" opposite the remaining-time row

  Scenario: Benefit without companyName renders no company label
    Given the backend returns a benefit with companyName null or empty
    When the user opens the Benefits list and the detail
    Then no company label is rendered in either view

  Scenario: Very long company name does not break layout
    Given the backend returns a benefit with a 60+ character companyName
    When the user opens the Benefits list and the detail
    Then the title is not pushed off and the company name is truncated to one line

Screenshots/Recordings

Before

No company label is rendered on either the card or the detail page.

After

• Card: title on the left, company name aligned to the right of the same row.
• Detail: 4d 20h on the left, By {companyName} aligned to the right of the same row.

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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 to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.