state.navInfo.chatMode === 'create',
+ );
let threadMenu = null;
if (!threadIsPending(threadInfo.id)) {
@@ -42,6 +52,43 @@
const { uiName } = useResolvedThreadInfo(threadInfo);
+ const { selectedProtocol } = useProtocolSelection();
+
+ const protocolIcon = React.useMemo(() => {
+ if (!isThreadCreation) {
+ return null;
+ }
+
+ const protocol = selectedProtocol
+ ? getProtocolByName(selectedProtocol)
+ : threadSpecs[threadInfo.type].protocol();
+ if (!protocol) {
+ return null;
+ }
+
+ const handleProtocolClick = () => {
+ pushModal(
+
+
+ {protocol.presentationDetails.description}
+
+ ,
+ );
+ };
+
+ return (
+
+ );
+ }, [
+ isThreadCreation,
+ selectedProtocol,
+ threadInfo.type,
+ pushModal,
+ popModal,
+ ]);
+
return (
<>
@@ -58,6 +105,7 @@
/>
{threadMenu}
+ {protocolIcon}
diff --git a/web/comm-icon.react.js b/web/comm-icon.react.js
--- a/web/comm-icon.react.js
+++ b/web/comm-icon.react.js
@@ -26,7 +26,8 @@
| 'link_plus-outline'
| 'user-filled'
| 'user-edit'
- | 'farcaster-outline';
+ | 'farcaster-outline'
+ | 'farcaster';
type CommIconProps = {
+icon: CommIcons,
diff --git a/web/components/protocol-icon.react.js b/web/components/protocol-icon.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/protocol-icon.react.js
@@ -0,0 +1,67 @@
+// @flow
+
+import {
+ faServer as server,
+ faLock as lock,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as React from 'react';
+
+import { getProtocolByName } from 'lib/shared/threads/protocols/thread-protocols.js';
+import type { ProtocolName } from 'lib/shared/threads/thread-spec.js';
+
+import CommIcon from '../comm-icon.react.js';
+
+type Props = {
+ +icon?: React.Node,
+ +protocol?: ProtocolName,
+ +size: number,
+};
+
+function ProtocolIcon(props: Props): React.Node {
+ let iconComponent = null;
+ const protocolIcon = getProtocolByName(props.protocol)?.presentationDetails
+ ?.protocolIcon;
+ const iconSize = props.size * 0.5;
+ let iconBackground = 'var(--bg)';
+ if (props.icon) {
+ iconComponent = props.icon;
+ } else if (protocolIcon === 'lock') {
+ iconComponent = (
+
+ );
+ } else if (protocolIcon === 'server') {
+ iconComponent = (
+
+ );
+ } else if (protocolIcon === 'farcaster') {
+ iconComponent =
;
+ iconBackground = '#855DCD';
+ }
+
+ return (
+
+ {iconComponent}
+
+ );
+}
+
+export default ProtocolIcon;
diff --git a/web/components/select-protocol-dropdown.css b/web/components/select-protocol-dropdown.css
new file mode 100644
--- /dev/null
+++ b/web/components/select-protocol-dropdown.css
@@ -0,0 +1,100 @@
+.container {
+ background-color: var(--inputField-background-secondary-default);
+ position: relative;
+ width: 100%;
+}
+
+.bordersWithOptions {
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.bordersWithoutOptions {
+ border-radius: 10px;
+}
+
+.dropdownHeader {
+ padding: 8px 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+}
+
+.dropdownOption {
+ padding: 8px 12px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ list-style: none;
+}
+
+.dropdownOption:hover {
+ background-color: var(--dropdown-option-hover-bg);
+ border-radius: 8px;
+}
+
+.optionContent {
+ display: flex;
+ align-items: center;
+ height: 30px;
+}
+
+.selectedOption {
+ display: flex;
+ align-items: center;
+ height: 30px;
+}
+
+.optionsContainer {
+ background-color: var(--inputField-background-secondary-default);
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ position: absolute;
+ top: 47px;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.text {
+ font-size: 16px;
+ color: var(--fg);
+ display: flex;
+ align-items: center;
+ height: 30px;
+}
+
+.protocolName {
+ margin-left: 8px;
+ font-size: 16px;
+ color: var(--fg);
+}
+
+.chevron {
+ color: var(--fg);
+}
+
+.disabled {
+ cursor: not-allowed;
+}
+
+.disabled .dropdownHeader {
+ cursor: not-allowed;
+}
+
+.headerClickableArea {
+ display: flex;
+ align-items: center;
+ flex: 1;
+}
+
+.iconClickable {
+ cursor: pointer;
+}
+
+.modalContent {
+ color: var(--fg);
+}
diff --git a/web/components/select-protocol-dropdown.react.js b/web/components/select-protocol-dropdown.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/select-protocol-dropdown.react.js
@@ -0,0 +1,123 @@
+// @flow
+
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { useProtocolSelection } from 'lib/contexts/protocol-selection-context.js';
+import { protocols } from 'lib/shared/threads/protocols/thread-protocols.js';
+import type { ProtocolName } from 'lib/shared/threads/thread-spec.js';
+import { protocolInfoAlert } from 'lib/utils/alert-utils.js';
+
+import ProtocolIcon from './protocol-icon.react.js';
+import css from './select-protocol-dropdown.css';
+import Modal from '../modals/modal.react.js';
+
+function SelectProtocolDropdown(): React.Node {
+ const { selectedProtocol, setSelectedProtocol, availableProtocols } =
+ useProtocolSelection();
+ const { pushModal, popModal } = useModalContext();
+ const [showOptions, setShowOptions] = React.useState(false);
+
+ const onDropdownPress = React.useCallback(() => {
+ if (availableProtocols.length < 1) {
+ return;
+ }
+ setShowOptions(!showOptions);
+ }, [availableProtocols.length, showOptions]);
+
+ const onInfoPress = React.useCallback(() => {
+ pushModal(
+
+
+
{protocolInfoAlert.message}
+
,
+ );
+ }, [pushModal, popModal]);
+
+ const onOptionSelection = React.useCallback(
+ (protocolName: ProtocolName) => {
+ setSelectedProtocol(protocolName);
+ setShowOptions(false);
+ },
+ [setSelectedProtocol],
+ );
+
+ const options = React.useMemo(
+ () =>
+ protocols()
+ .filter(protocol => availableProtocols.includes(protocol.protocolName))
+ .map(protocol => (
+
onOptionSelection(protocol.protocolName)}
+ >
+
+
+
{protocol.protocolName}
+
+ )),
+ [availableProtocols, onOptionSelection],
+ );
+
+ const containerClassNames = classNames(css.container, {
+ [css.bordersWithOptions]: showOptions,
+ [css.bordersWithoutOptions]: !showOptions,
+ [css.disabled]: availableProtocols.length < 1,
+ });
+
+ const dropdownHeader = React.useMemo(() => {
+ if (!selectedProtocol) {
+ return
Select chat type;
+ }
+ return (
+
+ );
+ }, [selectedProtocol]);
+
+ const optionsComponent = React.useMemo(() => {
+ if (!showOptions) {
+ return null;
+ }
+ return
;
+ }, [options, showOptions]);
+
+ const icon = React.useMemo(
+ () => (availableProtocols.length > 0 ? faChevronDown : faInfoCircle),
+ [availableProtocols.length],
+ );
+
+ return (
+
+
+
+ {dropdownHeader}
+
+
0 ? onDropdownPress : onInfoPress
+ }
+ className={classNames(css.chevron, css.iconClickable)}
+ />
+
+ {optionsComponent}
+
+ );
+}
+
+export default SelectProtocolDropdown;