diff --git a/packages/web/components/Player/Section/PlayerHero.tsx b/packages/web/components/Player/Section/PlayerHero.tsx index 6e35aa829..6961d8c85 100644 --- a/packages/web/components/Player/Section/PlayerHero.tsx +++ b/packages/web/components/Player/Section/PlayerHero.tsx @@ -9,6 +9,12 @@ import { MarkdownViewer, MeetWithWalletIcon, MetaButton, + Modal, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, MetaTag, Text, Tooltip, @@ -19,7 +25,7 @@ import { } from '@metafam/ds'; import { Maybe } from '@metafam/utils'; import React, { useMemo } from 'react'; -import { FaClock, FaGlobe } from 'react-icons/fa'; +import { FaClock, FaGlobe, FaEnvelope } from 'react-icons/fa'; import { FlexContainer } from '#components/Container'; import { EditProfileModal } from '#components/EditProfileModal'; @@ -49,6 +55,11 @@ export const PlayerHero: React.FC = ({ player, editing, ens }) => { const isOwnProfile = user ? user.id === player?.id : null; const { isOpen, onOpen, onClose } = useDisclosure(); + const { + isOpen: isContactOpen, + onOpen: onContactOpen, + onClose: onContactClose, + } = useDisclosure(); const { hydrateFromComposeDB } = usePlayerHydrationContext(); @@ -57,6 +68,11 @@ export const PlayerHero: React.FC = ({ player, editing, ens }) => { [player], ); + const hasContacts = useMemo( + () => player?.accounts != null && player.accounts.length > 0, + [player], + ); + return ( {isOwnProfile && !editing && ( @@ -101,17 +117,50 @@ export const PlayerHero: React.FC = ({ player, editing, ens }) => { - {mwwDomain && mwwDomain !== 'mww_remove' && ( - } - > - Meet With Me - - )} + + {mwwDomain && mwwDomain !== 'mww_remove' && ( + } + > + Meet With Me + + )} + {hasContacts && ( + } + onClick={onContactOpen} + variant="outline" + colorScheme="cyan" + > + Contact + + )} + + {/* Contact Modal */} + + + + Contact + + + + Reach out via one of the following channels: + + + + + + + + Close + + + + {isOwnProfile && (