{children || null}
+ {hasDuplicateContacts(addressBook, internalAccounts)
+ ? this.renderDuplicateContactWarning()
+ : null}
{searchForRecents ? this.renderRecents() : null}
{searchForContacts ? this.renderAddressBook() : null}
{searchForMyAccounts ? this.renderMyAccounts() : null}
diff --git a/ui/components/app/contact-list/contact-list.test.js b/ui/components/app/contact-list/contact-list.test.js
index 6d0a990cb08c..1beecc17e0fa 100644
--- a/ui/components/app/contact-list/contact-list.test.js
+++ b/ui/components/app/contact-list/contact-list.test.js
@@ -1,6 +1,8 @@
import React from 'react';
import configureMockStore from 'redux-mock-store';
import { renderWithProvider } from '../../../../test/jest/rendering';
+import { MOCK_ADDRESS_BOOK } from '../../../../test/data/mock-data';
+import { createMockInternalAccount } from '../../../../test/jest/mocks';
import ContactList from '.';
describe('Contact List', () => {
@@ -8,6 +10,48 @@ describe('Contact List', () => {
metamask: {},
});
+ const mockInternalAccounts = [createMockInternalAccount()];
+
+ it('displays the warning banner when multiple contacts have the same name', () => {
+ const mockAddressBook = [...MOCK_ADDRESS_BOOK, MOCK_ADDRESS_BOOK[0]]; // Adding duplicate contact
+
+ const { getByText } = renderWithProvider(
+
,
+ store,
+ );
+
+ const duplicateContactBanner = getByText('You have duplicate contacts');
+
+ expect(duplicateContactBanner).toBeVisible();
+ });
+
+ it('displays the warning banner when contact has same name as an existing account', () => {
+ const mockContactWithAccountName = {
+ address: '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+ chainId: '0x1',
+ isEns: false,
+ memo: '',
+ name: mockInternalAccounts[0].metadata.name,
+ };
+
+ const mockAddressBook = [...MOCK_ADDRESS_BOOK, mockContactWithAccountName];
+
+ const { getByText } = renderWithProvider(
+
,
+ store,
+ );
+
+ const duplicateContactBanner = getByText('You have duplicate contacts');
+
+ expect(duplicateContactBanner).toBeVisible();
+ });
+
describe('given searchForContacts', () => {
const selectRecipient = () => null;
const selectedAddress = null;
@@ -37,6 +81,8 @@ describe('Contact List', () => {
searchForContacts={() => contacts}
selectRecipient={selectRecipient}
selectedAddress={selectedAddress}
+ addressBook={MOCK_ADDRESS_BOOK}
+ internalAccounts={mockInternalAccounts}
/>,
store,
);
diff --git a/ui/components/app/contact-list/recipient-group/recipient-group.component.js b/ui/components/app/contact-list/recipient-group/recipient-group.component.js
index 6bb0b4c30dd6..0788d29aaecd 100644
--- a/ui/components/app/contact-list/recipient-group/recipient-group.component.js
+++ b/ui/components/app/contact-list/recipient-group/recipient-group.component.js
@@ -7,12 +7,13 @@ export default function RecipientGroup({ items, onSelect }) {
return null;
}
- return items.map(({ address, name }) => (
+ return items.map(({ address, name, isDuplicate }) => (
onSelect(address, name)}
key={address}
+ isDuplicate={isDuplicate}
/>
));
}
diff --git a/ui/components/app/contact-list/utils.ts b/ui/components/app/contact-list/utils.ts
new file mode 100644
index 000000000000..4254988e4af6
--- /dev/null
+++ b/ui/components/app/contact-list/utils.ts
@@ -0,0 +1,61 @@
+import { AddressBookEntry } from '@metamask/address-book-controller';
+import { InternalAccount } from '@metamask/keyring-api';
+
+export const buildDuplicateContactMap = (
+ addressBook: AddressBookEntry[],
+ internalAccounts: InternalAccount[],
+) => {
+ const contactMap = new Map(
+ internalAccounts.map((account) => [
+ account.metadata.name.trim().toLowerCase(),
+ [`account-id-${account.id}`],
+ ]),
+ );
+
+ addressBook.forEach((entry) => {
+ const { name, address } = entry;
+
+ const sanitizedName = name.trim().toLowerCase();
+
+ const currentArray = contactMap.get(sanitizedName) ?? [];
+ currentArray.push(address);
+
+ contactMap.set(sanitizedName, currentArray);
+ });
+
+ return contactMap;
+};
+
+export const hasDuplicateContacts = (
+ addressBook: AddressBookEntry[],
+ internalAccounts: InternalAccount[],
+) => {
+ const uniqueContactNames = Array.from(
+ new Set(addressBook.map(({ name }) => name.toLowerCase().trim())),
+ );
+
+ const hasAccountNameCollision = internalAccounts.some((account) =>
+ uniqueContactNames.includes(account.metadata.name.toLowerCase().trim()),
+ );
+
+ return (
+ uniqueContactNames.length !== addressBook.length || hasAccountNameCollision
+ );
+};
+
+export const isDuplicateContact = (
+ addressBook: AddressBookEntry[],
+ internalAccounts: InternalAccount[],
+ newName: string,
+) => {
+ const nameExistsInAddressBook = addressBook.some(
+ ({ name }) => name.toLowerCase().trim() === newName.toLowerCase().trim(),
+ );
+
+ const nameExistsInAccountList = internalAccounts.some(
+ ({ metadata }) =>
+ metadata.name.toLowerCase().trim() === newName.toLowerCase().trim(),
+ );
+
+ return nameExistsInAddressBook || nameExistsInAccountList;
+};
diff --git a/ui/components/multichain/address-list-item/__snapshots__/address-list-item.test.tsx.snap b/ui/components/multichain/address-list-item/__snapshots__/address-list-item.test.tsx.snap
index 8d840ba595ce..c3895c50d76a 100644
--- a/ui/components/multichain/address-list-item/__snapshots__/address-list-item.test.tsx.snap
+++ b/ui/components/multichain/address-list-item/__snapshots__/address-list-item.test.tsx.snap
@@ -1,6 +1,106 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`AddressListItem renders the address and label 1`] = `
+exports[`AddressListItem displays duplicate contact warning icon 1`] = `
+
+`;
+
+exports[`AddressListItem renders the address and label without duplicate contact warning icon 1`] = `
@@ -152,9 +173,9 @@ export default class AddContact extends PureComponent {
address={resolvedAddress}
domainName={addressBookEntryName ?? domainName}
onClick={() => {
+ this.handleNameChange(domainName);
this.setState({
input: resolvedAddress,
- newName: this.state.newName || domainName,
});
this.props.resetDomainResolution();
}}
@@ -164,9 +185,9 @@ export default class AddContact extends PureComponent {
);
})}
- {t(errorToRender)}
+ {t(addressError)}
)}
@@ -174,7 +195,10 @@ export default class AddContact extends PureComponent {