- 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;