feat: rwds-276 wip

Author: VGR-GIT

app/_locales/en/messages.json

@@ -2445,6 +2445,16 @@ export default class MetamaskController extends EventEmitter {
           this.subscriptionController,
         ),
 
+      // rewards
+      getRewardsSeasonMetadata: this.controllerMessenger.call.bind(
+        this.controllerMessenger,
+        'RewardsController:getSeasonMetadata',
+      ),
+      getRewardsSeasonStatus: this.controllerMessenger.call.bind(
+        this.controllerMessenger,
+        'RewardsController:getSeasonStatus',
+      ),
+
       // hardware wallets
       connectHardware: this.connectHardware.bind(this),
       forgetDevice: this.forgetDevice.bind(this),

app/images/metamask-rewards-points.svg

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Box, Text, TextVariant } from '@metamask/design-system-react';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { getIntlLocale } from '../../../ducks/locale/locale';
+import { useRewardsContext } from '../../../contexts/rewards';
+import { Skeleton } from '../../component-library/skeleton';
+
+/**
+ * Component to display the rewards points balance
+ * Shows the points balance with an icon for users who haven't opted in yet
+ * (i.e., when rewardsActiveAccount?.subscriptionId is null)
+ */
+export const RewardsPointsBalance = () => {
+  const t = useI18nContext();
+  const locale = useSelector(getIntlLocale);
+  const { rewardsEnabled, seasonStatus, seasonStatusLoading } =
+    useRewardsContext();
+
+  if (!rewardsEnabled) {
+    return null;
+  }
+
+  if (seasonStatusLoading && !seasonStatus?.balance) {
+    return <Skeleton />;
+  }
+
+  // Don't render if there's no points balance to show
+  if (seasonStatus?.balance?.total === null) {
+    return null;
+  }
+
+  // Format the points balance with proper locale-aware number formatting
+  const formattedPoints = new Intl.NumberFormat(locale).format(
+    seasonStatus?.balance?.total ?? 0,
+  );
+
+  return (
+    <Box
+      className="flex items-center gap-1"
+      data-testid="rewards-points-balance"
+    >
+      <img
+        src="./images/metamask-rewards-points.svg"
+        alt={t('rewardsPointsIcon')}
+        style={{ width: '20px', height: '20px' }}
+      />
+      <Text
+        variant={TextVariant.BodyMd}
+        data-testid="rewards-points-balance-value"
+      >
+        {t('rewardsPointsBalance', [formattedPoints])}
+      </Text>
+    </Box>
+  );
+};

app/scripts/metamask-controller.js

@@ -0,0 +1 @@
+export { RewardsPointsBalance } from './RewardsPointsBalance';

ui/components/app/rewards/RewardsPointsBalance.tsx

@@ -0,0 +1,70 @@
+import React, { useContext } from 'react';
+import type { SeasonStatusState } from '../../../app/scripts/controllers/rewards/rewards-controller.types';
+import { useCandidateSubscriptionId } from '../../hooks/rewards/useCandidateSubscriptionId';
+import { useSeasonStatus } from '../../hooks/rewards/useSeasonStatus';
+import { useRewardsEnabled } from '../../hooks/rewards/useRewardsEnabled';
+
+export interface RewardsContextValue {
+  rewardsEnabled: boolean;
+  candidateSubscriptionId: string | null;
+  candidateSubscriptionIdError: boolean;
+  seasonStatus: SeasonStatusState | null;
+  seasonStatusError: string | null;
+  seasonStatusLoading: boolean;
+  refetchSeasonStatus: () => Promise<void>;
+}
+
+export const RewardsContext = React.createContext<RewardsContextValue>({
+  rewardsEnabled: false,
+  candidateSubscriptionId: null,
+  candidateSubscriptionIdError: false,
+  seasonStatus: null,
+  seasonStatusError: null,
+  seasonStatusLoading: false,
+  refetchSeasonStatus: async () => {
+    // Default empty function
+  },
+});
+
+export const useRewardsContext = () => {
+  const context = useContext(RewardsContext);
+  if (!context) {
+    throw new Error('useRewardsContext must be used within a RewardsProvider');
+  }
+  return context;
+};
+
+export const RewardsProvider: React.FC = ({ children }) => {
+  const rewardsEnabled = useRewardsEnabled();
+  const {
+    candidateSubscriptionId,
+    candidateSubscriptionIdError,
+    fetchCandidateSubscriptionId,
+  } = useCandidateSubscriptionId();
+
+  const {
+    seasonStatus,
+    seasonStatusError,
+    seasonStatusLoading,
+    fetchSeasonStatus,
+  } = useSeasonStatus({
+    subscriptionId: candidateSubscriptionId,
+    onAuthorizationError: fetchCandidateSubscriptionId,
+  });
+
+  return (
+    <RewardsContext.Provider
+      value={{
+        rewardsEnabled,
+        candidateSubscriptionId,
+        candidateSubscriptionIdError,
+        seasonStatus,
+        seasonStatusError,
+        seasonStatusLoading,
+        refetchSeasonStatus: fetchSeasonStatus,
+      }}
+    >
+      {children}
+    </RewardsContext.Provider>
+  );
+};

ui/components/app/rewards/index.ts

@@ -0,0 +1,4 @@
+export { useRewardsContext } from '../../contexts/rewards';
+export { useCandidateSubscriptionId } from './useCandidateSubscriptionId';
+export { useSeasonStatus } from './useSeasonStatus';
+export { useRewardsEnabled } from './useRewardsEnabled';

ui/contexts/rewards/index.tsx

@@ -0,0 +1,60 @@
+import { useState, useCallback, useEffect } from 'react';
+import log from 'loglevel';
+import { submitRequestToBackground } from '../../store/background-connection';
+import { useSelector } from 'react-redux';
+import { getIsUnlocked } from '../../ducks/metamask/metamask';
+import { useRewardsEnabled } from './useRewardsEnabled';
+
+interface UseCandidateSubscriptionIdReturn {
+  candidateSubscriptionId: string | null;
+  candidateSubscriptionIdError: boolean;
+  fetchCandidateSubscriptionId: () => Promise<void>;
+}
+
+/**
+ * Hook to fetch and manage candidate subscription ID
+ */
+export const useCandidateSubscriptionId =
+  (): UseCandidateSubscriptionIdReturn => {
+    const [candidateSubscriptionId, setCandidateSubscriptionId] = useState<
+      string | null
+    >(null);
+    const [candidateSubscriptionIdError, setCandidateSubscriptionIdError] =
+      useState(false);
+    const isUnlocked = useSelector(getIsUnlocked);
+    const isRewardsEnabled = useRewardsEnabled();
+
+    const fetchCandidateSubscriptionId = useCallback(async () => {
+      try {
+        const candidateId = await submitRequestToBackground<string>(
+          'getCandidateSubscriptionId',
+          [],
+        );
+        setCandidateSubscriptionId(candidateId);
+        setCandidateSubscriptionIdError(false);
+      } catch (error) {
+        log.error(
+          '[useCandidateSubscriptionId] Error fetching candidate subscription ID:',
+          error,
+        );
+        setCandidateSubscriptionIdError(true);
+      }
+    }, []);
+
+    // Fetch candidate subscription ID on mount and when unlocked
+    useEffect(() => {
+      if (!isRewardsEnabled) {
+        return;
+      }
+
+      if (isUnlocked) {
+        fetchCandidateSubscriptionId();
+      }
+    }, [isUnlocked, isRewardsEnabled, fetchCandidateSubscriptionId]);
+
+    return {
+      candidateSubscriptionId,
+      candidateSubscriptionIdError,
+      fetchCandidateSubscriptionId,
+    };
+  };

ui/hooks/rewards/index.ts

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { getUseExternalServices } from '../../selectors';
+import { getRemoteFeatureFlags } from '../../selectors/remote-feature-flags';
+import {
+  validatedVersionGatedFeatureFlag,
+  VersionGatedFeatureFlag,
+} from '../../../shared/lib/feature-flags/version-gating';
+
+/**
+ * Custom hook to check if rewards feature is enabled.
+ * Follows the same logic as the RewardsController's isDisabled function.
+ *
+ * @returns boolean - True if rewards feature is enabled, false otherwise
+ */
+export const useRewardsEnabled = (): boolean => {
+  const remoteFeatureFlags = useSelector(getRemoteFeatureFlags);
+  const useExternalServices = useSelector(getUseExternalServices);
+
+  const isRewardsEnabled = useMemo(() => {
+    const rewardsFeatureFlag = remoteFeatureFlags?.rewardsEnabled as
+      | VersionGatedFeatureFlag
+      | boolean
+      | undefined;
+
+    // Resolve the feature flag (can be boolean or VersionGatedFeatureFlag)
+    const resolveFlag = (flag: unknown): boolean => {
+      if (typeof flag === 'boolean') {
+        return flag;
+      }
+      return Boolean(
+        validatedVersionGatedFeatureFlag(flag as VersionGatedFeatureFlag),
+      );
+    };
+
+    const featureFlagEnabled = resolveFlag(rewardsFeatureFlag);
+
+    // Rewards are enabled when BOTH feature flag is enabled AND useExternalServices is true
+    return featureFlagEnabled && Boolean(useExternalServices);
+  }, [remoteFeatureFlags, useExternalServices]);
+
+  return isRewardsEnabled;
+};