From 0461bbcded9150922cbda22a1fd286cdb32932b0 Mon Sep 17 00:00:00 2001 From: Hennadii Ivtushok Date: Wed, 9 Mar 2022 22:20:48 +0200 Subject: [PATCH] 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 --- app/_locales/en/messages.json | 7 ++ ui/components/app/app-components.scss | 1 + .../app/flask/snap-remove-warning/index.js | 1 + .../app/flask/snap-remove-warning/index.scss | 12 ++++ .../snap-remove-warning.js | 64 +++++++++++++++++++ .../settings/flask/view-snap/view-snap.js | 18 ++++-- 6 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 ui/components/app/flask/snap-remove-warning/index.js create mode 100644 ui/components/app/flask/snap-remove-warning/index.scss create mode 100644 ui/components/app/flask/snap-remove-warning/snap-remove-warning.js 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} + /> + )}