feat: add shield rewards modal (#38379)

<!--
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**
- adds reward points details on shield plan
- adds shield reward points modal

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38379?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: adds shield rewards modal

## **Related issues**

Fixes:

## **Manual testing steps**

1. Login to MetaMask with an account without shield subscription
2. Go to Menu > Settings : click on Transaction Shield
3. Shows Shield Entry modal: click on get started
4. Redirects to Shield plan form
5. Observe what you get list
6. Click on Rewards detail
7. Shows Rewards modal

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**
<img width="372" height="454" alt="Screenshot 2025-12-04 at 12 12 22 AM"
src="https://github.com/user-attachments/assets/846898e2-7d1c-4aef-9caf-86cf7a4ace9c"
/>

<img width="579" height="211" alt="Screenshot 2025-12-04 at 12 13 09 AM"
src="https://github.com/user-attachments/assets/842b4c3d-e535-468b-8259-a697a1105698"
/>



<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Integrates Rewards into Transaction Shield: fetches/ displays
estimated points, adds Rewards badge and modal on Shield Plan, and shows
rewards info in settings with opt-in.
> 
> - **UI**:
> - Shield Plan (`ui/pages/shield-plan/shield-plan.tsx`): shows Rewards
badge with estimated points per selected interval; adds
`ShieldRewardsModal`.
> - Transaction Shield settings
(`ui/pages/settings/transaction-shield-tab/transaction-shield.tsx`):
displays rewards info row with estimated points and a Sign up button;
loads Rewards onboarding modal; minor icon/color tweaks.
> - **Hooks**:
> - New `useShieldRewards` in `ui/hooks/subscription/useSubscription.ts`
to estimate points (monthly/yearly), check rewards season, and account
opt-in.
> - **E2E Mocks**:
> - Add Rewards API base URL and endpoints; mock responses and handlers
(`test/e2e/helpers/shield/constants.ts`, `mocks.ts`).
> - **Tests**:
>   - Initialize rewards duck state in `transaction-shield.test.tsx`.
> - **i18n**:
> - Add strings for rewards labels, descriptions, and CTA in
`app/_locales/en*/messages.json`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
21f4e1c. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Chaitanya Potti <[email protected]>
Co-authored-by: Lwin <[email protected]>

Author: 3 people

app/_locales/en/messages.json

@@ -6,6 +6,8 @@ export const BASE_RULESET_ENGINE_API_URL =
 
 export const BASE_CLAIMS_API_URL = 'https://claims.dev-api.cx.metamask.io';
 
+export const BASE_REWARDS_API_URL = 'https://rewards.uat-api.cx.metamask.io';
+
 export const SUBSCRIPTION_API = {
   PRICING: `${BASE_SUBSCRIPTION_API_URL}/pricing`,
   ELIGIBILITY: `${BASE_SUBSCRIPTION_API_URL}/subscriptions/eligibility`,
@@ -33,6 +35,37 @@ export const RULESET_ENGINE_API = {
   SIGNATURE_COVERAGE_RESULT: `${BASE_RULESET_ENGINE_API_URL}/signature/coverage/result`,
 };
 
+export const REWARDS_API = {
+  POINTS_ESTIMATION: `${BASE_REWARDS_API_URL}/points-estimation`,
+  SEASONS_STATUS: `${BASE_REWARDS_API_URL}/public/seasons/status`,
+  SEASON_METADATA: `${BASE_REWARDS_API_URL}/public/seasons`,
+};
+
+// Mock response for rewards points estimation
+export const MOCK_REWARDS_POINTS_ESTIMATION_RESPONSE = {
+  pointsEstimate: 100,
+  bonusBips: 0,
+};
+
+// Mock response for rewards seasons status - provides a valid current season
+export const MOCK_REWARDS_SEASONS_STATUS_RESPONSE = {
+  current: {
+    id: 'mock-season-1',
+    startDate: '2025-01-01T00:00:00Z',
+    endDate: '2025-12-31T23:59:59Z',
+  },
+  next: null,
+};
+
+// Mock response for rewards season metadata
+export const MOCK_REWARDS_SEASON_METADATA_RESPONSE = {
+  id: 'mock-season-1',
+  name: 'Mock Season',
+  startDate: '2025-01-01T00:00:00Z',
+  endDate: '2025-12-31T23:59:59Z',
+  tiers: [],
+};
+
 export const BASE_SHIELD_SUBSCRIPTION_CARD = {
   id: 'test_subscription_id',
   status: 'trialing',

app/_locales/en_GB/messages.json

@@ -19,6 +19,10 @@ import {
   MOCK_CLAIM_GENERATE_MESSAGE_RESPONSE,
   MOCK_CLAIM_1,
   RULESET_ENGINE_API,
+  REWARDS_API,
+  MOCK_REWARDS_POINTS_ESTIMATION_RESPONSE,
+  MOCK_REWARDS_SEASONS_STATUS_RESPONSE,
+  MOCK_REWARDS_SEASON_METADATA_RESPONSE,
 } from './constants';
 
 export class ShieldMockttpService {
@@ -81,6 +85,9 @@ export class ShieldMockttpService {
 
     // Ruleset Engine APIs
     await this.#handleRulesetEngine(server);
+
+    // Rewards APIs (needed for useShieldRewards hook on Shield Plan page)
+    await this.#handleRewardsApis(server);
   }
 
   async #handleSubscriptionPricing(server: Mockttp) {
@@ -449,4 +456,29 @@ export class ShieldMockttpService {
         };
       });
   }
+
+  async #handleRewardsApis(server: Mockttp) {
+    // Mock points estimation endpoint (used by useShieldRewards hook)
+    await server
+      .forPost(REWARDS_API.POINTS_ESTIMATION)
+      .always()
+      .thenJson(200, MOCK_REWARDS_POINTS_ESTIMATION_RESPONSE);
+
+    // Mock seasons status endpoint (used by useShieldRewards hook)
+    await server
+      .forGet(REWARDS_API.SEASONS_STATUS)
+      .always()
+      .thenJson(200, MOCK_REWARDS_SEASONS_STATUS_RESPONSE);
+
+    // Mock season metadata endpoint (used by getRewardsSeasonMetadata)
+    // This uses a regex to match /public/seasons/{seasonId}/meta
+    const seasonMetadataRegex = new RegExp(
+      `^${REWARDS_API.SEASON_METADATA}/[^/]+/meta$`,
+      'u',
+    );
+    await server
+      .forGet(seasonMetadataRegex)
+      .always()
+      .thenJson(200, MOCK_REWARDS_SEASON_METADATA_RESPONSE);
+  }
 }

app/images/shield-reward.png

@@ -23,6 +23,9 @@ import {
   addTransaction,
   cancelSubscription,
   estimateGas,
+  estimateRewardsPoints,
+  getRewardsHasAccountOptedIn,
+  getRewardsSeasonMetadata,
   getSubscriptionBillingPortalUrl,
   getSubscriptions,
   getSubscriptionsEligibilities,
@@ -49,9 +52,11 @@ import { decimalToHex } from '../../../shared/modules/conversion.utils';
 import { CONFIRM_TRANSACTION_ROUTE } from '../../helpers/constants/routes';
 import { getInternalAccountBySelectedAccountGroupAndCaip } from '../../selectors/multichain-accounts/account-tree';
 import {
+  getMetaMaskHdKeyrings,
   getMetaMetricsId,
   getModalTypeForShieldEntryModal,
   getUnapprovedConfirmations,
+  getUpdatedAndSortedAccountsWithCaipAccountId,
 } from '../../selectors';
 import { useSubscriptionMetrics } from '../shield/metrics/useSubscriptionMetrics';
 import { CaptureShieldSubscriptionRequestParams } from '../shield/metrics/types';
@@ -69,6 +74,7 @@ import { MetaMetricsEventName } from '../../../shared/constants/metametrics';
 import { useAccountTotalFiatBalance } from '../useAccountTotalFiatBalance';
 import { getNetworkConfigurationsByChainId } from '../../../shared/modules/selectors/networks';
 import { isCryptoPaymentMethod } from '../../pages/settings/transaction-shield-tab/types';
+import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
 import {
   TokenWithApprovalAmount,
   useSubscriptionPricing,
@@ -735,3 +741,140 @@ export const useUpdateSubscriptionCryptoPaymentMethod = ({
     result,
   };
 };
+
+export const useShieldRewards = (): {
+  pending: boolean;
+  pointsMonthly: number | null;
+  pointsYearly: number | null;
+  isRewardsSeason: boolean;
+  hasAccountOptedIn: boolean;
+} => {
+  const dispatch = useDispatch<MetaMaskReduxDispatch>();
+  const [primaryKeyring] = useSelector(getMetaMaskHdKeyrings);
+  const accountsWithCaipChainId = useSelector(
+    getUpdatedAndSortedAccountsWithCaipAccountId,
+  );
+
+  const caipAccountId = useMemo(() => {
+    if (!primaryKeyring) {
+      return null;
+    }
+
+    const primaryAccountWithCaipChainId = accountsWithCaipChainId.find(
+      (account) => {
+        const entropySource = account.options?.entropySource;
+        if (typeof entropySource === 'string') {
+          return isEqualCaseInsensitive(
+            entropySource,
+            primaryKeyring.metadata.id,
+          );
+        }
+        return false;
+      },
+    );
+    if (!primaryAccountWithCaipChainId) {
+      return null;
+    }
+    return primaryAccountWithCaipChainId.caipAccountId;
+  }, [primaryKeyring, accountsWithCaipChainId]);
+
+  const {
+    value: hasAccountOptedIn,
+    pending: hasAccountOptedInResultPending,
+    error: hasAccountOptedInResultError,
+  } = useAsyncResult<boolean>(async () => {
+    if (!caipAccountId) {
+      return false;
+    }
+    return await dispatch(getRewardsHasAccountOptedIn(caipAccountId));
+  }, [caipAccountId]);
+
+  const {
+    value: pointsValue,
+    pending: pointsPending,
+    error: pointsError,
+  } = useAsyncResult<{
+    monthly: number | null;
+    yearly: number | null;
+  }>(async () => {
+    if (!caipAccountId) {
+      return { monthly: null, yearly: null };
+    }
+
+    const [monthlyPointsData, yearlyPointsData] = await Promise.all([
+      dispatch(
+        estimateRewardsPoints({
+          activityType: 'SHIELD',
+          account: caipAccountId,
+          activityContext: {
+            shieldContext: {
+              recurringInterval: 'month',
+            },
+          },
+        }),
+      ),
+      dispatch(
+        estimateRewardsPoints({
+          activityType: 'SHIELD',
+          account: caipAccountId,
+          activityContext: {
+            shieldContext: {
+              recurringInterval: 'year',
+            },
+          },
+        }),
+      ),
+    ]);
+
+    return {
+      monthly: monthlyPointsData?.pointsEstimate ?? null,
+      yearly: yearlyPointsData?.pointsEstimate ?? null,
+    };
+  }, [dispatch, caipAccountId]);
+
+  const {
+    value: isRewardsSeason,
+    pending: seasonPending,
+    error: seasonError,
+  } = useAsyncResult<boolean>(async () => {
+    const seasonMetadata = await dispatch(getRewardsSeasonMetadata('current'));
+
+    if (!seasonMetadata) {
+      return false;
+    }
+
+    const currentTimestamp = Date.now();
+    return (
+      currentTimestamp >= seasonMetadata.startDate &&
+      currentTimestamp <= seasonMetadata.endDate
+    );
+  }, [dispatch]);
+
+  // if there is an error, return null values for points and season so it will not block the UI
+  if (pointsError || seasonError || hasAccountOptedInResultError) {
+    if (pointsError) {
+      console.error('[useShieldRewards error]:', pointsError);
+    }
+    if (seasonError) {
+      console.error('[useShieldRewards error]:', seasonError);
+    }
+    if (hasAccountOptedInResultError) {
+      console.error('[useShieldRewards error]:', hasAccountOptedInResultError);
+    }
+    return {
+      pending: false,
+      pointsMonthly: null,
+      pointsYearly: null,
+      isRewardsSeason: false,
+      hasAccountOptedIn: false,
+    };
+  }
+
+  return {
+    pending: pointsPending || seasonPending || hasAccountOptedInResultPending,
+    pointsMonthly: pointsValue?.monthly ?? null,
+    pointsYearly: pointsValue?.yearly ?? null,
+    isRewardsSeason: isRewardsSeason ?? false,
+    hasAccountOptedIn: hasAccountOptedIn ?? false,
+  };
+};

test/e2e/helpers/shield/constants.ts

@@ -11,6 +11,7 @@ import {
 } from '@metamask/subscription-controller';
 import { renderWithProvider } from '../../../../test/jest/rendering';
 import mockState from '../../../../test/data/mock-state.json';
+import { initialState as rewardsInitialState } from '../../../ducks/rewards';
 import TransactionShield from './transaction-shield';
 
 const mockUseNavigate = jest.fn();
@@ -38,6 +39,7 @@ jest.mock('./shield-subscription-icon-animation', () => ({
 describe('Transaction Shield Page', () => {
   const STATE_MOCK = {
     ...mockState,
+    rewards: rewardsInitialState,
     metamask: {
       ...mockState.metamask,
       customerId: '1',