diff --git a/web/settings/relationship/add-users-list-item.react.js b/web/settings/relationship/add-users-list-item.react.js
--- a/web/settings/relationship/add-users-list-item.react.js
+++ b/web/settings/relationship/add-users-list-item.react.js
@@ -3,19 +3,24 @@
 import classnames from 'classnames';
 import * as React from 'react';
 
-import type { AccountUserInfo } from 'lib/types/user-types.js';
-
 import css from './add-users-list.css';
 import UserAvatar from '../../avatars/user-avatar.react.js';
 import Checkbox from '../../components/checkbox.react.js';
 
-type Props = {
-  +userInfo: AccountUserInfo,
+export type BaseAddUserInfo = {
+  +id: string,
+  +username?: ?string,
+  +isViewer?: ?boolean,
+  ...
+};
+
+type Props<T: BaseAddUserInfo> = {
+  +userInfo: T,
   +userSelected: boolean,
   +onToggleUser: (userID: string) => mixed,
 };
 
-function AddUsersListItem(props: Props): React.Node {
+function AddUsersListItem<T: BaseAddUserInfo>(props: Props<T>): React.Node {
   const { userInfo, userSelected, onToggleUser } = props;
 
   const toggleUser = React.useCallback(
diff --git a/web/settings/relationship/add-users-list-modal.react.js b/web/settings/relationship/add-users-list-modal.react.js
--- a/web/settings/relationship/add-users-list-modal.react.js
+++ b/web/settings/relationship/add-users-list-modal.react.js
@@ -18,6 +18,7 @@
 import { useAddUsersListContext } from './add-users-list-provider.react.js';
 import css from './add-users-list.css';
 import AddUsersList from './add-users-list.react.js';
+import { useUserRelationshipUserInfos } from './add-users-utils.js';
 import type { ButtonColor } from '../../components/button.react.js';
 import Button from '../../components/button.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
@@ -28,6 +29,36 @@
   updateRelationshipsActionTypes,
 );
 
+type AddUsersListModalContentProps = {
+  +searchText: string,
+  +excludedStatuses: $ReadOnlySet<UserRelationshipStatus>,
+};
+
+function AddUsersListModalContent(
+  props: AddUsersListModalContentProps,
+): React.Node {
+  const { searchText, excludedStatuses } = props;
+
+  const { mergedUserInfos, sortedUsersWithENSNames } =
+    useUserRelationshipUserInfos({
+      searchText,
+      excludedStatuses,
+    });
+
+  const addUsersListModalContent = React.useMemo(
+    () => (
+      <AddUsersList
+        searchModeActive={searchText.length > 0}
+        userInfos={mergedUserInfos}
+        sortedUsersWithENSNames={sortedUsersWithENSNames}
+      />
+    ),
+    [mergedUserInfos, searchText.length, sortedUsersWithENSNames],
+  );
+
+  return addUsersListModalContent;
+}
+
 type Props = {
   +name: string,
   +excludedStatuses: $ReadOnlySet<UserRelationshipStatus>,
@@ -51,7 +82,7 @@
 
   const addUsersListChildGenerator = React.useCallback(
     (searchText: string) => (
-      <AddUsersList
+      <AddUsersListModalContent
         searchText={searchText}
         excludedStatuses={excludedStatuses}
       />
diff --git a/web/settings/relationship/add-users-list-provider.react.js b/web/settings/relationship/add-users-list-provider.react.js
--- a/web/settings/relationship/add-users-list-provider.react.js
+++ b/web/settings/relationship/add-users-list-provider.react.js
@@ -4,15 +4,14 @@
 import * as React from 'react';
 
 import type { SetState } from 'lib/types/hook-types.js';
-import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+
+import type { BaseAddUserInfo } from './add-users-list-item.react.js';
 
 export type AddUsersListContextType = {
-  +pendingUsersToAdd: $ReadOnlyMap<string, GlobalAccountUserInfo>,
-  +setPendingUsersToAdd: SetState<$ReadOnlyMap<string, GlobalAccountUserInfo>>,
-  +previouslySelectedUsers: $ReadOnlyMap<string, GlobalAccountUserInfo>,
-  +setPreviouslySelectedUsers: SetState<
-    $ReadOnlyMap<string, GlobalAccountUserInfo>,
-  >,
+  +pendingUsersToAdd: $ReadOnlyMap<string, BaseAddUserInfo>,
+  +setPendingUsersToAdd: SetState<$ReadOnlyMap<string, BaseAddUserInfo>>,
+  +previouslySelectedUsers: $ReadOnlyMap<string, BaseAddUserInfo>,
+  +setPreviouslySelectedUsers: SetState<$ReadOnlyMap<string, BaseAddUserInfo>>,
   +errorMessage: string,
   +setErrorMessage: SetState<string>,
 };
@@ -27,10 +26,10 @@
   const { children } = props;
 
   const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
-    $ReadOnlyMap<string, GlobalAccountUserInfo>,
+    $ReadOnlyMap<string, BaseAddUserInfo>,
   >(new Map());
   const [previouslySelectedUsers, setPreviouslySelectedUsers] = React.useState<
-    $ReadOnlyMap<string, GlobalAccountUserInfo>,
+    $ReadOnlyMap<string, BaseAddUserInfo>,
   >(new Map());
   const [errorMessage, setErrorMessage] = React.useState<string>('');
 
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
@@ -3,22 +3,25 @@
 import * as React from 'react';
 
 import { useSortedENSResolvedUsers } from 'lib/hooks/ens-cache.js';
-import type { UserRelationshipStatus } from 'lib/types/relationship-types.js';
-import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
+import { stringForUser } from 'lib/shared/user-utils.js';
 
-import AddUsersListItem from './add-users-list-item.react.js';
+import AddUsersListItem, {
+  type BaseAddUserInfo,
+} from './add-users-list-item.react.js';
 import { useAddUsersListContext } from './add-users-list-provider.react.js';
 import css from './add-users-list.css';
-import { useUserRelationshipUserInfos } from './add-users-utils.js';
 import Button from '../../components/button.react.js';
 
-type Props = {
-  +searchText: string,
-  +excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
+type Props<T: BaseAddUserInfo> = {
+  +searchModeActive: boolean,
+  +userInfos: {
+    [string]: T,
+  },
+  +sortedUsersWithENSNames: $ReadOnlyArray<T>,
 };
 
-function AddUsersList(props: Props): React.Node {
-  const { searchText, excludedStatuses = new Set() } = props;
+function AddUsersList<T: BaseAddUserInfo>(props: Props<T>): React.Node {
+  const { searchModeActive, userInfos, sortedUsersWithENSNames } = props;
 
   const {
     pendingUsersToAdd,
@@ -28,8 +31,6 @@
     errorMessage,
   } = useAddUsersListContext();
 
-  const searchModeActive = searchText.length > 0;
-
   React.useEffect(() => {
     setPreviouslySelectedUsers(pendingUsersToAdd);
 
@@ -37,12 +38,6 @@
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchModeActive]);
 
-  const { mergedUserInfos, sortedUsersWithENSNames } =
-    useUserRelationshipUserInfos({
-      searchText,
-      excludedStatuses,
-    });
-
   const previouslySelectedUsersList = React.useMemo(
     () => Array.from(previouslySelectedUsers.values()),
     [previouslySelectedUsers],
@@ -58,10 +53,9 @@
         }
 
         if (!previouslySelectedUsers.has(userID)) {
-          const newPendingUser: GlobalAccountUserInfo = {
+          const newPendingUser: BaseAddUserInfo = {
             id: userID,
-            username: mergedUserInfos[userID].username,
-            avatar: mergedUserInfos[userID].avatar,
+            username: stringForUser(userInfos[userID]),
           };
 
           newPendingUsers.set(userID, newPendingUser);
@@ -75,7 +69,7 @@
         return newPendingUsers;
       });
     },
-    [mergedUserInfos, setPendingUsersToAdd, previouslySelectedUsers],
+    [userInfos, setPendingUsersToAdd, previouslySelectedUsers],
   );
 
   const userRows = React.useMemo(