Migrate to new controller packages (#5270)

* Migrate to new controller packages

`@metamask/controllers` is deprecated, and most of the controllers that
lived here are now located in their own package ([1]). This commit
replaces `@metamask/controllers` in `package.json` with references to
these packages and updates `import` lines to match.

[1]: MetaMask/core#831

* Setup CI to download from GitHub Packages registry (#5274)

CI now supports fetching packages from the GitHub Packages registry on
draft PRs. This is meant to support the use of "preview" builds of
controller packages, to more easily test controller changes before they
are released.

.github/workflows/ci.yml

@@ -25,6 +25,18 @@ jobs:
         with:
           path: ${{ steps.yarn-cache-dir.outputs.YARN_CACHE_DIR }}
           key: yarn-cache-${{ runner.os }}-${{ steps.yarn-version.outputs.YARN_VERSION }}-${{ hashFiles('yarn.lock') }}
+      - name: Determine whether the current PR is a draft
+        id: set-is-draft
+        if: github.event_name == 'pull_request' && github.event.pull_request.number
+        run: echo "IS_DRAFT=$(gh pr view --json isDraft --jq '.isDraft' "${PR_NUMBER}")" >> "$GITHUB_OUTPUT"
+        env:
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Setup registry config for using package previews on draft PRs
+        if: github.event_name == 'pull_request' && steps.set-is-draft.outputs.IS_DRAFT == 'true'
+        run: printf '%s\n\n%s' '@metamask:registry=https://npm.pkg.github.com' "//npm.pkg.github.com/:_authToken=${PACKAGE_READ_TOKEN}" > .npmrc
+        env:
+          PACKAGE_READ_TOKEN: ${{ secrets.PACKAGE_READ_TOKEN }}
       - run: yarn setup
       - uses: actions/cache@v3
         id: restore-build

.gitignore

@@ -85,3 +85,6 @@ tests
 
 # attributions
 licenseInfos.json
+
+# Allows access to preview versions of @metamask/* packages for testing
+.npmrc

app/components/Base/RemoteImage/index.js

@@ -8,7 +8,7 @@ import { SvgUri } from 'react-native-svg';
 import isUrl from 'is-url';
 import ComponentErrorBoundary from '../../UI/ComponentErrorBoundary';
 import useIpfsGateway from '../../hooks/useIpfsGateway';
-import { util } from '@metamask/controllers';
+import { getFormattedIpfsUrl } from '@metamask/assets-controllers';
 import Identicon from '../../UI/Identicon';
 
 const createStyles = () =>
@@ -29,11 +29,7 @@ const RemoteImage = (props) => {
     try {
       const url = new URL(props.source.uri);
       if (url.protocol !== 'ipfs:') return false;
-      const ipfsUrl = util.getFormattedIpfsUrl(
-        ipfsGateway,
-        props.source.uri,
-        false,
-      );
+      const ipfsUrl = getFormattedIpfsUrl(ipfsGateway, props.source.uri, false);
       return ipfsUrl;
     } catch {
       return false;

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -44,7 +44,7 @@ import {
   toggleApproveModal,
 } from '../../../actions/modals';
 import { swapsUtils } from '@metamask/swaps-controller';
-import { util } from '@metamask/controllers';
+import { query } from '@metamask/controller-utils';
 import Analytics from '../../../core/Analytics/Analytics';
 import BigNumber from 'bignumber.js';
 import { getTokenList } from '../../../reducers/tokens';
@@ -139,25 +139,25 @@ const RootRPCMethodsUI = (props) => {
           TransactionController.state.transactions.find(
             ({ id }) => id === approvalTransactionMetaId,
           );
-        const ethBalance = await util.query(
+        const ethBalance = await query(
           TransactionController.ethQuery,
           'getBalance',
           [props.selectedAddress],
         );
-        const receipt = await util.query(
+        const receipt = await query(
           TransactionController.ethQuery,
           'getTransactionReceipt',
           [transactionMeta.transactionHash],
         );
 
-        const currentBlock = await util.query(
+        const currentBlock = await query(
           TransactionController.ethQuery,
           'getBlockByHash',
           [receipt.blockHash, false],
         );
         let approvalReceipt;
         if (approvalTransaction?.transactionHash) {
-          approvalReceipt = await util.query(
+          approvalReceipt = await query(
             TransactionController.ethQuery,
             'getTransactionReceipt',
             [approvalTransaction.transactionHash],

app/components/Nav/Main/index.js

@@ -34,7 +34,7 @@ import {
 import ProtectYourWalletModal from '../../UI/ProtectYourWalletModal';
 import MainNavigator from './MainNavigator';
 import SkipAccountSecurityModal from '../../UI/SkipAccountSecurityModal';
-import { util } from '@metamask/controllers';
+import { query } from '@metamask/controller-utils';
 import SwapsLiveness from '../../UI/Swaps/SwapsLiveness';
 
 import {
@@ -119,7 +119,7 @@ const Main = (props) => {
     if (props.providerType !== 'rpc') {
       try {
         const { TransactionController } = Engine.context;
-        await util.query(TransactionController.ethQuery, 'blockNumber', []);
+        await query(TransactionController.ethQuery, 'blockNumber', []);
         props.setInfuraAvailabilityNotBlocked();
       } catch (e) {
         if (e.message === AppConstants.ERRORS.INFURA_BLOCKED_MESSAGE) {

app/components/UI/AccountList/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { KeyringTypes } from '@metamask/controllers';
+import { KeyringTypes } from '@metamask/keyring-controller';
 import Engine from '../../../core/Engine';
 import PropTypes from 'prop-types';
 import {
@@ -336,7 +336,7 @@ class AccountList extends PureComponent {
   getAccounts() {
     const { accounts, identities, selectedAddress, keyrings, getBalanceError } =
       this.props;
-    // This is a temporary fix until we can read the state from @metamask/controllers
+    // This is a temporary fix until we can read the state from @metamask/keyring-controller
     const allKeyrings =
       keyrings && keyrings.length
         ? keyrings

app/components/UI/ApproveTransactionReview/index.js

@@ -19,7 +19,8 @@ import {
 import Engine from '../../../core/Engine';
 import { strings } from '../../../../locales/i18n';
 import { setTransactionObject } from '../../../actions/transaction';
-import { GAS_ESTIMATE_TYPES, util } from '@metamask/controllers';
+import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
+import { hexToBN } from '@metamask/controller-utils';
 import { fromTokenMinimalUnit } from '../../../util/number';
 import EthereumAddress from '../EthereumAddress';
 import {
@@ -66,8 +67,6 @@ import { allowedToBuy } from '../FiatOnRampAggregator';
 import { MM_SDK_REMOTE_ORIGIN } from '../../../core/SDKConnect';
 import createStyles from './styles';
 
-const { hexToBN } = util;
-
 const { ORIGIN_DEEPLINK, ORIGIN_QR_CODE } = AppConstants.DEEPLINKS;
 const POLLING_INTERVAL_ESTIMATED_L1_FEE = 30000;
 

app/components/UI/AssetSearch/index.tsx

@@ -7,7 +7,7 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 import { toLowerCaseEquals } from '../../../util/general';
 import { useSelector } from 'react-redux';
 import { getTokenListArray } from '../../../reducers/tokens';
-import { TokenListToken } from '@metamask/controllers';
+import { TokenListToken } from '@metamask/assets-controllers';
 import { useTheme } from '../../../util/theme';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 import { TOKEN_INPUT_BOX_ID } from '../../../../wdio/features/testIDs/Screens/AssetSearch.testIds';

app/components/UI/DrawerView/index.js

@@ -67,7 +67,7 @@ import { collectiblesSelector } from '../../../reducers/collectibles';
 import { getCurrentRoute } from '../../../reducers/navigation';
 import { ScrollView } from 'react-native-gesture-handler';
 import { isZero } from '../../../util/lodash';
-import { KeyringTypes } from '@metamask/controllers';
+import { KeyringTypes } from '@metamask/keyring-controller';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import NetworkInfo from '../NetworkInfo';
 import sanitizeUrl from '../../../util/sanitizeUrl';

app/components/UI/EditGasFeeLegacy/index.js

@@ -8,7 +8,7 @@ import {
   TouchableWithoutFeedback,
 } from 'react-native';
 import PropTypes from 'prop-types';
-import { GAS_ESTIMATE_TYPES } from '@metamask/controllers';
+import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
 import BigNumber from 'bignumber.js';
 import Text from '../../Base/Text';
 import StyledButton from '../StyledButton';

app/components/UI/EditGasFeeLegacyUpdate/index.tsx

@@ -6,7 +6,7 @@ import {
   ScrollView,
   TouchableWithoutFeedback,
 } from 'react-native';
-import { GAS_ESTIMATE_TYPES } from '@metamask/controllers';
+import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
 import BigNumber from 'bignumber.js';
 import Text from '../../Base/Text';
 import StyledButton from '../StyledButton';

app/components/UI/NetworkInfo/index.tsx

@@ -13,7 +13,7 @@ import {
   NETWORK_EDUCATION_MODAL_NETWORK_NAME_ID,
 } from '../../../../wdio/features/testIDs/Components/NetworkEducationModalTestIds';
 import { fontStyles } from '../../../styles/common';
-import { util as controllerUtils } from '@metamask/controllers';
+import { isTokenDetectionSupportedForNetwork } from '@metamask/assets-controllers/dist/assetsUtil';
 import { NETWORK_EDUCATION_MODAL_CLOSE_BUTTON } from '../../../../wdio/features/testIDs/Screens/NetworksScreen.testids.js';
 import { isMainnetByChainId } from '../../../util/networks';
 
@@ -133,7 +133,7 @@ const NetworkInfo = (props: NetworkInfoProps) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   const isTokenDetectionSupported =
-    controllerUtils.isTokenDetectionSupportedForNetwork(chainId);
+    isTokenDetectionSupportedForNetwork(chainId);
   const isMainnet = isMainnetByChainId(chainId);
 
   const isTokenDetectionEnabledForNetwork = useMemo(() => {

app/components/UI/NetworkMainAssetLogo/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { NetworksChainId } from '@metamask/controllers';
+import { NetworksChainId } from '@metamask/controller-utils';
 import { connect } from 'react-redux';
 import TokenIcon from '../Swaps/components/TokenIcon';
 

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

@@ -19,7 +19,7 @@ import TransactionDetails from '../../TransactionElement/TransactionDetails';
 import BaseNotification from './../BaseNotification';
 import Device from '../../../../util/device';
 import ElevatedView from 'react-native-elevated-view';
-import { CANCEL_RATE, SPEED_UP_RATE } from '@metamask/controllers';
+import { CANCEL_RATE, SPEED_UP_RATE } from '@metamask/transaction-controller';
 import BigNumber from 'bignumber.js';
 import { collectibleContractsSelector } from '../../../../reducers/collectibles';
 import { useTheme } from '../../../../util/theme';

app/components/UI/PaymentRequest/index.js

@@ -40,14 +40,14 @@ import {
 } from '../../../util/payment-link-generator';
 import Device from '../../../util/device';
 import currencySymbols from '../../../util/currency-symbols.json';
-import { NetworksChainId } from '@metamask/controllers';
+import { NetworksChainId } from '@metamask/controller-utils';
 import { getTicker } from '../../../util/transactions';
 import { toLowerCaseEquals } from '../../../util/general';
 import { getTokenListArray } from '../../../reducers/tokens';
 import { utils as ethersUtils } from 'ethers';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import { isTestNet } from '../../../util/networks';
-import { isTokenDetectionSupportedForNetwork } from '@metamask/controllers/dist/util';
+import { isTokenDetectionSupportedForNetwork } from '@metamask/assets-controllers/dist/assetsUtil';
 
 const KEYBOARD_OFFSET = 120;
 const createStyles = (colors) =>

app/components/UI/PersonalSign/index.js

@@ -6,7 +6,7 @@ import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
 import SignatureRequest from '../SignatureRequest';
 import ExpandedMessage from '../SignatureRequest/ExpandedMessage';
-import { util } from '@metamask/controllers';
+import { hexToText } from '@metamask/controller-utils';
 import NotificationManager from '../../../core/NotificationManager';
 import { strings } from '../../../../locales/i18n';
 import { WALLET_CONNECT_ORIGIN } from '../../../util/walletconnect';
@@ -192,8 +192,7 @@ class PersonalSign extends PureComponent {
     const { truncateMessage } = this.state;
     const styles = this.getStyles();
 
-    const textChild = util
-      .hexToText(messageParams.data)
+    const textChild = hexToText(messageParams.data)
       .split('\n')
       .map((line, i) => (
         <Text

app/components/UI/Swaps/QuotesView.js

@@ -17,10 +17,10 @@ import { useNavigation, useRoute } from '@react-navigation/native';
 import { swapsUtils } from '@metamask/swaps-controller';
 import {
   WalletDevice,
-  util,
-  GAS_ESTIMATE_TYPES,
   TransactionStatus,
-} from '@metamask/controllers/';
+} from '@metamask/transaction-controller';
+import { query } from '@metamask/controller-utils';
+import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
 
 import {
   addHexPrefix,
@@ -758,12 +758,12 @@ function SwapsQuotesView({
       newSwapsTransactions,
     ) => {
       const { TransactionController } = Engine.context;
-      const blockNumber = await util.query(
+      const blockNumber = await query(
         TransactionController.ethQuery,
         'blockNumber',
         [],
       );
-      const currentBlock = await util.query(
+      const currentBlock = await query(
         TransactionController.ethQuery,
         'getBlockByNumber',
         [blockNumber, false],

app/components/UI/Swaps/components/GasEditModal.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import Modal from 'react-native-modal';
-import { GAS_ESTIMATE_TYPES } from '@metamask/controllers';
+import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { connect } from 'react-redux';
 

app/components/UI/TransactionEditor/index.js

@@ -28,7 +28,7 @@ import { safeToChecksumAddress } from '../../../util/address';
 import { shallowEqual } from '../../../util/general';
 import EditGasFee1559 from '../EditGasFee1559';
 import EditGasFeeLegacy from '../EditGasFeeLegacy';
-import { GAS_ESTIMATE_TYPES } from '@metamask/controllers';
+import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
 import AppConstants from '../../../core/AppConstants';
 import {
   estimateGas,

app/components/UI/TransactionElement/TransactionDetails/index.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, StyleSheet, View } from 'react-native';
-import { util } from '@metamask/controllers';
+import { query } from '@metamask/controller-utils';
 import { connect } from 'react-redux';
 import URL from 'url-parse';
 
@@ -125,7 +125,7 @@ class TransactionDetails extends PureComponent {
 
   fetchTxReceipt = async (transactionHash) => {
     const { TransactionController } = Engine.context;
-    return await util.query(
+    return await query(
       TransactionController.ethQuery,
       'getTransactionReceipt',
       [transactionHash],

app/components/UI/TransactionElement/index.js

@@ -23,9 +23,12 @@ import ListItem from '../../Base/ListItem';
 import StatusText from '../../Base/StatusText';
 import DetailsModal from '../../Base/DetailsModal';
 import { isMainNet } from '../../../util/networks';
-import { WalletDevice, util } from '@metamask/controllers/';
+import { weiHexToGweiDec } from '@metamask/controller-utils';
+import {
+  WalletDevice,
+  isEIP1559Transaction,
+} from '@metamask/transaction-controller';
 import { ThemeContext, mockTheme } from '../../../util/theme';
-const { weiHexToGweiDec, isEIP1559Transaction } = util;
 
 const createStyles = (colors) =>
   StyleSheet.create({

app/components/UI/TransactionElement/utils.js

@@ -33,8 +33,7 @@ import { swapsUtils } from '@metamask/swaps-controller';
 import { isSwapsNativeAsset } from '../Swaps/utils';
 import { toLowerCaseEquals } from '../../../util/general';
 import Engine from '../../../core/Engine';
-import { util } from '@metamask/controllers';
-const { isEIP1559Transaction } = util;
+import { isEIP1559Transaction } from '@metamask/transaction-controller';
 
 const { getSwapsContractAddress } = swapsUtils;
 

app/components/UI/TransactionReview/TransactionReviewInformation/index.js

@@ -35,7 +35,7 @@ import { getNetworkNonce, isTestNet } from '../../../../util/networks';
 import CustomNonceModal from '../../../UI/CustomNonceModal';
 import { setNonce, setProposedNonce } from '../../../../actions/transaction';
 import TransactionReviewEIP1559 from '../TransactionReviewEIP1559';
-import { GAS_ESTIMATE_TYPES } from '@metamask/controllers';
+import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
 import CustomNonce from '../../../UI/CustomNonce';
 import Logger from '../../../../util/Logger';
 import { ThemeContext, mockTheme } from '../../../../util/theme';

app/components/UI/Transactions/index.js

@@ -29,7 +29,7 @@ import TransactionElement from '../TransactionElement';
 import Engine from '../../../core/Engine';
 import { showAlert } from '../../../actions/alert';
 import NotificationManager from '../../../core/NotificationManager';
-import { CANCEL_RATE, SPEED_UP_RATE } from '@metamask/controllers';
+import { CANCEL_RATE, SPEED_UP_RATE } from '@metamask/transaction-controller';
 import { renderFromWei } from '../../../util/number';
 import Device from '../../../util/device';
 import { RPC, NO_RPC_BLOCK_EXPLORER } from '../../../constants/network';

app/components/UI/UpdateEIP1559Tx/index.tsx

@@ -2,11 +2,8 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import EditGasFee1559Update from '../EditGasFee1559Update';
 import { connect } from 'react-redux';
-import {
-  CANCEL_RATE,
-  SPEED_UP_RATE,
-  GAS_ESTIMATE_TYPES,
-} from '@metamask/controllers';
+import { CANCEL_RATE, SPEED_UP_RATE } from '@metamask/transaction-controller';
+import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
 import { hexToBN, fromWei, renderFromWei } from '../../../util/number';
 import BigNumber from 'bignumber.js';
 import { getTicker } from '../../../util/transactions';

app/components/Views/AddAsset/index.js

@@ -11,7 +11,7 @@ import { strings } from '../../../../locales/i18n';
 import AddCustomCollectible from '../../UI/AddCustomCollectible';
 import { getNetworkNavbarOptions } from '../../UI/Navbar';
 import CollectibleDetectionModal from '../../UI/CollectibleDetectionModal';
-import { util as controllerUtils } from '@metamask/controllers';
+import { isTokenDetectionSupportedForNetwork } from '@metamask/assets-controllers/dist/assetsUtil';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import { MAINNET } from '../../../constants/network';
 
@@ -132,7 +132,7 @@ class AddAsset extends PureComponent {
     } = this.props;
     const { dismissNftInfo } = this.state;
     const isTokenDetectionSupported =
-      controllerUtils.isTokenDetectionSupportedForNetwork(chainId);
+      isTokenDetectionSupportedForNetwork(chainId);
     const colors = this.context.colors || mockTheme.colors;
     const styles = createStyles(colors);
 

app/components/Views/Approval/index.js

@@ -25,7 +25,7 @@ import {
 import { WALLET_CONNECT_ORIGIN } from '../../../util/walletconnect';
 import Logger from '../../../util/Logger';
 import AnalyticsV2 from '../../../util/analyticsV2';
-import { GAS_ESTIMATE_TYPES } from '@metamask/controllers';
+import { GAS_ESTIMATE_TYPES } from '@metamask/gas-fee-controller';
 import { KEYSTONE_TX_CANCELED } from '../../../constants/error';
 import { ThemeContext, mockTheme } from '../../../util/theme';
 import {