fix: support multichain in blockexplorer and qr code

app/scripts/lib/accounts/BalancesController.test.ts

@@ -21,6 +21,7 @@ const mockBtcAccount = createMockInternalAccount({
   name: 'Btc Account',
   // @ts-expect-error - account type may be btc or eth, mock file is not typed
   type: BtcAccountType.P2wpkh,
+  // @ts-expect-error - snap options is not typed and defaults to undefined
   snapOptions: {
     id: 'mock-btc-snap',
     name: 'mock-btc-snap',

shared/constants/multichain/networks.ts

@@ -21,6 +21,10 @@ export enum MultichainNetworks {
 
 export const BITCOIN_TOKEN_IMAGE_URL = './images/bitcoin-logo.svg';
 
+export const MULTICHAIN_NETWORK_TO_EXPLORER_URL = {
+  [MultichainNetworks.BITCOIN]: 'https://blockstream.info/address',
+} as const;
+
 export const MULTICHAIN_TOKEN_IMAGE_MAP = {
   [MultichainNetworks.BITCOIN]: BITCOIN_TOKEN_IMAGE_URL,
 } as const;
@@ -38,6 +42,8 @@ export const MULTICHAIN_PROVIDER_CONFIGS: Record<
     type: 'rpc',
     rpcPrefs: {
       imageUrl: MULTICHAIN_TOKEN_IMAGE_MAP[MultichainNetworks.BITCOIN],
+      blockExplorerUrl:
+        MULTICHAIN_NETWORK_TO_EXPLORER_URL[MultichainNetworks.BITCOIN],
     },
     isAddressCompatible: isBtcMainnetAddress,
   },

test/e2e/tests/dapp-interactions/block-explorer.spec.js

@@ -16,6 +16,16 @@ describe('Block Explorer', function () {
             providerConfig: {
               rpcPrefs: { blockExplorerUrl: 'https://etherscan.io/' },
             },
+            networkConfigurations: {
+              networkConfigurationId: {
+                chainId: '0x539',
+                nickname: 'Localhost 8545',
+                rpcUrl: 'http://localhost:8545',
+                ticker: 'ETHasdfasdf',
+                rpcPrefs: { blockExplorerUrl: 'https://etherscan.io/' },
+              },
+            },
+            selectedNetworkClientId: 'networkConfigurationId',
           })
           .build(),
         ganacheOptions: defaultGanacheOptions,
@@ -58,6 +68,16 @@ describe('Block Explorer', function () {
             providerConfig: {
               rpcPrefs: { blockExplorerUrl: 'https://etherscan.io/' },
             },
+            networkConfigurations: {
+              networkConfigurationId: {
+                chainId: '0x539',
+                nickname: 'Localhost 8545',
+                rpcUrl: 'http://localhost:8545',
+                ticker: 'ETHasdfasdf',
+                rpcPrefs: { blockExplorerUrl: 'https://etherscan.io/' },
+              },
+            },
+            selectedNetworkClientId: 'networkConfigurationId',
           })
           .withTokensControllerERC20()
           .build(),
@@ -108,6 +128,16 @@ describe('Block Explorer', function () {
             providerConfig: {
               rpcPrefs: { blockExplorerUrl: 'https://etherscan.io/' },
             },
+            networkConfigurations: {
+              networkConfigurationId: {
+                chainId: '0x539',
+                nickname: 'Localhost 8545',
+                rpcUrl: 'http://localhost:8545',
+                ticker: 'ETHasdfasdf',
+                rpcPrefs: { blockExplorerUrl: 'https://etherscan.io/' },
+              },
+            },
+            selectedNetworkClientId: 'networkConfigurationId',
           })
           .withTransactionControllerCompletedTransaction()
           .build(),

test/jest/mocks.js

@@ -175,7 +175,7 @@ export function createMockInternalAccount({
   name,
   type = EthAccountType.Eoa,
   keyringType = KeyringTypes.hd,
-  snapOptions,
+  snapOptions = undefined,
 } = {}) {
   let methods;
 

ui/components/app/modals/confirm-remove-account/__snapshots__/confirm-remove-account.test.js.snap

@@ -36,7 +36,7 @@ exports[`Confirm Remove Account should match snapshot 1`] = `
                 style="height: 32px; width: 32px; border-radius: 16px;"
               >
                 <div
-                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(24, 151, 242);"
+                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
                 >
                   <svg
                     height="32"
@@ -45,25 +45,25 @@ exports[`Confirm Remove Account should match snapshot 1`] = `
                     y="0"
                   >
                     <rect
-                      fill="#2362E1"
+                      fill="#18CDF2"
                       height="32"
-                      transform="translate(3.589330184792517 -5.334310623233522) rotate(458.4 16 16)"
+                      transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
                       width="32"
                       x="0"
                       y="0"
                     />
                     <rect
-                      fill="#F94301"
+                      fill="#035E56"
                       height="32"
-                      transform="translate(-15.363459289650208 7.992351635486631) rotate(268.8 16 16)"
+                      transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
                       width="32"
                       x="0"
                       y="0"
                     />
                     <rect
-                      fill="#FA7900"
+                      fill="#F26602"
                       height="32"
-                      transform="translate(-9.076254079301423 29.480015880683375) rotate(117.3 16 16)"
+                      transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
                       width="32"
                       x="0"
                       y="0"
@@ -98,13 +98,14 @@ exports[`Confirm Remove Account should match snapshot 1`] = `
             <span
               class="account_value"
             >
-              0x0...0
+              0x0D...E7bc
             </span>
           </div>
           <div
             class="confirm-remove-account__account__link"
           >
             <a
+              data-testid="explorer-link"
               rel="noopener noreferrer"
               target="_blank"
               title="View account on Etherscan"

ui/components/app/modals/confirm-remove-account/confirm-remove-account.component.js

@@ -1,33 +1,24 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { getAccountLink } from '@metamask/etherscan-link';
+import { isEvmAccountType } from '@metamask/keyring-api';
+import { getMultichainAccountLink } from '../../../../helpers/utils/multichain/blockExplorer';
 import Modal from '../../modal';
 import { addressSummary, getURLHostName } from '../../../../helpers/utils/util';
+import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address';
 import Identicon from '../../../ui/identicon';
 import { MetaMetricsEventCategory } from '../../../../../shared/constants/metametrics';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
+import {
+  InternalAccountPropType,
+  MultichainNetworkProptype,
+} from '../../../../selectors/multichain';
 
 export default class ConfirmRemoveAccount extends Component {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     removeAccount: PropTypes.func.isRequired,
-    account: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      address: PropTypes.string.isRequired,
-      metadata: PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        snap: PropTypes.shape({
-          id: PropTypes.string.isRequired,
-          name: PropTypes.string,
-          enabled: PropTypes.bool,
-        }),
-        keyring: PropTypes.shape({
-          type: PropTypes.string.isRequired,
-        }).isRequired,
-      }).isRequired,
-    }).isRequired,
-    chainId: PropTypes.string.isRequired,
-    rpcPrefs: PropTypes.object.isRequired,
+    account: InternalAccountPropType.isRequired,
+    network: MultichainNetworkProptype.isRequired,
   };
 
   static contextTypes = {
@@ -47,7 +38,9 @@ export default class ConfirmRemoveAccount extends Component {
 
   renderSelectedAccount() {
     const { t } = this.context;
-    const { account, rpcPrefs, chainId } = this.props;
+    const { account, network } = this.props;
+    const normalizedAddress = normalizeSafeAddress(account.address);
+
     return (
       <div className="confirm-remove-account__account">
         <div className="confirm-remove-account__account__identicon">
@@ -64,16 +57,20 @@ export default class ConfirmRemoveAccount extends Component {
             {t('publicAddress')}
           </span>
           <span className="account_value">
-            {addressSummary(account.address, 4, 4)}
+            {addressSummary(
+              normalizedAddress,
+              4,
+              4,
+              isEvmAccountType(account.type),
+            )}
           </span>
         </div>
         <div className="confirm-remove-account__account__link">
           <a
             onClick={() => {
-              const accountLink = getAccountLink(
+              const accountLink = getMultichainAccountLink(
                 account.address,
-                chainId,
-                rpcPrefs,
+                network,
               );
               this.context.trackEvent({
                 category: MetaMetricsEventCategory.Accounts,
@@ -91,6 +88,7 @@ export default class ConfirmRemoveAccount extends Component {
             target="_blank"
             rel="noopener noreferrer"
             title={t('etherscanView')}
+            data-testid="explorer-link"
           >
             <i
               className="fa fa-share-square"

ui/components/app/modals/confirm-remove-account/confirm-remove-account.container.js

@@ -1,17 +1,13 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
-import {
-  getCurrentChainId,
-  getRpcPrefsForCurrentProvider,
-} from '../../../../selectors';
 import { removeAccount } from '../../../../store/actions';
+import { getMultichainNetwork } from '../../../../selectors/multichain';
 import ConfirmRemoveAccount from './confirm-remove-account.component';
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   return {
-    chainId: getCurrentChainId(state),
-    rpcPrefs: getRpcPrefsForCurrentProvider(state),
+    network: getMultichainNetwork(state, ownProps.account),
   };
 };