diff --git a/lib/shared/community-utils.js b/lib/shared/community-utils.js --- a/lib/shared/community-utils.js +++ b/lib/shared/community-utils.js @@ -13,6 +13,13 @@ import { useDispatchActionPromise } from '../utils/redux-promise-utils.js'; import { useSelector } from '../utils/redux-utils.js'; +const tagFarcasterChannelCopy = { + DESCRIPTION: + 'Tag a Farcaster channel so followers can find your Comm community!', + CHANNEL_NAME_HEADER: 'Selected channel:', + NO_CHANNEL_TAGGED: 'No Farcaster channel tagged', +}; + function farcasterChannelTagBlobHash(farcasterChannelID: string): string { return `farcaster_channel_tag_${farcasterChannelID}`; } @@ -128,6 +135,7 @@ } export { + tagFarcasterChannelCopy, farcasterChannelTagBlobHash, useCreateFarcasterChannelTag, useRemoveFarcasterChannelTag, 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 @@ -3,6 +3,7 @@ import * as React from 'react'; import { View, Text } from 'react-native'; +import { tagFarcasterChannelCopy } from 'lib/shared/community-utils.js'; import type { CommunityInfo } from 'lib/types/community-types.js'; import RemoveTagButton from './remove-tag-button.react.js'; @@ -50,7 +51,9 @@ const channelNameTextContent = React.useMemo(() => { if (!communityInfo?.farcasterChannelID) { return ( - <Text style={styles.noChannelText}>No Farcaster channel tagged</Text> + <Text style={styles.noChannelText}> + {tagFarcasterChannelCopy.NO_CHANNEL_TAGGED} + </Text> ); } @@ -84,12 +87,14 @@ <View> <View style={styles.panelSectionContainer}> <Text style={styles.sectionText}> - Tag a Farcaster channel so followers can find your Comm community! + {tagFarcasterChannelCopy.DESCRIPTION} </Text> </View> <Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text> <View style={styles.panelSectionContainer}> - <Text style={styles.sectionText}>Selected channel:</Text> + <Text style={styles.sectionText}> + {tagFarcasterChannelCopy.CHANNEL_NAME_HEADER} + </Text> <View style={styles.channelNameContainer}> {channelNameTextContent} </View> diff --git a/web/tag-farcaster-channel/tag-farcaster-channel-modal.css b/web/tag-farcaster-channel/tag-farcaster-channel-modal.css new file mode 100644 --- /dev/null +++ b/web/tag-farcaster-channel/tag-farcaster-channel-modal.css @@ -0,0 +1,22 @@ +.modalDescription { + color: var(--text-background-secondary-default); + font-size: var(--m-font-16); + margin-bottom: 24px; +} + +.farcasterChannelTitle { + color: var(--text-background-primary-default); + font-size: var(--l-font-18); + margin-bottom: 8px; +} + +.farcasterChannelText { + color: var(--text-background-secondary-default); + font-size: var(--m-font-16); + font-weight: var(--bold); +} + +.noChannelText { + color: var(--text-background-secondary-default); + font-size: var(--m-font-16); +} diff --git a/web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js b/web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js new file mode 100644 --- /dev/null +++ b/web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js @@ -0,0 +1,60 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { tagFarcasterChannelCopy } from 'lib/shared/community-utils.js'; +import type { CommunityInfo } from 'lib/types/community-types.js'; + +import css from './tag-farcaster-channel-modal.css'; +import Modal from '../modals/modal.react.js'; +import { useSelector } from '../redux/redux-utils.js'; + +type Props = { + +communityID: string, +}; + +function TagFarcasterChannelModal(props: Props): React.Node { + const { communityID } = props; + + const { popModal } = useModalContext(); + + const communityInfo: ?CommunityInfo = useSelector( + state => state.communityStore.communityInfos[communityID], + ); + + const channelNameTextContent = React.useMemo(() => { + if (!communityInfo?.farcasterChannelID) { + return ( + <div className={css.noChannelText}> + {tagFarcasterChannelCopy.NO_CHANNEL_TAGGED} + </div> + ); + } + + return ( + <div className={css.farcasterChannelText}> + /{communityInfo.farcasterChannelID} + </div> + ); + }, [communityInfo?.farcasterChannelID]); + + const tagFarcasterChannelModal = React.useMemo( + () => ( + <Modal name="Tag a Farcaster channel" onClose={popModal} size="large"> + <div className={css.modalDescription}> + {tagFarcasterChannelCopy.DESCRIPTION} + </div> + <div className={css.farcasterChannelTitle}> + {tagFarcasterChannelCopy.CHANNEL_NAME_HEADER} + </div> + {channelNameTextContent} + </Modal> + ), + [channelNameTextContent, popModal], + ); + + return tagFarcasterChannelModal; +} + +export default TagFarcasterChannelModal;