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 5464b8cdf..1f3a3e54d 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,104 +1,149 @@
// @flow
import * as React from 'react';
import { View, Text } from 'react-native';
+import type { CommunityInfo } from 'lib/types/community-types.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,
};
type Props = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
+route: NavigationRoute<'TagFarcasterChannel'>,
};
function TagFarcasterChannel(props: Props): React.Node {
const { route } = props;
const { communityID } = route.params;
+ const communityInfo: ?CommunityInfo = useSelector(
+ state => state.communityStore.communityInfos[communityID],
+ );
+
const styles = useStyles(unboundStyles);
const [error, setError] = React.useState(null);
const errorMessage = React.useMemo(() => {
if (!error) {
return null;
}
return (
{tagFarcasterChannelErrorMessages[error] ?? 'Unknown error.'}
);
}, [error, styles.error]);
+ const channelNameTextContent = React.useMemo(() => {
+ if (!communityInfo?.farcasterChannelID) {
+ return (
+ No Farcaster channel tagged
+ );
+ }
+
+ return (
+
+ {`/${communityInfo.farcasterChannelID}`}
+
+ );
+ }, [
+ communityInfo?.farcasterChannelID,
+ styles.channelNameText,
+ styles.noChannelText,
+ ]);
+
const tagFarcasterChannel = React.useMemo(
() => (
Tag a Farcaster channel so followers can find your Comm community!
FARCASTER CHANNEL
+ Selected channel:
+
+ {channelNameTextContent}
+
{errorMessage}
),
[
styles.panelSectionContainer,
styles.sectionText,
styles.sectionHeaderText,
+ styles.channelNameContainer,
styles.errorContainer,
+ channelNameTextContent,
communityID,
errorMessage,
],
);
return tagFarcasterChannel;
}
const unboundStyles = {
panelSectionContainer: {
backgroundColor: 'panelForeground',
padding: 16,
borderBottomColor: 'panelSeparator',
borderBottomWidth: 1,
borderTopColor: 'panelSeparator',
borderTopWidth: 1,
},
sectionText: {
color: 'panelForegroundLabel',
fontSize: 14,
},
sectionHeaderText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'panelForegroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
marginTop: 24,
},
+ channelNameContainer: {
+ marginTop: 8,
+ marginBottom: 24,
+ height: 20,
+ },
+ channelNameText: {
+ fontSize: 16,
+ fontWeight: '600',
+ color: 'panelForegroundLabel',
+ },
+ noChannelText: {
+ fontSize: 16,
+ color: 'panelForegroundLabel',
+ },
errorContainer: {
height: 18,
},
error: {
fontSize: 12,
fontWeight: '400',
lineHeight: 18,
textAlign: 'center',
color: 'redText',
},
};
export default TagFarcasterChannel;