diff --git a/ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx b/ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx index 04b669a555f1..d86e36b98011 100644 --- a/ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx +++ b/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 > diff --git a/ui/ducks/app/app.ts b/ui/ducks/app/app.ts index f0e48ce5cf8e..cab302c942aa 100644 --- a/ui/ducks/app/app.ts +++ b/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 { diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index dc4e6f544aae..11d7dc627ac2 100644 --- a/ui/pages/home/home.component.js +++ b/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')} - + > ) : null}
{ diff --git a/ui/pages/home/home.container.js b/ui/pages/home/home.container.js index 9815e4559a2f..3f37d89c5a20 100644 --- a/ui/pages/home/home.container.js +++ b/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'; diff --git a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js index 2c35cb36cf17..2f2e85e2139b 100644 --- a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js +++ b/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" > + { + if (toggledValue === false) { + dispatch(openBasicFunctionalityModal()); + } else { + dispatch(onboardingToggleBasicFunctionalityOn()); + } + }} + title={t('basicConfigurationLabel')} + description={t('basicConfigurationDescription')} + /> + diff --git a/ui/pages/settings/security-tab/security-tab.container.js b/ui/pages/settings/security-tab/security-tab.container.js index ba0b7e6f4b10..9ffd88b5685a 100644 --- a/ui/pages/settings/security-tab/security-tab.container.js +++ b/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) => { diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 387a99554384..2982cf2d2ecd 100644 --- a/ui/selectors/selectors.js +++ b/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; }; diff --git a/ui/store/actionConstants.ts b/ui/store/actionConstants.ts index 06b3b6335e13..a92b2e56a42b 100644 --- a/ui/store/actionConstants.ts +++ b/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'; diff --git a/ui/store/actions.ts b/ui/store/actions.ts index 7cbc38eff172..dabb84c859e6 100644 --- a/ui/store/actions.ts +++ b/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,