diff --git a/src/components/addresses/picker/AddressPicker.tsx b/src/components/addresses/picker/AddressPicker.tsx index 4b08d4f..7783f04 100644 --- a/src/components/addresses/picker/AddressPicker.tsx +++ b/src/components/addresses/picker/AddressPicker.tsx @@ -91,7 +91,8 @@ const hasExactAddress = !!cleanValue && !walletsOnly && isValidAddress(addressPrefix, cleanValue) - && !addressList.includes(cleanValue); + && !addressList.includes(cleanValue) + && !contactAddressList.includes(cleanValue); const exactAddressItem = hasExactAddress ? { ...getCategoryHeader(t("addressPicker.categoryExactAddress")), @@ -261,8 +262,8 @@ const inp = inputValue.toUpperCase(); const matchedAddress = address.indexOf(inp) !== -1; - const matchedLabel = walletLabel?.indexOf(inp) !== -1; - const matchedContactLabel = contactLabel?.indexOf(inp) !== -1; + const matchedLabel = walletLabel && walletLabel.indexOf(inp) !== -1; + const matchedContactLabel = contactLabel && contactLabel.indexOf(inp) !== -1; return matchedAddress || matchedLabel || matchedContactLabel; }} diff --git a/src/components/addresses/picker/Item.tsx b/src/components/addresses/picker/Item.tsx index 793deea..679d0c0 100644 --- a/src/components/addresses/picker/Item.tsx +++ b/src/components/addresses/picker/Item.tsx @@ -61,12 +61,14 @@ } /** Autocompletion option for the address picker. */ -export function getAddressItem(props: AddressItemProps): OptionValue { +export function getAddressItem(props: AddressItemProps, type?: string): OptionValue { // The address to use as a value const plainAddress = getPlainAddress(props); const { wallet, contact } = props; return { + key: `${type || "item"}-${plainAddress}`, + label: (
{/* Address, wallet label, contact label, or name */} diff --git a/src/components/addresses/picker/options.ts b/src/components/addresses/picker/options.ts index 9c9c231..30749bb 100644 --- a/src/components/addresses/picker/options.ts +++ b/src/components/addresses/picker/options.ts @@ -17,6 +17,7 @@ // basically anything for options, and passes the full objects down as props. // The documentation on the topic is very limited. export interface OptionValue { + key: string; label: React.ReactNode; // For some reason, all these props get passed all the way to the DOM element! @@ -73,7 +74,7 @@ const categorised: Record = {}; const uncategorised: OptionValue[] = []; const contactValues: OptionValue[] = Object.values(contacts) - .map(contact => getAddressItem({ contact })); + .map(contact => getAddressItem({ contact }, "contact")); // Go through all wallets and group them for (const id in wallets) { @@ -81,7 +82,7 @@ const { category } = wallet; // Generate the autocomplete option for this wallet - const item = getAddressItem({ wallet }); + const item = getAddressItem({ wallet }, "wallet"); // Group it by category if possible if (category) { diff --git a/src/components/transactions/TransactionItem.tsx b/src/components/transactions/TransactionItem.tsx index 9f003b1..ef0e4fd 100644 --- a/src/components/transactions/TransactionItem.tsx +++ b/src/components/transactions/TransactionItem.tsx @@ -47,7 +47,6 @@ const bps = Grid.useBreakpoint(); // Whether or not the from/to addresses are a wallet we own - // TODO: Address book here too const fromWallet = tx.from ? wallets[tx.from] : undefined; const toWallet = tx.to ? wallets[tx.to] : undefined;