From c1614ec670f2042a369d0c394b06b70e8b6dc6d1 Mon Sep 17 00:00:00 2001 From: Bernardo Garces Chapero Date: Tue, 25 Apr 2023 11:47:49 +0200 Subject: [PATCH] Approvals selector refactor (#18664) --- ui/pages/home/home.component.js | 10 +++---- ui/pages/home/home.container.js | 10 +++++-- ui/selectors/approvals.test.ts | 48 +++++++++++++++++++++++++++++++++ ui/selectors/approvals.ts | 19 +++++++++++++ ui/selectors/index.js | 1 + 5 files changed, 81 insertions(+), 7 deletions(-) create mode 100644 ui/selectors/approvals.test.ts create mode 100644 ui/selectors/approvals.ts diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index 4001d0ca1..6fabafdf9 100644 --- a/ui/pages/home/home.component.js +++ b/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); diff --git a/ui/pages/home/home.container.js b/ui/pages/home/home.container.js index 0601c7e1e..9ffaf1094 100644 --- a/ui/pages/home/home.container.js +++ b/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), diff --git a/ui/selectors/approvals.test.ts b/ui/selectors/approvals.test.ts new file mode 100644 index 000000000..384d4d1be --- /dev/null +++ b/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); + }); + }); +}); diff --git a/ui/selectors/approvals.ts b/ui/selectors/approvals.ts new file mode 100644 index 000000000..f777185df --- /dev/null +++ b/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; +} diff --git a/ui/selectors/index.js b/ui/selectors/index.js index 28d8e9e34..552ce7408 100644 --- a/ui/selectors/index.js +++ b/ui/selectors/index.js @@ -5,3 +5,4 @@ export * from './metametrics'; export * from './permissions'; export * from './selectors'; export * from './transactions'; +export * from './approvals';