diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js index c4083f73e..d60e29ee5 100644 --- a/web/avatars/edit-user-avatar-menu.react.js +++ b/web/avatars/edit-user-avatar-menu.react.js @@ -1,158 +1,188 @@ // @flow 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/swmansion-icon.react.js'; import { useENSAvatar } from 'lib/hooks/ens-cache.js'; +import { useFarcasterAvatarURL } from 'lib/hooks/fc-cache.js'; import { getETHAddressForUserInfo } from 'lib/shared/account-utils.js'; +import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js'; import { useUploadAvatarMedia } from './avatar-hooks.react.js'; import css from './edit-avatar-menu.css'; import UserEmojiAvatarSelectionModal from './user-emoji-avatar-selection-modal.react.js'; import CommIcon from '../comm-icon.react.js'; import MenuItem from '../components/menu-item.react.js'; import Menu from '../components/menu.react.js'; import { allowedMimeTypeString } from '../media/file-utils.js'; import { useSelector } from '../redux/redux-utils.js'; const editIcon = (
); function EditUserAvatarMenu(): React.Node { const currentUserInfo = useSelector(state => state.currentUserInfo); + const currentUserFID = useCurrentUserFID(); const ethAddress: ?string = React.useMemo( () => getETHAddressForUserInfo(currentUserInfo), [currentUserInfo], ); const ensAvatarURI: ?string = useENSAvatar(ethAddress); + const farcasterAvatarURL = useFarcasterAvatarURL(currentUserFID); const editUserAvatarContext = React.useContext(EditUserAvatarContext); invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); const { baseSetUserAvatar } = editUserAvatarContext; const removeUserAvatar = React.useCallback( () => baseSetUserAvatar({ type: 'remove' }), [baseSetUserAvatar], ); const { pushModal } = useModalContext(); const openEmojiSelectionModal = React.useCallback( () => pushModal(), [pushModal], ); const emojiMenuItem = React.useMemo( () => ( ), [openEmojiSelectionModal], ); const imageInputRef = React.useRef(); const onImageMenuItemClicked = React.useCallback( () => imageInputRef.current?.click(), [], ); const uploadAvatarMedia = useUploadAvatarMedia(); const onImageSelected = React.useCallback( async (event: SyntheticEvent) => { const { target } = event; invariant(target instanceof HTMLInputElement, 'target not input'); const uploadResult = await uploadAvatarMedia(target.files[0]); await baseSetUserAvatar(uploadResult); }, [baseSetUserAvatar, uploadAvatarMedia], ); const imageMenuItem = React.useMemo( () => ( ), [onImageMenuItemClicked], ); const setENSUserAvatar = React.useCallback( () => baseSetUserAvatar({ type: 'ens' }), [baseSetUserAvatar], ); const ethereumIcon = React.useMemo( () => , [], ); const ensMenuItem = React.useMemo( () => ( ), [ethereumIcon, setENSUserAvatar], ); + const setFarcasterUserAvatar = React.useCallback( + () => baseSetUserAvatar({ type: 'farcaster' }), + [baseSetUserAvatar], + ); + + const farcasterIcon = React.useMemo( + () => , + [], + ); + + const farcasterMenuItem = React.useMemo( + () => ( + + ), + [farcasterIcon, setFarcasterUserAvatar], + ); const removeMenuItem = React.useMemo( () => ( ), [removeUserAvatar], ); const menuItems = React.useMemo(() => { const items = [emojiMenuItem, imageMenuItem]; if (ensAvatarURI) { items.push(ensMenuItem); } + if (farcasterAvatarURL) { + items.push(farcasterMenuItem); + } if (currentUserInfo?.avatar) { items.push(removeMenuItem); } return items; }, [ - currentUserInfo?.avatar, emojiMenuItem, + imageMenuItem, ensAvatarURI, + farcasterAvatarURL, + currentUserInfo?.avatar, ensMenuItem, - imageMenuItem, + farcasterMenuItem, removeMenuItem, ]); return (
{menuItems}
); } export default EditUserAvatarMenu;