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
--- 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,16 +1,24 @@
// @flow
+import invariant from 'invariant';
import * as React from 'react';
import { View, Text } from 'react-native';
+import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
+import type { CommunityInfo } from 'lib/types/community-types.js';
+import type { NeynarChannel } from 'lib/types/farcaster-types.js';
+import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
+
import TagChannelButton from './tag-channel-button.react.js';
import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react.js';
import { tagFarcasterChannelErrorMessages } from './tag-farcaster-channel-utils.js';
import { type NavigationRoute } from '../../navigation/route-names.js';
+import { useSelector } from '../../redux/redux-utils.js';
import { useStyles } from '../../themes/colors.js';
export type TagFarcasterChannelParams = {
+communityID: string,
+ +farcasterChannel: ?NeynarChannel,
};
type Props = {
@@ -21,7 +29,38 @@
function TagFarcasterChannel(props: Props): React.Node {
const { route } = props;
- const { communityID } = route.params;
+ const { communityID, farcasterChannel } = route.params;
+
+ const fid = useCurrentUserFID();
+ invariant(fid, 'FID should be set');
+
+ const neynarClientContext = React.useContext(NeynarClientContext);
+ invariant(neynarClientContext, 'NeynarClientContext is missing');
+
+ const { client } = neynarClientContext;
+
+ const communityInfo: ?CommunityInfo = useSelector(
+ state => state.communityStore.communityInfos[communityID],
+ );
+
+ const [selectedChannel, setSelectedChannel] =
+ React.useState(farcasterChannel);
+
+ React.useEffect(() => {
+ void (async () => {
+ if (!communityInfo?.farcasterChannelID) {
+ setSelectedChannel(null);
+ return;
+ }
+
+ const channel = await client.fetchFarcasterChannelInfo(
+ communityInfo.farcasterChannelID,
+ fid,
+ );
+
+ setSelectedChannel(channel);
+ })();
+ }, [client, communityInfo?.farcasterChannelID, fid]);
const styles = useStyles(unboundStyles);
@@ -39,6 +78,10 @@
);
}, [error, styles.error]);
+ const channelNameTextContent = selectedChannel?.name
+ ? selectedChannel.name
+ : 'No Farcaster channel tagged';
+
const tagFarcasterChannel = React.useMemo(
() => (
@@ -49,6 +92,8 @@
FARCASTER CHANNEL
+ Selected channel:
+ {channelNameTextContent}
{errorMessage}
@@ -58,7 +103,9 @@
styles.panelSectionContainer,
styles.sectionText,
styles.sectionHeaderText,
+ styles.channelNameText,
styles.errorContainer,
+ channelNameTextContent,
communityID,
errorMessage,
],
@@ -89,6 +136,13 @@
paddingBottom: 4,
marginTop: 24,
},
+ channelNameText: {
+ fontSize: 16,
+ fontWeight: '600',
+ color: 'panelForegroundLabel',
+ marginTop: 8,
+ marginBottom: 24,
+ },
errorContainer: {
height: 18,
},
diff --git a/native/components/community-actions-button.react.js b/native/components/community-actions-button.react.js
--- a/native/components/community-actions-button.react.js
+++ b/native/components/community-actions-button.react.js
@@ -2,13 +2,17 @@
import { useActionSheet } from '@expo/react-native-action-sheet';
import { useNavigation } from '@react-navigation/native';
+import invariant from 'invariant';
import * as React from 'react';
import { TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js';
import { DISABLE_TAGGING_FARCASTER_CHANNEL } from 'lib/shared/community-utils.js';
import { useThreadHasPermission } from 'lib/shared/thread-utils.js';
+import type { CommunityInfo } from 'lib/types/community-types.js';
+import type { NeynarChannel } from 'lib/types/farcaster-types.js';
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js';
import { threadTypes } from 'lib/types/thread-types-enum.js';
@@ -38,8 +42,35 @@
const { navigate } = useNavigation();
+ const neynarClientContext = React.useContext(NeynarClientContext);
+ invariant(neynarClientContext, 'NeynarClientContext is missing');
+
+ const { client } = neynarClientContext;
+
+ const communityInfo: ?CommunityInfo = useSelector(
+ state => state.communityStore.communityInfos[community.id],
+ );
+
const fid = useCurrentUserFID();
+ const [farcasterChannel, setFarcasterChannel] =
+ React.useState(null);
+
+ React.useEffect(() => {
+ void (async () => {
+ if (!communityInfo?.farcasterChannelID || !fid) {
+ return;
+ }
+
+ const channel = await client.fetchFarcasterChannelInfo(
+ communityInfo.farcasterChannelID,
+ fid,
+ );
+
+ setFarcasterChannel(channel);
+ })();
+ }, [client, communityInfo?.farcasterChannelID, fid]);
+
const navigateToInviteLinksView = React.useCallback(() => {
if (!inviteLink || !community) {
return;
@@ -77,10 +108,11 @@
screen: TagFarcasterChannelRouteName,
params: {
communityID: community.id,
+ farcasterChannel,
},
},
);
- }, [community.id, navigate]);
+ }, [community.id, farcasterChannel, navigate]);
const insets = useSafeAreaInsets();
const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);