chore: core related files selectors refactor (#10507)

## **Description**

Refactor to use selectors on core related files

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/components/Nav/Main/MainNavigator.js

@@ -81,6 +81,7 @@ import DeprecatedNetworkDetails from '../../UI/DeprecatedNetworkModal';
 import ConfirmAddAsset from '../../UI/ConfirmAddAsset';
 import { AesCryptoTestForm } from '../../Views/AesCryptoTestForm';
 import { isTest } from '../../../util/test/utils';
+import { selectPermissionControllerState } from '../../../selectors/snaps/permissionController';
 
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -395,8 +396,7 @@ const HomeTabs = () => {
     const activeTabUrl = getActiveTabUrl(state);
     if (!isUrl(activeTabUrl)) return [];
     try {
-      const permissionsControllerState =
-        state.engine.backgroundState.PermissionController;
+      const permissionsControllerState = selectPermissionControllerState(state);
       const hostname = new URL(activeTabUrl).hostname;
       const permittedAcc = getPermittedAccountsByHostname(
         permissionsControllerState,

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -67,6 +67,7 @@ import { selectShouldUseSmartTransaction } from '../../../selectors/smartTransac
 import { STX_NO_HASH_ERROR } from '../../../util/smart-transactions/smart-publish-hook';
 import { getSmartTransactionMetricsProperties } from '../../../util/smart-transactions';
 import { cloneDeep, isEqual } from 'lodash';
+import { selectSwapsTransactions } from '../../../selectors/transactionController';
 
 ///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
 import InstallSnapApproval from '../../Approvals/InstallSnapApproval';
@@ -75,11 +76,7 @@ import InstallSnapApproval from '../../Approvals/InstallSnapApproval';
 const hstInterface = new ethers.utils.Interface(abi);
 
 function useSwapsTransactions() {
-  const swapTransactions = useSelector(
-    (state) =>
-      state.engine.backgroundState.TransactionController.swapsTransactions,
-    isEqual,
-  );
+  const swapTransactions = useSelector(selectSwapsTransactions, isEqual);
 
   // Memo prevents fresh fallback empty object on every render.
   return useMemo(() => swapTransactions ?? {}, [swapTransactions]);
@@ -98,7 +95,6 @@ export const useSwapConfirmedEvent = ({ trackSwaps }) => {
     },
     [transactionMetaIdsForListening],
   );
-
   const swapsTransactions = useSwapsTransactions();
 
   useEffect(() => {
@@ -260,7 +256,6 @@ const RootRPCMethodsUI = (props) => {
   const { addTransactionMetaIdForListening } = useSwapConfirmedEvent({
     trackSwaps,
   });
-
   const swapsTransactions = useSwapsTransactions();
 
   const autoSign = useCallback(

app/components/Views/AccountPermissions/AccountPermissions.tsx

@@ -50,6 +50,7 @@ import useFavicon from '../../hooks/useFavicon/useFavicon';
 import URLParse from 'url-parse';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { selectInternalAccounts } from '../../../selectors/accountsController';
+import { selectPermissionControllerState } from '../../../selectors/snaps/permissionController';
 
 const AccountPermissions = (props: AccountPermissionsProps) => {
   const navigation = useNavigation();
@@ -94,11 +95,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
 
   const { toastRef } = useContext(ToastContext);
   const [isLoading, setIsLoading] = useState(false);
-  const permittedAccountsList = useSelector(
-    // TODO: Replace "any" with type
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (state: any) => state.engine.backgroundState.PermissionController,
-  );
+  const permittedAccountsList = useSelector(selectPermissionControllerState);
   const permittedAccountsByHostname = getPermittedAccountsByHostname(
     permittedAccountsList,
     hostname,

app/components/Views/Asset/index.js

@@ -64,6 +64,7 @@ import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
 import { store } from '../../../store';
 import { createBuyNavigationDetails } from '../../UI/Ramp/routes/utils';
 import { toChecksumHexAddress } from '@metamask/controller-utils';
+import { selectSwapsTransactions } from '../../../selectors/transactionController';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -577,8 +578,7 @@ Asset.contextType = ThemeContext;
 const mapStateToProps = (state) => ({
   swapsIsLive: swapsLivenessSelector(state),
   swapsTokens: swapsTokensObjectSelector(state),
-  swapsTransactions:
-    state.engine.backgroundState.TransactionController.swapsTransactions || {},
+  swapsTransactions: selectSwapsTransactions(state),
   conversionRate: selectConversionRate(state),
   currentCurrency: selectCurrentCurrency(state),
   selectedInternalAccount: selectSelectedInternalAccount(state),

app/components/Views/Browser/index.js

@@ -39,6 +39,7 @@ import URL from 'url-parse';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { selectNetworkConfigurations } from '../../../selectors/networkController';
 import { getBrowserViewNavbarOptions } from '../../UI/Navbar';
+import { selectPermissionControllerState } from '../../../selectors/snaps/permissionController';
 
 const margin = 16;
 const THUMB_WIDTH = Dimensions.get('window').width / 2 - margin * 2;
@@ -82,8 +83,7 @@ export const Browser = (props) => {
   const permittedAccountsList = useSelector((state) => {
     if (!activeTab) return [];
 
-    const permissionsControllerState =
-      state.engine.backgroundState.PermissionController;
+    const permissionsControllerState = selectPermissionControllerState(state);
     const hostname = new URL(activeTab.url).hostname;
     const permittedAcc = getPermittedAccountsByHostname(
       permissionsControllerState,

app/components/Views/BrowserTab/index.js

@@ -101,6 +101,7 @@ import { BrowserViewSelectorsIDs } from '../../../../e2e/selectors/Browser/Brows
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { trackDappViewedEvent } from '../../../util/metrics';
 import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics';
+import { selectPermissionControllerState } from '../../../selectors/snaps/permissionController';
 
 const { HOMEPAGE_URL, NOTIFICATION_NAMES } = AppConstants;
 const HOMEPAGE_HOST = new URL(HOMEPAGE_URL)?.hostname;
@@ -276,8 +277,7 @@ export const BrowserTab = (props) => {
   const fromHomepage = useRef(false);
   const wizardScrollAdjusted = useRef(false);
   const permittedAccountsList = useSelector((state) => {
-    const permissionsControllerState =
-      state.engine.backgroundState.PermissionController;
+    const permissionsControllerState = selectPermissionControllerState(state);
     const hostname = new URL(url.current).hostname;
     const permittedAcc = getPermittedAccountsByHostname(
       permissionsControllerState,

app/components/hooks/useExistingAddress.ts

@@ -5,16 +5,15 @@ import { selectChainId } from '../../selectors/networkController';
 import { selectInternalAccounts } from '../../selectors/accountsController';
 import { toLowerCaseEquals } from '../../util/general';
 import { AddressBookEntry } from '@metamask/address-book-controller';
-import { RootState } from '../../reducers';
+import { selectAddressBook } from '../../selectors/addressBookController';
 
 type AccountInfo = Pick<AddressBookEntry, 'name' | 'address'>;
 
 const useExistingAddress = (address?: string): AccountInfo | undefined => {
   const chainId = useSelector(selectChainId);
-  const { addressBook, internalAccounts } = useSelector((state: RootState) => ({
-    addressBook: state.engine.backgroundState.AddressBookController.addressBook,
-    internalAccounts: selectInternalAccounts(state),
-  }));
+
+  const addressBook = useSelector(selectAddressBook);
+  const internalAccounts = useSelector(selectInternalAccounts);
 
   if (!address) return;
 

app/selectors/transactionController.ts

@@ -20,3 +20,10 @@ export const selectNonReplacedTransactions = createDeepEqualSelector(
   (transactions) =>
     transactions.filter((tx) => !(tx.replacedBy && tx.replacedById && tx.hash)),
 );
+
+export const selectSwapsTransactions = createSelector(
+  selectTransactionControllerState,
+  (transactionControllerState) =>
+    //@ts-expect-error - This is populated at the app level, the TransactionController is not aware of this property
+    transactionControllerState.swapsTransactions ?? {},
+);