Merge branch 'main' into test/1848-refactor-walletview

app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap

@@ -334,7 +334,7 @@ exports[`AccountApproval should render correctly 1`] = `
               }
             }
           >
-            0xC496...a756
+            Account 2
           </Text>
           <Text
             accessibilityRole="text"

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.test.tsx

@@ -39,19 +39,6 @@ const mockInitialState = {
           '0x326836cc6cd09B5aa59B81A7F72F25FcC0136b95': '0x5',
         },
       },
-      PreferencesController: {
-        selectedAddress: MOCK_ADDRESS_1,
-        identities: {
-          [MOCK_ADDRESS_1]: {
-            address: MOCK_ADDRESS_1,
-            name: 'Account 1',
-          },
-          [MOCK_ADDRESS_2]: {
-            address: MOCK_ADDRESS_2,
-            name: 'Account 2',
-          },
-        },
-      },
       AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE,
     },
   },

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx

@@ -9,7 +9,6 @@ import {
   selectChainId,
   selectTicker,
 } from '../../../selectors/networkController';
-import { selectIdentities } from '../../../selectors/preferencesController';
 import { collectConfusables } from '../../../util/confusables';
 import { decodeTransferData } from '../../../util/transactions';
 import { doENSReverseLookup } from '../../../util/ENSUtils';
@@ -20,10 +19,13 @@ import useExistingAddress from '../../hooks/useExistingAddress';
 import { AddressFrom, AddressTo } from '../AddressInputs';
 import createStyles from './AccountFromToInfoCard.styles';
 import { AccountFromToInfoCardProps } from './AccountFromToInfoCard.types';
+import { selectInternalAccounts } from '../../../selectors/accountsController';
+import { toLowerCaseEquals } from '../../../util/general';
+import { RootState } from '../../../reducers';
 
 const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
   const {
-    identities,
+    internalAccounts,
     chainId,
     onPressFromAddressIcon,
     ticker,
@@ -33,7 +35,6 @@ const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
   const {
     transaction: { from: rawFromAddress, data, to },
     transactionTo,
-    transactionToName,
     transactionFromName,
     selectedAsset,
     ensRecipient,
@@ -56,50 +57,88 @@ const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
   );
 
   useEffect(() => {
-    if (!fromAddress) {
-      return;
-    }
-    if (transactionFromName) {
-      setFromAccountName(transactionFromName);
-      return;
-    }
-    (async () => {
+    const fetchFromAccountDetails = async () => {
+      if (!fromAddress) {
+        return;
+      }
+
+      if (transactionFromName) {
+        if (fromAccountName !== transactionFromName) {
+          setFromAccountName(transactionFromName);
+        }
+        return;
+      }
+
       const fromEns = await doENSReverseLookup(fromAddress, chainId);
       if (fromEns) {
-        setFromAccountName(fromEns);
+        if (fromAccountName !== fromEns) {
+          setFromAccountName(fromEns);
+        }
       } else {
-        const { name: fromName } = identities[fromAddress];
-        setFromAccountName(fromName);
+        const accountWithMatchingFromAddress = internalAccounts.find(
+          (account) => toLowerCaseEquals(account.address, fromAddress),
+        );
+
+        const newName = accountWithMatchingFromAddress
+          ? accountWithMatchingFromAddress.metadata.name
+          : fromAddress;
+
+        if (fromAccountName !== newName) {
+          setFromAccountName(newName);
+        }
       }
-    })();
-  }, [fromAddress, identities, transactionFromName, chainId]);
+    };
+
+    fetchFromAccountDetails();
+  }, [
+    fromAddress,
+    transactionFromName,
+    chainId,
+    internalAccounts,
+    fromAccountName,
+  ]);
 
   useEffect(() => {
-    if (existingToAddress) {
-      setToAccountName(existingToAddress?.name);
-      return;
-    }
-    (async () => {
+    const fetchAccountDetails = async () => {
+      if (existingToAddress) {
+        if (toAccountName !== existingToAddress.name) {
+          setToAccountName(existingToAddress.name);
+        }
+        return;
+      }
+
       const toEns = await doENSReverseLookup(toAddress, chainId);
       if (toEns) {
-        setToAccountName(toEns);
-      } else if (identities[toAddress]) {
-        const { name: toName } = identities[toAddress];
-        setToAccountName(toName);
+        if (toAccountName !== toEns) {
+          setToAccountName(toEns);
+        }
+      } else {
+        const accountWithMatchingToAddress = internalAccounts.find((account) =>
+          toLowerCaseEquals(account.address, toAddress),
+        );
+
+        const newName = accountWithMatchingToAddress
+          ? accountWithMatchingToAddress.metadata.name
+          : toAddress;
+
+        if (toAccountName !== newName) {
+          setToAccountName(newName);
+        }
       }
-    })();
-  }, [existingToAddress, identities, chainId, toAddress, transactionToName]);
+    };
+
+    fetchAccountDetails();
+  }, [existingToAddress, chainId, toAddress, internalAccounts, toAccountName]);
 
   useEffect(() => {
-    const accountNames =
-      (identities &&
-        Object.keys(identities).map((hash) => identities[hash].name)) ||
-      [];
+    const accountNames = internalAccounts.map(
+      (account) => account.metadata.name,
+    );
     const isOwnAccount = ensRecipient && accountNames.includes(ensRecipient);
     if (ensRecipient && !isOwnAccount) {
       setConfusableCollection(collectConfusables(ensRecipient));
     }
-  }, [identities, ensRecipient]);
+  }, [internalAccounts, ensRecipient]);
 
   useEffect(() => {
     let toAddr;
@@ -172,10 +211,8 @@ const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
   );
 };
 
-// TODO: Replace "any" with type
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mapStateToProps = (state: any) => ({
-  identities: selectIdentities(state),
+const mapStateToProps = (state: RootState) => ({
+  internalAccounts: selectInternalAccounts(state),
   chainId: selectChainId(state),
   ticker: selectTicker(state),
 });

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.types.tsx

@@ -1,9 +1,4 @@
-interface Identity {
-  address: string;
-  name: string;
-}
-
-type Identities = Record<string, Identity>;
+import { InternalAccount } from '@metamask/keyring-api';
 
 interface SelectedAsset {
   isETH: boolean;
@@ -26,7 +21,7 @@ export interface Transaction {
 }
 
 export interface AccountFromToInfoCardProps {
-  identities: Identities;
+  internalAccounts: InternalAccount[];
   chainId: string;
   onPressFromAddressIcon?: () => void;
   ticker?: string;

app/components/UI/AccountInfoCard/__snapshots__/index.test.tsx.snap

@@ -232,7 +232,7 @@ exports[`AccountInfoCard should match snapshot 1`] = `
           }
         }
       >
-        0xC495...D272
+        Account 1
       </Text>
       <Text
         accessibilityRole="text"

app/components/UI/AccountInfoCard/index.js

@@ -14,7 +14,6 @@ import {
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
 import { selectTicker } from '../../../selectors/networkController';
-import { selectIdentities } from '../../../selectors/preferencesController';
 import { fontStyles } from '../../../styles/common';
 import {
   getLabelTextByAddress,
@@ -32,6 +31,7 @@ import {
 } from '../../../util/transactions';
 import ApproveTransactionHeader from '../../Views/confirmations/components/ApproveTransactionHeader';
 import Identicon from '../Identicon';
+import { selectInternalAccounts } from '../../../selectors/accountsController';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -111,9 +111,9 @@ class AccountInfoCard extends PureComponent {
      */
     accounts: PropTypes.object,
     /**
-     * List of accounts from the PreferencesController
+     * List of accounts from the AccountsController
      */
-    identities: PropTypes.object,
+    internalAccounts: PropTypes.array,
     /**
      * A number that specifies the ETH/USD conversion rate
      */
@@ -142,7 +142,7 @@ class AccountInfoCard extends PureComponent {
   render() {
     const {
       accounts,
-      identities,
+      internalAccounts,
       conversionRate,
       currentCurrency,
       operation,
@@ -162,7 +162,7 @@ class AccountInfoCard extends PureComponent {
       ? hexToBN(accounts[fromAddress].balance)
       : 0;
     const balance = `${renderFromWei(weiBalance)} ${getTicker(ticker)}`;
-    const accountLabel = renderAccountName(fromAddress, identities);
+    const accountLabel = renderAccountName(fromAddress, internalAccounts);
     const address = renderShortAddress(fromAddress);
     const dollarBalance = showFiatBalance
       ? weiToFiat(weiBalance, conversionRate, currentCurrency, 2)?.toUpperCase()
@@ -248,7 +248,7 @@ class AccountInfoCard extends PureComponent {
 
 const mapStateToProps = (state) => ({
   accounts: selectAccounts(state),
-  identities: selectIdentities(state),
+  internalAccounts: selectInternalAccounts(state),
   conversionRate: selectConversionRate(state),
   currentCurrency: selectCurrentCurrency(state),
   ticker: selectTicker(state),

app/components/UI/AccountOverview/index.js

@@ -35,14 +35,17 @@ import AppConstants from '../../../core/AppConstants';
 import Engine from '../../../core/Engine';
 import { selectChainId } from '../../../selectors/networkController';
 import { selectCurrentCurrency } from '../../../selectors/currencyRateController';
-import { selectIdentities } from '../../../selectors/preferencesController';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
+import {
+  selectInternalAccounts,
+  selectSelectedInternalAccountChecksummedAddress,
+} from '../../../selectors/accountsController';
 import { createAccountSelectorNavDetails } from '../../Views/AccountSelector';
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
 import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
 import { isPortfolioUrl } from '../../../util/url';
+import { toLowerCaseEquals } from '../../../util/general';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -151,9 +154,9 @@ class AccountOverview extends PureComponent {
      */
     selectedAddress: PropTypes.string,
     /**
-    /* Identities object required to get account name
+    /* InternalAccounts object required to get account name
     */
-    identities: PropTypes.object,
+    internalAccounts: PropTypes.object,
     /**
      * Object that represents the selected account
      */
@@ -216,8 +219,8 @@ class AccountOverview extends PureComponent {
   input = React.createRef();
 
   componentDidMount = () => {
-    const { identities, selectedAddress, onRef } = this.props;
-    const accountLabel = renderAccountName(selectedAddress, identities);
+    const { internalAccounts, selectedAddress, onRef } = this.props;
+    const accountLabel = renderAccountName(selectedAddress, internalAccounts);
     this.setState({ accountLabel });
     onRef && onRef(this);
     InteractionManager.runAfterInteractions(() => {
@@ -241,16 +244,18 @@ class AccountOverview extends PureComponent {
   }
 
   setAccountLabel = () => {
-    const { selectedAddress, identities } = this.props;
+    const { selectedAddress, internalAccounts } = this.props;
     const { accountLabel } = this.state;
 
-    const lastAccountLabel = identities[selectedAddress].name;
+    const accountWithMatchingToAddress = internalAccounts.find((account) =>
+      toLowerCaseEquals(account.address, selectedAddress),
+    );
 
     Engine.setAccountLabel(
       selectedAddress,
       this.isAccountLabelDefined(accountLabel)
         ? accountLabel
-        : lastAccountLabel,
+        : accountWithMatchingToAddress.metadata.name,
     );
     this.setState({ accountLabelEditable: false });
   };
@@ -260,17 +265,17 @@ class AccountOverview extends PureComponent {
   };
 
   setAccountLabelEditable = () => {
-    const { identities, selectedAddress } = this.props;
-    const accountLabel = renderAccountName(selectedAddress, identities);
+    const { internalAccounts, selectedAddress } = this.props;
+    const accountLabel = renderAccountName(selectedAddress, internalAccounts);
     this.setState({ accountLabelEditable: true, accountLabel });
     setTimeout(() => {
       this.input && this.input.current && this.input.current.focus();
     }, 100);
   };
 
   cancelAccountLabelEdition = () => {
-    const { identities, selectedAddress } = this.props;
-    const accountLabel = renderAccountName(selectedAddress, identities);
+    const { internalAccounts, selectedAddress } = this.props;
+    const accountLabel = renderAccountName(selectedAddress, internalAccounts);
     this.setState({ accountLabelEditable: false, accountLabel });
   };
 
@@ -440,7 +445,7 @@ class AccountOverview extends PureComponent {
 
 const mapStateToProps = (state) => ({
   selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
-  identities: selectIdentities(state),
+  internalAccounts: selectInternalAccounts(state),
   currentCurrency: selectCurrentCurrency(state),
   chainId: selectChainId(state),
   browserTabs: state.browser.tabs,