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 ( - No Farcaster channel tagged + + {tagFarcasterChannelCopy.NO_CHANNEL_TAGGED} + ); } @@ -84,12 +87,14 @@ - Tag a Farcaster channel so followers can find your Comm community! + {tagFarcasterChannelCopy.DESCRIPTION} FARCASTER CHANNEL - Selected channel: + + {tagFarcasterChannelCopy.CHANNEL_NAME_HEADER} + {channelNameTextContent} 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 ( +
+ {tagFarcasterChannelCopy.NO_CHANNEL_TAGGED} +
+ ); + } + + return ( +
+ /{communityInfo.farcasterChannelID} +
+ ); + }, [communityInfo?.farcasterChannelID]); + + const tagFarcasterChannelModal = React.useMemo( + () => ( + +
+ {tagFarcasterChannelCopy.DESCRIPTION} +
+
+ {tagFarcasterChannelCopy.CHANNEL_NAME_HEADER} +
+ {channelNameTextContent} +
+ ), + [channelNameTextContent, popModal], + ); + + return tagFarcasterChannelModal; +} + +export default TagFarcasterChannelModal;