chore: MMI-5248 introduce the token allowance functionality for MMI (#…

…25967)

<!--
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 code fences to enable the token allowance functionality for MMI by
following the correct flow.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

<!-- [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/develop/.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/develop/.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.

test/e2e/playwright/mmi/pageObjects/mmi-dummyApp-page.ts

@@ -60,14 +60,17 @@ export class DummyAppPage {
     if (isSign) {
       await popup.click('button:has-text("Confirm")');
     } else {
-      // Confirm
       await popup.getByTestId('page-container-footer-next').click();
-      // Approve
+
+      if (buttonId === 'approveTokens') {
+        await popup.getByTestId('page-container-footer-next').click();
+      }
+
       await popup
         .getByTestId('custody-confirm-link__btn')
         .click({ timeout: 10000 });
-      // }
     }
+
     await popup.close();
   }
 

ui/pages/confirmations/confirm-approve/confirm-approve.js

@@ -175,17 +175,7 @@ export default function ConfirmApprove({
     return <ConfirmContractInteraction />;
   }
 
-  let tokenAllowanceImprovements = true;
-
-  ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
-  tokenAllowanceImprovements = false;
-  ///: END:ONLY_INCLUDE_IF
-
-  if (
-    tokenAllowanceImprovements &&
-    assetStandard === TokenStandard.ERC20 &&
-    !isSetApproveForAll
-  ) {
+  if (assetStandard === TokenStandard.ERC20 && !isSetApproveForAll) {
     return (
       <GasFeeContextProvider transaction={transaction}>
         <TransactionModalContextProvider>

ui/pages/confirmations/token-allowance/token-allowance.js

@@ -3,6 +3,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import BigNumber from 'bignumber.js';
+///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+import { showCustodianDeepLink } from '@metamask-institutional/extension';
+///: END:ONLY_INCLUDE_IF
 import Box from '../../../components/ui/box/box';
 import NetworkAccountBalanceHeader from '../../../components/app/network-account-balance-header/network-account-balance-header';
 import UrlIcon from '../../../components/ui/url-icon/url-icon';
@@ -73,6 +76,12 @@ import CustomNonce from '../components/custom-nonce';
 import FeeDetailsComponent from '../components/fee-details-component/fee-details-component';
 import { BlockaidResultType } from '../../../../shared/constants/security-provider';
 
+///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+import { getAccountType } from '../../../selectors/selectors';
+import { mmiActionsFactory } from '../../../store/institutional/institution-background';
+import { showCustodyConfirmLink } from '../../../store/institutional/institution-actions';
+///: END:ONLY_INCLUDE_IF
+
 const ALLOWED_HOSTS = ['portfolio.metamask.io'];
 
 export default function TokenAllowance({
@@ -135,6 +144,12 @@ export default function TokenAllowance({
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
   const nextNonce = useSelector(getNextSuggestedNonce);
   const customNonceValue = useSelector(getCustomNonceValue);
+  ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+  const accountType = useSelector((state) =>
+    getAccountType(state, fromAccount.address),
+  );
+  const mmiActions = mmiActionsFactory();
+  ///: END:ONLY_INCLUDE_IF
 
   /**
    * We set the customSpendingCap to the dappProposedTokenAmount, if provided, rather than setting customTokenAmount
@@ -222,6 +237,43 @@ export default function TokenAllowance({
     });
   };
 
+  ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+  const mmiApprovalFlow = () => {
+    if (accountType === 'custody') {
+      fullTxData.custodyStatus = 'created';
+      fullTxData.metadata = fullTxData.metadata || {};
+
+      dispatch(mmiActions.setWaitForConfirmDeepLinkDialog(true));
+
+      const txId = fullTxData.id;
+      const fromAddress = fullTxData.txParams.from;
+      const closeNotification = false;
+      dispatch(updateAndApproveTx(customNonceMerge(fullTxData))).then(() => {
+        showCustodianDeepLink({
+          dispatch,
+          mmiActions,
+          txId,
+          fromAddress,
+          closeNotification,
+          onDeepLinkFetched: () => undefined,
+          onDeepLinkShown: () => {
+            dispatch(clearConfirmTransaction());
+            history.push(mostRecentOverviewPage);
+          },
+          showCustodyConfirmLink,
+        });
+        history.push(mostRecentOverviewPage);
+      });
+    } else {
+      // Non Custody accounts follow normal flow
+      dispatch(updateAndApproveTx(customNonceMerge(fullTxData))).then(() => {
+        dispatch(clearConfirmTransaction());
+        history.push(mostRecentOverviewPage);
+      });
+    }
+  };
+  ///: END:ONLY_INCLUDE_IF
+
   const handleApprove = () => {
     const { name } = methodData;
 
@@ -251,10 +303,16 @@ export default function TokenAllowance({
 
     dispatch(updateCustomNonce(''));
 
+    ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+    mmiApprovalFlow();
+    ///: END:ONLY_INCLUDE_IF
+
+    ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
     dispatch(updateAndApproveTx(customNonceMerge(fullTxData))).then(() => {
       dispatch(clearConfirmTransaction());
       history.push(mostRecentOverviewPage);
     });
+    ///: END:ONLY_INCLUDE_IF
   };
 
   const handleNextClick = () => {