From 3e56b9f54d7b114f50ced0b65b9e686ce9bcf227 Mon Sep 17 00:00:00 2001 From: Salah Date: Fri, 7 Jul 2023 16:52:21 +0200 Subject: [PATCH 1/4] refactor: Use selectors for account tracker controller state access --- app/components/Nav/Main/MainNavigator.js | 8 ++----- app/components/Nav/Main/RootRPCMethodsUI.js | 5 ++--- app/components/UI/AccountApproval/index.js | 5 ++--- .../AccountFromToInfoCard.tsx | 3 ++- .../AccountFromToInfoCard.types.tsx | 2 +- app/components/UI/AccountInfoCard/index.js | 3 ++- .../ApproveTransactionHeader.tsx | 6 ++---- .../UI/ApproveTransactionReview/index.js | 5 ++--- .../UI/AssetOverview/AssetOverview.tsx | 6 ++---- app/components/UI/DrawerView/index.js | 4 +++- .../hooks/useHandleSuccessfulOrder.ts | 6 ++---- .../TransactionNotification/index.js | 3 ++- .../UI/OnboardingWizard/Step3/index.js | 3 ++- app/components/UI/Swaps/QuotesView.js | 3 ++- .../UI/Swaps/components/TokenSelectModal.js | 3 ++- app/components/UI/Swaps/index.js | 3 ++- app/components/UI/TransactionEditor/index.js | 3 ++- app/components/UI/TransactionReview/index.js | 3 ++- app/components/UI/Transactions/index.js | 3 ++- app/components/UI/UpdateEIP1559Tx/index.tsx | 3 ++- .../Views/AccountConnect/AccountConnect.tsx | 8 ++----- .../AccountPermissions/AccountPermissions.tsx | 8 ++----- .../AccountPermissionsRevoke.tsx | 8 ++----- app/components/Views/ActivityView/index.js | 5 ++--- .../Views/ApproveView/Approve/index.js | 10 +++++---- app/components/Views/Browser/index.js | 6 +++--- app/components/Views/Onboarding/index.js | 3 ++- app/components/Views/Send/index.js | 3 ++- .../SendFlow/AddressFrom/AddressFrom.tsx | 6 ++---- app/components/Views/SendFlow/Amount/index.js | 3 ++- .../Views/SendFlow/Confirm/index.js | 3 ++- .../RevealPrivateKey/RevealPrivateKey.tsx | 6 ++---- .../Views/Settings/SecuritySettings/index.js | 3 ++- app/components/Views/Wallet/index.tsx | 6 ++---- .../hooks/useAccounts/useAccounts.ts | 7 ++----- .../useAddressBalance/useAddressBalance.ts | 3 ++- app/core/GasPolling/GasPolling.ts | 3 ++- app/selectors/accountTrackerController.ts | 21 +++++++++++++++++++ 38 files changed, 100 insertions(+), 92 deletions(-) create mode 100644 app/selectors/accountTrackerController.ts diff --git a/app/components/Nav/Main/MainNavigator.js b/app/components/Nav/Main/MainNavigator.js index a34af3d5b4c..0832036938e 100644 --- a/app/components/Nav/Main/MainNavigator.js +++ b/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); diff --git a/app/components/Nav/Main/RootRPCMethodsUI.js b/app/components/Nav/Main/RootRPCMethodsUI.js index 98560b2393a..b2782c892de 100644 --- a/app/components/Nav/Main/RootRPCMethodsUI.js +++ b/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) => ({ diff --git a/app/components/UI/AccountApproval/index.js b/app/components/UI/AccountApproval/index.js index a923a962525..11f0e2cbff9 100644 --- a/app/components/UI/AccountApproval/index.js +++ b/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), diff --git a/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx b/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx index 5ada52e118f..581fd9c9cd1 100644 --- a/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx +++ b/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx @@ -9,6 +9,7 @@ import { selectNetwork, selectTicker, } from '../../../selectors/networkController'; +import { selectAccounts } from '../../../selectors/accountTrackerController'; import { collectConfusables } from '../../../util/confusables'; import { decodeTransferData } from '../../../util/transactions'; import { doENSReverseLookup } from '../../../util/ENSUtils'; @@ -182,7 +183,7 @@ const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => { }; const mapStateToProps = (state: any) => ({ - accounts: state.engine.backgroundState.AccountTrackerController.accounts, + accounts: selectAccounts(state), contractBalances: state.engine.backgroundState.TokenBalancesController.contractBalances, identities: state.engine.backgroundState.PreferencesController.identities, diff --git a/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx b/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx index 41f7bbdd5d7..1630de5de04 100644 --- a/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx +++ b/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx @@ -1,5 +1,5 @@ interface Account { - balance: number; + balance: string; } type Accounts = Record; diff --git a/app/components/UI/AccountInfoCard/index.js b/app/components/UI/AccountInfoCard/index.js index bb582271cdf..c24f5ac68ae 100644 --- a/app/components/UI/AccountInfoCard/index.js +++ b/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), diff --git a/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx b/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx index 9b0db8d313b..a9db2b8ca74 100644 --- a/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx +++ b/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) => diff --git a/app/components/UI/ApproveTransactionReview/index.js b/app/components/UI/ApproveTransactionReview/index.js index af408a205cd..c5c72d7993b 100644 --- a/app/components/UI/ApproveTransactionReview/index.js +++ b/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, diff --git a/app/components/UI/AssetOverview/AssetOverview.tsx b/app/components/UI/AssetOverview/AssetOverview.tsx index 8900294d3d4..95e05757535 100644 --- a/app/components/UI/AssetOverview/AssetOverview.tsx +++ b/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 = ({ asset, }: AssetOverviewProps) => { const [timePeriod, setTimePeriod] = React.useState('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, ); diff --git a/app/components/UI/DrawerView/index.js b/app/components/UI/DrawerView/index.js index d72ced46eba..aa0f4d64830 100644 --- a/app/components/UI/DrawerView/index.js +++ b/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, diff --git a/app/components/UI/FiatOnRampAggregator/hooks/useHandleSuccessfulOrder.ts b/app/components/UI/FiatOnRampAggregator/hooks/useHandleSuccessfulOrder.ts index 047bcd4b4af..43474671cc2 100644 --- a/app/components/UI/FiatOnRampAggregator/hooks/useHandleSuccessfulOrder.ts +++ b/app/components/UI/FiatOnRampAggregator/hooks/useHandleSuccessfulOrder.ts @@ -14,6 +14,7 @@ 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(); @@ -21,10 +22,7 @@ function useHandleSuccessfulOrder() { 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) => { diff --git a/app/components/UI/Notification/TransactionNotification/index.js b/app/components/UI/Notification/TransactionNotification/index.js index 1f783bfb55c..6074cd9a8c5 100644 --- a/app/components/UI/Notification/TransactionNotification/index.js +++ b/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, diff --git a/app/components/UI/OnboardingWizard/Step3/index.js b/app/components/UI/OnboardingWizard/Step3/index.js index 176499b99dc..19989ef9359 100644 --- a/app/components/UI/OnboardingWizard/Step3/index.js +++ b/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, diff --git a/app/components/UI/Swaps/QuotesView.js b/app/components/UI/Swaps/QuotesView.js index 941552dce62..be1387bf348 100644 --- a/app/components/UI/Swaps/QuotesView.js +++ b/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: diff --git a/app/components/UI/Swaps/components/TokenSelectModal.js b/app/components/UI/Swaps/components/TokenSelectModal.js index 12f38b70182..69e6e523c0a 100644 --- a/app/components/UI/Swaps/components/TokenSelectModal.js +++ b/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: diff --git a/app/components/UI/Swaps/index.js b/app/components/UI/Swaps/index.js index b122fd23e1e..84772a5eb34 100644 --- a/app/components/UI/Swaps/index.js +++ b/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: diff --git a/app/components/UI/TransactionEditor/index.js b/app/components/UI/TransactionEditor/index.js index 970aec74b1e..220ac8976c1 100644 --- a/app/components/UI/TransactionEditor/index.js +++ b/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), diff --git a/app/components/UI/TransactionReview/index.js b/app/components/UI/TransactionReview/index.js index 2c71b138034..314698db7d5 100644 --- a/app/components/UI/TransactionReview/index.js +++ b/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), diff --git a/app/components/UI/Transactions/index.js b/app/components/UI/Transactions/index.js index 30663e45a70..5f07e52bd85 100644 --- a/app/components/UI/Transactions/index.js +++ b/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), diff --git a/app/components/UI/UpdateEIP1559Tx/index.tsx b/app/components/UI/UpdateEIP1559Tx/index.tsx index 77d92ff21e0..16f573e4e9f 100644 --- a/app/components/UI/UpdateEIP1559Tx/index.tsx +++ b/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), diff --git a/app/components/Views/AccountConnect/AccountConnect.tsx b/app/components/Views/AccountConnect/AccountConnect.tsx index a027349b2bf..c30d0763dd3 100644 --- a/app/components/Views/AccountConnect/AccountConnect.tsx +++ b/app/components/Views/AccountConnect/AccountConnect.tsx @@ -36,6 +36,7 @@ import { strings } from '../../../../locales/i18n'; import { AvatarAccountType } from '../../../component-library/components/Avatars/Avatar/variants/AvatarAccount'; import { safeToChecksumAddress } from '../../../util/address'; import USER_INTENT from '../../../constants/permissions'; +import { selectAccountsLength } from '../../../selectors/accountTrackerController'; // Internal dependencies. import { @@ -91,12 +92,7 @@ const AccountConnect = (props: AccountConnectProps) => { [origin], ); - const accountsLength = useSelector( - (state: any) => - Object.keys( - state.engine.backgroundState.AccountTrackerController.accounts || {}, - ).length, - ); + const accountsLength = useSelector(selectAccountsLength); /** * Get image url from favicon api. diff --git a/app/components/Views/AccountPermissions/AccountPermissions.tsx b/app/components/Views/AccountPermissions/AccountPermissions.tsx index 9cf71ed3409..dede3546a70 100755 --- a/app/components/Views/AccountPermissions/AccountPermissions.tsx +++ b/app/components/Views/AccountPermissions/AccountPermissions.tsx @@ -37,6 +37,7 @@ import { getUrlObj, prefixUrlWithProtocol } from '../../../util/browser'; import { getActiveTabUrl } from '../../../util/transactions'; import { strings } from '../../../../locales/i18n'; import { AvatarAccountType } from '../../../component-library/components/Avatars/Avatar/variants/AvatarAccount'; +import { selectAccountsLength } from '../../../selectors/accountTrackerController'; // Internal dependencies. import { @@ -61,12 +62,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => { : AvatarAccountType.JazzIcon, ); - const accountsLength = useSelector( - (state: any) => - Object.keys( - state.engine.backgroundState.AccountTrackerController.accounts || {}, - ).length, - ); + const accountsLength = useSelector(selectAccountsLength); const nonTestnetNetworks = useSelector( (state: any) => diff --git a/app/components/Views/AccountPermissions/AccountPermissionsRevoke/AccountPermissionsRevoke.tsx b/app/components/Views/AccountPermissions/AccountPermissionsRevoke/AccountPermissionsRevoke.tsx index fefaeafee78..4008a2150ca 100644 --- a/app/components/Views/AccountPermissions/AccountPermissionsRevoke/AccountPermissionsRevoke.tsx +++ b/app/components/Views/AccountPermissions/AccountPermissionsRevoke/AccountPermissionsRevoke.tsx @@ -26,6 +26,7 @@ import { AccountPermissionsScreens } from '../AccountPermissions.types'; import getAccountNameWithENS from '../../../../util/accounts'; import { MetaMetricsEvents } from '../../../../core/Analytics'; import AnalyticsV2 from '../../../../util/analyticsV2'; +import { selectAccountsLength } from '../../../../selectors/accountTrackerController'; // Internal dependencies. import { AccountPermissionsRevokeProps } from './AccountPermissionsRevoke.types'; @@ -57,12 +58,7 @@ const AccountPermissionsRevoke = ({ const activeAddress = permittedAddresses[0]; const { toastRef } = useContext(ToastContext); - const accountsLength = useSelector( - (state: any) => - Object.keys( - state.engine.backgroundState.AccountTrackerController.accounts || {}, - ).length, - ); + const accountsLength = useSelector(selectAccountsLength); const nonTestnetNetworks = useSelector( (state: any) => diff --git a/app/components/Views/ActivityView/index.js b/app/components/Views/ActivityView/index.js index 90a3c5a6132..0612382f936 100644 --- a/app/components/Views/ActivityView/index.js +++ b/app/components/Views/ActivityView/index.js @@ -14,6 +14,7 @@ import { useTheme } from '../../../util/theme'; import Routes from '../../../constants/navigation/Routes'; import AnalyticsV2 from '../../../util/analyticsV2'; import { MetaMetricsEvents } from '../../../core/Analytics'; +import { selectAccounts } from '../../../selectors/accountTrackerController'; const styles = StyleSheet.create({ wrapper: { @@ -29,9 +30,7 @@ const ActivityView = () => { state.engine.backgroundState.PreferencesController.selectedAddress, ); const hasOrders = useSelector((state) => getHasOrders(state) || false); - const accounts = useSelector( - (state) => state.engine.backgroundState.AccountTrackerController.accounts, - ); + const accounts = useSelector(selectAccounts); const openAccountSelector = useCallback(() => { navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, { diff --git a/app/components/Views/ApproveView/Approve/index.js b/app/components/Views/ApproveView/Approve/index.js index ff688933337..388afeba404 100644 --- a/app/components/Views/ApproveView/Approve/index.js +++ b/app/components/Views/ApproveView/Approve/index.js @@ -57,6 +57,10 @@ import { selectNativeCurrency, } from '../../../../selectors/currencyRateController'; import { selectTokensLength } from '../../../../selectors/tokensController'; +import { + selectAccounts, + selectAccountsLength, +} from '../../../../selectors/accountTrackerController'; import ShowBlockExplorer from '../../../UI/ApproveTransactionReview/ShowBlockExplorer'; import createStyles from './styles'; import { ethErrors } from 'eth-rpc-errors'; @@ -821,14 +825,12 @@ class Approve extends PureComponent { } const mapStateToProps = (state) => ({ - accounts: state.engine.backgroundState.AccountTrackerController.accounts, + accounts: selectAccounts(state), ticker: selectTicker(state), transaction: getNormalizedTxState(state), transactions: state.engine.backgroundState.TransactionController.transactions, - accountsLength: Object.keys( - state.engine.backgroundState.AccountTrackerController.accounts || {}, - ).length, tokensLength: selectTokensLength(state), + accountsLength: selectAccountsLength(state), primaryCurrency: state.settings.primaryCurrency, chainId: selectChainId(state), gasFeeEstimates: diff --git a/app/components/Views/Browser/index.js b/app/components/Views/Browser/index.js index d0a25ed3a63..792696fdb57 100644 --- a/app/components/Views/Browser/index.js +++ b/app/components/Views/Browser/index.js @@ -34,9 +34,11 @@ import { strings } from '../../../../locales/i18n'; import { AvatarAccountType } from '../../../component-library/components/Avatars/Avatar/variants/AvatarAccount'; import generateTestId from '../../../../wdio/utils/generateTestId'; import { BROWSER_SCREEN_ID } from '../../../../wdio/screen-objects/testIDs/BrowserScreen/BrowserScreen.testIds'; +import { selectAccountsLength } from '../../../selectors/accountTrackerController'; import URL from 'url-parse'; import { isEqual } from 'lodash'; + const margin = 16; const THUMB_WIDTH = Dimensions.get('window').width / 2 - margin * 2; const THUMB_HEIGHT = Device.isIos() ? THUMB_WIDTH * 1.81 : THUMB_WIDTH * 1.48; @@ -371,9 +373,7 @@ const Browser = (props) => { }; const mapStateToProps = (state) => ({ - accountsLength: Object.keys( - state.engine.backgroundState.AccountTrackerController.accounts || {}, - ).length, + accountsLength: selectAccountsLength(state), frequentRpcList: state.engine.backgroundState.PreferencesController.frequentRpcList, tabs: state.browser.tabs, diff --git a/app/components/Views/Onboarding/index.js b/app/components/Views/Onboarding/index.js index 784fc36e03d..c3644452990 100644 --- a/app/components/Views/Onboarding/index.js +++ b/app/components/Views/Onboarding/index.js @@ -54,6 +54,7 @@ import { WALLET_SETUP_CREATE_NEW_WALLET_BUTTON_ID, } from '../../../../wdio/screen-objects/testIDs/Screens/WalletSetupScreen.testIds'; import Routes from '../../../constants/navigation/Routes'; +import { selectAccounts } from '../../../selectors/accountTrackerController'; const createStyles = (colors) => StyleSheet.create({ @@ -497,7 +498,7 @@ class Onboarding extends PureComponent { Onboarding.contextType = ThemeContext; const mapStateToProps = (state) => ({ - accounts: state.engine.backgroundState.AccountTrackerController.accounts, + accounts: selectAccounts(state), passwordSet: state.user.passwordSet, loading: state.user.loadingSet, loadingMsg: state.user.loadingMsg, diff --git a/app/components/Views/Send/index.js b/app/components/Views/Send/index.js index e75c726d399..3e2a8630851 100644 --- a/app/components/Views/Send/index.js +++ b/app/components/Views/Send/index.js @@ -52,6 +52,7 @@ import { } from '../../../selectors/networkController'; import { selectTokenList } from '../../../selectors/tokenListController'; import { selectTokens } from '../../../selectors/tokensController'; +import { selectAccounts } from '../../../selectors/accountTrackerController'; import { ethErrors } from 'eth-rpc-errors'; const REVIEW = 'review'; @@ -759,7 +760,7 @@ class Send extends PureComponent { const mapStateToProps = (state) => ({ addressBook: state.engine.backgroundState.AddressBookController.addressBook, - accounts: state.engine.backgroundState.AccountTrackerController.accounts, + accounts: selectAccounts(state), frequentRpcList: state.engine.backgroundState.PreferencesController.frequentRpcList, contractBalances: diff --git a/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx b/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx index 634d5e93ead..4c85284d733 100644 --- a/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx +++ b/app/components/Views/SendFlow/AddressFrom/AddressFrom.tsx @@ -12,6 +12,7 @@ import { selectNetwork, selectTicker, } from '../../../../selectors/networkController'; +import { selectAccounts } from '../../../../selectors/accountTrackerController'; import { doENSReverseLookup } from '../../../../util/ENSUtils'; import { renderFromWei, hexToBN } from '../../../../util/number'; import { getEther, getTicker } from '../../../../util/transactions'; @@ -27,10 +28,7 @@ const SendFlowAddressFrom = ({ state.engine.backgroundState.PreferencesController.identities, ); - const accounts = useSelector( - (state: any) => - state.engine.backgroundState.AccountTrackerController.accounts, - ); + const accounts = useSelector(selectAccounts); const network = useSelector((state: any) => selectNetwork(state)); const ticker = useSelector(selectTicker); diff --git a/app/components/Views/SendFlow/Amount/index.js b/app/components/Views/SendFlow/Amount/index.js index 81b00b99547..6c34c174565 100644 --- a/app/components/Views/SendFlow/Amount/index.js +++ b/app/components/Views/SendFlow/Amount/index.js @@ -98,6 +98,7 @@ import { selectCurrentCurrency, } from '../../../../selectors/currencyRateController'; import { selectTokens } from '../../../../selectors/tokensController'; +import { selectAccounts } from '../../../../selectors/accountTrackerController'; import { PREFIX_HEX_STRING } from '../../../../constants/transaction'; import Routes from '../../../../constants/navigation/Routes'; @@ -1412,7 +1413,7 @@ class Amount extends PureComponent { Amount.contextType = ThemeContext; const mapStateToProps = (state, ownProps) => ({ - accounts: state.engine.backgroundState.AccountTrackerController.accounts, + accounts: selectAccounts(state), contractBalances: state.engine.backgroundState.TokenBalancesController.contractBalances, contractExchangeRates: selectContractExchangeRates(state), diff --git a/app/components/Views/SendFlow/Confirm/index.js b/app/components/Views/SendFlow/Confirm/index.js index 90d34c7c063..2341dd94d23 100644 --- a/app/components/Views/SendFlow/Confirm/index.js +++ b/app/components/Views/SendFlow/Confirm/index.js @@ -99,6 +99,7 @@ import { selectCurrentCurrency, } from '../../../../selectors/currencyRateController'; import { selectContractExchangeRates } from '../../../../selectors/tokenRatesController'; +import { selectAccounts } from '../../../../selectors/accountTrackerController'; import generateTestId from '../../../../../wdio/utils/generateTestId'; import { COMFIRM_TXN_AMOUNT } from '../../../../../wdio/screen-objects/testIDs/Screens/TransactionConfirm.testIds'; import { isNetworkBuyNativeTokenSupported } from '../../../UI/FiatOnRampAggregator/utils'; @@ -1305,7 +1306,7 @@ class Confirm extends PureComponent { Confirm.contextType = ThemeContext; const mapStateToProps = (state) => ({ - accounts: state.engine.backgroundState.AccountTrackerController.accounts, + accounts: selectAccounts(state), contractBalances: state.engine.backgroundState.TokenBalancesController.contractBalances, contractExchangeRates: selectContractExchangeRates(state), diff --git a/app/components/Views/Settings/SecuritySettings/Sections/RevealPrivateKey/RevealPrivateKey.tsx b/app/components/Views/Settings/SecuritySettings/Sections/RevealPrivateKey/RevealPrivateKey.tsx index d6fce14f0b3..e07fd7eadee 100644 --- a/app/components/Views/Settings/SecuritySettings/Sections/RevealPrivateKey/RevealPrivateKey.tsx +++ b/app/components/Views/Settings/SecuritySettings/Sections/RevealPrivateKey/RevealPrivateKey.tsx @@ -12,6 +12,7 @@ import { useTheme } from '../../../../../../util/theme'; import { strings } from '../../../../../../../locales/i18n'; import { createStyles } from './styles'; import Routes from '../../../../../../constants/navigation/Routes'; +import { selectAccounts } from '../../../../../../selectors/accountTrackerController'; const testIds = { section: 'reveal-private-key-section', @@ -22,10 +23,7 @@ const RevealPrivateKey = () => { const styles = createStyles(colors); const navigation = useNavigation(); - const accounts = useSelector( - (state: any) => - state.engine.backgroundState.AccountTrackerController.accounts, - ); + const accounts = useSelector(selectAccounts); const identities = useSelector( (state: any) => state.engine.backgroundState.PreferencesController.identities, diff --git a/app/components/Views/Settings/SecuritySettings/index.js b/app/components/Views/Settings/SecuritySettings/index.js index 07993a687ea..99dff024191 100644 --- a/app/components/Views/Settings/SecuritySettings/index.js +++ b/app/components/Views/Settings/SecuritySettings/index.js @@ -61,6 +61,7 @@ import { } from './Sections'; import Routes from '../../../../constants/navigation/Routes'; import { selectProviderType } from '../../../../selectors/networkController'; +import { selectAccounts } from '../../../../selectors/accountTrackerController'; import { SECURITY_PRIVACY_MULTI_ACCOUNT_BALANCES_TOGGLE_ID, SECURITY_PRIVACY_VIEW_ID, @@ -782,7 +783,7 @@ const mapStateToProps = (state) => ({ thirdPartyApiMode: state.privacy.thirdPartyApiMode, selectedAddress: state.engine.backgroundState.PreferencesController.selectedAddress, - accounts: state.engine.backgroundState.AccountTrackerController.accounts, + accounts: selectAccounts(state), identities: state.engine.backgroundState.PreferencesController.identities, keyrings: state.engine.backgroundState.KeyringController.keyrings, openSeaEnabled: diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx index 1fb7290e2c4..19eaa41ecc2 100644 --- a/app/components/Views/Wallet/index.tsx +++ b/app/components/Views/Wallet/index.tsx @@ -43,6 +43,7 @@ import { selectConversionRate, selectCurrentCurrency, } from '../../../selectors/currencyRateController'; +import { selectAccounts } from '../../../selectors/accountTrackerController'; const createStyles = ({ colors, typography }: Theme) => StyleSheet.create({ @@ -86,10 +87,7 @@ const Wallet = ({ navigation }: any) => { /** * Map of accounts to information objects including balances */ - const accounts = useSelector( - (state: any) => - state.engine.backgroundState.AccountTrackerController.accounts, - ); + const accounts = useSelector(selectAccounts); /** * ETH to current currency conversion rate */ diff --git a/app/components/hooks/useAccounts/useAccounts.ts b/app/components/hooks/useAccounts/useAccounts.ts index 8c45da1d527..71d1e2f990a 100644 --- a/app/components/hooks/useAccounts/useAccounts.ts +++ b/app/components/hooks/useAccounts/useAccounts.ts @@ -26,6 +26,7 @@ import { selectConversionRate, selectCurrentCurrency, } from '../../../selectors/currencyRateController'; +import { selectAccounts } from '../../../selectors/accountTrackerController'; /** * Hook that returns both wallet accounts and ens name information. @@ -51,11 +52,7 @@ const useAccounts = ({ (state: any) => state.engine.backgroundState.PreferencesController.selectedAddress, ); - const accountInfoByAddress = useSelector( - (state: any) => - state.engine.backgroundState.AccountTrackerController.accounts, - isEqual, - ); + const accountInfoByAddress = useSelector(selectAccounts, isEqual); const conversionRate = useSelector(selectConversionRate); const currentCurrency = useSelector(selectCurrentCurrency); const ticker = useSelector(selectTicker); diff --git a/app/components/hooks/useAddressBalance/useAddressBalance.ts b/app/components/hooks/useAddressBalance/useAddressBalance.ts index c8f7f0d2919..1d4da50b0e7 100644 --- a/app/components/hooks/useAddressBalance/useAddressBalance.ts +++ b/app/components/hooks/useAddressBalance/useAddressBalance.ts @@ -10,6 +10,7 @@ import { } from '../../../util/number'; import { safeToChecksumAddress } from '../../../util/address'; import { selectTicker } from '../../../selectors/networkController'; +import { selectAccounts } from '../../../selectors/accountTrackerController'; import { Asset } from './useAddressBalance.types'; const useAddressBalance = (asset: Asset, address?: string) => { @@ -17,7 +18,7 @@ const useAddressBalance = (asset: Asset, address?: string) => { const { accounts, contractBalances, selectedAddress } = useSelector( (state: any) => ({ - accounts: state.engine.backgroundState.AccountTrackerController.accounts, + accounts: selectAccounts(state), contractBalances: state.engine.backgroundState.TokenBalancesController.contractBalances, selectedAddress: diff --git a/app/core/GasPolling/GasPolling.ts b/app/core/GasPolling/GasPolling.ts index f4c319ef9ba..9108fd5ed28 100644 --- a/app/core/GasPolling/GasPolling.ts +++ b/app/core/GasPolling/GasPolling.ts @@ -18,6 +18,7 @@ import { selectNativeCurrency, } from '../../selectors/currencyRateController'; import { selectContractExchangeRates } from '../../selectors/tokenRatesController'; +import { selectAccounts } from '../../selectors/accountTrackerController'; /** * @@ -62,7 +63,7 @@ export const useDataStore = () => { selectConversionRate(state), selectCurrentCurrency(state), selectNativeCurrency(state), - state.engine.backgroundState.AccountTrackerController.accounts, + selectAccounts(state), state.engine.backgroundState.TokenBalancesController.contractBalances, selectTicker(state), state.transaction, diff --git a/app/selectors/accountTrackerController.ts b/app/selectors/accountTrackerController.ts new file mode 100644 index 00000000000..b46da7da901 --- /dev/null +++ b/app/selectors/accountTrackerController.ts @@ -0,0 +1,21 @@ +import { createSelector } from 'reselect'; +import { + AccountTrackerState, + AccountInformation, +} from '@metamask/assets-controllers'; +import { EngineState } from './types'; + +const selectAccountTrackerControllerState = (state: EngineState) => + state?.engine?.backgroundState?.AccountTrackerController; + +export const selectAccounts = createSelector( + selectAccountTrackerControllerState, + (currencyRateControllerState: AccountTrackerState) => + currencyRateControllerState?.accounts, +); + +export const selectAccountsLength = createSelector( + selectAccounts, + (accounts: { [address: string]: AccountInformation }) => + Object.keys(accounts || {}).length, +); From 8709886520f935bb4abeddb4e6364dca3fbc9923 Mon Sep 17 00:00:00 2001 From: Salah Date: Tue, 11 Jul 2023 00:16:07 +0200 Subject: [PATCH 2/4] fix: account tracker controller state selector typo --- app/selectors/accountTrackerController.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/selectors/accountTrackerController.ts b/app/selectors/accountTrackerController.ts index b46da7da901..ea9f0e371fc 100644 --- a/app/selectors/accountTrackerController.ts +++ b/app/selectors/accountTrackerController.ts @@ -10,8 +10,8 @@ const selectAccountTrackerControllerState = (state: EngineState) => export const selectAccounts = createSelector( selectAccountTrackerControllerState, - (currencyRateControllerState: AccountTrackerState) => - currencyRateControllerState?.accounts, + (accountTrackerControllerState: AccountTrackerState) => + accountTrackerControllerState?.accounts, ); export const selectAccountsLength = createSelector( From b819251fee41ee9a19a53fc263c6980be2fc30c6 Mon Sep 17 00:00:00 2001 From: Salah Date: Tue, 11 Jul 2023 00:22:52 +0200 Subject: [PATCH 3/4] fix: remove unused accounts prop --- .../AccountFromToInfoCard/AccountFromToInfoCard.tsx | 13 +------------ .../AccountFromToInfoCard.types.tsx | 7 ------- 2 files changed, 1 insertion(+), 19 deletions(-) diff --git a/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx b/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx index 581fd9c9cd1..3814538b638 100644 --- a/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx +++ b/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx @@ -9,7 +9,6 @@ import { selectNetwork, selectTicker, } from '../../../selectors/networkController'; -import { selectAccounts } from '../../../selectors/accountTrackerController'; import { collectConfusables } from '../../../util/confusables'; import { decodeTransferData } from '../../../util/transactions'; import { doENSReverseLookup } from '../../../util/ENSUtils'; @@ -23,7 +22,6 @@ import { AccountFromToInfoCardProps } from './AccountFromToInfoCard.types'; const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => { const { - accounts, contractBalances, identities, network, @@ -122,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 = ( { }; const mapStateToProps = (state: any) => ({ - accounts: selectAccounts(state), contractBalances: state.engine.backgroundState.TokenBalancesController.contractBalances, identities: state.engine.backgroundState.PreferencesController.identities, diff --git a/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx b/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx index 1630de5de04..af2fc440858 100644 --- a/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx +++ b/app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx @@ -1,9 +1,3 @@ -interface Account { - balance: string; -} - -type Accounts = Record; - interface Identity { address: string; name: string; @@ -32,7 +26,6 @@ export interface Transaction { } export interface AccountFromToInfoCardProps { - accounts: Accounts; contractBalances: Record; identities: Identities; network: string; From 5e26d78aa1fecf13624a9ec50a84b5c2910f88c9 Mon Sep 17 00:00:00 2001 From: Salah Date: Thu, 13 Jul 2023 22:56:15 +0100 Subject: [PATCH 4/4] fix: remove optional chaining operator --- app/selectors/accountTrackerController.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/selectors/accountTrackerController.ts b/app/selectors/accountTrackerController.ts index ea9f0e371fc..08680ad37d6 100644 --- a/app/selectors/accountTrackerController.ts +++ b/app/selectors/accountTrackerController.ts @@ -6,12 +6,12 @@ import { import { EngineState } from './types'; const selectAccountTrackerControllerState = (state: EngineState) => - state?.engine?.backgroundState?.AccountTrackerController; + state.engine.backgroundState.AccountTrackerController; export const selectAccounts = createSelector( selectAccountTrackerControllerState, (accountTrackerControllerState: AccountTrackerState) => - accountTrackerControllerState?.accounts, + accountTrackerControllerState.accounts, ); export const selectAccountsLength = createSelector(