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 (
);
}
export default EditUserAvatarMenu;