chore: cherry-pick feat: MUSD-518: Add segment event that tracks when the claim CTA is shown cp-7.70.0

[chloeYue]

Cherry-pick of #27353 into release/7.70.0 release branch.

Adds mUSD Claim Bonus CTA Available event that fires when the Merkl claim CTA is mounted.

mUSD Claim Bonus CTA Available Event Properties

Property	Type	Description
location	string	Where the CTA is rendered (e.g. token_list_item, home_cash_section)
view_trigger	string	E.g. component_mounted
network_chain_id	string	Chain ID of the token's network
asset_symbol	string	Token symbol (e.g. mUSD)
has_claimed_before	boolean	Whether the user has previously claimed a Merkl reward for this token

CHANGELOG entry: added mUSD Claim Bonus CTA Available event that fires when the Merkl claim CTA is mounted.

Fixes: MUSD-518: Mobile - Add segment event which tracks when the claim CTA is shown and how much the user would have to
claim

Feature: Merkl claim bonus CTA impression tracking

  Scenario: user sees claim bonus CTA in token list
    Given user has a claimable Merkl reward on an eligible token

    When the token list item scrolls into view
    Then a "mUSD Claim Bonus CTA Available" event fires once with reward range, location, and network metadata

  Scenario: user sees claim bonus CTA in home cash section
    Given user holds mUSD on Linea and has a claimable Merkl bonus

    When the mUSD aggregated row is visible on the home screen
    Then a "mUSD Claim Bonus CTA Available" event fires once with location "home_cash_section"

N/A -mUSD Claim Bonus CTA Available event doesn't exist

musd-518-claim-cta-available-after-demo.mov

• 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.

• 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.

---

Note

Medium Risk
Adds new analytics side effects and changes the useMerklBonusClaim API to require location/visibility inputs, plus introduces viewability state in the token list; mistakes here could cause missing/duplicate events or extra re-renders.

Overview
Adds a new MetaMetrics event MUSD_CLAIM_BONUS_CTA_DISPLAYED emitted from useMerklBonusClaim when a claimable Merkl bonus CTA is eligible, above threshold, not pending, and the hosting component is visible; the event includes location, network/asset metadata, claim history, and a bucketed bonus amount range.

Updates useMerklRewards to also return hasClaimedBefore (derived from on-chain claimed amount), and updates token list surfaces (TokenListItem, TokenListItemV2, MusdAggregatedRow) to pass a required location plus a new isVisible signal. TokenList now tracks FlashList viewability and forwards per-row visibility to support impression tracking. Tests are expanded/updated for the new hook signature, reward threshold handling, and analytics firing semantics.

^{Written by Cursor Bugbot for commit 2451fa1. This will update automatically on new commits. Configure here.}

---

Description

Changelog

CHANGELOG entry:

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.

[github-actions]

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - base branch is not main (base: release/7.70.0)

All E2E tests pre-selected.

View GitHub Actions results

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

[cursor]

Undefined function isClaimableBonusAboveThreshold crashes eligible tokens

High Severity

isClaimableBonusAboveThreshold is called on line 105 but is never defined or imported anywhere in the codebase (verified via exhaustive search). For eligible tokens where isEligible is true, evaluating this expression will throw a ReferenceError, crashing the component. Additionally, the hook's return path at line 147–158 passes through raw claimableReward without any threshold filtering, so even if the function were defined, sub-threshold values like "< 0.01" would still be returned instead of null — contradicting the behavior the new tests expect.

Additional Locations (1)

• app/components/UI/Earn/components/MerklRewards/hooks/useMerklBonusClaim.ts#L146-L158

 

[chloeYue]

close this PR in favour of #27605