feat(27256): narrow down selector to selectByName

privacy-snapshot.json

@@ -72,4 +72,4 @@
   "unresponsive-rpc.url",
   "user-storage.api.cx.metamask.io",
   "www.4byte.directory"
-]
+]

ui/pages/settings/info-tab/info-tab.component.js

@@ -29,7 +29,7 @@ import {
 
 export default class InfoTab extends PureComponent {
   static propTypes = {
-    remoteFeatureFlags: PropTypes.object,
+    tesRemoteFeatureFlag: PropTypes.bool,
   };
 
   state = {
@@ -57,12 +57,9 @@ export default class InfoTab extends PureComponent {
   componentDidMount() {
     const { t } = this.context;
     handleSettingsRefs(t, t('about'), this.settingsRefs);
-    if (!this.props.remoteFeatureFlags.testBooleanFlag) {
+    if (!this.props.tesRemoteFeatureFlag) {
       // eslint-disable-next-line no-console
-      console.log(
-        'Feature flag fetched successfully',
-        this.props.remoteFeatureFlags,
-      );
+      console.log('Feature flag for tesRemoteFeatureFlag fetched successfully');
     }
   }
 

ui/pages/settings/info-tab/info-tab.stories.js

@@ -5,6 +5,6 @@ export default {
   title: 'Pages/Settings/InfoTab',
 };
 
-export const DefaultStory = () => <InfoTab remoteFeatureFlags={{}} />;
+export const DefaultStory = () => <InfoTab tesRemoteFeatureFlag={false} />;
 
 DefaultStory.storyName = 'Default';

ui/pages/settings/info-tab/info-tab.test.tsx

@@ -8,7 +8,7 @@ describe('InfoTab', () => {
 
     beforeEach(() => {
       const renderResult = renderWithProvider(
-        <InfoTab remoteFeatureFlags={{}} />,
+        <InfoTab tesRemoteFeatureFlag={false} />,
       );
       getByText = renderResult.getByText;
     });

ui/pages/settings/settings.component.js

@@ -71,7 +71,7 @@ class SettingsPage extends PureComponent {
     pathnameI18nKey: PropTypes.string,
     toggleNetworkMenu: PropTypes.func.isRequired,
     useExternalServices: PropTypes.bool,
-    remoteFeatureFlags: PropTypes.array,
+    tesRemoteFeatureFlag: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -387,7 +387,7 @@ class SettingsPage extends PureComponent {
           exact
           path={ABOUT_US_ROUTE}
           render={() => (
-            <InfoTab remoteFeatureFlags={this.props.remoteFeatureFlags} />
+            <InfoTab tesRemoteFeatureFlag={this.props.tesRemoteFeatureFlag} />
           )}
         />
         <Route exact path={ADVANCED_ROUTE} component={AdvancedTab} />

ui/pages/settings/settings.container.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import {
   getAddressBookEntryOrAccountName,
-  getRemoteFeatureFlags,
+  getRemoteFeatureFlagsByName,
   getUseExternalServices,
 } from '../../selectors';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../shared/constants/app';
@@ -61,7 +61,7 @@ const mapStateToProps = (state, ownProps) => {
   const {
     metamask: { currencyRates },
   } = state;
-  const remoteFeatureFlags = getRemoteFeatureFlags(state);
+  const remoteFeatureFlags = getRemoteFeatureFlagsByName(state);
   const conversionDate = currencyRates[ticker]?.conversionDate;
 
   const pathNameTail = pathname.match(/[^/]+$/u)[0];

ui/selectors/selectors.js

@@ -2911,8 +2911,10 @@ export function getMetaMetricsDataDeletionStatus(state) {
   return state.metamask.metaMetricsDataDeletionStatus;
 }
 
-export function getRemoteFeatureFlags(state) {
-  return state.metamask.remoteFeatureFlags;
+export function getRemoteFeatureFlagsByName(state, featureFlagName) {
+  if (featureFlagName && state.metamask.remoteFeatureFlags?.featureFlagName) {
+    return state.metamask.remoteFeatureFlags;
+  }
 }
 
 /**