feat: MUSD-455 bring back claim section on asset details screen (#27567)

<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR brings back the mUSD bonus claim section displayed on the asset
overview screen. It was previously removed as part of this
[PR](#26147).

## **Changelog**

CHANGELOG entry: Restored mUSD claimable bonus claim section on asset
overview screen

## **Related issues**

Fixes: [MUSD-455: Bring back claim section on asset details
screen](https://consensyssoftware.atlassian.net/browse/MUSD-455)

## **Manual testing steps**

```gherkin
Feature: mUSD claimable bonus on asset overview

  Scenario: user views and claims their mUSD bonus
    Given user has claimable Merkl rewards above the minimum threshold

    When user navigates to the mUSD asset details screen
    Then a claim bonus section is displayed with the claimable amount

    When user taps "Claim"
    Then the claim confirmation bottom sheet appears
    Then the "Claim" button is guarded against repeated clicks after the first
```

## **Screenshots/Recordings**

### **Before**
Bonus claim section wasn't rendered on the asset overview screen.

### **After**


https://github.com/user-attachments/assets/a4b1f910-a943-46a5-b5d2-ab183bba208f

## **Notes**
- Fixed an edge case where the Claim button press-guard could get stuck
if `claimRewards()` exits early (e.g. missing selected account or Linea
network client id), causing subsequent taps to be ignored.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Adds a new claim CTA into the token details render path and wires it
to rewards-claiming hooks, analytics, and external linking; this could
impact performance (hook execution for many assets) and claim UX if
gating/chain selection is wrong.
> 
> **Overview**
> Restores an **mUSD “Claimable bonus”** section on the asset details
screen, showing the user’s claimable amount and a `Claim` button that
triggers `useMerklBonusClaim`’s claim flow and disables/rejects repeated
presses while a claim is in flight/pending.
> 
> Adds an info tooltip with a link to Terms of Use (with new analytics
location), plus new i18n strings and test IDs to support UI copy,
tracking, and E2E automation.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
0d81e8f. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a
href="https://cursor.com/agents/bc-1797260d-779d-4781-986b-1f8dc6c39c93"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-1797260d-779d-4781-986b-1f8dc6c39c93"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>

Author: Matt561

app/components/UI/Earn/components/AssetOverviewClaimBonus/AssetOverviewClaimBonus.test.tsx

@@ -0,0 +1,299 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import { Linking } from 'react-native';
+import renderWithProvider from '../../../../../util/test/renderWithProvider';
+import AssetOverviewClaimBonus from '.';
+import {
+  useMerklBonusClaim,
+  MerklClaimData,
+} from '../MerklRewards/hooks/useMerklBonusClaim';
+import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
+import useTooltipModal from '../../../../hooks/useTooltipModal';
+import { MetaMetricsEvents, EVENT_NAME } from '../../../../../core/Analytics';
+import { MUSD_EVENTS_CONSTANTS } from '../../constants/events/musdEvents';
+import AppConstants from '../../../../../core/AppConstants';
+import { ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS } from './AssetOverviewClaimBonus.testIds';
+import { TokenI } from '../../../Tokens/types';
+
+jest.mock('../MerklRewards/hooks/useMerklBonusClaim');
+jest.mock('../../../../hooks/useAnalytics/useAnalytics');
+jest.mock('../../../../hooks/useTooltipModal');
+jest.mock('react-native/Libraries/Linking/Linking', () => ({
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  openURL: jest.fn(),
+  canOpenURL: jest.fn(),
+  getInitialURL: jest.fn(),
+}));
+
+const mockUseMerklBonusClaim = useMerklBonusClaim as jest.MockedFunction<
+  typeof useMerklBonusClaim
+>;
+
+const createMockAsset = (overrides: Partial<TokenI> = {}): TokenI => ({
+  address: '0x8d652c6d4A8F3Db96Cd866C1a9220B1447F29898',
+  chainId: '0x1',
+  symbol: 'aglaMerkl',
+  aggregators: [],
+  decimals: 18,
+  image: '',
+  name: 'Angle Merkl',
+  balance: '1000',
+  balanceFiat: '$100',
+  logo: '',
+  isETH: false,
+  isNative: false,
+  ...overrides,
+});
+
+const createMockMerklClaimData = (
+  overrides: Partial<MerklClaimData> = {},
+): MerklClaimData => ({
+  claimableReward: null,
+  hasPendingClaim: false,
+  isClaiming: false,
+  claimRewards: jest.fn().mockResolvedValue(undefined),
+  ...overrides,
+});
+
+describe('AssetOverviewClaimBonus', () => {
+  const mockTrackEvent = jest.fn();
+  const mockCreateEventBuilder = jest.fn();
+  const mockAddProperties = jest.fn();
+  const mockBuild = jest.fn();
+  const mockOpenTooltipModal = jest.fn();
+  const mockClaimRewards = jest.fn().mockResolvedValue(undefined);
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockBuild.mockReturnValue({ name: 'mock-built-event' });
+    mockAddProperties.mockReturnValue({ build: mockBuild });
+    mockCreateEventBuilder.mockReturnValue({
+      addProperties: mockAddProperties,
+    });
+
+    (useAnalytics as jest.MockedFunction<typeof useAnalytics>).mockReturnValue({
+      trackEvent: mockTrackEvent,
+      createEventBuilder: mockCreateEventBuilder,
+    } as unknown as ReturnType<typeof useAnalytics>);
+
+    (
+      useTooltipModal as jest.MockedFunction<typeof useTooltipModal>
+    ).mockReturnValue({
+      openTooltipModal: mockOpenTooltipModal,
+    });
+
+    mockUseMerklBonusClaim.mockReturnValue(
+      createMockMerklClaimData({
+        claimableReward: '10.01',
+        claimRewards: mockClaimRewards,
+      }),
+    );
+  });
+
+  describe('rendering and visibility', () => {
+    it('renders nothing when claimableReward is null', () => {
+      mockUseMerklBonusClaim.mockReturnValue(
+        createMockMerklClaimData({ claimableReward: null }),
+      );
+
+      const { queryByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      expect(
+        queryByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CONTAINER),
+      ).toBeNull();
+    });
+
+    it('renders claim section when claimableReward is present', () => {
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      expect(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CONTAINER),
+      ).toBeOnTheScreen();
+      expect(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CLAIM_BUTTON),
+      ).toBeOnTheScreen();
+      expect(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.INFO_BUTTON),
+      ).toBeOnTheScreen();
+      expect(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CLAIMABLE_AMOUNT),
+      ).toBeOnTheScreen();
+    });
+
+    it('displays formatted claimable reward amount with dollar sign', () => {
+      mockUseMerklBonusClaim.mockReturnValue(
+        createMockMerklClaimData({ claimableReward: '42.50' }),
+      );
+
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      expect(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CLAIMABLE_AMOUNT),
+      ).toHaveTextContent('$42.50');
+    });
+  });
+
+  describe('loading state', () => {
+    it('disables claim button when isClaiming is true', () => {
+      mockUseMerklBonusClaim.mockReturnValue(
+        createMockMerklClaimData({
+          claimableReward: '10.01',
+          isClaiming: true,
+        }),
+      );
+
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      const button = getByTestId(
+        ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CLAIM_BUTTON,
+      );
+      expect(button).toBeDisabled();
+    });
+
+    it('disables claim button when hasPendingClaim is true', () => {
+      mockUseMerklBonusClaim.mockReturnValue(
+        createMockMerklClaimData({
+          claimableReward: '10.01',
+          hasPendingClaim: true,
+        }),
+      );
+
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      const button = getByTestId(
+        ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CLAIM_BUTTON,
+      );
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('claim action', () => {
+    it('calls claimRewards on claim button press', () => {
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      fireEvent.press(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CLAIM_BUTTON),
+      );
+
+      expect(mockClaimRewards).toHaveBeenCalledTimes(1);
+    });
+
+    it('fires MUSD_CLAIM_BONUS_BUTTON_CLICKED with correct properties on claim press', () => {
+      const asset = createMockAsset();
+
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={asset} />,
+      );
+
+      fireEvent.press(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CLAIM_BUTTON),
+      );
+
+      expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+        MetaMetricsEvents.MUSD_CLAIM_BONUS_BUTTON_CLICKED,
+      );
+      expect(mockAddProperties).toHaveBeenCalledWith(
+        expect.objectContaining({
+          location: MUSD_EVENTS_CONSTANTS.EVENT_LOCATIONS.ASSET_OVERVIEW,
+          action_type: 'claim_bonus',
+          network_chain_id: asset.chainId,
+          asset_symbol: asset.symbol,
+        }),
+      );
+      expect(mockTrackEvent).toHaveBeenCalledWith({ name: 'mock-built-event' });
+    });
+
+    it('prevents duplicate claim presses via isClaimPressedRef guard', () => {
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      const button = getByTestId(
+        ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.CLAIM_BUTTON,
+      );
+      fireEvent.press(button);
+      fireEvent.press(button);
+
+      expect(mockClaimRewards).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('tooltip / info button', () => {
+    it('opens tooltip modal with correct content on info button press', () => {
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      fireEvent.press(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.INFO_BUTTON),
+      );
+
+      expect(mockOpenTooltipModal).toHaveBeenCalledTimes(1);
+
+      const [title, , footer, buttonText] = mockOpenTooltipModal.mock.calls[0];
+
+      expect(title).toBe('Claimable bonus');
+      expect(footer).toBeUndefined();
+      expect(buttonText).toBe('Sounds good');
+    });
+
+    it('fires TOOLTIP_OPENED analytics on info button press', () => {
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      fireEvent.press(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.INFO_BUTTON),
+      );
+
+      expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+        EVENT_NAME.TOOLTIP_OPENED,
+      );
+      expect(mockAddProperties).toHaveBeenCalledWith(
+        expect.objectContaining({
+          location: MUSD_EVENTS_CONSTANTS.EVENT_LOCATIONS.ASSET_OVERVIEW,
+          tooltip_name: 'claim_bonus_info',
+        }),
+      );
+      expect(mockTrackEvent).toHaveBeenCalledWith({ name: 'mock-built-event' });
+    });
+  });
+
+  describe('terms link', () => {
+    it('opens terms URL and fires analytics when terms link is pressed', () => {
+      const { getByTestId } = renderWithProvider(
+        <AssetOverviewClaimBonus asset={createMockAsset()} />,
+      );
+
+      fireEvent.press(
+        getByTestId(ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS.INFO_BUTTON),
+      );
+
+      const tooltipDescription = mockOpenTooltipModal.mock.calls[0][1];
+
+      const { getByText } = renderWithProvider(tooltipDescription);
+      fireEvent.press(getByText('Terms apply.'));
+
+      expect(Linking.openURL).toHaveBeenCalledWith(
+        AppConstants.URLS.MUSD_CONVERSION_BONUS_TERMS_OF_USE,
+      );
+      expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+        MetaMetricsEvents.MUSD_BONUS_TERMS_OF_USE_PRESSED,
+      );
+    });
+  });
+});

app/components/UI/Earn/components/AssetOverviewClaimBonus/AssetOverviewClaimBonus.testIds.ts

@@ -0,0 +1,6 @@
+export const ASSET_OVERVIEW_CLAIM_BONUS_TEST_IDS = {
+  CONTAINER: 'asset-overview-claim-bonus-container',
+  INFO_BUTTON: 'asset-overview-claim-bonus-info-button',
+  CLAIM_BUTTON: 'asset-overview-claim-bonus-claim-button',
+  CLAIMABLE_AMOUNT: 'asset-overview-claim-bonus-claimable-amount',
+};