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
@@ -4,9 +4,11 @@
import * as React from 'react';
import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import css from './edit-user-avatar-menu.css';
+import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js';
import MenuItem from '../components/menu-item.react.js';
import Menu from '../components/menu.react.js';
@@ -27,9 +29,23 @@
[setUserAvatar],
);
+ const { pushModal } = useModalContext();
+
+ const openEmojiSelectionModal = React.useCallback(
+ () => pushModal(),
+ [pushModal],
+ );
+
const emojiMenuItem = React.useMemo(
- () => ,
- [],
+ () => (
+
+ ),
+ [openEmojiSelectionModal],
);
const imageMenuItem = React.useMemo(
() => ,
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -0,0 +1,20 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import Modal from '../modals/modal.react.js';
+
+function EmojiAvatarSelectionModal(): React.Node {
+ const { popModal } = useModalContext();
+ return (
+
+ );
+}
+
+export default EmojiAvatarSelectionModal;