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

@@ -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',

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,
   );

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',

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);
     }
   }

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,
   };
 };
 

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;