From 97073e1907ceeb48696ccd126eac288d51f832c8 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Wed, 2 Aug 2023 18:46:36 -0400 Subject: [PATCH] Move "Enable Opensea API" and "NFT Autodetect" into Security & Privacy settings (#20278) * move opensea api and nft settings to security tab * DS techdebt; experimental tab * rerouting the NFT tab enable autodetect to setting * reverting vscode settings and preferences.js * Rerouting NFT tab autodetect setting banner link * resolving settingsRef collision --- .../nfts-detection-notice.js | 4 +- ui/components/app/nfts-tab/nfts-tab.js | 4 +- ui/components/app/nfts-tab/nfts-tab.test.js | 6 +- ui/helpers/constants/settings.js | 28 +-- ui/helpers/utils/settings-search.test.js | 4 +- .../experimental-tab.test.js.snap | 190 ++---------------- .../experimental-tab.component.js | 142 ++----------- .../experimental-tab.container.js | 8 - .../__snapshots__/security-tab.test.js.snap | 162 +++++++++++++++ .../security-tab/security-tab.component.js | 110 ++++++++++ .../security-tab/security-tab.container.js | 8 + .../security-tab/security-tab.test.js | 8 + ui/store/actions.ts | 40 ++-- 13 files changed, 367 insertions(+), 347 deletions(-) diff --git a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js index 1b17ad786..9a3c1a1fd 100644 --- a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js +++ b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js @@ -2,7 +2,7 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import { BannerAlert } from '../../component-library'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes'; +import { SECURITY_ROUTE } from '../../../helpers/constants/routes'; export default function NftsDetectionNotice() { const t = useI18nContext(); @@ -15,7 +15,7 @@ export default function NftsDetectionNotice() { actionButtonLabel={t('selectNFTPrivacyPreference')} actionButtonOnClick={(e) => { e.preventDefault(); - history.push(`${EXPERIMENTAL_ROUTE}#autodetect-nfts`); + history.push(`${SECURITY_ROUTE}#autodetect-nfts`); }} > {t('newNFTDetectedMessage')} diff --git a/ui/components/app/nfts-tab/nfts-tab.js b/ui/components/app/nfts-tab/nfts-tab.js index 2e1918c0d..01b0db363 100644 --- a/ui/components/app/nfts-tab/nfts-tab.js +++ b/ui/components/app/nfts-tab/nfts-tab.js @@ -14,7 +14,7 @@ import { } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { getIsMainnet, getUseNftDetection } from '../../../selectors'; -import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes'; +import { SECURITY_ROUTE } from '../../../helpers/constants/routes'; import { checkAndUpdateAllNftsOwnershipStatus, detectNfts, @@ -36,7 +36,7 @@ export default function NftsTab() { useNftsCollections(); const onEnableAutoDetect = () => { - history.push(EXPERIMENTAL_ROUTE); + history.push(SECURITY_ROUTE); }; const onRefresh = () => { diff --git a/ui/components/app/nfts-tab/nfts-tab.test.js b/ui/components/app/nfts-tab/nfts-tab.test.js index 1bdd19e8a..218a7d745 100644 --- a/ui/components/app/nfts-tab/nfts-tab.test.js +++ b/ui/components/app/nfts-tab/nfts-tab.test.js @@ -3,7 +3,7 @@ import { fireEvent, screen } from '@testing-library/react'; import reactRouterDom from 'react-router-dom'; import configureStore from '../../../store/store'; import { renderWithProvider } from '../../../../test/jest/rendering'; -import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes'; +import { SECURITY_ROUTE } from '../../../helpers/constants/routes'; import { setBackgroundConnection } from '../../../../test/jest'; import NftsTab from '.'; @@ -218,7 +218,7 @@ describe('NFT Items', () => { fireEvent.click(screen.queryByText('Turn on NFT detection in Settings')); expect(historyPushMock).toHaveBeenCalledTimes(1); expect(historyPushMock).toHaveBeenCalledWith( - `${EXPERIMENTAL_ROUTE}#autodetect-nfts`, + `${SECURITY_ROUTE}#autodetect-nfts`, ); }); it('should not render the NFTs Detection Notice when currently selected network is Mainnet and currently selected account has no NFTs but use NFT autodetection preference is set to true', () => { @@ -292,7 +292,7 @@ describe('NFT Items', () => { expect(historyPushMock).toHaveBeenCalledTimes(0); fireEvent.click(screen.queryByText('Enable autodetect')); expect(historyPushMock).toHaveBeenCalledTimes(1); - expect(historyPushMock).toHaveBeenCalledWith(EXPERIMENTAL_ROUTE); + expect(historyPushMock).toHaveBeenCalledWith(SECURITY_ROUTE); }); }); }); diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js index c52b3ceeb..15b4fbd60 100644 --- a/ui/helpers/constants/settings.js +++ b/ui/helpers/constants/settings.js @@ -213,6 +213,20 @@ export const SETTINGS_CONSTANTS = [ route: `${SECURITY_ROUTE}#ens-domains`, icon: 'fa fa-lock', }, + { + tabMessage: (t) => t('securityAndPrivacy'), + sectionMessage: (t) => t('enableOpenSeaAPI'), + descriptionMessage: (t) => t('enableOpenSeaAPIDescription'), + route: `${SECURITY_ROUTE}#opensea-api`, + icon: 'fa fa-lock', + }, + { + tabMessage: (t) => t('securityAndPrivacy'), + sectionMessage: (t) => t('useNftDetection'), + descriptionMessage: (t) => t('useNftDetectionDescription'), + route: `${SECURITY_ROUTE}#autodetect-nfts`, + icon: 'fa fa-lock', + }, { tabMessage: (t) => t('alerts'), sectionMessage: (t) => t('alertSettingsUnconnectedAccount'), @@ -336,20 +350,6 @@ export const SETTINGS_CONSTANTS = [ route: `${ABOUT_US_ROUTE}#beta-terms`, iconName: IconName.Info, }, - { - tabMessage: (t) => t('experimental'), - sectionMessage: (t) => t('enableOpenSeaAPI'), - descriptionMessage: (t) => t('enableOpenSeaAPIDescription'), - route: `${EXPERIMENTAL_ROUTE}#opensea-api`, - icon: 'fa fa-flask', - }, - { - tabMessage: (t) => t('experimental'), - sectionMessage: (t) => t('useNftDetection'), - descriptionMessage: (t) => t('useNftDetectionDescription'), - route: `${EXPERIMENTAL_ROUTE}#autodetect-nfts`, - icon: 'fa fa-flask', - }, { tabMessage: (t) => t('advanced'), sectionMessage: (t) => t('backupUserData'), diff --git a/ui/helpers/utils/settings-search.test.js b/ui/helpers/utils/settings-search.test.js index 70f02d5ee..515683511 100644 --- a/ui/helpers/utils/settings-search.test.js +++ b/ui/helpers/utils/settings-search.test.js @@ -165,7 +165,7 @@ describe('Settings Search Utils', () => { it('should get good security & privacy section number', () => { expect( getNumberOfSettingsInSection(t, t('securityAndPrivacy')), - ).toStrictEqual(10); + ).toStrictEqual(12); }); it('should get good alerts section number', () => { @@ -178,7 +178,7 @@ describe('Settings Search Utils', () => { it('should get good experimental section number', () => { expect(getNumberOfSettingsInSection(t, t('experimental'))).toStrictEqual( - 3, + 1, ); }); diff --git a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap index 621b6eddf..f9d1bcab5 100644 --- a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap +++ b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap @@ -96,7 +96,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component

Privacy

@@ -112,24 +112,24 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
-
We use third-party APIs to detect and display risks involved in unsigned transaction and signature requests before you sign them. These services will have access to your unsigned transaction and signature requests, your account address, and your preferred language. -
-
+

Select providers: -

+

-
OpenSea + Blockaid (Beta) -
+

-
@@ -188,172 +188,12 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component . -
-
+

More providers coming soon -

-
- - -
-
- - Enable OpenSea API - -
- Use OpenSea's API to fetch NFT data. NFT auto-detection relies on OpenSea's API, and will not be available when this is turned off. -
-
-
-
-
+
+
+ + Enable OpenSea API + +
+ Use OpenSea's API to fetch NFT data. NFT auto-detection relies on OpenSea's API, and will not be available when this is turned off. +
+
+
+
+