feat: use last selected payment detail instead of deducing from approval amount

ui/hooks/subscription/useSubscriptionPricing.test.ts

@@ -6,17 +6,12 @@ import {
   ProductType,
   PaymentType,
 } from '@metamask/subscription-controller';
-import {
-  TransactionMeta,
-  TransactionStatus,
-} from '@metamask/transaction-controller';
 import { renderHookWithProvider } from '../../../test/lib/render-helpers';
 import baseMockState from '../../../test/data/mock-state.json';
 import {
   useSubscriptionPricing,
   useSubscriptionProductPlans,
   useSubscriptionPaymentMethods,
-  useShieldSubscriptionPricingFromTokenApproval,
 } from './useSubscriptionPricing';
 
 const mockSubscriptionPricing: PricingResponse = {
@@ -186,101 +181,4 @@ describe('useSubscriptionPricing', () => {
       expect(result.current).toBeUndefined();
     });
   });
-
-  describe('useShieldSubscriptionPricingFromTokenApproval', () => {
-    const mockTransactionMeta: TransactionMeta = {
-      id: 'test-tx-id',
-      chainId: '0x1',
-      networkClientId: 'mainnet',
-      status: TransactionStatus.unapproved,
-      time: Date.now(),
-      txParams: {
-        from: '0x1234567890123456789012345678901234567890',
-        to: '0x0000000000000000000000000000000000000000',
-      },
-    };
-
-    it('should return monthly plan when approval amount matches monthly', async () => {
-      const { result } = renderHookWithProvider(
-        () =>
-          useShieldSubscriptionPricingFromTokenApproval({
-            transactionMeta: mockTransactionMeta,
-            decodedApprovalAmount: '120000000',
-          }),
-        mockState,
-      );
-
-      // Wait for async operation to complete
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      expect(result.current.productPrice).toEqual({
-        interval: RECURRING_INTERVALS.month,
-        unitAmount: 120000000,
-        unitDecimals: 6,
-        currency: 'usd',
-        trialPeriodDays: 7,
-        minBillingCycles: 1,
-      });
-      expect(result.current.selectedTokenPrice).toEqual(
-        mockSubscriptionPricing?.paymentMethods?.find(
-          (paymentMethod) => paymentMethod.type === PAYMENT_TYPES.byCrypto,
-        )?.chains?.[0]?.tokens?.[0],
-      );
-    });
-
-    it('should return yearly plan when approval amount matches yearly', async () => {
-      const { result } = renderHookWithProvider(
-        () =>
-          useShieldSubscriptionPricingFromTokenApproval({
-            transactionMeta: mockTransactionMeta,
-            decodedApprovalAmount: '100000000',
-          }),
-        mockState,
-      );
-
-      // Wait for async operation to complete
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      expect(result.current.productPrice).toEqual({
-        interval: RECURRING_INTERVALS.year,
-        unitAmount: 100000000,
-        unitDecimals: 6,
-        currency: 'usd',
-        trialPeriodDays: 7,
-        minBillingCycles: 1,
-      });
-    });
-
-    it('should return undefined when approval amount does not match any plan', async () => {
-      const { result } = renderHookWithProvider(
-        () =>
-          useShieldSubscriptionPricingFromTokenApproval({
-            transactionMeta: mockTransactionMeta,
-            decodedApprovalAmount: '99999999',
-          }),
-        mockState,
-      );
-
-      // Wait for async operation to complete
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      expect(result.current.productPrice).toBeUndefined();
-    });
-
-    it('should return undefined when transaction meta is not provided', async () => {
-      const { result } = renderHookWithProvider(
-        () =>
-          useShieldSubscriptionPricingFromTokenApproval({
-            transactionMeta: undefined,
-            decodedApprovalAmount: '120000000',
-          }),
-        mockState,
-      );
-
-      // Wait for async operation to complete
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      expect(result.current.productPrice).toBeUndefined();
-    });
-  });
 });

ui/hooks/subscription/useSubscriptionPricing.ts

@@ -3,18 +3,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import log from 'loglevel';
 import {
   ChainPaymentInfo,
-  PAYMENT_TYPES,
   PaymentType,
   PricingPaymentMethod,
   PricingResponse,
-  PRODUCT_TYPES,
   ProductPrice,
   ProductType,
-  RECURRING_INTERVALS,
   TokenPaymentInfo,
 } from '@metamask/subscription-controller';
 import { Hex } from '@metamask/utils';
-import { TransactionMeta } from '@metamask/transaction-controller';
 import { getSubscriptionPricing } from '../../selectors/subscription';
 import {
   getSubscriptionCryptoApprovalAmount,
@@ -214,83 +210,3 @@ export const useSubscriptionPaymentMethods = (
     [pricing, paymentType],
   );
 };
-
-/**
- * Use this hook to get the shield subscription price derived from transaction data.
- *
- * @param params - The parameters for the hook.
- * @param params.transactionMeta - The transaction meta.
- * @param params.decodedApprovalAmount - The decoded approval amount.
- * @returns The product price.
- */
-export const useShieldSubscriptionPricingFromTokenApproval = ({
-  transactionMeta,
-  decodedApprovalAmount,
-}: {
-  transactionMeta?: TransactionMeta;
-  decodedApprovalAmount?: string;
-}) => {
-  const { subscriptionPricing } = useSubscriptionPricing(); // shouldn't refetch pricing here since we are using the cached pricing from shield plan screen to compare price amount
-  const pricingPlans = useSubscriptionProductPlans(
-    PRODUCT_TYPES.SHIELD,
-    subscriptionPricing,
-  );
-  const cryptoPaymentMethod = useSubscriptionPaymentMethods(
-    PAYMENT_TYPES.byCrypto,
-    subscriptionPricing,
-  );
-  const selectedTokenPrice = useMemo(() => {
-    return cryptoPaymentMethod?.chains
-      ?.find(
-        (chain) =>
-          chain.chainId.toLowerCase() ===
-          transactionMeta?.chainId.toLowerCase(),
-      )
-      ?.tokens.find(
-        (token) =>
-          token.address.toLowerCase() ===
-          transactionMeta?.txParams?.to?.toLowerCase(),
-      );
-  }, [cryptoPaymentMethod, transactionMeta]);
-
-  // need to do async here since `getSubscriptionCryptoApprovalAmount` make call to background script
-  const { value: productPrice, pending } = useAsyncResult(async (): Promise<
-    ProductPrice | undefined
-  > => {
-    if (selectedTokenPrice) {
-      const params = {
-        chainId: transactionMeta?.chainId as Hex,
-        paymentTokenAddress: selectedTokenPrice.address as Hex,
-        productType: PRODUCT_TYPES.SHIELD,
-      };
-      // Get all intervals from RECURRING_INTERVALS
-      const intervals = Object.values(RECURRING_INTERVALS);
-
-      // Fetch approval amounts for all intervals
-      const approvalAmounts = await Promise.all(
-        intervals.map((interval) =>
-          getSubscriptionCryptoApprovalAmount({
-            ...params,
-            interval,
-          }),
-        ),
-      );
-
-      // Find the matching plan by comparing approval amounts
-      for (let i = 0; i < approvalAmounts.length; i++) {
-        if (approvalAmounts[i]?.approveAmount === decodedApprovalAmount) {
-          return pricingPlans?.find((plan) => plan.interval === intervals[i]);
-        }
-      }
-    }
-
-    return undefined;
-  }, [
-    transactionMeta,
-    selectedTokenPrice,
-    decodedApprovalAmount,
-    pricingPlans,
-  ]);
-
-  return { productPrice, pending, selectedTokenPrice };
-};

ui/pages/confirmations/components/confirm/info/shield-subscription-approve/shield-subscription-approve.test.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
-import { ProductPrice } from '@metamask/subscription-controller';
+import {
+  CachedLastSelectedPaymentMethod,
+  PAYMENT_TYPES,
+  PricingResponse,
+  PRODUCT_TYPES,
+  RECURRING_INTERVALS,
+} from '@metamask/subscription-controller';
 import { getMockApproveConfirmState } from '../../../../../../../test/data/confirmations/helper';
 import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
 import { tEn } from '../../../../../../../test/lib/i18n-helpers';
@@ -63,26 +69,67 @@ jest.mock('../../../../../../store/actions', () => ({
   }),
 }));
 
-jest.mock('../../../../../../hooks/subscription/useSubscriptionPricing', () => {
-  const mockProductPrice: ProductPrice = {
-    interval: 'month',
-    minBillingCycles: 12,
-    unitAmount: 8000000,
-    unitDecimals: 6,
-    currency: 'usd',
-    trialPeriodDays: 14,
-  };
-  return {
-    useShieldSubscriptionPricingFromTokenApproval: jest.fn(() => ({
-      productPrice: mockProductPrice,
-      pending: false,
-    })),
-  };
-});
+const mockSubscriptionPricing: PricingResponse = {
+  products: [
+    {
+      name: PRODUCT_TYPES.SHIELD,
+      prices: [
+        {
+          interval: RECURRING_INTERVALS.month,
+          unitAmount: 8_000_000,
+          unitDecimals: 6,
+          currency: 'usd',
+          trialPeriodDays: 14,
+          minBillingCycles: 12,
+        },
+        {
+          interval: RECURRING_INTERVALS.year,
+          unitAmount: 100_000_000,
+          unitDecimals: 6,
+          currency: 'usd',
+          trialPeriodDays: 14,
+          minBillingCycles: 1,
+        },
+      ],
+    },
+  ],
+  paymentMethods: [
+    {
+      type: PAYMENT_TYPES.byCrypto,
+      chains: [
+        {
+          chainId: '0x1',
+          paymentAddress: '0x1234567890123456789012345678901234567890',
+          tokens: [
+            {
+              address: '0x0000000000000000000000000000000000000000',
+              symbol: 'usdc',
+              decimals: 6,
+              conversionRate: { usd: '1' },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+const mockLastUsedPaymentDetail: CachedLastSelectedPaymentMethod = {
+  plan: RECURRING_INTERVALS.month,
+  paymentTokenAddress: '0x1234567890123456789012345678901234567890',
+  type: PAYMENT_TYPES.byCrypto,
+};
 
 describe('ShieldSubscriptionApproveInfo', () => {
   it('renders correctly', () => {
     const state = getMockApproveConfirmState();
+    // @ts-expect-error - mock state
+    state.metamask.lastSelectedPaymentMethod = {
+      [PRODUCT_TYPES.SHIELD]: mockLastUsedPaymentDetail,
+    };
+    // @ts-expect-error - mock state
+    state.metamask.pricing = mockSubscriptionPricing;
+
     const mockStore = configureMockStore([])(state);
     const { getByText } = renderWithConfirmContextProvider(
       <ShieldSubscriptionApproveInfo />,