Refactor basic functionality modal

ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Display,
@@ -10,10 +11,7 @@ import {
   IconColor,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import {
-  hideBasicFunctionalityModal,
-  setDisableExternalServices,
-} from '../../../store/actions';
+import { setDisableExternalServices } from '../../../store/actions';
 import {
   ModalOverlay,
   ModalContent,
@@ -30,6 +28,11 @@ import {
   Checkbox,
 } from '../../component-library';
 import { getDisableExternalServices } from '../../../selectors';
+import {
+  hideBasicFunctionalityModal,
+  onboardingToggleBasicFunctionalityOff,
+} from '../../../ducks/app/app';
+import { ONBOARDING_PRIVACY_SETTINGS_ROUTE } from '../../../helpers/constants/routes';
 
 export function BasicConfigurationModal() {
   const t = useI18nContext();
@@ -38,6 +41,8 @@ export function BasicConfigurationModal() {
   const isBasicConfigurationSettingOff = useSelector(
     getDisableExternalServices,
   );
+  const { pathname } = useLocation();
+  const onboardingFlow = pathname === ONBOARDING_PRIVACY_SETTINGS_ROUTE;
   function disableExternalServices() {
     dispatch(setDisableExternalServices(true));
   }
@@ -132,10 +137,15 @@ export function BasicConfigurationModal() {
               width={BlockSize.Half}
               variant={ButtonVariant.Secondary}
               onClick={() => {
-                closeModal();
-                isBasicConfigurationSettingOff
-                  ? enableExternalServices()
-                  : disableExternalServices();
+                if (onboardingFlow) {
+                  dispatch(hideBasicFunctionalityModal());
+                  dispatch(onboardingToggleBasicFunctionalityOff());
+                } else {
+                  closeModal();
+                  isBasicConfigurationSettingOff
+                    ? enableExternalServices()
+                    : disableExternalServices();
+                }
               }}
               danger
             >

ui/ducks/app/app.ts

@@ -70,6 +70,7 @@ type AppState = {
   ledgerWebHidConnectedStatus: WebHIDConnectedStatuses;
   ledgerTransportStatus: HardwareTransportStates;
   showBasicFunctionalityModal: boolean;
+  externalServicesOnboardingToggleState: boolean;
   newNftAddedMessage: string;
   removeNftMessage: string;
   newNetworkAddedName: string;
@@ -112,6 +113,7 @@ const initialState: AppState = {
   importNftsModal: { open: false },
   showIpfsModalOpen: false,
   showBasicFunctionalityModal: false,
+  externalServicesOnboardingToggleState: true,
   keyringRemovalSnapModal: {
     snapName: '',
     result: 'none',
@@ -197,12 +199,6 @@ export default function reduceApp(
         },
       };
 
-    case actionConstants.SHOW_BASIC_FUNCTIONALITY_MODAL_OPEN:
-      return { ...appState, showBasicFunctionalityModal: true };
-
-    case actionConstants.SHOW_BASIC_FUNCTIONALITY_MODAL_CLOSE:
-      return { ...appState, showBasicFunctionalityModal: false };
-
     case actionConstants.IMPORT_NFTS_MODAL_CLOSE:
       return {
         ...appState,
@@ -211,6 +207,29 @@ export default function reduceApp(
         },
       };
 
+    case actionConstants.SHOW_BASIC_FUNCTIONALITY_MODAL_OPEN:
+      return {
+        ...appState,
+        showBasicFunctionalityModal: true,
+      };
+
+    case actionConstants.SHOW_BASIC_FUNCTIONALITY_MODAL_CLOSE:
+      return {
+        ...appState,
+        showBasicFunctionalityModal: false,
+      };
+
+    case actionConstants.ONBOARDING_TOGGLE_BASIC_FUNCTIONALITY_ON:
+      return {
+        ...appState,
+        externalServicesOnboardingToggleState: true,
+      };
+    case actionConstants.ONBOARDING_TOGGLE_BASIC_FUNCTIONALITY_OFF:
+      return {
+        ...appState,
+        externalServicesOnboardingToggleState: false,
+      };
+
     case actionConstants.SHOW_IPFS_MODAL_OPEN:
       return {
         ...appState,
@@ -555,6 +574,30 @@ export function hideWhatsNewPopup(): Action {
   };
 }
 
+export function openBasicFunctionalityModal(): Action {
+  return {
+    type: actionConstants.SHOW_BASIC_FUNCTIONALITY_MODAL_OPEN,
+  };
+}
+
+export function hideBasicFunctionalityModal(): Action {
+  return {
+    type: actionConstants.SHOW_BASIC_FUNCTIONALITY_MODAL_CLOSE,
+  };
+}
+
+export function onboardingToggleBasicFunctionalityOn(): Action {
+  return {
+    type: actionConstants.ONBOARDING_TOGGLE_BASIC_FUNCTIONALITY_ON,
+  };
+}
+
+export function onboardingToggleBasicFunctionalityOff(): Action {
+  return {
+    type: actionConstants.ONBOARDING_TOGGLE_BASIC_FUNCTIONALITY_OFF,
+  };
+}
+
 export function toggleGasLoadingAnimation(
   payload: boolean,
 ): PayloadAction<boolean> {

ui/pages/home/home.component.js

@@ -886,14 +886,10 @@ export default class Home extends PureComponent {
                 actionButtonOnClick={() => {
                   setBasicFunctionalityModalOpen();
                   // TODO:
-                  // 1) make this modal text dynamic for "turn on/off" in the title and modal CTA button
-                  // 2) add toggle to onboarding, defaulted to true
-                  // 3) disable ENS setting & any others that are not "basic functionality"
+                  // 1) disable ENS setting & any others that are not "basic functionality"
                 }}
                 title={t('basicConfigurationBannerTitle')}
-              >
-                {t('basicConfigurationBannerDescription')}
-              </BannerAlert>
+              ></BannerAlert>
             ) : null}
             <div className="home__balance-wrapper">
               {

ui/pages/home/home.container.js

@@ -69,9 +69,11 @@ import {
   setSurveyLinkLastClickedOrClosed,
   setNewTokensImportedError,
   setDisableExternalServices,
-  openBasicFunctionalityModal,
 } from '../../store/actions';
-import { hideWhatsNewPopup } from '../../ducks/app/app';
+import {
+  hideWhatsNewPopup,
+  openBasicFunctionalityModal,
+} from '../../ducks/app/app';
 import { getWeb3ShimUsageAlertEnabledness } from '../../ducks/metamask/metamask';
 import { getSwapsFeatureIsLive } from '../../ducks/swaps/swaps';
 import { getEnvironmentType } from '../../../app/scripts/lib/util';

ui/pages/onboarding-flow/privacy-settings/privacy-settings.js

@@ -28,7 +28,11 @@ import {
 } from '../../../helpers/constants/design-system';
 import { ONBOARDING_PIN_EXTENSION_ROUTE } from '../../../helpers/constants/routes';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { getAllNetworks, getCurrentNetwork } from '../../../selectors';
+import {
+  getAllNetworks,
+  getCurrentNetwork,
+  getExternalServicesOnboardingToggleState,
+} from '../../../selectors';
 import {
   setCompletedOnboarding,
   setIpfsGateway,
@@ -41,7 +45,12 @@ import {
   showModal,
   toggleNetworkMenu,
   setIncomingTransactionsPreferences,
+  setDisableExternalServices,
 } from '../../../store/actions';
+import {
+  onboardingToggleBasicFunctionalityOn,
+  openBasicFunctionalityModal,
+} from '../../../ducks/app/app';
 import IncomingTransactionToggle from '../../../components/app/incoming-trasaction-toggle/incoming-transaction-toggle';
 import { Setting } from './setting';
 
@@ -85,7 +94,14 @@ export default function PrivacySettings() {
   const currentNetwork = useSelector(getCurrentNetwork);
   const allNetworks = useSelector(getAllNetworks);
 
+  const externalServicesOnboardingToggleState = useSelector(
+    getExternalServicesOnboardingToggleState,
+  );
+
   const handleSubmit = () => {
+    dispatch(
+      setDisableExternalServices(!externalServicesOnboardingToggleState),
+    );
     dispatch(setUsePhishDetect(usePhishingDetection));
     dispatch(setUse4ByteResolution(turnOn4ByteResolution));
     dispatch(setUseTokenDetection(turnOnTokenDetection));
@@ -142,6 +158,19 @@ export default function PrivacySettings() {
           className="privacy-settings__settings"
           data-testid="privacy-settings-settings"
         >
+          <Setting
+            value={externalServicesOnboardingToggleState}
+            setValue={(toggledValue) => {
+              if (toggledValue === false) {
+                dispatch(openBasicFunctionalityModal());
+              } else {
+                dispatch(onboardingToggleBasicFunctionalityOn());
+              }
+            }}
+            title={t('basicConfigurationLabel')}
+            description={t('basicConfigurationDescription')}
+          />
+
           <IncomingTransactionToggle
             allNetworks={allNetworks}
             setIncomingTransactionsPreferences={(chainId, value) =>

ui/pages/settings/security-tab/security-tab.container.js

@@ -12,7 +12,6 @@ import {
   setUseTokenDetection,
   setDisableExternalServices,
   setUseAddressBarEnsResolution,
-  openBasicFunctionalityModal,
   setOpenSeaEnabled,
   setUseNftDetection,
   setUse4ByteResolution,
@@ -31,6 +30,7 @@ import {
   getIsTransactionSecurityCheckEnabled,
   getPetnamesEnabled,
 } from '../../../selectors';
+import { openBasicFunctionalityModal } from '../../../ducks/app/app';
 import SecurityTab from './security-tab.component';
 
 const mapStateToProps = (state) => {

ui/selectors/selectors.js

@@ -2201,6 +2201,14 @@ export function getOnboardedInThisUISession(state) {
   return state.appState.onboardedInThisUISession;
 }
 
+export function getShowBasicFunctionalityModal(state) {
+  return state.appState.showBasicFunctionalityModal;
+}
+
+export function getExternalServicesOnboardingToggleState(state) {
+  return state.appState.externalServicesOnboardingToggleState;
+}
+
 export const useSafeChainsListValidationSelector = (state) => {
   return state.metamask.useSafeChainsListValidation;
 };

ui/store/actionConstants.ts

@@ -21,6 +21,10 @@ export const SHOW_BASIC_FUNCTIONALITY_MODAL_OPEN =
   'SHOW_BASIC_FUNCTIONALITY_MODAL_OPEN';
 export const SHOW_BASIC_FUNCTIONALITY_MODAL_CLOSE =
   'SHOW_BASIC_FUNCTIONALITY_MODAL_CLOSE';
+export const ONBOARDING_TOGGLE_BASIC_FUNCTIONALITY_ON =
+  'ONBOARDING_TOGGLE_BASIC_FUNCTIONALITY_ON';
+export const ONBOARDING_TOGGLE_BASIC_FUNCTIONALITY_OFF =
+  'ONBOARDING_TOGGLE_BASIC_FUNCTIONALITY_OFF';
 
 // remote state
 export const UPDATE_METAMASK_STATE = 'UPDATE_METAMASK_STATE';

ui/store/actions.ts

@@ -2569,18 +2569,6 @@ export function showImportNftsModal(payload: {
   };
 }
 
-export function openBasicFunctionalityModal(): Action {
-  return {
-    type: actionConstants.SHOW_BASIC_FUNCTIONALITY_MODAL_OPEN,
-  };
-}
-
-export function hideBasicFunctionalityModal(): Action {
-  return {
-    type: actionConstants.SHOW_BASIC_FUNCTIONALITY_MODAL_CLOSE,
-  };
-}
-
 export function hideImportNftsModal(): Action {
   return {
     type: actionConstants.IMPORT_NFTS_MODAL_CLOSE,