refactor: Use selectors for preferences controller state access

app/components/Nav/App/index.js

@@ -84,6 +84,10 @@ import WalletActions from '../../Views/WalletActions';
 import NetworkSelector from '../../../components/Views/NetworkSelector';
 import EditAccountName from '../../Views/EditAccountName/EditAccountName';
 import WC2Manager from '../../../../app/core/WalletConnect/WalletConnectV2';
+import {
+  selectFrequentRpcList,
+  selectSelectedAddress,
+} from '../../../selectors/preferencesController';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -229,16 +233,12 @@ const App = ({ userLoggedIn }) => {
       dispatch(setCurrentBottomNavRoute(route));
     }
   };
-  const frequentRpcList = useSelector(
-    (state) =>
-      state?.engine?.backgroundState?.PreferencesController?.frequentRpcList,
-  );
+  const frequentRpcList = useSelector(selectFrequentRpcList);
+  const selectedAddress = useSelector(selectSelectedAddress);
 
   useEffect(() => {
     if (prevNavigator.current || !navigator) return;
     const appTriggeredAuth = async () => {
-      const { PreferencesController } = Engine.context;
-      const selectedAddress = PreferencesController.state.selectedAddress;
       const existingUser = await AsyncStorage.getItem(EXISTING_USER);
       try {
         if (existingUser && selectedAddress) {
@@ -269,7 +269,7 @@ const App = ({ userLoggedIn }) => {
       }
     };
     appTriggeredAuth();
-  }, [navigator]);
+  }, [navigator, selectedAddress]);
 
   const handleDeeplink = useCallback(({ error, params, uri }) => {
     if (error) {

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -57,6 +57,7 @@ import {
   selectChainId,
   selectProviderType,
 } from '../../../selectors/networkController';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import { createAccountConnectNavDetails } from '../../Views/AccountConnect';
 
 const APPROVAL_TYPES_WITH_DISABLED_CLOSE_ON_APPROVE = [
@@ -892,8 +893,7 @@ RootRPCMethodsUI.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
+  selectedAddress: selectSelectedAddress(state),
   chainId: selectChainId(state),
   tokens: state.engine.backgroundState.TokensController.tokens,
   swapsTransactions:

app/components/UI/AccountApproval/index.js

@@ -29,6 +29,7 @@ import {
   selectChainId,
   selectProviderType,
 } from '../../../selectors/networkController';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import AppConstants from '../../../../app/core/AppConstants';
 import { shuffle } from 'lodash';
 import SDKConnect from '../../../core/SDKConnect/SDKConnect';
@@ -461,8 +462,7 @@ const mapStateToProps = (state) => ({
   accountsLength: Object.keys(
     state.engine.backgroundState.AccountTrackerController.accounts || {},
   ).length,
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
+  selectedAddress: selectSelectedAddress(state),
   tokensLength: state.engine.backgroundState.TokensController.tokens.length,
   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';
@@ -185,7 +186,7 @@ const mapStateToProps = (state: any) => ({
   accounts: state.engine.backgroundState.AccountTrackerController.accounts,
   contractBalances:
     state.engine.backgroundState.TokenBalancesController.contractBalances,
-  identities: state.engine.backgroundState.PreferencesController.identities,
+  identities: selectIdentities(state),
   network: selectNetwork(state),
   ticker: selectTicker(state),
 });

app/components/UI/AccountInfoCard/index.js

@@ -25,6 +25,7 @@ import {
   selectConversionRate,
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
+import { selectIdentities } from '../../../selectors/preferencesController';
 import ApproveTransactionHeader from '../ApproveTransactionHeader';
 
 const createStyles = (colors) =>
@@ -239,7 +240,7 @@ class AccountInfoCard extends PureComponent {
 
 const mapStateToProps = (state) => ({
   accounts: state.engine.backgroundState.AccountTrackerController.accounts,
-  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,14 @@ 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 account = identities[selectedAddress];
   const copyAccountToClipboard = async () => {
     await ClipboardManager.setString(selectedAddress);
     handleShowAlert({

app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx

@@ -10,6 +10,7 @@ import { BadgeVariant } from '../../../component-library/components/Badges/Badge
 import TagUrl from '../../../component-library/components/Tags/TagUrl';
 import { useStyles } from '../../../component-library/hooks';
 import { selectProviderConfig } from '../../../selectors/networkController';
+import { selectIdentities } from '../../../selectors/preferencesController';
 import { renderAccountName, renderShortAddress } from '../../../util/address';
 import {
   getHost,
@@ -51,10 +52,7 @@ const ApproveTransactionHeader = ({
       state.engine.backgroundState.AccountTrackerController.accounts,
   );
 
-  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

@@ -78,6 +78,7 @@ import {
   selectTicker,
   selectRpcTarget,
 } from '../../../selectors/networkController';
+import { selectFrequentRpcList } from '../../../selectors/preferencesController';
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
@@ -1175,8 +1176,7 @@ class ApproveTransactionReview extends PureComponent {
 
 const mapStateToProps = (state) => ({
   ticker: selectTicker(state),
-  frequentRpcList:
-    state.engine.backgroundState.PreferencesController.frequentRpcList,
+  frequentRpcList: selectFrequentRpcList(state),
   transaction: getNormalizedTxState(state),
   accountsLength: Object.keys(
     state.engine.backgroundState.AccountTrackerController.accounts || {},

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -20,6 +20,7 @@ import {
   selectChainId,
   selectTicker,
 } from '../../../selectors/networkController';
+import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import Logger from '../../../util/Logger';
 import { safeToChecksumAddress } from '../../../util/address';
 import {
@@ -66,10 +67,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 tokenBalances = useSelector(
     (state: RootStateOrAny) =>
       state.engine.backgroundState.TokenBalancesController.contractBalances,

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

@@ -78,6 +78,11 @@ import {
   selectTicker,
 } from '../../../selectors/networkController';
 import { selectCurrentCurrency } from '../../../selectors/currencyRateController';
+import {
+  selectFrequentRpcList,
+  selectIdentities,
+  selectSelectedAddress,
+} from '../../../selectors/preferencesController';
 
 import { createAccountSelectorNavDetails } from '../../Views/AccountSelector';
 import NetworkInfo from '../NetworkInfo';
@@ -1239,12 +1244,10 @@ class DrawerView extends PureComponent {
 
 const mapStateToProps = (state) => ({
   providerConfig: selectProviderConfig(state),
-  selectedAddress:
-    state.engine.backgroundState.PreferencesController.selectedAddress,
+  selectedAddress: selectSelectedAddress(state),
   accounts: state.engine.backgroundState.AccountTrackerController.accounts,
-  identities: state.engine.backgroundState.PreferencesController.identities,
-  frequentRpcList:
-    state.engine.backgroundState.PreferencesController.frequentRpcList,
+  identities: selectIdentities(state),
+  frequentRpcList: selectFrequentRpcList(state),
   currentCurrency: selectCurrentCurrency(state),
   keyrings: state.engine.backgroundState.KeyringController.keyrings,
   networkModalVisible: state.modals.networkModalVisible,

app/components/UI/FiatOnRampAggregator/Views/OrderDetails.tsx

@@ -21,6 +21,7 @@ import {
 import { useTheme } from '../../../../util/theme';
 import Logger from '../../../../util/Logger';
 import { selectProviderConfig } from '../../../../selectors/networkController';
+import { selectFrequentRpcList } from '../../../../selectors/preferencesController';
 
 interface OrderDetailsParams {
   orderId?: string;
@@ -34,10 +35,7 @@ export const createOrderDetailsNavDetails =
 const OrderDetails = () => {
   const trackEvent = useAnalytics();
   const providerConfig = useSelector(selectProviderConfig);
-  const frequentRpcList = useSelector(
-    (state: any) =>
-      state.engine.backgroundState.PreferencesController.frequentRpcList,
-  );
+  const frequentRpcList = useSelector(selectFrequentRpcList);
   const params = useParams<OrderDetailsParams>();
   const order = useSelector((state) => getOrderById(state, params.orderId));
   const { colors } = useTheme();