diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js --- a/web/settings/relationship/add-users-list.react.js +++ b/web/settings/relationship/add-users-list.react.js @@ -7,6 +7,7 @@ updateRelationshipsActionTypes, } from 'lib/actions/relationship-actions.js'; import { searchUsers } from 'lib/actions/user-actions.js'; +import { useENSNames } from 'lib/hooks/ens-cache'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js'; import type { @@ -161,33 +162,35 @@ [pendingUsersToAdd], ); + const pendingUsersWithENSNames = useENSNames(pendingUsersToAdd); const userTags = React.useMemo(() => { - if (pendingUsersToAdd.length === 0) { + if (pendingUsersWithENSNames.length === 0) { return null; } - const tags = pendingUsersToAdd.map(userInfo => ( + const tags = pendingUsersWithENSNames.map(userInfo => ( )); return
{tags}
; - }, [deselectUser, pendingUsersToAdd]); + }, [deselectUser, pendingUsersWithENSNames]); const filteredUsers = React.useMemo( () => sortedUsers.filter(userInfo => !pendingUserIDs.has(userInfo.id)), [pendingUserIDs, sortedUsers], ); + const filteredUsersWithENSNames = useENSNames(filteredUsers); const userRows = React.useMemo( () => - filteredUsers.map(userInfo => ( + filteredUsersWithENSNames.map(userInfo => ( )), - [filteredUsers, selectUser], + [filteredUsersWithENSNames, selectUser], ); const [errorMessage, setErrorMessage] = React.useState(''); diff --git a/web/settings/relationship/user-list.react.js b/web/settings/relationship/user-list.react.js --- a/web/settings/relationship/user-list.react.js +++ b/web/settings/relationship/user-list.react.js @@ -3,6 +3,7 @@ import classNames from 'classnames'; import * as React from 'react'; +import { useENSNames } from 'lib/hooks/ens-cache'; import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors'; import type { AccountUserInfo } from 'lib/types/user-types'; @@ -53,17 +54,18 @@ } return unfilteredUserInfos.filter(filterUser).sort(usersComparator); }, [filterUser, searchResult, searchText, userInfos, usersComparator]); + const usersWithENSNames = useENSNames(users); const userRows = React.useMemo(() => { const UserRow = userRowComponent; - return users.map(user => ( + return usersWithENSNames.map(user => ( )); - }, [userRowComponent, users, onMenuVisibilityChange]); + }, [userRowComponent, usersWithENSNames, onMenuVisibilityChange]); const containerClasses = classNames(css.container, { [css.noScroll]: isMenuVisible,