diff --git a/lib/types/farcaster-types.js b/lib/types/farcaster-types.js index f8ab1a0c8..0bdf98f2e 100644 --- a/lib/types/farcaster-types.js +++ b/lib/types/farcaster-types.js @@ -1,29 +1,29 @@ // @flow // This is a message that the rendered webpage // (landing/connect-farcaster.react.js) uses to communicate back // to the React Native WebView that is rendering it // (native/components/farcaster-web-view.react.js) export type FarcasterWebViewMessage = | { +type: 'farcaster_url', +url: string, } | { +type: 'farcaster_data', +fid: string, }; -export type FarcasterUser = { +export type NeynarUserWithViewerContext = { +fid: number, +viewerContext: { +following: boolean, }, ... }; -export type FarcasterChannel = { +export type NeynarChannel = { +id: string, +name: string, ... }; diff --git a/lib/utils/neynar-client.js b/lib/utils/neynar-client.js index 83fccbc1a..caa0a65f6 100644 --- a/lib/utils/neynar-client.js +++ b/lib/utils/neynar-client.js @@ -1,190 +1,188 @@ // @flow import invariant from 'invariant'; import { getMessageForException } from './errors.js'; import type { - FarcasterChannel, - FarcasterUser, + NeynarChannel, + NeynarUserWithViewerContext, } from '../types/farcaster-types.js'; type FetchFollowersResponse = { +result: { - +users: $ReadOnlyArray, + +users: $ReadOnlyArray, +next: { +cursor: ?string, }, }, }; type FetchFollowedFarcasterChannelsResponse = { - +channels: $ReadOnlyArray, + +channels: $ReadOnlyArray, +next: { +cursor: ?string, }, }; type FetchFarcasterChannelByNameResponse = { - +channels: $ReadOnlyArray, + +channels: $ReadOnlyArray, }; const neynarBaseURL = 'https://api.neynar.com/'; const neynarURLs = { '1': `${neynarBaseURL}v1/farcaster/`, '2': `${neynarBaseURL}v2/farcaster/`, }; function getNeynarURL( apiVersion: string, apiCall: string, params: { [string]: string }, ): string { const neynarURL = neynarURLs[apiVersion]; invariant( neynarURL, `could not find Neynar URL for apiVersion ${apiVersion}`, ); return `${neynarURL}${apiCall}?${new URLSearchParams(params).toString()}`; } const fetchFollowerLimit = 150; const fetchFollowedChannelsLimit = 100; class NeynarClient { apiKey: string; constructor(apiKey: string) { this.apiKey = apiKey; } // We're using the term "friend" for a bidirectional follow async fetchFriendFIDs(fid: string): Promise { const fids = []; let paginationCursor = null; do { const params: { [string]: string } = { fid, viewerFid: fid, limit: fetchFollowerLimit.toString(), ...(paginationCursor ? { cursor: paginationCursor } : null), }; const url = getNeynarURL('1', 'followers', params); try { const response = await fetch(url, { method: 'GET', headers: { Accept: 'application/json', api_key: this.apiKey, }, }); const json: FetchFollowersResponse = await response.json(); const { users } = json.result; for (const user of users) { if (user.viewerContext.following) { fids.push(user.fid.toString()); } } paginationCursor = json.result.next.cursor; } catch (error) { console.log( 'Failed to fetch friend FIDs:', getMessageForException(error) ?? 'unknown', ); throw error; } } while (paginationCursor); return fids; } - async fetchFollowedFarcasterChannels( - fid: string, - ): Promise { + async fetchFollowedFarcasterChannels(fid: string): Promise { const farcasterChannels = []; let paginationCursor = null; do { const params: { [string]: string } = { fid, limit: fetchFollowedChannelsLimit.toString(), ...(paginationCursor ? { cursor: paginationCursor } : null), }; const url = getNeynarURL('2', 'user/channels', params); try { const response = await fetch(url, { method: 'GET', headers: { Accept: 'application/json', api_key: this.apiKey, }, }); const json: FetchFollowedFarcasterChannelsResponse = await response.json(); const { channels, next } = json; channels.forEach(channel => { farcasterChannels.push(channel); }); paginationCursor = next.cursor; } catch (error) { console.log( 'Failed to fetch followed Farcaster channels:', getMessageForException(error) ?? 'unknown', ); throw error; } } while (paginationCursor); return farcasterChannels; } async fetchFarcasterChannelByName( channelName: string, - ): Promise { + ): Promise { const params: { [string]: string } = { q: channelName, }; const url = getNeynarURL('2', 'channel/search', params); try { const response = await fetch(url, { method: 'GET', headers: { Accept: 'application/json', api_key: this.apiKey, }, }); const json: FetchFarcasterChannelByNameResponse = await response.json(); const { channels } = json; for (const channel of channels) { if (channel.name.toLowerCase() === channelName.toLowerCase()) { return channel; } } return null; } catch (error) { console.log( 'Failed to search Farcaster channel by name:', getMessageForException(error) ?? 'unknown', ); throw error; } } } export { NeynarClient }; diff --git a/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js b/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js index 95e3a1c07..85b1e8f03 100644 --- a/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js +++ b/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js @@ -1,255 +1,255 @@ // @flow import { useActionSheet } from '@expo/react-native-action-sheet'; import invariant from 'invariant'; import * as React from 'react'; import { View, Text, TouchableOpacity, Platform } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { createOrUpdateFarcasterChannelTagActionTypes, useCreateOrUpdateFarcasterChannelTag, } from 'lib/actions/community-actions.js'; import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js'; -import type { FarcasterChannel } from 'lib/types/farcaster-types.js'; +import type { NeynarChannel } from 'lib/types/farcaster-types.js'; import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react.js'; import RegistrationButton from '../../account/registration/registration-button.react.js'; import SWMansionIcon from '../../components/swmansion-icon.react.js'; import { type NavigationRoute } from '../../navigation/route-names.js'; import { useSelector } from '../../redux/redux-utils.js'; import { useStyles, useColors } from '../../themes/colors.js'; const tagFarcasterErrorMessages: { +[string]: string } = { already_in_use: 'This Farcaster channel is already tagged to a community.', }; export type TagFarcasterChannelParams = { +communityID: string, }; type Props = { +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>, }; function TagFarcasterChannel(props: Props): React.Node { const { route } = props; const { communityID } = route.params; const styles = useStyles(unboundStyles); const colors = useColors(); const fid = useCurrentUserFID(); invariant(fid, 'FID should be set'); const [selectedChannel, setSelectedChannel] = - React.useState(null); + React.useState(null); const [channelOptions, setChannelOptions] = React.useState< - $ReadOnlyArray, + $ReadOnlyArray, >([]); const [error, setError] = React.useState(null); const neynarClientContext = React.useContext(NeynarClientContext); invariant(neynarClientContext, 'NeynarClientContext is missing'); const { client } = neynarClientContext; React.useEffect(() => { void (async () => { const channels = await client.fetchFollowedFarcasterChannels(fid); setChannelOptions(channels); })(); }, [client, fid]); const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme); const { showActionSheetWithOptions } = useActionSheet(); const insets = useSafeAreaInsets(); const onOptionSelected = React.useCallback( (selectedIndex: ?number) => { if ( selectedIndex === undefined || selectedIndex === null || selectedIndex === channelOptions.length ) { return; } setError(null); setSelectedChannel(channelOptions[selectedIndex]); }, [channelOptions], ); const onPressSelectChannel = React.useCallback(() => { const channelNames = channelOptions.map(channel => channel.name); const options = Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames; const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1; const containerStyle = { paddingBottom: insets.bottom, }; showActionSheetWithOptions( { options, cancelButtonIndex, containerStyle, userInterfaceStyle: activeTheme ?? 'dark', }, onOptionSelected, ); }, [ activeTheme, channelOptions, insets.bottom, onOptionSelected, showActionSheetWithOptions, ]); const dispatchActionPromise = useDispatchActionPromise(); const createOrUpdateFarcasterChannelTag = useCreateOrUpdateFarcasterChannelTag(); const createCreateOrUpdateActionPromise = React.useCallback(async () => { if (!selectedChannel) { return undefined; } try { return await createOrUpdateFarcasterChannelTag({ commCommunityID: communityID, farcasterChannelID: selectedChannel.id, }); } catch (e) { setError(e.message); throw e; } }, [communityID, createOrUpdateFarcasterChannelTag, selectedChannel]); const onPressTag = React.useCallback(() => { void dispatchActionPromise( createOrUpdateFarcasterChannelTagActionTypes, createCreateOrUpdateActionPromise(), ); }, [createCreateOrUpdateActionPromise, dispatchActionPromise]); const channelSelectionStyles = React.useMemo( () => [styles.sectionContainer, styles.touchableSectionContainer], [styles.sectionContainer, styles.touchableSectionContainer], ); const errorMessage = React.useMemo(() => { if (!error) { return null; } return ( {tagFarcasterErrorMessages[error] ?? 'Unknown error.'} ); }, [error, styles.error]); const channelSelectionTextContent = selectedChannel?.name ? selectedChannel.name : 'No Farcaster channel tagged'; const buttonVariant = selectedChannel ? 'enabled' : 'disabled'; const tagFarcasterChannel = React.useMemo( () => ( Tag a Farcaster channel so followers can find your Comm community! FARCASTER CHANNEL {channelSelectionTextContent} {errorMessage} ), [ styles.sectionContainer, styles.sectionText, styles.sectionHeaderText, styles.errorContainer, channelSelectionStyles, onPressSelectChannel, channelSelectionTextContent, colors.panelForegroundSecondaryLabel, errorMessage, onPressTag, buttonVariant, ], ); return tagFarcasterChannel; } const unboundStyles = { sectionContainer: { backgroundColor: 'panelForeground', marginBottom: 24, padding: 16, }, sectionText: { color: 'panelForegroundLabel', fontSize: 14, }, sectionHeaderText: { fontSize: 14, fontWeight: '400', lineHeight: 20, color: 'panelForegroundLabel', paddingHorizontal: 16, paddingBottom: 4, }, touchableSectionContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }, errorContainer: { height: 18, }, error: { fontSize: 12, fontWeight: '400', lineHeight: 18, textAlign: 'center', color: 'redText', }, }; export default TagFarcasterChannel;