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

@@ -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"
   },

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

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,

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,

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

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
  *

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

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,