refactor: Use selectors for preferences controller state access

app/components/Nav/App/index.js

@@ -86,6 +86,7 @@ import EditAccountName from '../../Views/EditAccountName/EditAccountName';
 import WC2Manager, {
   isWC2Enabled,
 } from '../../../../app/core/WalletConnect/WalletConnectV2';
+import { selectFrequentRpcList } from '../../../selectors/preferencesController';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -231,10 +232,7 @@ const App = ({ userLoggedIn }) => {
       dispatch(setCurrentBottomNavRoute(route));
     }
   };
-  const frequentRpcList = useSelector(
-    (state) =>
-      state?.engine?.backgroundState?.PreferencesController?.frequentRpcList,
-  );
+  const frequentRpcList = useSelector(selectFrequentRpcList);
 
   useEffect(() => {
     if (prevNavigator.current || !navigator) return;

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -59,6 +59,7 @@ import {
 import { selectTokenList } from '../../../selectors/tokenListController';
 import { selectTokens } from '../../../selectors/tokensController';
 import { selectAccountsLength } from '../../../selectors/accountTrackerController';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import { createAccountConnectNavDetails } from '../../Views/AccountConnect';
 import { ApprovalResult } from '../../UI/Approval/ApprovalResult';
 import { ApprovalResultType } from '../../UI/Approval/ApprovalResult/ApprovalResult';
@@ -953,8 +954,7 @@ RootRPCMethodsUI.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
+  selectedAddress: selectSelectedAddress(state),
   chainId: selectChainId(state),
   tokens: selectTokens(state),
   swapsTransactions:

app/components/UI/AccountApproval/index.js

@@ -31,6 +31,7 @@ import {
 } from '../../../selectors/networkController';
 import { selectTokensLength } from '../../../selectors/tokensController';
 import { selectAccountsLength } from '../../../selectors/accountTrackerController';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import AppConstants from '../../../../app/core/AppConstants';
 import { shuffle } from 'lodash';
 import SDKConnect from '../../../core/SDKConnect/SDKConnect';
@@ -462,9 +463,8 @@ class AccountApproval extends PureComponent {
 
 const mapStateToProps = (state) => ({
   accountsLength: selectAccountsLength(state),
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
   tokensLength: selectTokensLength(state),
+  selectedAddress: selectSelectedAddress(state),
   networkType: selectProviderType(state),
   chainId: selectChainId(state),
 });

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx

@@ -9,6 +9,7 @@ import {
   selectNetwork,
   selectTicker,
 } from '../../../selectors/networkController';
+import { selectIdentities } from '../../../selectors/preferencesController';
 import { collectConfusables } from '../../../util/confusables';
 import { decodeTransferData } from '../../../util/transactions';
 import { doENSReverseLookup } from '../../../util/ENSUtils';
@@ -172,7 +173,7 @@ const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
 };
 
 const mapStateToProps = (state: any) => ({
-  identities: state.engine.backgroundState.PreferencesController.identities,
+  identities: selectIdentities(state),
   network: selectNetwork(state),
   ticker: selectTicker(state),
 });

app/components/UI/AccountInfoCard/index.js

@@ -26,6 +26,7 @@ import {
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
 import { selectAccounts } from '../../../selectors/accountTrackerController';
+import { selectIdentities } from '../../../selectors/preferencesController';
 import ApproveTransactionHeader from '../ApproveTransactionHeader';
 
 const createStyles = (colors) =>
@@ -240,7 +241,7 @@ class AccountInfoCard extends PureComponent {
 
 const mapStateToProps = (state) => ({
   accounts: selectAccounts(state),
-  identities: state.engine.backgroundState.PreferencesController.identities,
+  identities: selectIdentities(state),
   conversionRate: selectConversionRate(state),
   currentCurrency: selectCurrentCurrency(state),
   ticker: selectTicker(state),

app/components/UI/AccountOverview/index.js

@@ -40,6 +40,10 @@ import AppConstants from '../../../core/AppConstants';
 import Engine from '../../../core/Engine';
 import { selectNetwork } from '../../../selectors/networkController';
 import { selectCurrentCurrency } from '../../../selectors/currencyRateController';
+import {
+  selectIdentities,
+  selectSelectedAddress,
+} from '../../../selectors/preferencesController';
 import { createAccountSelectorNavDetails } from '../../Views/AccountSelector';
 
 const createStyles = (colors) =>
@@ -251,11 +255,10 @@ class AccountOverview extends PureComponent {
 
   setAccountLabel = () => {
     const { PreferencesController } = Engine.context;
-    const { selectedAddress } = this.props;
+    const { selectedAddress, identities } = this.props;
     const { accountLabel } = this.state;
 
-    const lastAccountLabel =
-      PreferencesController.state.identities[selectedAddress].name;
+    const lastAccountLabel = identities[selectedAddress].name;
 
     PreferencesController.setAccountLabel(
       selectedAddress,
@@ -452,9 +455,8 @@ class AccountOverview extends PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
-  identities: state.engine.backgroundState.PreferencesController.identities,
+  selectedAddress: selectSelectedAddress(state),
+  identities: selectIdentities(state),
   currentCurrency: selectCurrentCurrency(state),
   network: String(selectNetwork(state)),
   browserTabs: state.browser.tabs,

app/components/UI/AddCustomCollectible/index.tsx

@@ -28,6 +28,7 @@ import {
   NFT_IDENTIFIER_INPUT_BOX_ID,
 } from '../../../../wdio/screen-objects/testIDs/Screens/NFTImportScreen.testIds';
 import { selectChainId } from '../../../selectors/networkController';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 
 const createStyles = (colors: any) =>
   StyleSheet.create({
@@ -81,10 +82,7 @@ const AddCustomCollectible = ({
   const { colors, themeAppearance } = useTheme();
   const styles = createStyles(colors);
 
-  const selectedAddress = useSelector(
-    (state: any) =>
-      state.engine.backgroundState.PreferencesController.selectedAddress,
-  );
+  const selectedAddress = useSelector(selectSelectedAddress);
   const chainId = useSelector(selectChainId);
 
   useEffect(() => {

app/components/UI/AddressCopy/AddressCopy.tsx

@@ -26,6 +26,10 @@ import generateTestId from '../../../../wdio/utils/generateTestId';
 // Internal dependencies
 import styleSheet from './AddressCopy.styles';
 import { AddressCopyProps } from './AddressCopy.types';
+import {
+  selectIdentities,
+  selectSelectedAddress,
+} from '../../../selectors/preferencesController';
 
 const AddressCopy = ({ formatAddressType = 'full' }: AddressCopyProps) => {
   const { styles } = useStyles(styleSheet, {});
@@ -45,23 +49,18 @@ const AddressCopy = ({ formatAddressType = 'full' }: AddressCopyProps) => {
   /**
    * A string that represents the selected address
    */
-  const selectedAddress = useSelector(
-    (state: any) =>
-      state.engine.backgroundState.PreferencesController.selectedAddress,
-  );
+  const selectedAddress = useSelector(selectSelectedAddress);
 
   /**
    * An object containing each identity in the format address => account
    */
-  const identities = useSelector(
-    (state: any) =>
-      state.engine.backgroundState.PreferencesController.identities,
-  );
+  const identities = useSelector(selectIdentities);
 
   const account = {
     address: selectedAddress,
     ...identities[selectedAddress],
   };
+
   const copyAccountToClipboard = async () => {
     await ClipboardManager.setString(selectedAddress);
     handleShowAlert({

app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx

@@ -11,6 +11,7 @@ import TagUrl from '../../../component-library/components/Tags/TagUrl';
 import { useStyles } from '../../../component-library/hooks';
 import { selectProviderConfig } from '../../../selectors/networkController';
 import { selectAccounts } from '../../../selectors/accountTrackerController';
+import { selectIdentities } from '../../../selectors/preferencesController';
 import { renderAccountName, renderShortAddress } from '../../../util/address';
 import {
   getHost,
@@ -49,10 +50,7 @@ const ApproveTransactionHeader = ({
 
   const accounts = useSelector(selectAccounts);
 
-  const identities = useSelector(
-    (state: any) =>
-      state.engine.backgroundState.PreferencesController.identities,
-  );
+  const identities = useSelector(selectIdentities);
   const activeAddress = toChecksumAddress(from);
 
   const networkProvider = useSelector(selectProviderConfig);

app/components/UI/ApproveTransactionReview/AddNickname/index.tsx

@@ -37,6 +37,10 @@ import {
   selectProviderType,
   selectRpcTarget,
 } from '../../../../selectors/networkController';
+import {
+  selectFrequentRpcList,
+  selectIdentities,
+} from '../../../../selectors/preferencesController';
 
 const getAnalyticsParams = () => ({});
 
@@ -263,9 +267,8 @@ const mapStateToProps = (state: any) => ({
   providerChainId: selectChainId(state),
   providerNetwork: selectNetwork(state),
   addressBook: state.engine.backgroundState.AddressBookController.addressBook,
-  identities: state.engine.backgroundState.PreferencesController.identities,
-  frequentRpcList:
-    state.engine.backgroundState.PreferencesController.frequentRpcList,
+  identities: selectIdentities(state),
+  frequentRpcList: selectFrequentRpcList(state),
 });
 
 const mapDispatchToProps = (dispatch: any) => ({

app/components/UI/ApproveTransactionReview/index.js

@@ -80,6 +80,7 @@ import {
 import { selectTokenList } from '../../../selectors/tokenListController';
 import { selectTokensLength } from '../../../selectors/tokensController';
 import { selectAccountsLength } from '../../../selectors/accountTrackerController';
+import { selectFrequentRpcList } from '../../../selectors/preferencesController';
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
@@ -1178,8 +1179,7 @@ class ApproveTransactionReview extends PureComponent {
 
 const mapStateToProps = (state) => ({
   ticker: selectTicker(state),
-  frequentRpcList:
-    state.engine.backgroundState.PreferencesController.frequentRpcList,
+  frequentRpcList: selectFrequentRpcList(state),
   transaction: getNormalizedTxState(state),
   tokensLength: selectTokensLength(state),
   accountsLength: selectAccountsLength(state),

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -27,6 +27,7 @@ import {
 import { selectContractExchangeRates } from '../../../selectors/tokenRatesController';
 import { selectAccounts } from '../../../selectors/accountTrackerController';
 import { selectContractBalances } from '../../../selectors/tokenBalancesController';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import Logger from '../../../util/Logger';
 import { safeToChecksumAddress } from '../../../util/address';
 import {
@@ -68,10 +69,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   const primaryCurrency = useSelector(
     (state: RootStateOrAny) => state.settings.primaryCurrency,
   );
-  const selectedAddress = useSelector(
-    (state: RootStateOrAny) =>
-      state.engine.backgroundState.PreferencesController.selectedAddress,
-  );
+  const selectedAddress = useSelector(selectSelectedAddress);
   const tokenExchangeRates = useSelector(selectContractExchangeRates);
   const tokenBalances = useSelector(selectContractBalances);
   const chainId = useSelector((state: RootStateOrAny) => selectChainId(state));

app/components/UI/CollectibleContractElement/index.js

@@ -15,6 +15,7 @@ import { removeFavoriteCollectible } from '../../../actions/collectibles';
 import { collectibleContractsSelector } from '../../../reducers/collectibles';
 import { useTheme } from '../../../util/theme';
 import { selectChainId } from '../../../selectors/networkController';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 
 const DEVICE_WIDTH = Device.getDeviceWidth();
 const COLLECTIBLE_WIDTH = (DEVICE_WIDTH - 30 - 16) / 3;
@@ -296,8 +297,7 @@ CollectibleContractElement.propTypes = {
 const mapStateToProps = (state) => ({
   collectibleContracts: collectibleContractsSelector(state),
   chainId: selectChainId(state),
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
+  selectedAddress: selectSelectedAddress(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/components/UI/CollectibleContracts/index.js

@@ -36,10 +36,15 @@ import {
   selectChainId,
   selectProviderType,
 } from '../../../selectors/networkController';
+import {
+  selectSelectedAddress,
+  selectUseNftDetection,
+} from '../../../selectors/preferencesController';
 import {
   IMPORT_NFT_BUTTON_ID,
   NFT_TAB_CONTAINER_ID,
 } from '../../../../wdio/screen-objects/testIDs/Screens/WalletView.testIds';
+
 const createStyles = (colors) =>
   StyleSheet.create({
     wrapper: {
@@ -361,10 +366,8 @@ CollectibleContracts.propTypes = {
 const mapStateToProps = (state) => ({
   networkType: selectProviderType(state),
   chainId: selectChainId(state),
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
-  useNftDetection:
-    state.engine.backgroundState.PreferencesController.useNftDetection,
+  selectedAddress: selectSelectedAddress(state),
+  useNftDetection: selectUseNftDetection(state),
   nftDetectionDismissed: state.user.nftDetectionDismissed,
   collectibleContracts: collectibleContractsSelector(state),
   collectibles: collectiblesSelector(state),

app/components/UI/CollectibleOverview/index.js

@@ -45,6 +45,7 @@ import {
 import AppConstants from '../../../core/AppConstants';
 import { useTheme } from '../../../util/theme';
 import { selectChainId } from '../../../selectors/networkController';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 
 const ANIMATION_VELOCITY = 250;
 const HAS_NOTCH = Device.hasNotch();
@@ -521,8 +522,7 @@ CollectibleOverview.propTypes = {
 
 const mapStateToProps = (state, props) => ({
   chainId: selectChainId(state),
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
+  selectedAddress: selectSelectedAddress(state),
   isInFavorites: isCollectibleInFavoritesSelector(state, props.collectible),
 });
 

app/components/UI/DrawerView/index.js

@@ -81,6 +81,11 @@ import { selectCurrentCurrency } from '../../../selectors/currencyRateController
 import { selectTokens } from '../../../selectors/tokensController';
 import { selectAccounts } from '../../../selectors/accountTrackerController';
 import { selectContractBalances } from '../../../selectors/tokenBalancesController';
+import {
+  selectFrequentRpcList,
+  selectIdentities,
+  selectSelectedAddress,
+} from '../../../selectors/preferencesController';
 
 import { createAccountSelectorNavDetails } from '../../Views/AccountSelector';
 import NetworkInfo from '../NetworkInfo';
@@ -1242,12 +1247,10 @@ class DrawerView extends PureComponent {
 
 const mapStateToProps = (state) => ({
   providerConfig: selectProviderConfig(state),
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
   accounts: selectAccounts(state),
-  identities: state.engine.backgroundState.PreferencesController.identities,
-  frequentRpcList:
-    state.engine.backgroundState.PreferencesController.frequentRpcList,
+  selectedAddress: selectSelectedAddress(state),
+  identities: selectIdentities(state),
+  frequentRpcList: selectFrequentRpcList(state),
   currentCurrency: selectCurrentCurrency(state),
   keyrings: state.engine.backgroundState.KeyringController.keyrings,
   networkModalVisible: state.modals.networkModalVisible,

app/components/UI/NavbarLeftButton/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import Identicon from '../Identicon';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 
 const styles = StyleSheet.create({
   leftButton: {
@@ -43,6 +44,6 @@ class NavbarLeftButton extends PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  address: state.engine.backgroundState.PreferencesController.selectedAddress,
+  address: selectSelectedAddress(state),
 });
 export default connect(mapStateToProps)(NavbarLeftButton);

app/components/UI/NetworkInfo/index.tsx

@@ -15,6 +15,7 @@ import { fontStyles } from '../../../styles/common';
 import { isTokenDetectionSupportedForNetwork } from '@metamask/assets-controllers/dist/assetsUtil';
 import { NETWORK_EDUCATION_MODAL_CLOSE_BUTTON } from '../../../../wdio/screen-objects/testIDs/Screens/NetworksScreen.testids.js';
 import { selectProviderConfig } from '../../../selectors/networkController';
+import { selectUseTokenDetection } from '../../../selectors/preferencesController';
 import {
   getNetworkImageSource,
   getNetworkNameFromProvider,
@@ -231,8 +232,7 @@ const NetworkInfo = (props: NetworkInfoProps) => {
 };
 
 const mapStateToProps = (state: any) => ({
-  isTokenDetectionEnabled:
-    state.engine.backgroundState.PreferencesController.useTokenDetection,
+  isTokenDetectionEnabled: selectUseTokenDetection(state),
 });
 
 export default connect(mapStateToProps)(NetworkInfo);