diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 7fb828590..b1621ed39 100644
--- a/app/_locales/en/messages.json
+++ b/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."
},
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index a135c0766..2eb88d5dd 100644
--- a/ui/components/app/app-components.scss
+++ b/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';
diff --git a/ui/components/app/flask/snap-remove-warning/index.js b/ui/components/app/flask/snap-remove-warning/index.js
new file mode 100644
index 000000000..fe427dde6
--- /dev/null
+++ b/ui/components/app/flask/snap-remove-warning/index.js
@@ -0,0 +1 @@
+export { default } from './snap-remove-warning';
diff --git a/ui/components/app/flask/snap-remove-warning/index.scss b/ui/components/app/flask/snap-remove-warning/index.scss
new file mode 100644
index 000000000..cd7a17016
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/ui/components/app/flask/snap-remove-warning/snap-remove-warning.js b/ui/components/app/flask/snap-remove-warning/snap-remove-warning.js
new file mode 100644
index 000000000..075a1dc81
--- /dev/null
+++ b/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 (
+ <>
+
+
+ >
+ );
+ };
+
+ return (
+ }
+ onClose={onCancel}
+ headerProps={{ padding: [6, 4, 0, 6] }}
+ >
+
+
+ {t('removeSnapConfirmation', [snapName])}
+
+
+
+ );
+}
+
+SnapRemoveWarning.propTypes = {
+ /**
+ * onCancel handler
+ */
+ onCancel: PropTypes.func,
+ /**
+ * onSubmit handler
+ */
+ onSubmit: PropTypes.func,
+ /**
+ * Name of snap
+ */
+ snapName: PropTypes.string,
+};
diff --git a/ui/pages/settings/flask/view-snap/view-snap.js b/ui/pages/settings/flask/view-snap/view-snap.js
index 5986b7b5b..334654b54 100644
--- a/ui/pages/settings/flask/view-snap/view-snap.js
+++ b/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={() => {
- dispatch(removeSnap(snap));
- }}
+ onClick={() => setIsShowingRemoveWarning(true)}
>
{t('removeSnap')}
+ {isShowingRemoveWarning && (
+ setIsShowingRemoveWarning(false)}
+ onSubmit={async () => {
+ await dispatch(removeSnap(snap));
+ }}
+ snapName={snap.manifest.proposedName}
+ />
+ )}