feat: Add shield subscription token approval confirmation

package.json

@@ -360,7 +360,7 @@
     "@metamask/solana-wallet-standard": "^0.6.0",
     "@metamask/streams": "^0.4.0",
     "@metamask/subscription-controller": "^0.5.0",
-    "@metamask/transaction-controller": "^60.2.0",
+    "@metamask/transaction-controller": "^60.6.0",
     "@metamask/user-operation-controller": "^39.0.0",
     "@metamask/utils": "^11.4.2",
     "@ngraveio/bc-ur": "^1.1.13",

shared/lib/confirmation.utils.ts

@@ -15,13 +15,14 @@ const REDESIGN_USER_TRANSACTION_TYPES = [
   TransactionType.contractInteraction,
   TransactionType.deployContract,
   TransactionType.revokeDelegation,
+  TransactionType.shieldSubscriptionApprove,
+  TransactionType.simpleSend,
   TransactionType.tokenMethodApprove,
   TransactionType.tokenMethodIncreaseAllowance,
+  TransactionType.tokenMethodSafeTransferFrom,
   TransactionType.tokenMethodSetApprovalForAll,
   TransactionType.tokenMethodTransfer,
   TransactionType.tokenMethodTransferFrom,
-  TransactionType.tokenMethodSafeTransferFrom,
-  TransactionType.simpleSend,
 ];
 
 /** List of transaction types that support the redesigned confirmation flow for developers */

ui/hooks/subscription/useSubscriptionPricing.ts

@@ -30,7 +30,12 @@ export type TokenWithApprovalAmount = (
   | AssetWithDisplayData<ERC20Asset>
   | AssetWithDisplayData<NativeAsset>
 ) & {
-  approvalAmount: string;
+  approvalAmount: {
+    approveAmount: string;
+    chainId: Hex;
+    paymentAddress: Hex;
+    paymentTokenAddress: Hex;
+  };
 };
 
 export const useAvailableTokenBalances = (params: {

ui/pages/confirmations/components/confirm/header/advanced-details-button.tsx

@@ -1,3 +1,7 @@
+import {
+  TransactionMeta,
+  TransactionType,
+} from '@metamask/transaction-controller';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -14,11 +18,13 @@ import {
 } from '../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { setConfirmationAdvancedDetailsOpen } from '../../../../../store/actions';
+import { useConfirmContext } from '../../../context/confirm';
 import { selectConfirmationAdvancedDetailsOpen } from '../../../selectors/preferences';
 
 export const AdvancedDetailsButton = () => {
   const t = useI18nContext();
   const dispatch = useDispatch();
+  const { currentConfirmation } = useConfirmContext<TransactionMeta>();
 
   const showAdvancedDetails = useSelector(
     selectConfirmationAdvancedDetailsOpen,
@@ -37,6 +43,13 @@ export const AdvancedDetailsButton = () => {
       }
       borderRadius={BorderRadius.MD}
       marginRight={1}
+      // hiding through visibility instead of rendering conditionally so the
+      // header layout is not affected
+      style={
+        currentConfirmation?.type === TransactionType.shieldSubscriptionApprove
+          ? { visibility: 'hidden' }
+          : {}
+      }
     >
       <Tooltip
         title={

ui/pages/confirmations/components/confirm/header/header.tsx

@@ -27,11 +27,12 @@ import { DAppInitiatedHeader } from './dapp-initiated-header';
 import HeaderInfo from './header-info';
 import { WalletInitiatedHeader } from './wallet-initiated-header';
 
-const CONFIRMATIONS_WITH_NEW_HEADER = [
+const CONFIRMATIONS_WITH_ALT_HEADER = [
+  TransactionType.simpleSend,
+  TransactionType.shieldSubscriptionApprove,
+  TransactionType.tokenMethodSafeTransferFrom,
   TransactionType.tokenMethodTransfer,
   TransactionType.tokenMethodTransferFrom,
-  TransactionType.tokenMethodSafeTransferFrom,
-  TransactionType.simpleSend,
 ];
 
 const Header = () => {
@@ -106,7 +107,7 @@ const Header = () => {
   // addresses as well.
   const isConfirmationWithNewHeader =
     currentConfirmation?.type &&
-    CONFIRMATIONS_WITH_NEW_HEADER.includes(currentConfirmation.type);
+    CONFIRMATIONS_WITH_ALT_HEADER.includes(currentConfirmation.type);
   const isWalletInitiated =
     (currentConfirmation as TransactionMeta)?.origin === ORIGIN_METAMASK;
   if (isConfirmationWithNewHeader && isWalletInitiated) {

ui/pages/confirmations/components/confirm/header/wallet-initiated-header.tsx

@@ -6,8 +6,9 @@ import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-import { AssetType } from '../../../../../../shared/constants/transaction';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { MetaMetricsEventLocation } from '../../../../../../shared/constants/metametrics';
+import { AssetType } from '../../../../../../shared/constants/transaction';
 import {
   Box,
   ButtonIcon,
@@ -27,12 +28,13 @@ import {
   TextColor,
   TextVariant,
 } from '../../../../../helpers/constants/design-system';
+import { SHIELD_PLAN_ROUTE } from '../../../../../helpers/constants/routes';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { showSendTokenPage } from '../../../../../store/actions';
-import { useConfirmActions } from '../../../hooks/useConfirmActions';
 import { useConfirmContext } from '../../../context/confirm';
-import { navigateToSendRoute } from '../../../utils/send';
+import { useConfirmActions } from '../../../hooks/useConfirmActions';
 import { useRedesignedSendFlow } from '../../../hooks/useRedesignedSendFlow';
+import { navigateToSendRoute } from '../../../utils/send';
 import { AdvancedDetailsButton } from './advanced-details-button';
 
 export const WalletInitiatedHeader = () => {
@@ -42,8 +44,17 @@ export const WalletInitiatedHeader = () => {
   const { enabled: isSendRedesignEnabled } = useRedesignedSendFlow();
   const { onCancel } = useConfirmActions();
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
+  const navigate = useNavigate();
 
   const handleBackButtonClick = useCallback(async () => {
+    if (
+      currentConfirmation.type === TransactionType.shieldSubscriptionApprove
+    ) {
+      onCancel({ location: MetaMetricsEventLocation.Confirmation });
+      navigate(SHIELD_PLAN_ROUTE);
+      return;
+    }
+
     const { id } = currentConfirmation;
 
     const isNativeSend =
@@ -80,7 +91,14 @@ export const WalletInitiatedHeader = () => {
     dispatch(clearConfirmTransaction());
     dispatch(showSendTokenPage());
     navigateToSendRoute(history, isSendRedesignEnabled);
-  }, [currentConfirmation, dispatch, history, isSendRedesignEnabled, onCancel]);
+  }, [
+    currentConfirmation,
+    dispatch,
+    history,
+    isSendRedesignEnabled,
+    navigate,
+    onCancel,
+  ]);
 
   return (
     <Box
@@ -105,7 +123,9 @@ export const WalletInitiatedHeader = () => {
         color={IconColor.iconDefault}
       />
       <Text variant={TextVariant.headingSm} color={TextColor.inherit}>
-        {t('review')}
+        {currentConfirmation.type === TransactionType.shieldSubscriptionApprove
+          ? t('shieldConfirmMembership')
+          : t('review')}
       </Text>
       <AdvancedDetailsButton />
     </Box>

ui/pages/confirmations/components/confirm/info/info.tsx

@@ -1,17 +1,18 @@
 import { TransactionType } from '@metamask/transaction-controller';
 import React, { useMemo } from 'react';
+import { isGatorPermissionsFeatureEnabled } from '../../../../../../shared/modules/environment';
+import { useTrustSignalMetrics } from '../../../../trust-signals/hooks/useTrustSignalMetrics';
 import { useConfirmContext } from '../../../context/confirm';
-import { SignatureRequestType } from '../../../types/confirm';
 import { useSmartTransactionFeatureFlags } from '../../../hooks/useSmartTransactionFeatureFlags';
 import { useTransactionFocusEffect } from '../../../hooks/useTransactionFocusEffect';
-import { useTrustSignalMetrics } from '../../../../trust-signals/hooks/useTrustSignalMetrics';
-import { isGatorPermissionsFeatureEnabled } from '../../../../../../shared/modules/environment';
+import { SignatureRequestType } from '../../../types/confirm';
 import ApproveInfo from './approve/approve';
 import BaseTransactionInfo from './base-transaction-info/base-transaction-info';
 import NativeTransferInfo from './native-transfer/native-transfer';
 import NFTTokenTransferInfo from './nft-token-transfer/nft-token-transfer';
 import PersonalSignInfo from './personal-sign/personal-sign';
 import SetApprovalForAllInfo from './set-approval-for-all-info/set-approval-for-all-info';
+import ShieldSubscriptionApproveInfo from './shield-subscription-approve/shield-subscription-approve';
 import TokenTransferInfo from './token-transfer/token-transfer';
 import TypedSignV1Info from './typed-sign-v1/typed-sign-v1';
 import TypedSignInfo from './typed-sign/typed-sign';
@@ -34,6 +35,8 @@ const Info = () => {
       [TransactionType.personalSign]: () => PersonalSignInfo,
       [TransactionType.revokeDelegation]: () => BaseTransactionInfo,
       [TransactionType.simpleSend]: () => NativeTransferInfo,
+      [TransactionType.shieldSubscriptionApprove]: () =>
+        ShieldSubscriptionApproveInfo,
       [TransactionType.signTypedData]: () => {
         const signatureRequest = currentConfirmation as SignatureRequestType;