chore: upgrade assets-controllers v37 (#11988)

## **Description** Updates assets-controllers to v37 ## **Related issues** Fixes: ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **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.
MetaMask · Oct 30, 2024 · dceb552 · dceb552
1 parent b4567ce
commit dceb552
Show file tree

Hide file tree

Showing 17 changed files with 310 additions and 282 deletions.
diff --git a/app/components/Base/RemoteImage/index.js b/app/components/Base/RemoteImage/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Image,
@@ -67,23 +67,36 @@ const RemoteImage = (props) => {
   const chainId = useSelector(selectChainId);
   const ticker = useSelector(selectTicker);
   const networkName = useSelector(selectNetworkName);
-  const resolvedIpfsUrl = useMemo(() => {
-    try {
-      const url = new URL(props.source.uri);
-      if (url.protocol !== 'ipfs:') return false;
-      const ipfsUrl = getFormattedIpfsUrl(ipfsGateway, props.source.uri, false);
-      return ipfsUrl;
-    } catch {
-      return false;
-    }
-  }, [props.source.uri, ipfsGateway]);
+  const [resolvedIpfsUrl, setResolvedIpfsUrl] = useState(false);
 
-  const uri = resolvedIpfsUrl || source.uri;
+  const uri =
+    resolvedIpfsUrl ||
+    (source.uri === undefined || source.uri?.startsWith('ipfs')
+      ? ''
+      : source.uri);
 
   const onError = ({ nativeEvent: { error } }) => setError(error);
 
   const [dimensions, setDimensions] = useState(null);
 
+  useEffect(() => {
+    resolveIpfsUrl();
+    async function resolveIpfsUrl() {
+      try {
+        const url = new URL(props.source.uri);
+        if (url.protocol !== 'ipfs:') setResolvedIpfsUrl(false);
+        const ipfsUrl = await getFormattedIpfsUrl(
+          ipfsGateway,
+          props.source.uri,
+          false,
+        );
+        setResolvedIpfsUrl(ipfsUrl);
+      } catch (err) {
+        setResolvedIpfsUrl(false);
+      }
+    }
+  }, [props.source.uri, ipfsGateway]);
+
   useEffect(() => {
     const calculateImageDimensions = (imageWidth, imageHeight) => {
       const deviceWidth = Dimensions.get('window').width;

diff --git a/app/components/Base/RemoteImage/index.test.tsx b/app/components/Base/RemoteImage/index.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import RemoteImage from './';
+import { getFormattedIpfsUrl } from '@metamask/assets-controllers';
+import { act, render } from '@testing-library/react-native';
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -11,6 +13,12 @@ jest.mock('react-redux', () => ({
 
 jest.mock('../../../components/hooks/useIpfsGateway', () => jest.fn());
 
+jest.mock('@metamask/assets-controllers', () => ({
+  getFormattedIpfsUrl: jest.fn(),
+}));
+
+const mockGetFormattedIpfsUrl = getFormattedIpfsUrl as jest.Mock;
+
 describe('RemoteImage', () => {
   it('should render svg correctly', () => {
     const wrapper = shallow(
@@ -34,14 +42,18 @@ describe('RemoteImage', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render ipfs sources', () => {
-    const wrapper = shallow(
+  it('should render ipfs sources', async () => {
+    const testIpfsUri = 'ipfs://QmeE94srcYV9WwJb1p42eM4zncdLUai2N9zmMxxukoEQ23';
+    mockGetFormattedIpfsUrl.mockResolvedValue(testIpfsUri);
+    const wrapper = render(
       <RemoteImage
         source={{
-          uri: 'ipfs://QmeE94srcYV9WwJb1p42eM4zncdLUai2N9zmMxxukoEQ23',
+          uri: testIpfsUri,
         }}
       />,
     );
+    // eslint-disable-next-line no-empty-function
+    await act(async () => {});
     expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap b/app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap
@@ -8717,7 +8717,7 @@ exports[`BuildQuote View renders correctly 1`] = `
                                               onLoadEnd={[Function]}
                                               source={
                                                 {
-                                                  "uri": undefined,
+                                                  "uri": "",
                                                 }
                                               }
                                               style={
@@ -11839,7 +11839,7 @@ exports[`BuildQuote View renders correctly 2`] = `
                                               onLoadEnd={[Function]}
                                               source={
                                                 {
-                                                  "uri": undefined,
+                                                  "uri": "",
                                                 }
                                               }
                                               style={

diff --git a/...ts/UI/Stake/Views/StakeConfirmationView/__snapshots__/StakeConfirmationView.test.tsx.snap b/...ts/UI/Stake/Views/StakeConfirmationView/__snapshots__/StakeConfirmationView.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`StakeConfirmationView render matches snapshot 1`] = `
               onLoadEnd={[Function]}
               source={
                 {
-                  "uri": undefined,
+                  "uri": "",
                 }
               }
               style={

diff --git a/...I/Stake/Views/UnstakeConfirmationView/__snapshots__/UnstakeConfirmationView.test.tsx.snap b/...I/Stake/Views/UnstakeConfirmationView/__snapshots__/UnstakeConfirmationView.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`UnstakeConfirmationView render matches snapshot 1`] = `
               onLoadEnd={[Function]}
               source={
                 {
-                  "uri": undefined,
+                  "uri": "",
                 }
               }
               style={

diff --git a/app/components/UI/Stake/components/StakingBalance/__snapshots__/StakingBalance.test.tsx.snap b/app/components/UI/Stake/components/StakingBalance/__snapshots__/StakingBalance.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`StakingBalance render matches snapshot 1`] = `
             onLoadEnd={[Function]}
             source={
               {
-                "uri": undefined,
+                "uri": "",
               }
             }
             style={

diff --git a/...omponents/StakingConfirmation/TokenValueStack/__snapshots__/TokenValueStack.test.tsx.snap b/...omponents/StakingConfirmation/TokenValueStack/__snapshots__/TokenValueStack.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`TokenValueStack render matches snapshot 1`] = `
           onLoadEnd={[Function]}
           source={
             {
-              "uri": undefined,
+              "uri": "",
             }
           }
           style={

diff --git a/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap b/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
@@ -549,7 +549,7 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                                       onLoadEnd={[Function]}
                                       source={
                                         {
-                                          "uri": undefined,
+                                          "uri": "",
                                         }
                                       }
                                       style={
@@ -1795,7 +1795,7 @@ exports[`Tokens should render correctly 1`] = `
                                       onLoadEnd={[Function]}
                                       source={
                                         {
-                                          "uri": undefined,
+                                          "uri": "",
                                         }
                                       }
                                       style={
@@ -3059,7 +3059,7 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                       onLoadEnd={[Function]}
                                       source={
                                         {
-                                          "uri": undefined,
+                                          "uri": "",
                                         }
                                       }
                                       style={

diff --git a/app/components/Views/Notifications/Details/Badge/__snapshots__/index.test.tsx.snap b/app/components/Views/Notifications/Details/Badge/__snapshots__/index.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`NotificationBadge should renders correctly 1`] = `
         onLoadEnd={[Function]}
         source={
           {
-            "uri": undefined,
+            "uri": "",
           }
         }
         style={

diff --git a/app/core/Engine.test.ts b/app/core/Engine.test.ts
@@ -71,7 +71,13 @@ describe('Engine', () => {
     const engine = Engine.init({});
     const initialBackgroundState = engine.datamodel.state;
 
-    expect(initialBackgroundState).toStrictEqual(backgroundState);
+    // AssetsContractController is stateless in v37 resulting in an undefined state
+    const newBackgroundState = {
+      ...backgroundState,
+      AssetsContractController: undefined,
+    };
+
+    expect(initialBackgroundState).toStrictEqual(newBackgroundState);
   });
 
   it('setSelectedAccount throws an error if no account exists for the given address', () => {

diff --git a/app/core/Engine.ts b/app/core/Engine.ts
@@ -28,6 +28,13 @@ import {
   TokenListControllerActions,
   TokenListControllerEvents,
   TokenBalancesControllerState,
+  AssetsContractControllerGetERC20BalanceOfAction,
+  AssetsContractControllerGetERC721AssetNameAction,
+  AssetsContractControllerGetERC721AssetSymbolAction,
+  AssetsContractControllerGetERC721TokenURIAction,
+  AssetsContractControllerGetERC721OwnerOfAction,
+  AssetsContractControllerGetERC1155BalanceOfAction,
+  AssetsContractControllerGetERC1155TokenURIAction,
 } from '@metamask/assets-controllers';
 ///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
 import { AppState } from 'react-native';
@@ -308,7 +315,14 @@ type GlobalActions =
   | TokensControllerActions
   | TokenListControllerActions
   | SelectedNetworkControllerActions
-  | SmartTransactionsControllerActions;
+  | SmartTransactionsControllerActions
+  | AssetsContractControllerGetERC20BalanceOfAction
+  | AssetsContractControllerGetERC721AssetNameAction
+  | AssetsContractControllerGetERC721AssetSymbolAction
+  | AssetsContractControllerGetERC721TokenURIAction
+  | AssetsContractControllerGetERC721OwnerOfAction
+  | AssetsContractControllerGetERC1155BalanceOfAction
+  | AssetsContractControllerGetERC1155TokenURIAction;
 
 type GlobalEvents =
   | AddressBookControllerEvents
@@ -502,19 +516,6 @@ export class Engine {
   ) {
     this.controllerMessenger = new ExtendedControllerMessenger();
 
-    /**
-     * Subscribes a listener to the state change events of Preferences Controller.
-     *
-     * @param listener - The callback function to execute when the state changes.
-     */
-    const onPreferencesStateChange = (
-      listener: (preferencesState: PreferencesState) => void,
-    ) => {
-      const eventName = `PreferencesController:stateChange`;
-
-      this.controllerMessenger.subscribe(eventName, listener);
-    };
-
     const approvalController = new ApprovalController({
       messenger: this.controllerMessenger.getRestricted({
         name: 'ApprovalController',
@@ -570,18 +571,23 @@ export class Engine {
     networkController.initializeProvider();
 
     const assetsContractController = new AssetsContractController({
-      onPreferencesStateChange,
-      onNetworkDidChange: (listener) =>
-        this.controllerMessenger.subscribe(
-          AppConstants.NETWORK_DID_CHANGE_EVENT,
-          // @ts-expect-error TODO: Resolve bump the assets controller version.
-          listener,
-        ),
+      // @ts-expect-error TODO: Resolve mismatch between base-controller versions.
+      messenger: this.controllerMessenger.getRestricted({
+        name: 'AssetsContractController',
+        allowedActions: [
+          'NetworkController:getNetworkClientById',
+          'NetworkController:getNetworkConfigurationByNetworkClientId',
+          'NetworkController:getSelectedNetworkClient',
+          'NetworkController:getState',
+        ],
+        allowedEvents: [
+          'PreferencesController:stateChange',
+          'NetworkController:networkDidChange',
+        ],
+      }),
       chainId: networkController.getNetworkClientById(
         networkController?.state.selectedNetworkClientId,
       ).configuration.chainId,
-      getNetworkClientById:
-        networkController.getNetworkClientById.bind(networkController),
     });
     const accountsControllerMessenger: AccountsControllerMessenger =
       this.controllerMessenger.getRestricted({
@@ -623,32 +629,19 @@ export class Engine {
           `${networkController.name}:getNetworkClientById`,
           'AccountsController:getAccount',
           'AccountsController:getSelectedAccount',
+          'AssetsContractController:getERC721AssetName',
+          'AssetsContractController:getERC721AssetSymbol',
+          'AssetsContractController:getERC721TokenURI',
+          'AssetsContractController:getERC721OwnerOf',
+          'AssetsContractController:getERC1155BalanceOf',
+          'AssetsContractController:getERC1155TokenURI',
         ],
         allowedEvents: [
           'PreferencesController:stateChange',
           'NetworkController:networkDidChange',
           'AccountsController:selectedEvmAccountChange',
         ],
       }),
-
-      getERC721AssetName: assetsContractController.getERC721AssetName.bind(
-        assetsContractController,
-      ),
-      getERC721AssetSymbol: assetsContractController.getERC721AssetSymbol.bind(
-        assetsContractController,
-      ),
-      getERC721TokenURI: assetsContractController.getERC721TokenURI.bind(
-        assetsContractController,
-      ),
-      getERC721OwnerOf: assetsContractController.getERC721OwnerOf.bind(
-        assetsContractController,
-      ),
-      getERC1155BalanceOf: assetsContractController.getERC1155BalanceOf.bind(
-        assetsContractController,
-      ),
-      getERC1155TokenURI: assetsContractController.getERC1155TokenURI.bind(
-        assetsContractController,
-      ),
     });
 
     const loggingController = new LoggingController({
@@ -1509,12 +1502,12 @@ export class Engine {
         // @ts-expect-error TODO: Resolve mismatch between base-controller versions.
         messenger: this.controllerMessenger.getRestricted({
           name: 'TokenBalancesController',
-          allowedActions: ['AccountsController:getSelectedAccount'],
+          allowedActions: [
+            'AccountsController:getSelectedAccount',
+            'AssetsContractController:getERC20BalanceOf',
+          ],
           allowedEvents: ['TokensController:stateChange'],
         }),
-        getERC20BalanceOf: assetsContractController.getERC20BalanceOf.bind(
-          assetsContractController,
-        ),
         interval: 180000,
         tokens: [
           ...tokensController.state.tokens,
@@ -1863,20 +1856,15 @@ export class Engine {
   }
 
   configureControllersOnNetworkChange() {
-    const {
-      AccountTrackerController,
-      AssetsContractController,
-      NetworkController,
-      SwapsController,
-    } = this.context;
+    const { AccountTrackerController, NetworkController, SwapsController } =
+      this.context;
     const { provider } = NetworkController.getProviderAndBlockTracker();
 
     // Skip configuration if this is called before the provider is initialized
     if (!provider) {
       return;
     }
     provider.sendAsync = provider.sendAsync.bind(provider);
-    AssetsContractController.configure({ provider });
 
     SwapsController.configure({
       provider,

diff --git a/app/core/EngineService/EngineService.ts b/app/core/EngineService/EngineService.ts
@@ -53,7 +53,6 @@ class EngineService {
         name: 'AddressBookController',
         key: `${engine.context.AddressBookController.name}:stateChange`,
       },
-      { name: 'AssetsContractController' },
       { name: 'NftController', key: 'NftController:stateChange' },
       {
         name: 'TokensController',

diff --git a/package.json b/package.json
@@ -142,7 +142,7 @@
     "@metamask/accounts-controller": "^18.2.1",
     "@metamask/address-book-controller": "^6.0.1",
     "@metamask/approval-controller": "^7.1.0",
-    "@metamask/assets-controllers": "^36.0.0",
+    "@metamask/assets-controllers": "^37.0.0",
     "@metamask/base-controller": "^7.0.1",
     "@metamask/composable-controller": "^3.0.0",
     "@metamask/contract-metadata": "^2.1.0",

diff --git a/patches/@metamask+assets-controllers++@metamask+preferences-controller+13.0.3.patch b/patches/@metamask+assets-controllers++@metamask+preferences-controller+13.0.3.patch