added notification for remove nfts

MetaMask · Jan 19, 2023 · 31208a2 · 31208a2
1 parent 90d2ca0
commit 31208a2
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 10 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git 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
@@ -53,6 +53,7 @@ export default function reduceApp(state = {}, action) {
     ledgerTransportStatus: TRANSPORT_STATES.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
@@ -135,6 +135,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,
@@ -263,6 +265,8 @@ export default class Home extends PureComponent {
       setNewNetworkAdded,
       newCollectibleAddedMessage,
       setNewCollectibleAddedMessage,
+      removeCollectibleMessage,
+      setRemoveCollectibleMessage,
       newTokensImported,
       setNewTokensImported,
       newCustomNetworkAdded,
@@ -330,6 +334,29 @@ export default class Home extends PureComponent {
             }
           />
         ) : null}
+
+        {removeCollectibleMessage === 'success' ? (
+          <ActionableMessage
+            type="success"
+            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"
@@ -549,7 +576,6 @@ export default class Home extends PureComponent {
 
   render() {
     const { t } = this.context;
-
     const {
       defaultHomeActiveTabName,
       onTabClick,
@@ -611,8 +637,7 @@ export default class Home extends PureComponent {
               <EthOverview />
             </div>
             <Tabs
-              t={this.context.t}
-              defaultActiveTabKey={defaultHomeActiveTabName}
+              defaultActiveTabName={defaultHomeActiveTabName}
               onTabClick={onTabClick}
               tabsClassName="home__tabs"
               subHeader={
@@ -689,8 +714,7 @@ export default class Home extends PureComponent {
                 activeClassName="home__tab--active"
                 className="home__tab"
                 data-testid="home__asset-tab"
-                name={this.context.t('assets')}
-                tabKey="assets"
+                name={t('assets')}
               >
                 <AssetList
                   onClickAsset={(asset) =>
@@ -703,8 +727,7 @@ export default class Home extends PureComponent {
                   activeClassName="home__tab--active"
                   className="home__tab"
                   data-testid="home__nfts-tab"
-                  name={this.context.t('nfts')}
-                  tabKey="nfts"
+                  name={t('nfts')}
                 >
                   <CollectiblesTab
                     onAddNFT={() => {
@@ -717,8 +740,7 @@ export default class Home extends PureComponent {
                 activeClassName="home__tab--active"
                 className="home__tab"
                 data-testid="home__activity-tab"
-                name={this.context.t('activity')}
-                tabKey="activity"
+                name={t('activity')}
               >
                 <TransactionList />
               </Tab>

diff --git 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
@@ -1137,6 +1137,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
@@ -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
@@ -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,