From 180eabea06b619d88e052d64723e7a581ce950fa Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Mon, 23 Jan 2023 17:23:44 +0530
Subject: [PATCH] Added toaster for removed NFTs (#17297)

* added notification for remove nfts

* reverted names for tabs

* updated default key

* updated snapshot

* updated remove nft toast to danger
---
 app/_locales/en/messages.json                 |  3 ++
 .../collectible-details.js                    |  2 ++
 ui/ducks/app/app.js                           |  7 +++++
 ui/pages/home/home.component.js               | 28 ++++++++++++++++++-
 ui/pages/home/home.container.js               |  6 ++++
 ui/selectors/selectors.js                     |  4 +++
 ui/store/actionConstants.js                   |  1 +
 ui/store/actions.js                           |  7 +++++
 8 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 9f45e7db6..2c4d2835a 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -3018,6 +3018,9 @@
   "removeAccountDescription": {
     "message": "This account will be removed from your wallet. Please make sure you have the original Secret Recovery Phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down. "
   },
+  "removeCollectibleMessage": {
+    "message": "Collectible was successfully removed!"
+  },
   "removeNFT": {
     "message": "Remove NFT"
   },
diff --git a/ui/components/app/collectible-details/collectible-details.js b/ui/components/app/collectible-details/collectible-details.js
index 1f0212c3c..78dffbe0c 100644
--- a/ui/components/app/collectible-details/collectible-details.js
+++ b/ui/components/app/collectible-details/collectible-details.js
@@ -32,6 +32,7 @@ import { DEFAULT_ROUTE, SEND_ROUTE } from '../../../helpers/constants/routes';
 import {
   checkAndUpdateSingleNftOwnershipStatus,
   removeAndIgnoreNft,
+  setRemoveCollectibleMessage,
 } from '../../../store/actions';
 import { CHAIN_IDS } from '../../../../shared/constants/network';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
@@ -85,6 +86,7 @@ export default function CollectibleDetails({ collectible }) {
 
   const onRemove = () => {
     dispatch(removeAndIgnoreNft(address, tokenId));
+    dispatch(setRemoveCollectibleMessage('success'));
     history.push(DEFAULT_ROUTE);
   };
 
diff --git a/ui/ducks/app/app.js b/ui/ducks/app/app.js
index 1707d0a26..4eb705573 100644
--- a/ui/ducks/app/app.js
+++ b/ui/ducks/app/app.js
@@ -53,6 +53,7 @@ export default function reduceApp(state = {}, action) {
     ledgerTransportStatus: HardwareTransportStates.none,
     newNetworkAdded: '',
     newCollectibleAddedMessage: '',
+    removeCollectibleMessage: '',
     portfolioTooltipWasShownInThisSession: false,
     sendInputCurrencySwitched: false,
     newTokensImported: '',
@@ -319,6 +320,12 @@ export default function reduceApp(state = {}, action) {
         newCollectibleAddedMessage: action.value,
       };
 
+    case actionConstants.SET_REMOVE_COLLECTIBLE_MESSAGE:
+      return {
+        ...appState,
+        removeCollectibleMessage: action.value,
+      };
+
     case actionConstants.PORTFOLIO_TOOLTIP_WAS_SHOWN_IN_THIS_SESSION:
       return {
         ...appState,
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index 19e7d33b0..0d7528adf 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -136,6 +136,8 @@ export default class Home extends PureComponent {
     isSigningQRHardwareTransaction: PropTypes.bool.isRequired,
     newCollectibleAddedMessage: PropTypes.string,
     setNewCollectibleAddedMessage: PropTypes.func.isRequired,
+    removeCollectibleMessage: PropTypes.string,
+    setRemoveCollectibleMessage: PropTypes.func.isRequired,
     closeNotificationPopup: PropTypes.func.isRequired,
     newTokensImported: PropTypes.string,
     setNewTokensImported: PropTypes.func.isRequired,
@@ -264,6 +266,8 @@ export default class Home extends PureComponent {
       setNewNetworkAdded,
       newCollectibleAddedMessage,
       setNewCollectibleAddedMessage,
+      removeCollectibleMessage,
+      setRemoveCollectibleMessage,
       newTokensImported,
       setNewTokensImported,
       newCustomNetworkAdded,
@@ -332,6 +336,29 @@ export default class Home extends PureComponent {
             }
           />
         ) : null}
+
+        {removeCollectibleMessage === 'success' ? (
+          <ActionableMessage
+            type="danger"
+            className="home__new-network-notification"
+            message={
+              <Box display={DISPLAY.INLINE_FLEX}>
+                <i className="fa fa-check-circle home__new-nft-notification-icon" />
+                <Typography
+                  variant={TYPOGRAPHY.H7}
+                  fontWeight={FONT_WEIGHT.NORMAL}
+                >
+                  {t('removeCollectibleMessage')}
+                </Typography>
+                <button
+                  className="fas fa-times home__new-nft-notification-close"
+                  title={t('close')}
+                  onClick={() => setRemoveCollectibleMessage('')}
+                />
+              </Box>
+            }
+          />
+        ) : null}
         {newNetworkAdded ? (
           <ActionableMessage
             type="success"
@@ -551,7 +578,6 @@ export default class Home extends PureComponent {
 
   render() {
     const { t } = this.context;
-
     const {
       defaultHomeActiveTabName,
       onTabClick,
diff --git a/ui/pages/home/home.container.js b/ui/pages/home/home.container.js
index 0c81354d9..b41f1a3de 100644
--- a/ui/pages/home/home.container.js
+++ b/ui/pages/home/home.container.js
@@ -24,6 +24,7 @@ import {
   getNewTokensImported,
   getShowPortfolioTooltip,
   getShouldShowSeedPhraseReminder,
+  getRemoveCollectibleMessage,
 } from '../../selectors';
 
 import {
@@ -37,6 +38,7 @@ import {
   setRecoveryPhraseReminderLastShown,
   setNewNetworkAdded,
   setNewCollectibleAddedMessage,
+  setRemoveCollectibleMessage,
   setNewTokensImported,
   setRpcTarget,
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
@@ -145,6 +147,7 @@ const mapStateToProps = (state) => {
     newNetworkAdded: getNewNetworkAdded(state),
     isSigningQRHardwareTransaction,
     newCollectibleAddedMessage: getNewCollectibleAddedMessage(state),
+    removeCollectibleMessage: getRemoveCollectibleMessage(state),
     newTokensImported: getNewTokensImported(state),
     newCustomNetworkAdded: appState.newCustomNetworkAdded,
     onboardedInThisUISession: appState.onboardedInThisUISession,
@@ -175,6 +178,9 @@ const mapDispatchToProps = (dispatch) => ({
   setNewCollectibleAddedMessage: (message) => {
     dispatch(setNewCollectibleAddedMessage(message));
   },
+  setRemoveCollectibleMessage: (message) => {
+    dispatch(setRemoveCollectibleMessage(message));
+  },
   setNewTokensImported: (newTokens) => {
     dispatch(setNewTokensImported(newTokens));
   },
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index ec0a3d226..420f0b9f2 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -1139,6 +1139,10 @@ export function getNewCollectibleAddedMessage(state) {
   return state.appState.newCollectibleAddedMessage;
 }
 
+export function getRemoveCollectibleMessage(state) {
+  return state.appState.removeCollectibleMessage;
+}
+
 /**
  * To retrieve the name of the new Network added using add network form
  *
diff --git a/ui/store/actionConstants.js b/ui/store/actionConstants.js
index 4a48085eb..ba4ee4d4b 100644
--- a/ui/store/actionConstants.js
+++ b/ui/store/actionConstants.js
@@ -93,6 +93,7 @@ export const SET_SELECTED_SETTINGS_RPC_URL = 'SET_SELECTED_SETTINGS_RPC_URL';
 export const SET_NEW_NETWORK_ADDED = 'SET_NEW_NETWORK_ADDED';
 export const SET_NEW_COLLECTIBLE_ADDED_MESSAGE =
   'SET_NEW_COLLECTIBLE_ADDED_MESSAGE';
+export const SET_REMOVE_COLLECTIBLE_MESSAGE = 'SET_REMOVE_COLLECTIBLE_MESSAGE';
 export const SET_NEW_CUSTOM_NETWORK_ADDED = 'SET_NEW_CUSTOM_NETWORK_ADDED';
 
 export const LOADING_METHOD_DATA_STARTED = 'LOADING_METHOD_DATA_STARTED';
diff --git a/ui/store/actions.js b/ui/store/actions.js
index f168f7aa7..259da24a4 100644
--- a/ui/store/actions.js
+++ b/ui/store/actions.js
@@ -3204,6 +3204,13 @@ export function setNewCollectibleAddedMessage(newCollectibleAddedMessage) {
   };
 }
 
+export function setRemoveCollectibleMessage(removeCollectibleMessage) {
+  return {
+    type: actionConstants.SET_REMOVE_COLLECTIBLE_MESSAGE,
+    value: removeCollectibleMessage,
+  };
+}
+
 export function setNewTokensImported(newTokensImported) {
   return {
     type: actionConstants.SET_NEW_TOKENS_IMPORTED,