diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js
--- a/web/avatars/edit-user-avatar-menu.react.js
+++ b/web/avatars/edit-user-avatar-menu.react.js
@@ -11,7 +11,7 @@
 
 import { useUploadAvatarMedia } from './avatar-hooks.react.js';
 import css from './edit-avatar-menu.css';
-import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js';
+import UserEmojiAvatarSelectionModal from './user-emoji-avatar-selection-modal.react.js';
 import CommIcon from '../CommIcon.react.js';
 import MenuItem from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
@@ -45,7 +45,7 @@
   const { pushModal } = useModalContext();
 
   const openEmojiSelectionModal = React.useCallback(
-    () => pushModal(<EmojiAvatarSelectionModal />),
+    () => pushModal(<UserEmojiAvatarSelectionModal />),
     [pushModal],
   );
 
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -2,17 +2,10 @@
 
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import invariant from 'invariant';
 import * as React from 'react';
 
-import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
-import {
-  defaultAnonymousUserEmojiAvatar,
-  getAvatarForUser,
-  getDefaultAvatar,
-} from 'lib/shared/avatar-utils.js';
 import type {
   ClientAvatar,
   ClientEmojiAvatar,
@@ -25,37 +18,30 @@
 import LoadingIndicator from '../loading-indicator.react.js';
 import Modal from '../modals/modal.react.js';
 import ColorSelector from '../modals/threads/color-selector.react.js';
-import { useSelector } from '../redux/redux-utils.js';
 
 type TabType = 'emoji' | 'color';
 
-function EmojiAvatarSelectionModal(): React.Node {
+type Props = {
+  +currentAvatar: ClientAvatar,
+  +defaultAvatar: ClientEmojiAvatar,
+  +setEmojiAvatar: (pendingEmojiAvatar: ClientEmojiAvatar) => Promise<void>,
+  +avatarSaveInProgress: boolean,
+};
+function EmojiAvatarSelectionModal(props: Props): React.Node {
   const { popModal } = useModalContext();
 
-  const editUserAvatarContext = React.useContext(EditUserAvatarContext);
-  invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
-
-  const { baseSetUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
+  const { currentAvatar, defaultAvatar, setEmojiAvatar, avatarSaveInProgress } =
+    props;
 
   const [updateAvatarStatus, setUpdateAvatarStatus] =
     React.useState<?('success' | 'failure')>();
 
-  const currentUserInfo = useSelector(state => state.currentUserInfo);
-  const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
-  const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
-    ? getDefaultAvatar(currentUserInfo.username)
-    : defaultAnonymousUserEmojiAvatar;
-
   const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState(
-    currentUserAvatar.type === 'emoji'
-      ? currentUserAvatar.emoji
-      : defaultUserAvatar.emoji,
+    currentAvatar.type === 'emoji' ? currentAvatar.emoji : defaultAvatar.emoji,
   );
 
   const [pendingAvatarColor, setPendingAvatarColor] = React.useState(
-    currentUserAvatar.type === 'emoji'
-      ? currentUserAvatar.color
-      : defaultUserAvatar.color,
+    currentAvatar.type === 'emoji' ? currentAvatar.color : defaultAvatar.color,
   );
 
   const pendingEmojiAvatar: ClientEmojiAvatar = React.useMemo(
@@ -79,16 +65,16 @@
 
   const onSaveAvatar = React.useCallback(async () => {
     try {
-      await baseSetUserAvatar(pendingEmojiAvatar);
+      await setEmojiAvatar(pendingEmojiAvatar);
       setUpdateAvatarStatus('success');
     } catch {
       setUpdateAvatarStatus('failure');
     }
-  }, [pendingEmojiAvatar, baseSetUserAvatar]);
+  }, [setEmojiAvatar, pendingEmojiAvatar]);
 
   let saveButtonContent;
   let buttonColor;
-  if (userAvatarSaveInProgress) {
+  if (avatarSaveInProgress) {
     buttonColor = buttonThemes.standard;
     saveButtonContent = <LoadingIndicator status="loading" size="medium" />;
   } else if (updateAvatarStatus === 'success') {
@@ -121,7 +107,7 @@
           <Avatar
             avatarInfo={pendingEmojiAvatar}
             size="profile"
-            showSpinner={userAvatarSaveInProgress}
+            showSpinner={avatarSaveInProgress}
           />
         </div>
         <Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
@@ -153,7 +139,7 @@
               variant="filled"
               buttonColor={buttonColor}
               onClick={onSaveAvatar}
-              disabled={userAvatarSaveInProgress}
+              disabled={avatarSaveInProgress}
             >
               <div className={css.saveAvatarButtonContent}>
                 {saveButtonContent}
diff --git a/web/avatars/user-emoji-avatar-selection-modal.react.js b/web/avatars/user-emoji-avatar-selection-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/avatars/user-emoji-avatar-selection-modal.react.js
@@ -0,0 +1,43 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
+import {
+  defaultAnonymousUserEmojiAvatar,
+  getAvatarForUser,
+  getDefaultAvatar,
+} from 'lib/shared/avatar-utils.js';
+import type {
+  ClientAvatar,
+  ClientEmojiAvatar,
+} from 'lib/types/avatar-types.js';
+
+import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js';
+import { useSelector } from '../redux/redux-utils.js';
+
+function UserEmojiAvatarSelectionModal(): React.Node {
+  const editUserAvatarContext = React.useContext(EditUserAvatarContext);
+  invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
+
+  const { baseSetUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
+
+  const currentUserInfo = useSelector(state => state.currentUserInfo);
+  const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
+
+  const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
+    ? getDefaultAvatar(currentUserInfo.username)
+    : defaultAnonymousUserEmojiAvatar;
+
+  return (
+    <EmojiAvatarSelectionModal
+      currentAvatar={currentUserAvatar}
+      defaultAvatar={defaultUserAvatar}
+      setEmojiAvatar={baseSetUserAvatar}
+      avatarSaveInProgress={userAvatarSaveInProgress}
+    />
+  );
+}
+
+export default UserEmojiAvatarSelectionModal;