fix: fix PR comments+add new feature flag

ui/components/multichain/network-list-menu/network-list-menu.js

@@ -70,6 +70,7 @@ import {
   getCompletedOnboarding,
   getIsUnlocked,
 } from '../../../ducks/metamask/metamask';
+import { getLocalNetworkMenuRedesignFeatureFlag } from '../../../helpers/utils/feature-flags';
 import PopularNetworkList from './popular-network-list/popular-network-list';
 
 export const NetworkListMenu = ({ onClose }) => {
@@ -79,6 +80,9 @@ export const NetworkListMenu = ({ onClose }) => {
   const testNetworks = useSelector(getTestNetworks);
   const showTestNetworks = useSelector(getShowTestNetworks);
   const currentChainId = useSelector(getCurrentChainId);
+  const networkMenuRedesign = useSelector(
+    getLocalNetworkMenuRedesignFeatureFlag,
+  );
 
   const selectedTabOrigin = useSelector(getOriginOfCurrentTab);
   const useRequestQueue = useSelector(getUseRequestQueue);
@@ -429,9 +433,10 @@ export const NetworkListMenu = ({ onClose }) => {
               </DragDropContext>
             )}
           </Box>
-          {process.env.ENABLE_NETWORK_UI_REDESIGN ? (
+          {networkMenuRedesign ? (
             <PopularNetworkList
               searchAddNetworkResults={searchAddNetworkResults}
+              data-testid="add-popular-network-view"
             />
           ) : null}
           <Box

ui/components/multichain/network-list-menu/network-list-menu.test.js

@@ -13,13 +13,19 @@ import { NetworkListMenu } from '.';
 const mockSetShowTestNetworks = jest.fn();
 const mockSetProviderType = jest.fn();
 const mockToggleNetworkMenu = jest.fn();
+const mockNetworkMenuRedesignToggle = jest.fn();
 
 jest.mock('../../../store/actions.ts', () => ({
   setShowTestNetworks: () => mockSetShowTestNetworks,
   setProviderType: () => mockSetProviderType,
   toggleNetworkMenu: () => mockToggleNetworkMenu,
 }));
 
+jest.mock('../../../helpers/utils/feature-flags', () => ({
+  ...jest.requireActual('../../../helpers/utils/feature-flags'),
+  getLocalNetworkMenuRedesignFeatureFlag: () => mockNetworkMenuRedesignToggle,
+}));
+
 const render = ({
   showTestNetworks = false,
   currentChainId = '0x5',
@@ -51,6 +57,10 @@ const render = ({
 };
 
 describe('NetworkListMenu', () => {
+  beforeEach(() => {
+    mockNetworkMenuRedesignToggle.mockReturnValue(false);
+  });
+
   it('displays important controls', () => {
     const { getByText, getByPlaceholderText } = render();
 

ui/components/multichain/network-list-menu/popular-network-list/PopularNetworkList.stories.js

@@ -83,21 +83,3 @@ Default.decorators = [
     </Provider>
   ),
 ];
-
-export const EmptyNetwork = (args) => (
-  <Provider store={customNetworkStore}>
-    <PopularNetworkList {...args} />
-  </Provider>
-);
-
-EmptyNetwork.args = {
-  searchAddNetworkResults: [],
-};
-
-EmptyNetwork.decorators = [
-  (Story) => (
-    <Provider store={customNetworkStore}>
-      <Story />
-    </Provider>
-  ),
-];

ui/components/multichain/network-list-menu/popular-network-list/__snapshots__/popular-network-list.test.tsx.snap

@@ -3,45 +3,11 @@
 exports[`PopularNetworkList renders popular list component 1`] = `
 <div>
   <div
-    class="mm-box add-network__edge-case-box mm-box--margin-top-4 mm-box--margin-right-6 mm-box--margin-left-6 mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row mm-box--background-color-background-alternative mm-box--rounded-md"
+    class="mm-box new-network-list__networks-container"
   >
     <div
-      class="mm-box mm-box--margin-right-4"
-    >
-      <img
-        src="images/info-fox.svg"
-      />
-    </div>
-    <div
-      class="mm-box"
-    >
-      <h6
-        class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
-        data-testid="all-networks-added"
-      >
-        <span>
-           
-          You've added all the popular networks. You can discover more networks 
-          <a
-            class="add-network__edge-case-box__link"
-            href="https://chainlist.wtf/"
-            rel="noreferrer"
-            target="_blank"
-          >
-            here
-            .
-          </a>
-           Or you can 
-          <button
-            class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md mm-text--text-align-center mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
-          >
-            add more networks manually
-          </button>
-          
-           
-        </span>
-      </h6>
-    </div>
+      class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-1 mm-box--padding-right-4 mm-box--padding-left-4"
+    />
   </div>
 </div>
 `;

ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.test.tsx

@@ -56,11 +56,6 @@ describe('PopularNetworkList', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('displays the edge case message when there are no networks', () => {
-    render(<PopularNetworkList {...defaultProps} />);
-    expect(screen.getByTestId('all-networks-added')).toBeInTheDocument();
-  });
-
   it('displays the network list when networks are provided', () => {
     const props = {
       ...defaultProps,

ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ApprovalType } from '@metamask/controller-utils';
-import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
@@ -10,8 +9,6 @@ import {
   Button,
   AvatarNetworkSize,
   ButtonVariant,
-  ButtonPrimary,
-  ButtonPrimarySize,
 } from '../../../component-library';
 import { MetaMetricsNetworkEventSource } from '../../../../../shared/constants/metametrics';
 import {
@@ -22,19 +19,13 @@ import {
   requestUserApproval,
   toggleNetworkMenu,
 } from '../../../../store/actions';
-import { ADD_NETWORK_ROUTE } from '../../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
 import {
   AlignItems,
   BackgroundColor,
-  BlockSize,
-  BorderRadius,
   Display,
-  FlexDirection,
   JustifyContent,
-  TextAlign,
   TextColor,
-  TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { RPCDefinition } from '../../../../../shared/constants/network';
 
@@ -46,64 +37,6 @@ const PopularNetworkList = ({
   const t = useI18nContext();
   const isPopUp = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
   const dispatch = useDispatch();
-  const history = useHistory();
-
-  if (Object.keys(searchAddNetworkResults).length === 0) {
-    return (
-      <Box
-        className="add-network__edge-case-box"
-        borderRadius={BorderRadius.MD}
-        padding={4}
-        marginTop={4}
-        marginRight={6}
-        marginLeft={6}
-        display={Display.Flex}
-        flexDirection={FlexDirection.Row}
-        backgroundColor={BackgroundColor.backgroundAlternative}
-      >
-        <Box marginRight={4}>
-          <img src="images/info-fox.svg" />
-        </Box>
-        <Box>
-          <Text
-            variant={TextVariant.bodySm}
-            as="h6"
-            data-testid="all-networks-added"
-          >
-            {t('youHaveAddedAll', [
-              <a
-                key="link"
-                className="add-network__edge-case-box__link"
-                href="https://chainlist.wtf/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                {t('here')}.
-              </a>,
-              <ButtonPrimary
-                textAlign={TextAlign.Center}
-                variant={TextVariant.bodyMd}
-                size={ButtonPrimarySize.Md}
-                width={BlockSize.Full}
-                onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-                  event.preventDefault();
-                  if (isPopUp) {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment, spaced-comment
-                    //@ts-ignore
-                    platform.openExtensionInBrowser(ADD_NETWORK_ROUTE);
-                  } else {
-                    history.push(ADD_NETWORK_ROUTE);
-                  }
-                }}
-              >
-                {t('addMoreNetworks')}
-              </ButtonPrimary>,
-            ])}
-          </Text>
-        </Box>
-      </Box>
-    );
-  }
 
   return (
     <Box className="new-network-list__networks-container">
@@ -113,14 +46,17 @@ const PopularNetworkList = ({
         paddingLeft={4}
         paddingRight={4}
       >
-        <Box
-          marginTop={4}
-          marginBottom={8}
-          display={Display.Flex}
-          justifyContent={JustifyContent.spaceBetween}
-        >
-          <Text> {t('additionalNetworks')}</Text>
-        </Box>
+        {Object.keys(searchAddNetworkResults).length === 0 ? null : (
+          <Box
+            marginTop={4}
+            marginBottom={8}
+            display={Display.Flex}
+            justifyContent={JustifyContent.spaceBetween}
+          >
+            <Text> {t('additionalNetworks')}</Text>
+          </Box>
+        )}
+
         {searchAddNetworkResults.map((item: RPCDefinition, index: number) => (
           <Box
             key={index}

ui/pages/routes/routes.component.js

@@ -200,6 +200,7 @@ export default class Routes extends Component {
     currentExtensionPopupId: PropTypes.number,
     useRequestQueue: PropTypes.bool,
     showSurveyToast: PropTypes.bool.isRequired,
+    networkMenuRedesign: PropTypes.bool.isRequired,
     showPrivacyPolicyToast: PropTypes.bool.isRequired,
     newPrivacyPolicyToastShownDate: PropTypes.number,
     setSurveyLinkLastClickedOrClosed: PropTypes.func.isRequired,
@@ -783,6 +784,7 @@ export default class Routes extends Component {
       hideDeprecatedNetworkModal,
       switchedNetworkDetails,
       clearSwitchedNetworkDetails,
+      networkMenuRedesign,
       ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
       isShowKeyringSnapRemovalResultModal,
       hideShowKeyringSnapRemovalResultModal,
@@ -865,9 +867,7 @@ export default class Routes extends Component {
         {isNetworkMenuOpen ? (
           <NetworkListMenu onClose={() => toggleNetworkMenu()} />
         ) : null}
-        {process.env.ENABLE_NETWORK_UI_REDESIGN ? (
-          <NetworkConfirmationPopover />
-        ) : null}
+        {networkMenuRedesign ? <NetworkConfirmationPopover /> : null}
         {accountDetailsAddress ? (
           <AccountDetails address={accountDetailsAddress} />
         ) : null}

ui/pages/routes/routes.component.test.js

@@ -63,6 +63,11 @@ jest.mock(
   '../../components/app/metamask-template-renderer/safe-component-list',
 );
 
+jest.mock('../../helpers/utils/feature-flags', () => ({
+  ...jest.requireActual('../../helpers/utils/feature-flags'),
+  getLocalNetworkMenuRedesignFeatureFlag: () => false,
+}));
+
 const render = async (route, state) => {
   const store = configureMockStore()({
     ...mockSendState,

ui/pages/routes/routes.container.js

@@ -27,6 +27,7 @@ import {
   getShowPrivacyPolicyToast,
   getUseRequestQueue,
 } from '../../selectors';
+import { getLocalNetworkMenuRedesignFeatureFlag } from '../../helpers/utils/feature-flags';
 import { getSmartTransactionsOptInStatus } from '../../../shared/modules/selectors';
 import {
   lockMetamask,
@@ -132,6 +133,7 @@ function mapStateToProps(state) {
     newPrivacyPolicyToastShownDate: getNewPrivacyPolicyToastShownDate(state),
     showPrivacyPolicyToast: getShowPrivacyPolicyToast(state),
     showSurveyToast: getShowSurveyToast(state),
+    networkMenuRedesign: getLocalNetworkMenuRedesignFeatureFlag(state),
     ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
     isShowKeyringSnapRemovalResultModal:
       state.appState.showKeyringRemovalSnapModal,