Description

The Market Insights thumbs up/down feedback buttons previously didn't give a clear indication that they were selected, meaning the icons always appeared as outlines. To improve this we added the filled state and persist it until a new digest comes or the app is killed.

• Swaps the outline icon for the filled variant after the user gives feedback, to highlight the selected button
• For thumbs down, the filled state is only applied after the user submits their reason (not when the sheet opens)
• Both buttons remain tappable, since the user can switch their vote, which fires a new analytics event and updates the filled state
• Feedback state is stored in a simple but persisted Map keyed by report.generatedAt, so that it survives navigating out of the view (component unmount/remount) but resets when a new digest arrives (new generatedAt)... or the app restarts.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

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

Before

After

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.

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.