fix: multichain account list item

shared/constants/multichain/assets.ts

@@ -0,0 +1,5 @@
+import { MultichainNetworks } from './networks';
+
+export const MULTICHAIN_NATIVE_CURRENCY_TO_CAIP19 = {
+  BTC: `${MultichainNetworks.BITCOIN}/slip44:0`,
+} as const;

ui/components/app/asset-list/asset-list.js

@@ -69,7 +69,7 @@ const AssetList = ({ onClickAsset }) => {
   const trackEvent = useContext(MetaMetricsContext);
   const balance = useSelector(getSelectedAccountCachedBalance);
   const balanceIsLoading = !balance;
-  const { address: selectedAddress } = useSelector(getSelectedAccount);
+  const selectedAccount = useSelector(getSelectedAccount);
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
@@ -102,7 +102,7 @@ const AssetList = ({ onClickAsset }) => {
   );
 
   const { tokensWithBalances, totalFiatBalance, loading } =
-    useAccountTotalFiatBalance(selectedAddress, shouldHideZeroBalanceTokens);
+    useAccountTotalFiatBalance(selectedAccount, shouldHideZeroBalanceTokens);
   tokensWithBalances.forEach((token) => {
     // token.string is the balance displayed in the TokenList UI
     token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);

ui/components/app/currency-input/currency-input.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { fireEvent, waitFor } from '@testing-library/react';
+import mockState from '../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { useIsOriginalNativeTokenSymbol } from '../../../hooks/useIsOriginalNativeTokenSymbol';
 import CurrencyInput from '.';
@@ -16,6 +17,7 @@ describe('CurrencyInput Component', () => {
 
   const mockStore = {
     metamask: {
+      ...mockState.metamask,
       currentCurrency: 'usd',
       currencyRates: {
         ETH: {

ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
+import mockState from '../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
 import {
   CHAIN_IDS,
@@ -9,7 +10,7 @@ import {
 import CancelTransactionGasFee from './cancel-transaction-gas-fee.component';
 
 describe('CancelTransactionGasFee Component', () => {
-  const mockState = {
+  const defaultState = {
     metamask: {
       providerConfig: {
         chainId: CHAIN_IDS.GOERLI,
@@ -20,10 +21,12 @@ describe('CancelTransactionGasFee Component', () => {
       preferences: {
         useNativeCurrencyAsPrimaryCurrency: false,
       },
+      completedOnboarding: true,
+      internalAccounts: mockState.metamask.internalAccounts,
     },
   };
 
-  const mockStore = configureMockStore()(mockState);
+  const mockStore = configureMockStore()(defaultState);
 
   it('should render', () => {
     const props = {

ui/components/app/nfts-tab/nfts-tab.js

@@ -64,12 +64,12 @@ export default function NftsTab() {
   );
 
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
-  const { address: selectedAddress } = useSelector(getSelectedAccount);
+  const selectedAccount = useSelector(getSelectedAccount);
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
   const { totalFiatBalance } = useAccountTotalFiatBalance(
-    selectedAddress,
+    selectedAccount,
     shouldHideZeroBalanceTokens,
   );
   const balanceIsZero = Number(totalFiatBalance) === 0;

ui/components/app/transaction-breakdown/transaction-breakdown.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { within } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/jest/rendering';
+import mockState from '../../../../test/data/mock-state.json';
 import {
   MAINNET_DISPLAY_NAME,
   NETWORK_TYPES,
@@ -31,6 +32,8 @@ describe('TransactionBreakdown', () => {
         nickname: MAINNET_DISPLAY_NAME,
         type: NETWORK_TYPES.MAINNET,
       },
+      internalAccounts: mockState.metamask.internalAccounts,
+      completedOnboarding: true,
     },
   });
 

ui/components/app/transaction-list/transaction-list.component.js

@@ -130,14 +130,14 @@ export default function TransactionList({
     nonceSortedCompletedTransactionsSelector,
   );
   const chainId = useSelector(getCurrentChainId);
-  const { address: selectedAddress } = useSelector(getSelectedAccount);
+  const selectedAccount = useSelector(getSelectedAccount);
 
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
   );
   const { totalFiatBalance } = useAccountTotalFiatBalance(
-    selectedAddress,
+    selectedAccount,
     shouldHideZeroBalanceTokens,
   );
   const balanceIsZero = Number(totalFiatBalance) === 0;
@@ -206,7 +206,8 @@ export default function TransactionList({
   const removeIncomingTxsButToAnotherAddress = (dateGroup) => {
     const isIncomingTxsButToAnotherAddress = (transaction) =>
       transaction.type === TransactionType.incoming &&
-      transaction.txParams.to.toLowerCase() !== selectedAddress.toLowerCase();
+      transaction.txParams.to.toLowerCase() !==
+        selectedAccount.address.toLowerCase();
 
     dateGroup.transactionGroups = dateGroup.transactionGroups.map(
       (transactionGroup) => {

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { EtherDenomination } from '../../../../shared/constants/common';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
@@ -10,12 +9,14 @@ import {
   getMultichainNativeCurrency,
   getMultichainCurrentNetwork,
 } from '../../../selectors/multichain';
+import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
 
 /* eslint-disable jsdoc/require-param-name */
 // eslint-disable-next-line jsdoc/require-param
 /** @param {PropTypes.InferProps<typeof UserPreferencedCurrencyDisplayPropTypes>>} */
 export default function UserPreferencedCurrencyDisplay({
   'data-testid': dataTestId,
+  account,
   ethNumberOfDecimals,
   fiatNumberOfDecimals,
   numberOfDecimals: propsNumberOfDecimals,
@@ -26,9 +27,16 @@ export default function UserPreferencedCurrencyDisplay({
   showCurrencySuffix,
   ...restProps
 }) {
-  const currentNetwork = useSelector(getMultichainCurrentNetwork);
-  const nativeCurrency = useSelector(getMultichainNativeCurrency);
+  const currentNetwork = useMultichainSelector(
+    getMultichainCurrentNetwork,
+    account,
+  );
+  const nativeCurrency = useMultichainSelector(
+    getMultichainNativeCurrency,
+    account,
+  );
   const { currency, numberOfDecimals } = useUserPreferencedCurrency(type, {
+    account,
     ethNumberOfDecimals,
     fiatNumberOfDecimals,
     numberOfDecimals: propsNumberOfDecimals,
@@ -56,6 +64,7 @@ export default function UserPreferencedCurrencyDisplay({
   return (
     <CurrencyDisplay
       {...restProps}
+      account={account}
       currency={currency}
       data-testid={dataTestId}
       numberOfDecimals={numberOfDecimals}
@@ -67,6 +76,7 @@ export default function UserPreferencedCurrencyDisplay({
 
 const UserPreferencedCurrencyDisplayPropTypes = {
   className: PropTypes.string,
+  account: PropTypes.object,
   'data-testid': PropTypes.string,
   prefix: PropTypes.string,
   value: PropTypes.string,

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
+import mockState from '../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import {
   MAINNET_DISPLAY_NAME,
@@ -10,8 +11,9 @@ import UserPreferencedCurrencyDisplay from '.';
 
 describe('UserPreferencedCurrencyDisplay Component', () => {
   describe('rendering', () => {
-    const mockState = {
+    const defaultState = {
       metamask: {
+        ...mockState.metamask,
         providerConfig: {
           chainId: CHAIN_IDS.MAINNET,
           nickname: MAINNET_DISPLAY_NAME,
@@ -23,7 +25,7 @@ describe('UserPreferencedCurrencyDisplay Component', () => {
         },
       },
     };
-    const mockStore = configureMockStore()(mockState);
+    const mockStore = configureMockStore()(defaultState);
     it('should match snapshot', () => {
       const { container } = renderWithProvider(
         <UserPreferencedCurrencyDisplay />,