From 255586aea1d2ba6cff20ab7c511d8acd00d1e4a8 Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Tue, 23 Mar 2021 16:12:32 -0500 Subject: [PATCH] resolve issue with missing template error (#10692) * resolve issue with missing template error * also apply filtering to confirmation page * rename variable --- ui/app/helpers/constants/routes.js | 2 ++ ui/app/pages/confirmation/confirmation.js | 7 +++++-- ui/app/pages/confirmation/templates/index.js | 4 ++++ ui/app/pages/home/home.component.js | 6 +++--- ui/app/pages/home/home.container.js | 5 +++-- ui/app/selectors/selectors.js | 8 ++++++++ 6 files changed, 25 insertions(+), 7 deletions(-) diff --git a/ui/app/helpers/constants/routes.js b/ui/app/helpers/constants/routes.js index 2079dcf40..61b21b50c 100644 --- a/ui/app/helpers/constants/routes.js +++ b/ui/app/helpers/constants/routes.js @@ -104,6 +104,8 @@ const PATH_NAME_MAP = { [CONNECTED_ACCOUNTS_ROUTE]: 'Accounts Connected To This Site Page', [`${CONFIRM_TRANSACTION_ROUTE}/:id`]: 'Confirmation Root Page', [CONFIRM_TRANSACTION_ROUTE]: 'Confirmation Root Page', + // TODO: rename when this is the only confirmation page + [CONFIRMATION_V_NEXT_ROUTE]: 'New Confirmation Page', [`${CONFIRM_TRANSACTION_ROUTE}/:id${CONFIRM_TOKEN_METHOD_PATH}`]: 'Confirm Token Method Transaction Page', [`${CONFIRM_TRANSACTION_ROUTE}/:id${CONFIRM_SEND_ETHER_PATH}`]: 'Confirm Send Ether Transaction Page', [`${CONFIRM_TRANSACTION_ROUTE}/:id${CONFIRM_SEND_TOKEN_PATH}`]: 'Confirm Send Token Transaction Page', diff --git a/ui/app/pages/confirmation/confirmation.js b/ui/app/pages/confirmation/confirmation.js index 47ce4f191..16c09b629 100644 --- a/ui/app/pages/confirmation/confirmation.js +++ b/ui/app/pages/confirmation/confirmation.js @@ -17,7 +17,7 @@ import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; import { stripHttpsScheme } from '../../helpers/utils/util'; import { useI18nContext } from '../../hooks/useI18nContext'; import { useOriginMetadata } from '../../hooks/useOriginMetadata'; -import { getUnapprovedConfirmations } from '../../selectors'; +import { getUnapprovedTemplatedConfirmations } from '../../selectors'; import NetworkDisplay from '../../components/app/network-display/network-display'; import { COLORS, SIZES } from '../../helpers/constants/design-system'; import Callout from '../../components/ui/callout'; @@ -115,7 +115,10 @@ export default function ConfirmationPage() { const t = useI18nContext(); const dispatch = useDispatch(); const history = useHistory(); - const pendingConfirmations = useSelector(getUnapprovedConfirmations, isEqual); + const pendingConfirmations = useSelector( + getUnapprovedTemplatedConfirmations, + isEqual, + ); const [currentPendingConfirmation, setCurrentPendingConfirmation] = useState( 0, ); diff --git a/ui/app/pages/confirmation/templates/index.js b/ui/app/pages/confirmation/templates/index.js index b00c1552b..3c90a68fd 100644 --- a/ui/app/pages/confirmation/templates/index.js +++ b/ui/app/pages/confirmation/templates/index.js @@ -12,6 +12,10 @@ const APPROVAL_TEMPLATES = { [MESSAGE_TYPE.SWITCH_ETHEREUM_CHAIN]: switchEthereumChain, }; +export const TEMPLATED_CONFIRMATION_MESSAGE_TYPES = Object.keys( + APPROVAL_TEMPLATES, +); + const ALLOWED_TEMPLATE_KEYS = [ 'content', 'approvalText', diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js index 3f9c14caa..84ecd217f 100644 --- a/ui/app/pages/home/home.component.js +++ b/ui/app/pages/home/home.component.js @@ -73,7 +73,7 @@ export default class Home extends PureComponent { setWeb3ShimUsageAlertDismissed: PropTypes.func.isRequired, originOfCurrentTab: PropTypes.string, disableWeb3ShimUsageAlert: PropTypes.func.isRequired, - pendingApprovals: PropTypes.arrayOf(PropTypes.object).isRequired, + pendingConfirmations: PropTypes.arrayOf(PropTypes.object).isRequired, }; state = { @@ -91,7 +91,7 @@ export default class Home extends PureComponent { haveSwapsQuotes, showAwaitingSwapScreen, swapsFetchParams, - pendingApprovals, + pendingConfirmations, } = this.props; this.setState({ mounted: true }); @@ -109,7 +109,7 @@ export default class Home extends PureComponent { history.push(CONFIRM_TRANSACTION_ROUTE); } else if (Object.keys(suggestedTokens).length > 0) { history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE); - } else if (pendingApprovals.length > 0) { + } else if (pendingConfirmations.length > 0) { history.push(CONFIRMATION_V_NEXT_ROUTE); } } diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js index 3a9422486..929833e14 100644 --- a/ui/app/pages/home/home.container.js +++ b/ui/app/pages/home/home.container.js @@ -8,6 +8,7 @@ import { getIsMainnet, getOriginOfCurrentTab, getTotalUnapprovedCount, + getUnapprovedTemplatedConfirmations, getWeb3ShimUsageStateForOrigin, unconfirmedTransactionsCountSelector, } from '../../selectors'; @@ -52,12 +53,12 @@ const mapStateToProps = (state) => { connectedStatusPopoverHasBeenShown, defaultHomeActiveTabName, swapsState, - pendingApprovals = {}, } = metamask; const accountBalance = getCurrentEthBalance(state); const { forgottenPassword, threeBoxLastUpdated } = appState; const totalUnapprovedCount = getTotalUnapprovedCount(state); const swapsEnabled = getSwapsFeatureLiveness(state); + const pendingConfirmations = getUnapprovedTemplatedConfirmations(state); const envType = getEnvironmentType(); const isPopup = envType === ENVIRONMENT_TYPE_POPUP; @@ -102,7 +103,7 @@ const mapStateToProps = (state) => { isMainnet: getIsMainnet(state), originOfCurrentTab, shouldShowWeb3ShimUsageNotification, - pendingApprovals: Object.values(pendingApprovals), + pendingConfirmations, }; }; diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js index 550c45983..006d0a892 100644 --- a/ui/app/selectors/selectors.js +++ b/ui/app/selectors/selectors.js @@ -19,6 +19,7 @@ import { SWAPS_CHAINID_DEFAULT_TOKEN_MAP, ALLOWED_SWAPS_CHAIN_IDS, } from '../../../shared/constants/swaps'; +import { TEMPLATED_CONFIRMATION_MESSAGE_TYPES } from '../pages/confirmation/templates'; /** * One of the only remaining valid uses of selecting the network subkey of the @@ -325,6 +326,13 @@ export function getUnapprovedConfirmations(state) { return Object.values(pendingApprovals); } +export function getUnapprovedTemplatedConfirmations(state) { + const unapprovedConfirmations = getUnapprovedConfirmations(state); + return unapprovedConfirmations.filter((approval) => + TEMPLATED_CONFIRMATION_MESSAGE_TYPES.includes(approval.type), + ); +} + function getSuggestedTokenCount(state) { const { suggestedTokens = {} } = state.metamask; return Object.keys(suggestedTokens).length;