[MMI] Fixed connect mmi button several issues (#20455)

* fixed connect mmi button several issues * Fixed snapshot * Improved multiple things * running yarn dedupe * Update LavaMoat policies * For some reason, this.mmiConfigurationController.store.mmiConfiguration?.portfolio sometimes is undefined, added [] if null. Moved the || {} outside the find method * minor improvements --------- Co-authored-by: MetaMask Bot <metamaskbot@users.noreply.github.com>
2024-11-24 19:10:22 +01:00 · 2023-08-17 14:50:40 +02:00 · 2023-08-17 14:50:40 +02:00 · 486ade85f3
commit 486ade85f3
parent 20e16d41be
10 changed files with 164 additions and 108 deletions
--- a/app/scripts/controllers/mmi-controller.js
+++ b/app/scripts/controllers/mmi-controller.js
@ -569,7 +569,7 @@ export default class MMIController extends EventEmitter {
        const mmiDashboardData = await this.handleMmiDashboardData();
        const cookieSetUrls =
          this.mmiConfigurationController.store.mmiConfiguration?.portfolio
-            ?.cookieSetUrls;
+            ?.cookieSetUrls || [];
        setDashboardCookie(mmiDashboardData, cookieSetUrls);
      } catch (error) {
        console.error(error);
--- a/lavamoat/browserify/mmi/policy.json
+++ b/lavamoat/browserify/mmi/policy.json
@ -790,10 +790,26 @@
    "@metamask-institutional/extension>@metamask-institutional/custody-controller": {
      "packages": {
        "@ethereumjs/tx>@ethereumjs/util": true,
-        "@metamask-institutional/custody-keyring": true,
+        "@metamask-institutional/extension>@metamask-institutional/custody-keyring": true,
        "@metamask/obs-store": true
      }
    },
+    "@metamask-institutional/extension>@metamask-institutional/custody-keyring": {
+      "globals": {
+        "console.log": true,
+        "console.warn": true
+      },
+      "packages": {
+        "@ethereumjs/tx>@ethereumjs/util": true,
+        "@metamask-institutional/custody-keyring>@metamask-institutional/configuration-client": true,
+        "@metamask-institutional/sdk": true,
+        "@metamask-institutional/sdk>@metamask-institutional/types": true,
+        "@metamask/obs-store": true,
+        "browserify>crypto-browserify": true,
+        "browserify>events": true,
+        "gulp-sass>lodash.clonedeep": true
+      }
+    },
    "@metamask-institutional/institutional-features": {
      "globals": {
        "chrome.runtime.id": true,
--- a/package.json
+++ b/package.json
@ -222,7 +222,7 @@
    "@material-ui/core": "^4.11.0",
    "@metamask-institutional/custody-controller": "0.2.6",
    "@metamask-institutional/custody-keyring": "^0.0.25",
-    "@metamask-institutional/extension": "^0.2.1",
+    "@metamask-institutional/extension": "0.3.2",
    "@metamask-institutional/institutional-features": "^1.1.8",
    "@metamask-institutional/portfolio-dashboard": "^1.1.3",
    "@metamask-institutional/rpc-allowlist": "^1.0.0",
--- a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js
+++ b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js
@ -48,9 +48,8 @@ const CustodyConfirmLink = ({ hideModal }) => {
  const { custodians } = useSelector(getMMIConfiguration);
  const { custodianName } =
    custodyAccountDetails[toChecksumHexAddress(address)] || {};
-  const { displayName, iconUrl } = custodians.find(
-    (item) => item.name === custodianName || {},
-  );
+  const { displayName, iconUrl } =
+    custodians.find((item) => item.name === custodianName) || {};
  const { url, ethereum, text, action } = useSelector(
    (state) => state.appState.modal.modalState.props.link || {},
  );
--- a/ui/components/ui/metafox-logo/horizontal-logo.js
+++ b/ui/components/ui/metafox-logo/horizontal-logo.js
@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { ThemeType } from '../../../../shared/constants/preferences';

 const LOGO_WIDTH = 162;
 const LOGO_HEIGHT = 30;
@ -994,6 +995,6 @@ export default function MetaFoxHorizontalLogo({
 }

 MetaFoxHorizontalLogo.propTypes = {
-  theme: PropTypes.oneOf(['light', 'dark']),
+  theme: PropTypes.oneOf([ThemeType.light, ThemeType.dark, ThemeType.os]),
  className: PropTypes.string,
 };
--- a/ui/pages/home/institutional/institutional-home-footer.js
+++ b/ui/pages/home/institutional/institutional-home-footer.js
@ -50,9 +50,9 @@ const InstitutionalHomeFooter = ({ activitySupportDisplayStyle }) => {
 InstitutionalHomeFooter.propTypes = {
  activitySupportDisplayStyle: PropTypes.shape({
    justifyContent: PropTypes.string.isRequired,
-    paddingLeft: PropTypes.string,
-    marginBottom: PropTypes.string,
-    marginTop: PropTypes.string,
+    paddingLeft: PropTypes.number,
+    marginBottom: PropTypes.number,
+    marginTop: PropTypes.number,
  }).isRequired,
 };

--- a/ui/pages/institutional/custody/snapshots/custody.test.js.snap
+++ b/ui/pages/institutional/custody/snapshots/custody.test.js.snap
@ -90,6 +90,7 @@ exports[`CustodyPage renders CustodyPage 2`] = `
        </ul>
      </div>
    </div>
+    
  </div>
 </div>
 `;
--- a/ui/pages/institutional/custody/custody.js
+++ b/ui/pages/institutional/custody/custody.js
@ -8,6 +8,7 @@ import React, {
 import { useSelector, useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
+import { isEqual } from 'lodash';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { mmiActionsFactory } from '../../../store/institutional/institution-background';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@ -42,6 +43,7 @@ import {
 } from '../../../helpers/constants/routes';
 import { getCurrentChainId, getSelectedAddress } from '../../../selectors';
 import { getMMIConfiguration } from '../../../selectors/institutional/selectors';
+import { getInstitutionalConnectRequests } from '../../../ducks/institutional/institutional';
 import CustodyAccountList from '../connect-custody/account-list';
 import JwtUrlForm from '../../../components/institutional/jwt-url-form';
 import {
@ -74,14 +76,15 @@ const CustodyPage = () => {
  const [apiUrl, setApiUrl] = useState('');
  const [addNewTokenClicked, setAddNewTokenClicked] = useState(false);
  const [chainId, setChainId] = useState(parseInt(currentChainId, 16));
-  const [connectRequest, setConnectRequest] = useState(undefined);
+  const connectRequests = useSelector(getInstitutionalConnectRequests, isEqual);
  const [accounts, setAccounts] = useState();
  const address = useSelector(getSelectedAddress);
+  const connectRequest = connectRequests ? connectRequests[0] : undefined;

  const custodianButtons = useMemo(() => {
    const custodianItems = [];

-    const sortedCustodians = custodians.sort(function (a, b) {
+    const sortedCustodians = [...custodians].sort(function (a, b) {
      const nameA = a.name.toLowerCase();
      const nameB = b.name.toLowerCase();

@ -94,14 +97,34 @@ const CustodyPage = () => {
      return 0;
    });

+    function shouldShowInProduction(custodian) {
+      return (
+        custodian &&
+        'production' in custodian &&
+        !custodian.production &&
+        process.env.METAMASK_ENVIRONMENT === 'production'
+      );
+    }
+
+    function isHidden(custodian) {
+      return custodian && 'hidden' in custodian && custodian.hidden;
+    }
+
+    function isNotSelectedCustodian(custodian) {
+      return (
+        custodian &&
+        'name' in custodian &&
+        connectRequest &&
+        Object.keys(connectRequest).length &&
+        custodian.name !== selectedCustodianName
+      );
+    }
+
    sortedCustodians.forEach((custodian) => {
      if (
-        (!custodian.production &&
-          process.env.METAMASK_ENVIRONMENT === 'production') ||
-        custodian.hidden ||
-        (connectRequest &&
-          Object.keys(connectRequest).length &&
-          custodian.name !== selectedCustodianName)
+        shouldShowInProduction(custodian) ||
+        isHidden(custodian) ||
+        isNotSelectedCustodian(custodian)
      ) {
        return;
      }
@ -134,23 +157,27 @@ const CustodyPage = () => {
            size={BUTTON_SIZES.SM}
            data-testid="custody-connect-button"
            onClick={async () => {
-              const jwtListValue = await dispatch(
-                mmiActions.getCustodianJWTList(custodian.name),
-              );
-              setSelectedCustodianName(custodian.name);
-              setSelectedCustodianType(custodian.type);
-              setSelectedCustodianImage(custodian.iconUrl);
-              setSelectedCustodianDisplayName(custodian.displayName);
-              setApiUrl(custodian.apiUrl);
-              setCurrentJwt(jwtListValue[0] || '');
-              setJwtList(jwtListValue);
-              trackEvent({
-                category: MetaMetricsEventCategory.MMI,
-                event: MetaMetricsEventName.CustodianSelected,
-                properties: {
-                  custodian: custodian.name,
-                },
-              });
+              try {
+                const jwtListValue = await dispatch(
+                  mmiActions.getCustodianJWTList(custodian.name),
+                );
+                setSelectedCustodianName(custodian.name);
+                setSelectedCustodianType(custodian.type);
+                setSelectedCustodianImage(custodian.iconUrl);
+                setSelectedCustodianDisplayName(custodian.displayName);
+                setApiUrl(custodian.apiUrl);
+                setCurrentJwt(jwtListValue[0] || '');
+                setJwtList(jwtListValue);
+                trackEvent({
+                  category: MetaMetricsEventCategory.MMI,
+                  event: MetaMetricsEventName.CustodianSelected,
+                  properties: {
+                    custodian: custodian.name,
+                  },
+                });
+              } catch (error) {
+                console.error('Error:', error);
+              }
            }}
          >
            {t('select')}
@ -208,58 +235,54 @@ const CustodyPage = () => {

  useEffect(() => {
    const fetchConnectRequest = async () => {
-      const connectRequestValue = await dispatch(
-        mmiActions.getCustodianConnectRequest(),
-      );
+      try {
+        if (connectRequest && Object.keys(connectRequest).length) {
+          const {
+            token,
+            environment: custodianName,
+            service: custodianType,
+            apiUrl: custodianApiUrl,
+          } = connectRequest;

-      if (Object.keys(connectRequestValue).length) {
-        const {
-          token,
-          custodianName,
-          custodianType,
-          apiUrl: custodianApiUrl,
-        } = connectRequestValue;
+          const custodianToken =
+            token || (await dispatch(mmiActions.getCustodianToken(address)));

-        const jwt =
-          token || (await dispatch(mmiActions.getCustodianToken(address)));
-        const accountsValue = await dispatch(
-          mmiActions.getCustodianAccounts(
-            jwt,
-            custodianApiUrl,
-            custodianType,
-            true,
-          ),
-        );
+          setCurrentJwt(custodianToken);
+          setSelectedCustodianType(custodianType);
+          setSelectedCustodianName(custodianName);
+          setApiUrl(custodianApiUrl);
+          setConnectError('');

-        setConnectRequest(connectRequestValue);
-        setCurrentJwt(jwt);
-        setSelectedCustodianType(custodianType);
-        setSelectedCustodianName(custodianName);
-        setApiUrl(custodianApiUrl);
-        setConnectError('');
-        setAccounts(accountsValue);
+          const accountsValue = await dispatch(
+            mmiActions.getCustodianAccounts(
+              custodianToken,
+              custodianApiUrl,
+              custodianType,
+              true,
+            ),
+          );

-        trackEvent({
-          category: MetaMetricsEventCategory.MMI,
-          event: MetaMetricsEventName.CustodianConnected,
-          properties: {
-            custodian: custodianName,
-            apiUrl,
-            rpc: Boolean(connectRequest),
-          },
-        });
+          setAccounts(accountsValue);
+
+          trackEvent({
+            category: MetaMetricsEventCategory.MMI,
+            event: MetaMetricsEventName.CustodianConnected,
+            properties: {
+              custodian: custodianName,
+              apiUrl,
+              rpc: Boolean(connectRequest),
+            },
+          });
+        }
+      } catch (error) {
+        console.error(error);
+        handleConnectError(error);
      }
    };

-    const handleFetchConnectRequest = async () => {
-      try {
-        setLoading(true);
-        await fetchConnectRequest();
-        setLoading(false);
-      } catch (error) {
-        console.error(error);
-        setLoading(false);
-      }
+    const handleFetchConnectRequest = () => {
+      setLoading(true);
+      fetchConnectRequest().finally(() => setLoading(false));
    };

    handleFetchConnectRequest();
@ -343,8 +366,7 @@ const CustodyPage = () => {
          {selectError}
        </Text>
      )}
-
-      {!accounts && !selectedCustodianType ? (
+      {!accounts && !selectedCustodianType && (
        <Box
          padding={4}
          display={Display.Flex}
@ -383,7 +405,7 @@ const CustodyPage = () => {
            <ul width={BlockSize.Full}>{custodianButtons}</ul>
          </Box>
        </Box>
-      ) : null}
+      )}
      {!accounts && selectedCustodianType && (
        <>
          <Box
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@ -107,8 +107,9 @@ import { getPermissionSubjects } from './permissions';
 export function isNetworkLoading(state) {
  const selectedNetworkClientId = getSelectedNetworkClientId(state);
  return (
+    selectedNetworkClientId &&
    state.metamask.networksMetadata[selectedNetworkClientId].status !==
-    NetworkStatus.Available
+      NetworkStatus.Available
  );
 }

--- a/yarn.lock
+++ b/yarn.lock
@ -3648,16 +3648,16 @@ __metadata:
  languageName: node
  linkType: hard

-"@metamask-institutional/custody-controller@npm:^0.2.8":
-  version: 0.2.8
-  resolution: "@metamask-institutional/custody-controller@npm:0.2.8"
+"@metamask-institutional/custody-controller@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@metamask-institutional/custody-controller@npm:0.2.9"
  dependencies:
    "@ethereumjs/util": "npm:^8.0.5"
-    "@metamask-institutional/custody-keyring": "npm:^0.0.25"
+    "@metamask-institutional/custody-keyring": "npm:^0.0.26"
    "@metamask-institutional/sdk": "npm:^0.1.18"
    "@metamask-institutional/types": "npm:^1.0.3"
    "@metamask/obs-store": "npm:^8.0.0"
-  checksum: b10fb2f4f5d23e6f28a3606ba5cdf73e140537e061b5532d61283f4fd85faf334cfa94663d101a6323b8149656b4294d027fc3be0e56c9654738ec6c68c7e461
+  checksum: b59a49b42d51c8b8eced77c06e4398afacb0e6c47b7757b3df7c0cacbb77656f12c0e681cf3e71760363ea95e7d8c167a9146b5573c0bed220a466572e739080
  languageName: node
  linkType: hard

@ -3693,20 +3693,36 @@ __metadata:
  languageName: node
  linkType: hard

-"@metamask-institutional/extension@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "@metamask-institutional/extension@npm:0.2.1"
+"@metamask-institutional/custody-keyring@npm:^0.0.26":
+  version: 0.0.26
+  resolution: "@metamask-institutional/custody-keyring@npm:0.0.26"
+  dependencies:
+    "@ethereumjs/tx": "npm:^4.1.1"
+    "@ethereumjs/util": "npm:^8.0.5"
+    "@metamask-institutional/configuration-client": "npm:^1.0.6"
+    "@metamask-institutional/sdk": "npm:^0.1.18"
+    "@metamask-institutional/types": "npm:^1.0.3"
+    "@metamask/obs-store": "npm:^8.0.0"
+    crypto: "npm:^1.0.1"
+    lodash.clonedeep: "npm:^4.5.0"
+  checksum: c2163fc6b83b3c0dd5c5a7c69c71f5a2563a28ffb2df069b4ed16c56692872fb52b40aed911e1af30a0fee733a61d0239677df04d5da945c7f4cf5e003eff8d9
+  languageName: node
+  linkType: hard
+
+"@metamask-institutional/extension@npm:0.3.2":
+  version: 0.3.2
+  resolution: "@metamask-institutional/extension@npm:0.3.2"
  dependencies:
    "@ethereumjs/util": "npm:^8.0.5"
-    "@metamask-institutional/custody-controller": "npm:^0.2.8"
-    "@metamask-institutional/custody-keyring": "npm:^0.0.25"
+    "@metamask-institutional/custody-controller": "npm:^0.2.9"
+    "@metamask-institutional/custody-keyring": "npm:^0.0.26"
    "@metamask-institutional/portfolio-dashboard": "npm:^1.4.0"
    "@metamask-institutional/sdk": "npm:^0.1.18"
-    "@metamask-institutional/transaction-update": "npm:^0.1.23"
+    "@metamask-institutional/transaction-update": "npm:^0.1.24"
    "@metamask-institutional/types": "npm:^1.0.3"
    jest-create-mock-instance: "npm:^2.0.0"
    jest-fetch-mock: "npm:3.0.3"
-  checksum: 28c80a016d49d41b8ad74732637da00f9bbabc64af1ec7b8704a03bfe809f4683502b3552646c49c478613f27f16becd981c68abc37244186688e4c170c3f991
+  checksum: f3fe93a1f2872e2f27b56af3e03b0aba90bb290cb7b800bed086db16e56bd9251e99eb7f46fd142e1ccb588f13d24a9379a23dbd778e8a0e83e5dbf7c11692a7
  languageName: node
  linkType: hard

@ -3756,17 +3772,17 @@ __metadata:
  languageName: node
  linkType: hard

-"@metamask-institutional/transaction-update@npm:^0.1.21, @metamask-institutional/transaction-update@npm:^0.1.23":
-  version: 0.1.23
-  resolution: "@metamask-institutional/transaction-update@npm:0.1.23"
+"@metamask-institutional/transaction-update@npm:^0.1.21, @metamask-institutional/transaction-update@npm:^0.1.24":
+  version: 0.1.24
+  resolution: "@metamask-institutional/transaction-update@npm:0.1.24"
  dependencies:
-    "@metamask-institutional/custody-keyring": "npm:^0.0.25"
+    "@metamask-institutional/custody-keyring": "npm:^0.0.26"
    "@metamask-institutional/sdk": "npm:^0.1.18"
    "@metamask-institutional/types": "npm:^1.0.3"
-    "@metamask-institutional/websocket-client": "npm:^0.1.25"
+    "@metamask-institutional/websocket-client": "npm:^0.1.26"
    "@metamask/obs-store": "npm:^8.0.0"
    ethereumjs-util: "npm:^7.1.5"
-  checksum: 621ff8277fecf73c59e3bde74364f1f4b68c7e086caf20bfb01029c43ff9145c51ca5acd89c10204c56e820837fb7736d2968d3bc1b30f3c215061a162d4d74c
+  checksum: d767d61600101ca3c580e3eeb9133d1a9d0753fd6190a830f798142074ff0e69142c567094dfb46062a299ee53b69db47021014e015db8c0fa55038bcdca7ca1
  languageName: node
  linkType: hard

@ -3777,15 +3793,15 @@ __metadata:
  languageName: node
  linkType: hard

-"@metamask-institutional/websocket-client@npm:^0.1.25":
-  version: 0.1.25
-  resolution: "@metamask-institutional/websocket-client@npm:0.1.25"
+"@metamask-institutional/websocket-client@npm:^0.1.26":
+  version: 0.1.26
+  resolution: "@metamask-institutional/websocket-client@npm:0.1.26"
  dependencies:
-    "@metamask-institutional/custody-keyring": "npm:^0.0.25"
+    "@metamask-institutional/custody-keyring": "npm:^0.0.26"
    "@metamask-institutional/sdk": "npm:^0.1.18"
    "@metamask-institutional/types": "npm:^1.0.3"
    mock-socket: "npm:^9.2.1"
-  checksum: b0ab0b17974e83b3c13e7a7a687b9dc254606f7120685602a832271ae16c46ce257820f0af8e0f74c8fa2a82bdc20e00534c9f43beae139b6def9df7b7a8063d
+  checksum: ae2b5146c4922a76100d8348a7b22dacc5d43cda3f2be92dda24251082061462dab327059793b7b61b4d7c4270e7b7fd40c0da8feac0bcf7805e18c5f2bc6db9
  languageName: node
  linkType: hard

@ -24224,7 +24240,7 @@ __metadata:
    "@material-ui/core": "npm:^4.11.0"
    "@metamask-institutional/custody-controller": "npm:0.2.6"
    "@metamask-institutional/custody-keyring": "npm:^0.0.25"
-    "@metamask-institutional/extension": "npm:^0.2.1"
+    "@metamask-institutional/extension": "npm:0.3.2"
    "@metamask-institutional/institutional-features": "npm:^1.1.8"
    "@metamask-institutional/portfolio-dashboard": "npm:^1.1.3"
    "@metamask-institutional/rpc-allowlist": "npm:^1.0.0"