feat: add toast after edit

Author: salimtb

app/_locales/en/messages.json

@@ -80,6 +80,7 @@ type AppState = {
   newNftAddedMessage: string;
   removeNftMessage: string;
   newNetworkAddedName: string;
+  editedNetwork: string;
   newNetworkAddedConfigurationId: string;
   selectedNetworkConfigurationId: string;
   sendInputCurrencySwitched: boolean;
@@ -158,6 +159,7 @@ const initialState: AppState = {
   newNftAddedMessage: '',
   removeNftMessage: '',
   newNetworkAddedName: '',
+  editedNetwork: '',
   newNetworkAddedConfigurationId: '',
   selectedNetworkConfigurationId: '',
   sendInputCurrencySwitched: false,
@@ -467,6 +469,13 @@ export default function reduceApp(
         newNetworkAddedConfigurationId: networkConfigurationId,
       };
     }
+    case actionConstants.SET_EDIT_NETWORK: {
+      const { nickname } = action.payload;
+      return {
+        ...appState,
+        editedNetwork: nickname,
+      };
+    }
     case actionConstants.SET_NEW_TOKENS_IMPORTED:
       return {
         ...appState,

ui/ducks/app/app.ts

@@ -164,6 +164,7 @@ export default class Home extends PureComponent {
     showOutdatedBrowserWarning: PropTypes.bool.isRequired,
     setOutdatedBrowserWarningLastShown: PropTypes.func.isRequired,
     newNetworkAddedName: PropTypes.string,
+    editedNetwork: PropTypes.string,
     // This prop is used in the `shouldCloseNotificationPopup` function
     // eslint-disable-next-line react/no-unused-prop-types
     isSigningQRHardwareTransaction: PropTypes.bool.isRequired,
@@ -177,6 +178,7 @@ export default class Home extends PureComponent {
     setNewTokensImported: PropTypes.func.isRequired,
     setNewTokensImportedError: PropTypes.func.isRequired,
     clearNewNetworkAdded: PropTypes.func,
+    clearEditedNetwork: PropTypes.func,
     setActiveNetwork: PropTypes.func,
     // eslint-disable-next-line react/no-unused-prop-types
     setTokenAutodetectModal: PropTypes.func,
@@ -450,6 +452,7 @@ export default class Home extends PureComponent {
       newNftAddedMessage,
       setNewNftAddedMessage,
       newNetworkAddedName,
+      editedNetwork,
       removeNftMessage,
       setRemoveNftMessage,
       newTokensImported,
@@ -458,6 +461,7 @@ export default class Home extends PureComponent {
       setNewTokensImportedError,
       newNetworkAddedConfigurationId,
       clearNewNetworkAdded,
+      clearEditedNetwork,
       setActiveNetwork,
     } = this.props;
 
@@ -572,6 +576,28 @@ export default class Home extends PureComponent {
             }
           />
         ) : null}
+        {console.log('IM HERE ***********', editedNetwork)}
+        {editedNetwork ? (
+          <ActionableMessage
+            type="success"
+            className="home__new-network-notification"
+            message={
+              <Box display={Display.InlineFlex}>
+                <i className="fa fa-check-circle home__new-network-notification-icon" />
+                <Text variant={TextVariant.bodySm} as="h6">
+                  {t('newNetworkEdited', [editedNetwork])}
+                </Text>
+                <ButtonIcon
+                  iconName={IconName.Close}
+                  size={ButtonIconSize.Sm}
+                  ariaLabel={t('close')}
+                  onClick={() => clearEditedNetwork()}
+                  className="home__new-network-notification-close"
+                />
+              </Box>
+            }
+          />
+        ) : null}
         {newTokensImported ? (
           <ActionableMessage
             type="success"

ui/pages/home/home.component.js

@@ -46,6 +46,7 @@ import {
   getNewTokensImportedError,
   hasPendingApprovals,
   getSelectedInternalAccount,
+  getEditedNetwork,
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   getAccountType,
   ///: END:ONLY_INCLUDE_IF
@@ -73,6 +74,7 @@ import {
   setNewTokensImportedError,
   setShowTokenAutodetectModal,
   setShowTokenAutodetectModalOnUpgrade,
+  setEditedNetwork,
 } from '../../store/actions';
 import {
   hideWhatsNewPopup,
@@ -190,6 +192,7 @@ const mapStateToProps = (state) => {
       getIsBrowserDeprecated() && getShowOutdatedBrowserWarning(state),
     seedPhraseBackedUp,
     newNetworkAddedName: getNewNetworkAdded(state),
+    editedNetwork: getEditedNetwork(state),
     isSigningQRHardwareTransaction: getIsSigningQRHardwareTransaction(state),
     newNftAddedMessage: getNewNftAddedMessage(state),
     removeNftMessage: getRemoveNftMessage(state),
@@ -256,6 +259,9 @@ const mapDispatchToProps = (dispatch) => {
     clearNewNetworkAdded: () => {
       dispatch(setNewNetworkAdded({}));
     },
+    clearEditedNetwork: () => {
+      dispatch(setEditedNetwork({}));
+    },
     setActiveNetwork: (networkConfigurationId) => {
       dispatch(setActiveNetwork(networkConfigurationId));
     },

ui/pages/home/home.container.js

@@ -47,6 +47,7 @@ import {
 import {
   editAndSetNetworkConfiguration,
   requestUserApproval,
+  setEditedNetwork,
   setNewNetworkAdded,
   setSelectedNetworkConfigurationId,
   showDeprecatedNetworkModal,
@@ -855,6 +856,9 @@ const NetworksForm = ({
             token_symbol: ticker,
           },
         });
+        if (networkMenuRedesign) {
+          dispatch(setEditedNetwork({ nickname: networkName }));
+        }
       }
 
       if (

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -2009,6 +2009,10 @@ export function getNewNetworkAdded(state) {
   return state.appState.newNetworkAddedName;
 }
 
+export function getEditedNetwork(state) {
+  return state.appState.editedNetwork;
+}
+
 export function getNetworksTabSelectedNetworkConfigurationId(state) {
   return state.appState.selectedNetworkConfigurationId;
 }

ui/selectors/selectors.js

@@ -510,6 +510,20 @@ describe('Selectors', () => {
     });
   });
 
+  describe('#getEditedNetwork', () => {
+    it('returns undefined if getEditedNetwork is undefined', () => {
+      expect(selectors.getNewNetworkAdded({ appState: {} })).toBeUndefined();
+    });
+
+    it('returns getEditedNetwork', () => {
+      expect(
+        selectors.getEditedNetwork({
+          appState: { editedNetwork: 'test-chain' },
+        }),
+      ).toStrictEqual('test-chain');
+    });
+  });
+
   describe('#getRpcPrefsForCurrentProvider', () => {
     it('returns an empty object if state.metamask.providerConfig is empty', () => {
       expect(

ui/selectors/selectors.test.js

@@ -107,6 +107,7 @@ export const SET_SHOW_TOKEN_AUTO_DETECT_MODAL_UPGRADE =
 export const SET_SELECTED_NETWORK_CONFIGURATION_ID =
   'SET_SELECTED_NETWORK_CONFIGURATION_ID';
 export const SET_NEW_NETWORK_ADDED = 'SET_NEW_NETWORK_ADDED';
+export const SET_EDIT_NETWORK = 'SET_EDIT_NETWORK';
 
 export const SET_NEW_NFT_ADDED_MESSAGE = 'SET_NEW_NFT_ADDED_MESSAGE';
 export const SET_REMOVE_NFT_MESSAGE = 'SET_REMOVE_NFT_MESSAGE';

ui/store/actionConstants.ts

@@ -1389,6 +1389,25 @@ describe('Actions', () => {
     });
   });
 
+  describe('#setEditedNetwork', () => {
+    it('sets appState.setEditedNetwork to provided value', async () => {
+      const store = mockStore();
+
+      const newNetworkAddedDetails = {
+        nickname: 'test-chain',
+      };
+
+      store.dispatch(actions.setEditedNetwork(newNetworkAddedDetails));
+
+      const resultantActions = store.getActions();
+
+      expect(resultantActions[0]).toStrictEqual({
+        type: 'SET_EDIT_NETWORK',
+        payload: newNetworkAddedDetails,
+      });
+    });
+  });
+
   describe('#addToAddressBook', () => {
     it('calls setAddressBook', async () => {
       const store = mockStore();

ui/store/actions.test.js

@@ -4103,6 +4103,18 @@ export function setNewNetworkAdded({
   };
 }
 
+export function setEditedNetwork({
+  nickname,
+}: {
+  networkConfigurationId: string;
+  nickname: string;
+}): PayloadAction<object> {
+  return {
+    type: actionConstants.SET_EDIT_NETWORK,
+    payload: { nickname },
+  };
+}
+
 export function setNewNftAddedMessage(
   newNftAddedMessage: string,
 ): PayloadAction<string> {