refactor: Use selectors for account tracker controller state access

app/components/Nav/Main/MainNavigator.js

@@ -67,6 +67,7 @@ import { getPermittedAccountsByHostname } from '../../../core/Permissions';
 import { TabBarIconKey } from '../../../component-library/components/Navigation/TabBar/TabBar.types';
 import { isEqual } from 'lodash';
 import { selectProviderConfig } from '../../../selectors/networkController';
+import { selectAccountsLength } from '../../../selectors/accountTrackerController';
 import isUrl from 'is-url';
 import SDKSessionsManager from '../../Views/SDKSessionsManager/SDKSessionsManager';
 import URL from 'url-parse';
@@ -300,12 +301,7 @@ const HomeTabs = () => {
   const drawerRef = useRef(null);
   const [isKeyboardHidden, setIsKeyboardHidden] = useState(true);
 
-  const accountsLength = useSelector(
-    (state) =>
-      Object.keys(
-        state.engine.backgroundState.AccountTrackerController.accounts || {},
-      ).length,
-  );
+  const accountsLength = useSelector(selectAccountsLength);
 
   const chainId = useSelector((state) => {
     const provider = selectProviderConfig(state);

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -58,6 +58,7 @@ import {
 } from '../../../selectors/networkController';
 import { selectTokenList } from '../../../selectors/tokenListController';
 import { selectTokens } from '../../../selectors/tokensController';
+import { selectAccountsLength } from '../../../selectors/accountTrackerController';
 import { createAccountConnectNavDetails } from '../../Views/AccountConnect';
 import { ApprovalResult } from '../../UI/Approval/ApprovalResult';
 import { ApprovalResultType } from '../../UI/Approval/ApprovalResult/ApprovalResult';
@@ -959,9 +960,7 @@ const mapStateToProps = (state) => ({
   swapsTransactions:
     state.engine.backgroundState.TransactionController.swapsTransactions || {},
   providerType: selectProviderType(state),
-  accountsLength: Object.keys(
-    state.engine.backgroundState.AccountTrackerController.accounts || {},
-  ).length,
+  accountsLength: selectAccountsLength(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/components/UI/AccountApproval/index.js

@@ -30,6 +30,7 @@ import {
   selectProviderType,
 } from '../../../selectors/networkController';
 import { selectTokensLength } from '../../../selectors/tokensController';
+import { selectAccountsLength } from '../../../selectors/accountTrackerController';
 import AppConstants from '../../../../app/core/AppConstants';
 import { shuffle } from 'lodash';
 import SDKConnect from '../../../core/SDKConnect/SDKConnect';
@@ -460,9 +461,7 @@ class AccountApproval extends PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  accountsLength: Object.keys(
-    state.engine.backgroundState.AccountTrackerController.accounts || {},
-  ).length,
+  accountsLength: selectAccountsLength(state),
   selectedAddress:
     state.engine.backgroundState.PreferencesController.selectedAddress,
   tokensLength: selectTokensLength(state),

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx

@@ -22,7 +22,6 @@ import { AccountFromToInfoCardProps } from './AccountFromToInfoCard.types';
 
 const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
   const {
-    accounts,
     contractBalances,
     identities,
     network,
@@ -121,15 +120,7 @@ const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
     if (toAddr) {
       setToAddress(toAddr);
     }
-  }, [
-    accounts,
-    contractBalances,
-    data,
-    fromAddress,
-    selectedAsset,
-    ticker,
-    to,
-  ]);
+  }, [contractBalances, data, fromAddress, selectedAsset, ticker, to]);
 
   const addressTo = (
     <AddressTo
@@ -182,7 +173,6 @@ const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
 };
 
 const mapStateToProps = (state: any) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
   contractBalances:
     state.engine.backgroundState.TokenBalancesController.contractBalances,
   identities: state.engine.backgroundState.PreferencesController.identities,

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx

@@ -1,9 +1,3 @@
-interface Account {
-  balance: number;
-}
-
-type Accounts = Record<string, Account>;
-
 interface Identity {
   address: string;
   name: string;
@@ -32,7 +26,6 @@ export interface Transaction {
 }
 
 export interface AccountFromToInfoCardProps {
-  accounts: Accounts;
   contractBalances: Record<string, number>;
   identities: Identities;
   network: string;

app/components/UI/AccountInfoCard/index.js

@@ -25,6 +25,7 @@ import {
   selectConversionRate,
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
+import { selectAccounts } from '../../../selectors/accountTrackerController';
 import ApproveTransactionHeader from '../ApproveTransactionHeader';
 
 const createStyles = (colors) =>
@@ -238,7 +239,7 @@ class AccountInfoCard extends PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   identities: state.engine.backgroundState.PreferencesController.identities,
   conversionRate: selectConversionRate(state),
   currentCurrency: selectCurrentCurrency(state),

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 { selectAccounts } from '../../../selectors/accountTrackerController';
 import { renderAccountName, renderShortAddress } from '../../../util/address';
 import {
   getHost,
@@ -46,10 +47,7 @@ const ApproveTransactionHeader = ({
   const { styles } = useStyles(stylesheet, {});
   const { addressBalance } = useAddressBalance(asset, from);
 
-  const accounts = useSelector(
-    (state: any) =>
-      state.engine.backgroundState.AccountTrackerController.accounts,
-  );
+  const accounts = useSelector(selectAccounts);
 
   const identities = useSelector(
     (state: any) =>

app/components/UI/ApproveTransactionReview/index.js

@@ -79,6 +79,7 @@ import {
 } from '../../../selectors/networkController';
 import { selectTokenList } from '../../../selectors/tokenListController';
 import { selectTokensLength } from '../../../selectors/tokensController';
+import { selectAccountsLength } from '../../../selectors/accountTrackerController';
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
@@ -1179,10 +1180,8 @@ const mapStateToProps = (state) => ({
   frequentRpcList:
     state.engine.backgroundState.PreferencesController.frequentRpcList,
   transaction: getNormalizedTxState(state),
-  accountsLength: Object.keys(
-    state.engine.backgroundState.AccountTrackerController.accounts || {},
-  ).length,
   tokensLength: selectTokensLength(state),
+  accountsLength: selectAccountsLength(state),
   providerType: selectProviderType(state),
   providerRpcTarget: selectRpcTarget(state),
   primaryCurrency: state.settings.primaryCurrency,

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -25,6 +25,7 @@ import {
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
 import { selectContractExchangeRates } from '../../../selectors/tokenRatesController';
+import { selectAccounts } from '../../../selectors/accountTrackerController';
 import Logger from '../../../util/Logger';
 import { safeToChecksumAddress } from '../../../util/address';
 import {
@@ -60,12 +61,9 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   asset,
 }: AssetOverviewProps) => {
   const [timePeriod, setTimePeriod] = React.useState<TimePeriod>('1d');
-  const accounts = useSelector(
-    (state: RootStateOrAny) =>
-      state.engine.backgroundState.AccountTrackerController.accounts,
-  );
   const currentCurrency = useSelector(selectCurrentCurrency);
   const conversionRate = useSelector(selectConversionRate);
+  const accounts = useSelector(selectAccounts);
   const primaryCurrency = useSelector(
     (state: RootStateOrAny) => state.settings.primaryCurrency,
   );

app/components/UI/DrawerView/index.js

@@ -79,6 +79,8 @@ import {
 } from '../../../selectors/networkController';
 import { selectCurrentCurrency } from '../../../selectors/currencyRateController';
 import { selectTokens } from '../../../selectors/tokensController';
+import { selectAccounts } from '../../../selectors/accountTrackerController';
+
 import { createAccountSelectorNavDetails } from '../../Views/AccountSelector';
 import NetworkInfo from '../NetworkInfo';
 
@@ -1241,7 +1243,7 @@ const mapStateToProps = (state) => ({
   providerConfig: selectProviderConfig(state),
   selectedAddress:
     state.engine.backgroundState.PreferencesController.selectedAddress,
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   identities: state.engine.backgroundState.PreferencesController.identities,
   frequentRpcList:
     state.engine.backgroundState.PreferencesController.frequentRpcList,

app/components/UI/FiatOnRampAggregator/hooks/useHandleSuccessfulOrder.ts

@@ -14,17 +14,15 @@ import { useFiatOnRampSDK } from '../sdk';
 import { stateHasOrder } from '../utils';
 import useAnalytics from './useAnalytics';
 import { hexToBN } from '../../../../util/number';
+import { selectAccounts } from '../../../../selectors/accountTrackerController';
 
 function useHandleSuccessfulOrder() {
   const { selectedChainId, selectedAddress } = useFiatOnRampSDK();
   const navigation = useNavigation();
   const dispatch = useDispatch();
   const dispatchThunk = useThunkDispatch();
   const trackEvent = useAnalytics();
-  const accounts = useSelector(
-    (state: any) =>
-      state.engine.backgroundState.AccountTrackerController.accounts,
-  );
+  const accounts = useSelector(selectAccounts);
 
   const addTokenToTokensController = useCallback(
     async (token: CryptoCurrency) => {

app/components/UI/Notification/TransactionNotification/index.js

@@ -33,6 +33,7 @@ import {
 } from '../../../../selectors/currencyRateController';
 import { selectTokensByAddress } from '../../../../selectors/tokensController';
 import { selectContractExchangeRates } from '../../../../selectors/tokenRatesController';
+import { selectAccounts } from '../../../../selectors/accountTrackerController';
 
 const WINDOW_WIDTH = Dimensions.get('window').width;
 const ACTION_CANCEL = 'cancel';
@@ -418,7 +419,7 @@ TransactionNotification.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   selectedAddress:
     state.engine.backgroundState.PreferencesController.selectedAddress,
   transactions: state.engine.backgroundState.TransactionController.transactions,

app/components/UI/OnboardingWizard/Step3/index.js

@@ -15,6 +15,7 @@ import { useTheme } from '../../../../util/theme';
 import generateTestId from '../../../../../wdio/utils/generateTestId';
 import { ONBOARDING_WIZARD_THIRD_STEP_CONTENT_ID } from '../../../../../wdio/screen-objects/testIDs/Components/OnboardingWizard.testIds';
 import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import { selectAccounts } from '../../../../selectors/accountTrackerController';
 
 const styles = StyleSheet.create({
   main: {
@@ -128,7 +129,7 @@ Step3.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   currentCurrency: selectCurrentCurrency(state),
   selectedAddress:
     state.engine.backgroundState.PreferencesController.selectedAddress,

app/components/UI/Swaps/QuotesView.js

@@ -86,6 +86,7 @@ import {
   selectConversionRate,
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
+import { selectAccounts } from '../../../selectors/accountTrackerController';
 import { resetTransaction, setRecipient } from '../../../actions/transaction';
 
 const POLLING_INTERVAL = 30000;
@@ -2343,7 +2344,7 @@ SwapsQuotesView.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   chainId: selectChainId(state),
   ticker: selectTicker(state),
   selectedAddress:

app/components/UI/Swaps/components/TokenSelectModal.js

@@ -51,6 +51,7 @@ import {
   selectCurrentCurrency,
 } from '../../../../selectors/currencyRateController';
 import { selectContractExchangeRates } from '../../../../selectors/tokenRatesController';
+import { selectAccounts } from '../../../../selectors/accountTrackerController';
 
 import Analytics from '../../../../core/Analytics/Analytics';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
@@ -560,7 +561,7 @@ TokenSelectModal.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   conversionRate: selectConversionRate(state),
   currentCurrency: selectCurrentCurrency(state),
   selectedAddress:

app/components/UI/Swaps/index.js

@@ -78,6 +78,7 @@ import {
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
 import { selectContractExchangeRates } from '../../../selectors/tokenRatesController';
+import { selectAccounts } from '../../../selectors/accountTrackerController';
 import AccountSelector from '../FiatOnRampAggregator/components/AccountSelector';
 
 const createStyles = (colors) =>
@@ -998,7 +999,7 @@ SwapsAmountView.propTypes = {
 const mapStateToProps = (state) => ({
   swapsTokens: swapsTokensSelector(state),
   swapsControllerTokens: swapsControllerTokens(state),
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   selectedAddress:
     state.engine.backgroundState.PreferencesController.selectedAddress,
   balances:

app/components/UI/TransactionEditor/index.js

@@ -47,6 +47,7 @@ import {
   selectCurrentCurrency,
   selectNativeCurrency,
 } from '../../../selectors/currencyRateController';
+import { selectAccounts } from '../../../selectors/accountTrackerController';
 
 const EDIT = 'edit';
 const REVIEW = 'review';
@@ -877,7 +878,7 @@ class TransactionEditor extends PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   contractBalances:
     state.engine.backgroundState.TokenBalancesController.contractBalances,
   networkType: selectProviderType(state),

app/components/UI/TransactionReview/index.js

@@ -59,6 +59,7 @@ import {
 import { selectTokenList } from '../../../selectors/tokenListController';
 import { selectTokens } from '../../../selectors/tokensController';
 import { selectContractExchangeRates } from '../../../selectors/tokenRatesController';
+import { selectAccounts } from '../../../selectors/accountTrackerController';
 import ApproveTransactionHeader from '../ApproveTransactionHeader';
 import AppConstants from '../../../core/AppConstants';
 
@@ -613,8 +614,8 @@ class TransactionReview extends PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
   tokens: selectTokens(state),
+  accounts: selectAccounts(state),
   conversionRate: selectConversionRate(state),
   currentCurrency: selectCurrentCurrency(state),
   contractExchangeRates: selectContractExchangeRates(state),

app/components/UI/Transactions/index.js

@@ -57,6 +57,7 @@ import {
   selectNativeCurrency,
 } from '../../../selectors/currencyRateController';
 import { selectContractExchangeRates } from '../../../selectors/tokenRatesController';
+import { selectAccounts } from '../../../selectors/accountTrackerController';
 
 const createStyles = (colors, typography) =>
   StyleSheet.create({
@@ -767,7 +768,7 @@ class Transactions extends PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   chainId: selectChainId(state),
   collectibleContracts: collectibleContractsSelector(state),
   contractExchangeRates: selectContractExchangeRates(state),

app/components/UI/UpdateEIP1559Tx/index.tsx

@@ -19,6 +19,7 @@ import {
   selectChainId,
   selectTicker,
 } from '../../../selectors/networkController';
+import { selectAccounts } from '../../../selectors/accountTrackerController';
 
 const UpdateEIP1559Tx = ({
   gas,
@@ -249,7 +250,7 @@ const UpdateEIP1559Tx = ({
 };
 
 const mapStateToProps = (state: any) => ({
-  accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+  accounts: selectAccounts(state),
   selectedAddress:
     state.engine.backgroundState.PreferencesController.selectedAddress,
   ticker: selectTicker(state),