Snap removal confirmation (#13619)

* Add Snap removal confirmation

* Add styling for Snap removal confirmation

* Update styling

* Update button margin

* Re-use styling code

* Address comments

* Update Popover props

* Lint

* Lint

Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>
Co-authored-by: Erik Marks <rekmarks@protonmail.com>

app/_locales/en/messages.json

@@ -2299,6 +2299,9 @@
   "personalAddressDetected": {
     "message": "Personal address detected. Input the token contract address."
   },
+  "pleaseConfirm": {
+    "message": "Please confirm"
+  },
   "plusXMore": {
     "message": "+ $1 more",
     "description": "$1 is a number of additional but unshown items in a list- this message will be shown in place of those items"
@@ -2434,6 +2437,10 @@
   "removeSnap": {
     "message": "Remove Snap"
   },
+  "removeSnapConfirmation": {
+    "message": "Are you sure you want to remove $1?",
+    "description": "$1 represents the name of the snap"
+  },
   "removeSnapDescription": {
     "message": "This action will delete the snap, its data and revoke your given permissions."
   },

ui/components/app/app-components.scss

@@ -30,6 +30,7 @@
 @import 'edit-gas-fee-popover/edit-gas-tooltip/index';
 @import 'flask/experimental-area/index';
 @import 'flask/snap-install-warning/index';
+@import 'flask/snap-remove-warning/index';
 @import 'flask/snap-settings-card/index';
 @import 'flask/snaps-authorship-pill/index';
 @import 'gas-customization/gas-modal-page-container/index';

ui/components/app/flask/snap-remove-warning/index.js

@@ -0,0 +1 @@
+export { default } from './snap-remove-warning';

ui/components/app/flask/snap-remove-warning/index.scss

@@ -0,0 +1,12 @@
+.snap-remove-warning {
+  color: var(--black);
+
+  &__footer-button {
+    height: 40px;
+    margin-inline-end: 24px;
+
+    &:last-of-type {
+      margin-inline-end: 0;
+    }
+  }
+}

ui/components/app/flask/snap-remove-warning/snap-remove-warning.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import Typography from '../../../ui/typography/typography';
+import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
+import Box from '../../../ui/box/box';
+import Popover from '../../../ui/popover';
+import Button from '../../../ui/button';
+
+export default function SnapRemoveWarning({ onCancel, onSubmit, snapName }) {
+  const t = useI18nContext();
+
+  const SnapRemoveWarningFooter = () => {
+    return (
+      <>
+        <Button
+          className="snap-remove-warning__footer-button"
+          type="default"
+          onClick={onCancel}
+        >
+          {t('nevermind')}
+        </Button>
+        <Button
+          className="snap-remove-warning__footer-button"
+          type="danger-primary"
+          onClick={onSubmit}
+        >
+          {t('removeSnap')}
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <Popover
+      className="snap-remove-warning"
+      title={t('pleaseConfirm')}
+      footer={<SnapRemoveWarningFooter />}
+      onClose={onCancel}
+      headerProps={{ padding: [6, 4, 0, 6] }}
+    >
+      <Box paddingRight={4} paddingBottom={4} paddingLeft={6}>
+        <Typography variant={TYPOGRAPHY.H4}>
+          {t('removeSnapConfirmation', [snapName])}
+        </Typography>
+      </Box>
+    </Popover>
+  );
+}
+
+SnapRemoveWarning.propTypes = {
+  /**
+   * onCancel handler
+   */
+  onCancel: PropTypes.func,
+  /**
+   * onSubmit handler
+   */
+  onSubmit: PropTypes.func,
+  /**
+   * Name of snap
+   */
+  snapName: PropTypes.string,
+};

ui/pages/settings/flask/view-snap/view-snap.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import Button from '../../../../components/ui/button';
@@ -12,6 +12,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 import SnapsAuthorshipPill from '../../../../components/app/flask/snaps-authorship-pill';
 import Box from '../../../../components/ui/box';
+import SnapRemoveWarning from '../../../../components/app/flask/snap-remove-warning';
 import ToggleButton from '../../../../components/ui/toggle-button';
 import PermissionsConnectPermissionList from '../../../../components/app/permissions-connect-permission-list/permissions-connect-permission-list';
 import ConnectedSitesList from '../../../../components/app/connected-sites-list';
@@ -39,6 +40,8 @@ function ViewSnap() {
       return snapState.id === decoded;
     });
 
+  const [isShowingRemoveWarning, setIsShowingRemoveWarning] = useState(false);
+
   useEffect(() => {
     if (!snap) {
       history.push(SNAPS_LIST_ROUTE);
@@ -152,12 +155,19 @@ function ViewSnap() {
               css={{
                 maxWidth: '175px',
               }}
-              onClick={() => {
+              onClick={() => setIsShowingRemoveWarning(true)}
-                dispatch(removeSnap(snap));
-              }}
             >
               {t('removeSnap')}
             </Button>
+            {isShowingRemoveWarning && (
+              <SnapRemoveWarning
+                onCancel={() => setIsShowingRemoveWarning(false)}
+                onSubmit={async () => {
+                  await dispatch(removeSnap(snap));
+                }}
+                snapName={snap.manifest.proposedName}
+              />
+            )}
           </div>
         </Box>
       </div>