diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js index a3988efad..7db0abe7b 100644 --- a/lib/shared/avatar-utils.js +++ b/lib/shared/avatar-utils.js @@ -1,356 +1,357 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import stringHash from 'string-hash'; import { selectedThreadColors } from './color-utils.js'; import { threadOtherMembers } from './thread-utils.js'; import genesis from '../facts/genesis.js'; import { useENSAvatar } from '../hooks/ens-cache.js'; import { threadInfoSelector } from '../selectors/thread-selectors.js'; import { getETHAddressForUserInfo } from '../shared/account-utils.js'; import type { ClientEmojiAvatar, ClientAvatar, ResolvedClientAvatar, GenericUserInfoWithAvatar, } from '../types/avatar-types.js'; import { threadTypes } from '../types/thread-types-enum.js'; import { type RawThreadInfo, type ThreadInfo } from '../types/thread-types.js'; import type { UserInfos } from '../types/user-types.js'; import { useSelector } from '../utils/redux-utils.js'; const defaultAnonymousUserEmojiAvatar: ClientEmojiAvatar = { color: selectedThreadColors[4], emoji: 'ðŸ‘Ī', type: 'emoji', }; const defaultEmojiAvatars: $ReadOnlyArray = [ { color: selectedThreadColors[0], emoji: '😀', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '😃', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '😄', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '😁', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '😆', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🙂', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '😉', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '😊', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '😇', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸĨ°', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '😍', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸĪĐ', type: 'emoji' }, { color: selectedThreadColors[3], emoji: 'ðŸĨģ', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '😝', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '😎', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🧐', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸĨļ', type: 'emoji' }, { color: selectedThreadColors[3], emoji: 'ðŸĪ—', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸ˜Ī', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸĪŊ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸĪ”', type: 'emoji' }, { color: selectedThreadColors[8], emoji: 'ðŸŦĄ', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸĪŦ', type: 'emoji' }, { color: selectedThreadColors[3], emoji: 'ðŸ˜Ū', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸ˜ē', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸĪ ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'ðŸĪ‘', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸ‘Đ‍🚀', type: 'emoji' }, { color: selectedThreadColors[2], emoji: 'ðŸĨ·', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸ‘ŧ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸ‘ū', type: 'emoji' }, { color: selectedThreadColors[2], emoji: 'ðŸĪ–', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '😚', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸ˜ļ', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸ˜đ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'ðŸ˜ŧ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸŽĐ', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '👑', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸķ', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸą', type: 'emoji' }, { color: selectedThreadColors[2], emoji: '🐭', type: 'emoji' }, { color: selectedThreadColors[3], emoji: 'ðŸđ', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🐰', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸŧ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🐞', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸŧ‍❄ïļ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'ðŸĻ', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸŊ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸĶ', type: 'emoji' }, { color: selectedThreadColors[2], emoji: 'ðŸļ', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🐔', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🐧', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸĶ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'ðŸĪ', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸĶ„', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🐝', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸĶ‹', type: 'emoji' }, { color: selectedThreadColors[5], emoji: '🐎', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸģ', type: 'emoji' }, { color: selectedThreadColors[2], emoji: '🐋', type: 'emoji' }, { color: selectedThreadColors[3], emoji: 'ðŸĶˆ', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸĶ­', type: 'emoji' }, { color: selectedThreadColors[5], emoji: '🐘', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'ðŸĶ›', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🐐', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🐓', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸĶƒ', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸĶĐ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸĶ”', type: 'emoji' }, { color: selectedThreadColors[2], emoji: '🐅', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '🐆', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸĶ“', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸĶ’', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'ðŸĶ˜', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🐎', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🐕', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸĐ', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸĶŪ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '🐈', type: 'emoji' }, { color: selectedThreadColors[2], emoji: 'ðŸĶš', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸĶœ', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸĶĒ', type: 'emoji' }, { color: selectedThreadColors[5], emoji: '🕊ïļ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🐇', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸĶĶ', type: 'emoji' }, { color: selectedThreadColors[8], emoji: 'ðŸŋïļ', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🐉', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸŒī', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸŒą', type: 'emoji' }, { color: selectedThreadColors[2], emoji: '☘ïļ', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '🍀', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🍄', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸŒŋ', type: 'emoji' }, { color: selectedThreadColors[8], emoji: 'ðŸŠī', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🍁', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '💐', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🌷', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸŒđ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸŒļ', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸŒŧ', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '⭐', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🌟', type: 'emoji' }, { color: selectedThreadColors[5], emoji: '🍏', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🍎', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🍐', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🍊', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🍋', type: 'emoji' }, { color: selectedThreadColors[0], emoji: '🍓', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸŦ', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '🍈', type: 'emoji' }, { color: selectedThreadColors[2], emoji: '🍒', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸĨ­', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🍍', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸĨ', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🍅', type: 'emoji' }, { color: selectedThreadColors[8], emoji: 'ðŸĨĶ', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸĨ•', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸĨ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸĨŊ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🍞', type: 'emoji' }, { color: selectedThreadColors[3], emoji: 'ðŸĨ–', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸĨĻ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🧀', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'ðŸĨž', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🧇', type: 'emoji' }, { color: selectedThreadColors[8], emoji: 'ðŸĨ“', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🍔', type: 'emoji' }, { color: selectedThreadColors[0], emoji: '🍟', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '🍕', type: 'emoji' }, { color: selectedThreadColors[2], emoji: 'ðŸĨ—', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '🍝', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🍜', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸē', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🍛', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸĢ', type: 'emoji' }, { color: selectedThreadColors[8], emoji: 'ðŸą', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸĨŸ', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸĪ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '🍙', type: 'emoji' }, { color: selectedThreadColors[2], emoji: '🍚', type: 'emoji' }, { color: selectedThreadColors[3], emoji: 'ðŸĨ', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸĶ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🧁', type: 'emoji' }, { color: selectedThreadColors[5], emoji: '🍭', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸĐ', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🍊', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '☕ïļ', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸĩ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'âš―ïļ', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🏀', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🏈', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'âšūïļ', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸĨŽ', type: 'emoji' }, { color: selectedThreadColors[8], emoji: 'ðŸŽū', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🏐', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🏉', type: 'emoji' }, { color: selectedThreadColors[3], emoji: 'ðŸŽą', type: 'emoji' }, { color: selectedThreadColors[0], emoji: '🏆', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸŽĻ', type: 'emoji' }, { color: selectedThreadColors[2], emoji: 'ðŸŽĪ', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '🎧', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🎞', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸŽđ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'ðŸĨ', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🎷', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🎚', type: 'emoji' }, { color: selectedThreadColors[9], emoji: 'ðŸŽļ', type: 'emoji' }, { color: selectedThreadColors[0], emoji: '🊕', type: 'emoji' }, { color: selectedThreadColors[1], emoji: 'ðŸŽŧ', type: 'emoji' }, { color: selectedThreadColors[2], emoji: 'ðŸŽē', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '♟ïļ', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸŽŪ', type: 'emoji' }, { color: selectedThreadColors[5], emoji: '🚗', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '🚙', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🚌', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🏎ïļ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'ðŸ›ŧ', type: 'emoji' }, { color: selectedThreadColors[0], emoji: '🚚', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🚛', type: 'emoji' }, { color: selectedThreadColors[2], emoji: '🚘', type: 'emoji' }, { color: selectedThreadColors[0], emoji: '🚀', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🚁', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸ›ķ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: 'â›ĩïļ', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸšĪ', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '⚓', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🏰', type: 'emoji' }, { color: selectedThreadColors[0], emoji: 'ðŸŽĄ', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '💎', type: 'emoji' }, { color: selectedThreadColors[2], emoji: 'ðŸ”Ū', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '💈', type: 'emoji' }, { color: selectedThreadColors[4], emoji: 'ðŸ§ļ', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🎊', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🎉', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'ðŸŠĐ', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🚂', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '🚆', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '🚊', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '🛰ïļ', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🏠', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '⛰ïļ', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🏔ïļ', type: 'emoji' }, { color: selectedThreadColors[5], emoji: 'ðŸ—ŧ', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🏛ïļ', type: 'emoji' }, { color: selectedThreadColors[7], emoji: 'â›Đïļ', type: 'emoji' }, { color: selectedThreadColors[8], emoji: 'ðŸ§ē', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🎁', type: 'emoji' }, ]; function getRandomDefaultEmojiAvatar(): ClientEmojiAvatar { const randomIndex = Math.floor(Math.random() * defaultEmojiAvatars.length); return defaultEmojiAvatars[randomIndex]; } function getDefaultAvatar(hashKey: string, color?: string): ClientEmojiAvatar { const avatarIndex = stringHash(hashKey) % defaultEmojiAvatars.length; return { ...defaultEmojiAvatars[avatarIndex], color: color ? color : defaultEmojiAvatars[avatarIndex].color, }; } function getAvatarForUser(user: ?GenericUserInfoWithAvatar): ClientAvatar { if (user?.avatar) { return user.avatar; } if (!user?.username) { return defaultAnonymousUserEmojiAvatar; } return getDefaultAvatar(user.username); } function getUserAvatarForThread( threadInfo: RawThreadInfo | ThreadInfo, viewerID: ?string, userInfos: UserInfos, ): ClientAvatar { if (threadInfo.type === threadTypes.PRIVATE) { invariant(viewerID, 'viewerID should be set for PRIVATE threads'); return getAvatarForUser(userInfos[viewerID]); } invariant( threadInfo.type === threadTypes.PERSONAL, 'threadInfo should be a PERSONAL type', ); const memberInfos = threadOtherMembers(threadInfo.members, viewerID) .map(member => userInfos[member.id] && userInfos[member.id]) .filter(Boolean); if (memberInfos.length === 0) { return defaultAnonymousUserEmojiAvatar; } return getAvatarForUser(memberInfos[0]); } function getAvatarForThread( thread: RawThreadInfo | ThreadInfo, containingThreadInfo: ?ThreadInfo, ): ClientAvatar { if (thread.avatar) { return thread.avatar; } if (containingThreadInfo && containingThreadInfo.id !== genesis.id) { return containingThreadInfo.avatar ? containingThreadInfo.avatar : getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color); } return getDefaultAvatar(thread.id, thread.color); } function useAvatarForThread(thread: RawThreadInfo | ThreadInfo): ClientAvatar { const containingThreadID = thread.containingThreadID; const containingThreadInfo = useSelector(state => containingThreadID ? threadInfoSelector(state)[containingThreadID] : null, ); return getAvatarForThread(thread, containingThreadInfo); } function useENSResolvedAvatar( avatarInfo: ClientAvatar, userInfo: ?GenericUserInfoWithAvatar, ): ResolvedClientAvatar { const ethAddress = React.useMemo( () => getETHAddressForUserInfo(userInfo), [userInfo], ); const ensAvatarURI = useENSAvatar(ethAddress); const resolvedAvatar = React.useMemo(() => { if (avatarInfo.type !== 'ens') { return avatarInfo; } if (ensAvatarURI) { return { type: 'image', uri: ensAvatarURI, }; } return defaultAnonymousUserEmojiAvatar; }, [ensAvatarURI, avatarInfo]); return resolvedAvatar; } export { + defaultAnonymousUserEmojiAvatar, defaultEmojiAvatars, getRandomDefaultEmojiAvatar, getDefaultAvatar, getAvatarForUser, getUserAvatarForThread, getAvatarForThread, useAvatarForThread, useENSResolvedAvatar, }; diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css new file mode 100644 index 000000000..33e98f95d --- /dev/null +++ b/web/avatars/emoji-avatar-selection-modal.css @@ -0,0 +1,11 @@ +div.modalBody { + display: flex; + flex-direction: column; + overflow: hidden; +} + +div.avatarContainer { + display: flex; + justify-content: center; + padding-top: 20px; +} diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js index 4869312f1..d86478c90 100644 --- a/web/avatars/emoji-avatar-selection-modal.react.js +++ b/web/avatars/emoji-avatar-selection-modal.react.js @@ -1,20 +1,64 @@ // @flow import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { + defaultAnonymousUserEmojiAvatar, + getAvatarForUser, + getDefaultAvatar, +} from 'lib/shared/avatar-utils.js'; +import type { + ClientAvatar, + ClientEmojiAvatar, +} from 'lib/types/avatar-types.js'; +import Avatar from './avatar.react.js'; +import css from './emoji-avatar-selection-modal.css'; import Modal from '../modals/modal.react.js'; +import { useSelector } from '../redux/redux-utils.js'; function EmojiAvatarSelectionModal(): React.Node { const { popModal } = useModalContext(); + + const currentUserInfo = useSelector(state => state.currentUserInfo); + const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo); + const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username + ? getDefaultAvatar(currentUserInfo.username) + : defaultAnonymousUserEmojiAvatar; + + // eslint-disable-next-line no-unused-vars + const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState( + currentUserAvatar.type === 'emoji' + ? currentUserAvatar.emoji + : defaultUserAvatar.emoji, + ); + + // eslint-disable-next-line no-unused-vars + const [pendingAvatarColor, setPendingAvatarColor] = React.useState( + currentUserAvatar.type === 'emoji' + ? currentUserAvatar.color + : defaultUserAvatar.color, + ); + + const pendingEmojiAvatar: ClientEmojiAvatar = React.useMemo( + () => ({ + type: 'emoji', + emoji: pendingAvatarEmoji, + color: pendingAvatarColor, + }), + [pendingAvatarColor, pendingAvatarEmoji], + ); + return ( - + +
+
+ +
+
+
); } export default EmojiAvatarSelectionModal;