Approvals selector refactor (#18664)

ui/pages/home/home.component.js

@@ -88,7 +88,7 @@ export default class Home extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
     forgottenPassword: PropTypes.bool,
-    suggestedAssets: PropTypes.array,
+    hasWatchAssetPendingApprovals: PropTypes.bool,
     unconfirmedTransactionsCount: PropTypes.number,
     shouldShowSeedPhraseReminder: PropTypes.bool.isRequired,
     isPopup: PropTypes.bool,
@@ -169,7 +169,7 @@ export default class Home extends PureComponent {
       haveSwapsQuotes,
       isNotification,
       showAwaitingSwapScreen,
-      suggestedAssets = [],
+      hasWatchAssetPendingApprovals,
       swapsFetchParams,
       unconfirmedTransactionsCount,
     } = this.props;
@@ -180,7 +180,7 @@ export default class Home extends PureComponent {
     } else if (
       firstPermissionsRequestId ||
       unconfirmedTransactionsCount > 0 ||
-      suggestedAssets.length > 0 ||
+      hasWatchAssetPendingApprovals ||
       (!isNotification &&
         (showAwaitingSwapScreen || haveSwapsQuotes || swapsFetchParams))
     ) {
@@ -193,7 +193,7 @@ export default class Home extends PureComponent {
       firstPermissionsRequestId,
       history,
       isNotification,
-      suggestedAssets = [],
+      hasWatchAssetPendingApprovals,
       unconfirmedTransactionsCount,
       haveSwapsQuotes,
       showAwaitingSwapScreen,
@@ -210,7 +210,7 @@ export default class Home extends PureComponent {
       history.push(`${CONNECT_ROUTE}/${firstPermissionsRequestId}`);
     } else if (unconfirmedTransactionsCount > 0) {
       history.push(CONFIRM_TRANSACTION_ROUTE);
-    } else if (suggestedAssets.length > 0) {
+    } else if (hasWatchAssetPendingApprovals) {
       history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE);
     } else if (pendingConfirmations.length > 0) {
       history.push(CONFIRMATION_V_NEXT_ROUTE);

ui/pages/home/home.container.js

@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+import { ApprovalType } from '@metamask/controller-utils';
 import {
   activeTabHasPermissions,
   getFirstPermissionRequest,
@@ -26,6 +27,7 @@ import {
   getNewTokensImported,
   getShouldShowSeedPhraseReminder,
   getRemoveNftMessage,
+  hasPendingApprovalsSelector,
 } from '../../selectors';
 
 import {
@@ -65,7 +67,6 @@ import Home from './home.component';
 const mapStateToProps = (state) => {
   const { metamask, appState } = state;
   const {
-    suggestedAssets,
     seedPhraseBackedUp,
     selectedAddress,
     connectedStatusPopoverHasBeenShown,
@@ -108,9 +109,14 @@ const mapStateToProps = (state) => {
     hasUnsignedQRHardwareTransaction(state) ||
     hasUnsignedQRHardwareMessage(state);
 
+  const hasWatchAssetPendingApprovals = hasPendingApprovalsSelector(
+    state,
+    ApprovalType.WatchAsset,
+  );
+
   return {
     forgottenPassword,
-    suggestedAssets,
+    hasWatchAssetPendingApprovals,
     swapsEnabled,
     unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
     shouldShowSeedPhraseReminder: getShouldShowSeedPhraseReminder(state),

ui/selectors/approvals.test.ts

@@ -0,0 +1,48 @@
+import { ApprovalType } from '@metamask/controller-utils';
+import { hasPendingApprovalsSelector } from './approvals';
+
+describe('approval selectors', () => {
+  const mockedState = {
+    metamask: {
+      pendingApprovalCount: 2,
+      pendingApprovals: {
+        '1': {
+          id: '1',
+          origin: 'origin',
+          time: Date.now(),
+          type: ApprovalType.WatchAsset,
+          requestData: {},
+          requestState: null,
+        },
+        '2': {
+          id: '2',
+          origin: 'origin',
+          time: Date.now(),
+          type: ApprovalType.EthSignTypedData,
+          requestData: {},
+          requestState: null,
+        },
+      },
+    },
+  };
+
+  describe('hasPendingApprovalsSelector', () => {
+    it('should return true if there is a pending approval request', () => {
+      const result = hasPendingApprovalsSelector(
+        mockedState,
+        ApprovalType.WatchAsset,
+      );
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false if there is no pending approval request', () => {
+      const result = hasPendingApprovalsSelector(
+        mockedState,
+        ApprovalType.Transaction,
+      );
+
+      expect(result).toBe(false);
+    });
+  });
+});

ui/selectors/approvals.ts

@@ -0,0 +1,19 @@
+import { ApprovalControllerState } from '@metamask/approval-controller';
+import { ApprovalType } from '@metamask/controller-utils';
+
+type ApprovalsMetaMaskState = {
+  metamask: {
+    pendingApprovals: ApprovalControllerState['pendingApprovals'];
+  };
+};
+
+export function hasPendingApprovalsSelector(
+  state: ApprovalsMetaMaskState,
+  approvalType: ApprovalType,
+) {
+  const pendingApprovalRequests = Object.values(
+    state.metamask.pendingApprovals,
+  ).filter(({ type }) => type === approvalType);
+
+  return pendingApprovalRequests.length > 0;
+}

ui/selectors/index.js

@@ -5,3 +5,4 @@ export * from './metametrics';
 export * from './permissions';
 export * from './selectors';
 export * from './transactions';
+export * from './approvals';