From ef66c98dd93162f4d418dd3717cacec82fc7babe Mon Sep 17 00:00:00 2001 From: KlausMikhaelson Date: Tue, 3 Oct 2023 19:38:04 -0600 Subject: [PATCH 1/6] feat: added icon in groupinfo to show if it is token gated or not --- .../chat/ChatProfile/ChatProfile.tsx | 27 +++++++++------ .../chat/ChatProfile/GroupInfoModal.tsx | 34 ++++++++++++++++--- .../uiweb/src/lib/icons/TokenGatedIcon.svg | 3 ++ 3 files changed, 49 insertions(+), 15 deletions(-) create mode 100644 packages/uiweb/src/lib/icons/TokenGatedIcon.svg diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx index e4b037fe3..e4bced29f 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx @@ -23,7 +23,7 @@ import { isValidETHAddress } from '../helpers/helper'; import { IChatProfile, IChatTheme } from '../exportedTypes'; import { InfuraAPIKey, allowedNetworks, device } from '../../../config'; import { resolveNewEns, shortenText } from '../../../helpers'; -import TokenGatedIcon from '../../../icons/Token-Gated.svg'; +import TokenGatedIcon from '../../../icons/TokenGatedIcon.svg'; import PublicChatIcon from '../../../icons/Public-Chat.svg'; import GreyImage from '../../../icons/greyImage.png'; import InfoIcon from '../../../icons/infodark.svg'; @@ -66,6 +66,14 @@ const Options = ({ gap="10px" margin="0 20px 0 auto" > + {(groupInfo?.rules?.chat?.conditions || groupInfo.rules?.entry?.conditions) && ( + + )} = ({ return isGroup ? groupInfo?.groupImage ?? GreyImage : chatInfo?.profile?.picture ?? - createBlockie?.(chatId)?.toDataURL()?.toString(); + createBlockie?.(chatId)?.toDataURL()?.toString(); } else { return createBlockie?.(chatId)?.toDataURL()?.toString(); } @@ -166,14 +174,13 @@ export const ChatProfile: React.FC = ({ return isGroup ? groupInfo?.groupName : ensName - ? `${ensName} (${ - isMobile - ? shortenText(chatInfo?.did?.split(':')[1] ?? '', 4, true) - : chatId + ? `${ensName} (${isMobile + ? shortenText(chatInfo?.did?.split(':')[1] ?? '', 4, true) + : chatId })` - : chatInfo - ? shortenText(chatInfo.did?.split(':')[1] ?? '', 6, true) - : shortenText(chatId, 6, true); + : chatInfo + ? shortenText(chatInfo.did?.split(':')[1] ?? '', 6, true) + : shortenText(chatId, 6, true); }; useEffect(() => { @@ -187,7 +194,7 @@ export const ChatProfile: React.FC = ({ { + const onClose = (): void => { setModal(false); }; @@ -390,6 +391,28 @@ export const GroupInfoModal = ({ + {(groupInfo.rules?.chat?.conditions || groupInfo.rules?.entry?.conditions) && ( + + + +
+ + Gated group + + + Conditions must be true to join + +
+ + )} {isAccountOwnerAdmin(groupInfo, account!) && groupInfo?.members && @@ -445,8 +468,8 @@ export const GroupInfoModal = ({ item?.isAdmin && isAccountOwnerAdmin(groupInfo, account!) ? [removeAdminDropdown, removeMemberDropdown] : isAccountOwnerAdmin(groupInfo, account!) - ? [addAdminDropdown, removeMemberDropdown] - : [] + ? [addAdminDropdown, removeMemberDropdown] + : [] } selectedMemberAddress={selectedMemberAddress} setSelectedMemberAddress={setSelectedMemberAddress} @@ -505,6 +528,7 @@ const PublicEncrypted = styled.div` border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents}; padding: 16px; box-sizing: border-box; + background: ${(props) => props.theme.backgroundColor.modalHoverBackground}; `; const AddWalletContainer = styled.div` @@ -556,7 +580,7 @@ const PendingSection = styled.div` box-sizing: border-box; `; -const ArrowImage = styled(Image)` +const ArrowImage = styled(Image) ` margin-left: auto; transform: ${(props) => props?.setPosition ? 'rotate(0)' : 'rotate(180deg)'}; diff --git a/packages/uiweb/src/lib/icons/TokenGatedIcon.svg b/packages/uiweb/src/lib/icons/TokenGatedIcon.svg new file mode 100644 index 000000000..19c599954 --- /dev/null +++ b/packages/uiweb/src/lib/icons/TokenGatedIcon.svg @@ -0,0 +1,3 @@ + + + From 941789438f75eda95b1f671e7cc47f023539479c Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Wed, 4 Oct 2023 13:57:30 +0530 Subject: [PATCH 2/6] fix: fixed minor text --- .../src/app/ChatUITest/ChatViewComponent.tsx | 5 +++-- .../src/lib/components/chat/ChatProfile/GroupInfoModal.tsx | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx index 828ad2108..dd20c3c2d 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx @@ -13,9 +13,9 @@ const ChatViewComponentTest = () => { return (

Chat UI Test page

- {console.log('in close')}} /> + {/* {console.log('in close')}} /> */} - console.log("BOIIII RETURNNNSSSSS")} chatId='b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1' limit={10} isConnected={true} /> + console.log("BOIIII RETURNNNSSSSS")} chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' limit={10} isConnected={true} />
); @@ -27,3 +27,4 @@ const ChatViewComponentCard = styled(Section)` height: 60vh; `; //c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e +//4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68 diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx index ba4ae0a89..0ab2688ef 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx @@ -362,6 +362,7 @@ export const GroupInfoModal = ({ Group Description @@ -379,7 +380,7 @@ export const GroupInfoModal = ({
- {groupInfo?.isPublic ? 'Public' : 'Private'} + {groupInfo?.isPublic ? 'Open' : 'Encrypted'} {groupInfo?.isPublic ? 'Chats are not encrypted' - : 'Chats are encrypted'} + : 'Chats are end-to-end encrypted'}
From a5fa4981443bdf18bfd0135cf0e730f102c1e5ca Mon Sep 17 00:00:00 2001 From: KlausMikhaelson Date: Wed, 4 Oct 2023 23:52:03 -0600 Subject: [PATCH 3/6] feat: created group criteria info modal and fixed dropdown --- .../src/app/ChatUITest/ChatProfile.tsx | 2 +- .../chat/ChatProfile/GroupInfoModal.tsx | 618 ++++++++++++++---- .../chat/CreateGroup/ConditionsComponent.tsx | 4 +- 3 files changed, 482 insertions(+), 142 deletions(-) diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx index b889f7daf..fc8c7eefb 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx @@ -6,7 +6,7 @@ export const ChatProfileTest = () => {
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx index 0ab2688ef..1a69b5f63 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx @@ -34,6 +34,9 @@ import AddAdmin from '../../../icons/addadmin.svg'; import Remove from '../../../icons/remove.svg'; import { shortenText } from '../../../helpers'; import TokenGatedIcon from "../../../icons/TokenGatedIcon.svg"; +import { DefineCondtion } from '../CreateGroup/DefineCondition'; +import ConditionsComponent from '../CreateGroup/ConditionsComponent'; +import { ConditionArray } from '../exportedTypes'; const UPDATE_KEYS = { REMOVE_MEMBER: 'REMOVE_MEMBER', @@ -121,18 +124,175 @@ const PendingMembers = ({ } }; +const dummyConditonsData: ConditionArray[] = [ + [{ operator: 'any' }], + [ + { + type: 'PUSH', + category: 'ERC20', + subcategory: 'holder', + data: { + contract: 'eip155:1:0xf418588522d5dd018b425E472991E52EBBeEEEEE', + amount: 1, + decimals: 18, + }, + }, + ], + [ + { operator: 'all' }, + { + type: 'PUSH', + category: 'ERC20', + subcategory: 'holder', + data: { + contract: 'eip155:137:0x58001cC1A9E17A20935079aB40B1B8f4Fc19EFd1', + amount: 1, + decimals: 18, + }, + }, + { + type: 'PUSH', + category: 'ERC721', + subcategory: 'holder', + data: { + contract: 'eip155:137:0x58001cC1A9E17A20935079aB40B1B8f4Fc19EFd1', + amount: 1, + decimals: 18, + }, + }, + { + type: 'GUILD', + category: 'ROLES', + subcategory: 'DEFAULT', + data: { + id: '1', + role: '346243', + comparison: 'all', + }, + }, + ], + [ + { operator: 'any' }, + { + type: 'PUSH', + category: 'INVITE', + subcategory: 'DEFAULT', + data: { + inviterRoles: 'ADMIN', + }, + }, + { + type: 'PUSH', + category: 'INVITE', + subcategory: 'DEFAULT', + data: { + inviterRoles: 'OWNER', + }, + }, + ], +]; + +const dummySingleCondtionData: ConditionArray[] = dummyConditonsData[2].map((criteria) => [ + criteria, +]); + +interface ConditionsInformationProps{ + theme: IChatTheme; + groupInfo?: IGroup | null; +} + +export const ConditionsInformation = ({theme, groupInfo}: ConditionsInformationProps) => { + return ( +
+
+ { + (groupInfo?.rules?.chat?.conditions || groupInfo?.rules?.entry?.conditions) && ( + + + +
+ + Gated group + + + Conditions must be true to join + +
+ + ) + } +
+ +
+ ) +} + +interface GroupTypeProps { + theme: IChatTheme; + Icon: string; + header: string; + subheader: string; + groupInfo?: IGroup | null; +} + +const GroupTypeBadge = ({ theme, Icon, header, subheader, groupInfo }: GroupTypeProps) => { + return ( +
+ + + +
+ + {groupInfo?.isPublic ? 'Open' : 'Encrypted'} + + + {groupInfo?.isPublic + ? 'Chats are not encrypted' + : 'Chats are end-to-end encrypted'} + +
+ +
+ ) +} + type GroupInfoModalProps = { theme: IChatTheme; setModal: React.Dispatch>; groupInfo: IGroup; setGroupInfo: React.Dispatch>; + handleNextInformation: () => void; + handlePreviousInformation: () => void; }; -export const GroupInfoModal = ({ - theme, + +export const GROUPINFO_STEPS = { + GROUP_INFO: 1, + CRITERIA: 2, +} as const; + +export type GROUP_INFO_TYPE = (typeof GROUPINFO_STEPS)[keyof typeof GROUPINFO_STEPS]; + +const GroupInformation = ({ theme, setModal, groupInfo, - setGroupInfo, -}: GroupInfoModalProps) => { + setGroupInfo, handleNextInformation, handlePreviousInformation }: GroupInfoModalProps) => { + const { account } = useChatData(); const [showAddMoreWalletModal, setShowAddMoreWalletModal] = useState(false); @@ -324,6 +484,318 @@ export const GroupInfoModal = ({ setModal(false); }; + return ( +
+ + + + Group Description + + + {groupInfo?.groupDescription} + + + + + + +
+ + {groupInfo?.isPublic ? 'Open' : 'Encrypted'} + + + {groupInfo?.isPublic + ? 'Chats are not encrypted' + : 'Chats are end-to-end encrypted'} + +
+ + { + (groupInfo.rules?.chat?.conditions || groupInfo.rules?.entry?.conditions) && ( + + + +
+ + Gated group + + + Conditions must be true to join + +
+ + ) + } + + { + isAccountOwnerAdmin(groupInfo, account!) && + groupInfo?.members && + groupInfo?.members?.length < 10 && ( + setShowAddMoreWalletModal(true)} + > + + + + Add more wallets + + + ) + } + +
+ {groupInfo?.pendingMembers?.length > 0 && ( + + )} +
+ +
+ {groupInfo?.members && + groupInfo?.members?.length > 0 && + groupInfo?.members.map((item, index) => ( + + ))} +
+ {showAddMoreWalletModal && ( + + )} +
+ ) +} + +export const GroupInfoModal = ({ + theme, + setModal, + groupInfo, + setGroupInfo, +}: GroupInfoModalProps) => { + const [activeComponent, setActiveComponent] = useState(GROUPINFO_STEPS.GROUP_INFO); + const handleNextInfo = () => { + console.log("criteria") + setActiveComponent(activeComponent + 1 as GROUP_INFO_TYPE); + console.log(activeComponent); + }; + + const handlePreviousInfo = () => { + setActiveComponent(activeComponent - 1 as GROUP_INFO_TYPE); + }; + + const renderComponent = () => { + switch (activeComponent) { + case GROUPINFO_STEPS.GROUP_INFO: + return ; + case GROUPINFO_STEPS.CRITERIA: + return ; + default: + return ; + } + } + const [showAddMoreWalletModal, setShowAddMoreWalletModal] = + useState(false); + useState(false); + const [memberList, setMemberList] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [selectedMemberAddress, setSelectedMemberAddress] = useState< + string | null + >(null); + const { updateGroup } = useUpdateGroup(); + const isMobile = useMediaQuery(device.mobileL); + + const handleClose = () => onClose(); + const dropdownRef = useRef(null); + useClickAway(dropdownRef, () => setSelectedMemberAddress(null)); + const groupInfoToast = useToast(); + + const groupCreator = groupInfo?.groupCreator; + const membersExceptGroupCreator = groupInfo?.members?.filter( + (x) => x.wallet?.toLowerCase() !== groupCreator?.toLowerCase() + ); + + type UpdateGroupType = { + adminList: Array; + memberList: Array; + }; + + const handleUpdateGroup = async (options: UpdateGroupType) => { + const { adminList, memberList } = options || {}; + const updateResponse = await updateGroup({ + groupInfo, + memberList, + adminList, + }); + return { updateResponse }; + }; + + const handleAddRemove = async ( + options: UpdateGroupType & { updateKey: UpdateKeys } + ) => { + const { adminList, memberList, updateKey } = options || {}; + + try { + setIsLoading(true); + const { updateResponse } = await handleUpdateGroup({ + adminList, + memberList, + }); + + if (typeof updateResponse !== 'string') { + setGroupInfo(updateResponse); + + groupInfoToast.showMessageToast({ + toastTitle: 'Success', + toastMessage: SUCCESS_MESSAGE[updateKey], + toastType: 'SUCCESS', + getToastIcon: (size) => , + }); + } else { + groupInfoToast.showMessageToast({ + toastTitle: 'Error', + toastMessage: updateResponse, + toastType: 'ERROR', + getToastIcon: (size) => , + }); + } + } catch (error) { + console.error('Error', error); + groupInfoToast.showMessageToast({ + toastTitle: 'Error', + toastMessage: 'Please, try again', + toastType: 'ERROR', + getToastIcon: (size) => , + }); + } finally { + if (updateKey === UPDATE_KEYS.ADD_MEMBER) handleClose(); + setIsLoading(false); + setSelectedMemberAddress(null); + } + }; + const removeMember = async () => { + const updatedMemberList = getUpdatedMemberList( + groupInfo, + selectedMemberAddress! + ); + const adminList = getUpdatedAdminList( + groupInfo, + selectedMemberAddress, + true + ); + await handleAddRemove({ + memberList: updatedMemberList, + adminList, + updateKey: UPDATE_KEYS.REMOVE_MEMBER, + }); + }; + + const addMembers = async () => { + //Already Present Members and PendingMembers + const groupMemberList = convertToWalletAddressList([ + ...groupInfo.members, + ...groupInfo.pendingMembers, + ]); + + //Newly Added Members and alreadyPresent Members in the groupchat + const newMembersToAdd = memberList.map((member: any) => member.wallets); + const members = [...groupMemberList, ...newMembersToAdd]; + + //Admins wallet address from both members and pendingMembers + const adminList = getAdminList?.(groupInfo); + + await handleAddRemove({ + memberList: members, + adminList, + updateKey: UPDATE_KEYS.ADD_MEMBER, + }); + }; + + const updateGroupAdmin = async (updateKey: UpdateKeys) => { + const groupMemberList = convertToWalletAddressList([ + ...groupInfo.members, + ...groupInfo.pendingMembers, + ]); + const newAdminList = getUpdatedAdminList( + groupInfo, + selectedMemberAddress, + !(updateKey === UPDATE_KEYS.ADD_ADMIN) + ); + await handleAddRemove({ + memberList: groupMemberList, + adminList: newAdminList, + updateKey, + }); + }; + + const onClose = (): void => { + setModal(false); + }; + if (groupInfo) { return ( @@ -333,7 +805,7 @@ export const GroupInfoModal = ({ flexDirection="column" padding={isMobile ? '0px auto' : '0px 10px'} > - + - - - - Group Description - - - {groupInfo?.groupDescription} - - - - - - -
- - {groupInfo?.isPublic ? 'Open' : 'Encrypted'} - - - {groupInfo?.isPublic - ? 'Chats are not encrypted' - : 'Chats are end-to-end encrypted'} - -
- - {(groupInfo.rules?.chat?.conditions || groupInfo.rules?.entry?.conditions) && ( - - - -
- - Gated group - - - Conditions must be true to join - -
- - )} - - {isAccountOwnerAdmin(groupInfo, account!) && - groupInfo?.members && - groupInfo?.members?.length < 10 && ( - setShowAddMoreWalletModal(true)} - > - - - - Add more wallets - - - )} - -
- {groupInfo?.pendingMembers?.length > 0 && ( - - )} -
- -
- {groupInfo?.members && - groupInfo?.members?.length > 0 && - groupInfo?.members.map((item, index) => ( - - ))} -
+ {renderComponent()} )} - - {showAddMoreWalletModal && ( - - )} ); } else { diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx index 7d90133d8..45bd9f035 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx @@ -238,12 +238,14 @@ const DropdownContainer = styled.div` @media ${device.mobileL} { left: 27%; + z-index: 999999999999 !important; } @media (min-width: 426px) and (max-width: 1150px) { left: 48%; } - @media (max-width: 480px) { + @media (max-width: 674px) { left: 25%; + margin-left: -130px; } `; From 50c3000e840b1e7116776765271b40970510214d Mon Sep 17 00:00:00 2001 From: KlausMikhaelson Date: Thu, 5 Oct 2023 22:29:45 -0600 Subject: [PATCH 4/6] fix: made changes as per the review --- .../chat/ChatProfile/GroupInfoModal.tsx | 158 ++++++------------ 1 file changed, 53 insertions(+), 105 deletions(-) diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx index 1a69b5f63..8a43cf76e 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx @@ -171,65 +171,47 @@ const dummyConditonsData: ConditionArray[] = [ }, }, ], - [ - { operator: 'any' }, - { - type: 'PUSH', - category: 'INVITE', - subcategory: 'DEFAULT', - data: { - inviterRoles: 'ADMIN', - }, - }, - { - type: 'PUSH', - category: 'INVITE', - subcategory: 'DEFAULT', - data: { - inviterRoles: 'OWNER', - }, - }, - ], + // [ + // { operator: 'any' }, + // { + // type: 'PUSH', + // category: 'INVITE', + // subcategory: 'DEFAULT', + // data: { + // inviterRoles: 'ADMIN', + // }, + // }, + // { + // type: 'PUSH', + // category: 'INVITE', + // subcategory: 'DEFAULT', + // data: { + // inviterRoles: 'OWNER', + // }, + // }, + // ], ]; const dummySingleCondtionData: ConditionArray[] = dummyConditonsData[2].map((criteria) => [ criteria, ]); -interface ConditionsInformationProps{ +interface ConditionsInformationProps { theme: IChatTheme; groupInfo?: IGroup | null; } -export const ConditionsInformation = ({theme, groupInfo}: ConditionsInformationProps) => { +export const ConditionsInformation = ({ theme, groupInfo }: ConditionsInformationProps) => { return ( -
-
- { - (groupInfo?.rules?.chat?.conditions || groupInfo?.rules?.entry?.conditions) && ( - - - -
- - Gated group - - - Conditions must be true to join - -
- - ) - } -
+
+ { + (groupInfo?.rules?.chat?.conditions || groupInfo?.rules?.entry?.conditions) && ( + + ) + } + Conditions to Join + + Conditions to Chat
) @@ -240,31 +222,32 @@ interface GroupTypeProps { Icon: string; header: string; subheader: string; - groupInfo?: IGroup | null; + cursor?: string; + handleNextInformation?: () => void; } -const GroupTypeBadge = ({ theme, Icon, header, subheader, groupInfo }: GroupTypeProps) => { +const GroupTypeBadge = ({ theme, Icon, header, subheader, handleNextInformation, cursor }: GroupTypeProps) => { return ( -
- +
+ -
- - {groupInfo?.isPublic ? 'Open' : 'Encrypted'} +
+ + {header} - {groupInfo?.isPublic - ? 'Chats are not encrypted' - : 'Chats are end-to-end encrypted'} + {subheader}
@@ -272,13 +255,17 @@ const GroupTypeBadge = ({ theme, Icon, header, subheader, groupInfo }: GroupType ) } +type GroupSectionProps = GroupInfoModalProps & { + handleNextInformation: () => void; + handlePreviousInformation: () => void; +} + + type GroupInfoModalProps = { theme: IChatTheme; setModal: React.Dispatch>; groupInfo: IGroup; setGroupInfo: React.Dispatch>; - handleNextInformation: () => void; - handlePreviousInformation: () => void; }; export const GROUPINFO_STEPS = { @@ -291,7 +278,7 @@ export type GROUP_INFO_TYPE = (typeof GROUPINFO_STEPS)[keyof typeof GROUPINFO_ST const GroupInformation = ({ theme, setModal, groupInfo, - setGroupInfo, handleNextInformation, handlePreviousInformation }: GroupInfoModalProps) => { + setGroupInfo, handleNextInformation, handlePreviousInformation }: GroupSectionProps) => { const { account } = useChatData(); const [showAddMoreWalletModal, setShowAddMoreWalletModal] = @@ -502,51 +489,12 @@ const GroupInformation = ({ theme, {groupInfo?.groupDescription} - - - - -
- - {groupInfo?.isPublic ? 'Open' : 'Encrypted'} - - - {groupInfo?.isPublic - ? 'Chats are not encrypted' - : 'Chats are end-to-end encrypted'} - -
- + { (groupInfo.rules?.chat?.conditions || groupInfo.rules?.entry?.conditions) && ( - - - -
- - Gated group - - - Conditions must be true to join - -
- + ) } From 5c440e7df30cd0e1e80e2c927cd94797b3b1f619 Mon Sep 17 00:00:00 2001 From: KlausMikhaelson Date: Fri, 6 Oct 2023 00:55:35 -0600 Subject: [PATCH 5/6] fix: removed more options from conditions in group info --- .../chat/ChatProfile/GroupInfoModal.tsx | 4 +- .../chat/CreateGroup/ConditionsComponent.tsx | 46 +++++++++++-------- 2 files changed, 29 insertions(+), 21 deletions(-) diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx index 8a43cf76e..b36f0a16d 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx @@ -210,9 +210,9 @@ export const ConditionsInformation = ({ theme, groupInfo }: ConditionsInformatio ) } Conditions to Join - + Conditions to Chat - +
) } diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx index 45bd9f035..a3472f4d1 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx @@ -21,6 +21,7 @@ export type CriteraValueType = { interface CriteriaProps { conditionData: ConditionArray[]; + moreOptions?: boolean; } interface MoreOptionsContainerProps { @@ -86,7 +87,7 @@ const CriteriaSection = ({ criteria }: { criteria: ConditionData }) => { ); }; // fix dropdown ui -const ConditionsComponent = ({ conditionData }: CriteriaProps) => { +const ConditionsComponent = ({ conditionData, moreOptions = true }: CriteriaProps) => { const [selectedIndex, setSelectedIndex] = useState | null>( null ); @@ -123,13 +124,13 @@ const ConditionsComponent = ({ conditionData }: CriteriaProps) => { const handleMoreOptionsClick = (row: number, col: number) => { setSelectedIndex([row, col]); }; -console.log(conditionData) + console.log(conditionData) return (
{/* we can reuse the code by creating a reusable component for it */} {conditionData && conditionData.slice(1).map((criteria, row) => ( -
+
{criteria.length === 1 && criteria.map((singleCriteria, col) => ( <> @@ -141,14 +142,18 @@ console.log(conditionData) justifyContent="space-between" > - + { + moreOptions && ( + + ) + }
)} @@ -197,14 +202,16 @@ console.log(conditionData) )} ))} - + {moreOptions && ( + + )}
)} @@ -251,6 +258,7 @@ const DropdownContainer = styled.div` const OperatorSpan = styled.span<{ theme: IChatTheme }>` padding: 4px 8px; + margin: 0 8px 0px 0px; border-radius: ${(props) => props.theme.borderRadius.modalInnerComponents}; background: ${(props) => props.theme.backgroundColor.modalHoverBackground}; color: ${(props) => props.theme.textColor?.modalSubHeadingText}; From 091eb9aafc03cdd615b95b8c4ad90b48bceaf797 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Fri, 6 Oct 2023 14:36:43 +0530 Subject: [PATCH 6/6] fix: fixed minor issues --- .../chat/ChatProfile/GroupInfoModal.tsx | 237 ++++++++++++------ .../chat/CreateGroup/ConditionsComponent.tsx | 2 +- .../chat/CreateGroup/CreateGroupModal.tsx | 2 +- .../chat/CreateGroup/CreateGroupType.tsx | 14 +- .../lib/components/chat/constants/index.ts | 11 + 5 files changed, 175 insertions(+), 91 deletions(-) diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx index b36f0a16d..3417ff89f 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx @@ -7,7 +7,7 @@ import { useChatData, useClickAway } from '../../../hooks'; import { DropdownValueType } from '../reusables/DropDown'; import { Section, Span, Image, Div } from '../../reusables/sharedStyling'; import { AddWalletContent } from './AddWalletContent'; -import { Modal, ModalHeader, } from '../reusables'; +import { Modal, ModalHeader } from '../reusables'; import useMediaQuery from '../../../hooks/useMediaQuery'; import useToast from '../reusables/NewToast'; import useUpdateGroup from '../../../hooks/chat/useUpdateGroup'; @@ -27,16 +27,15 @@ import { import LockIcon from '../../../icons/Lock.png'; import LockSlashIcon from '../../../icons/LockSlash.png'; import ArrowIcon from '../../../icons/CaretUp.svg'; -import CloseIcon from '../../../icons/close.svg'; import addIcon from '../../../icons/addicon.svg'; import DismissAdmin from '../../../icons/dismissadmin.svg'; import AddAdmin from '../../../icons/addadmin.svg'; import Remove from '../../../icons/remove.svg'; import { shortenText } from '../../../helpers'; -import TokenGatedIcon from "../../../icons/TokenGatedIcon.svg"; -import { DefineCondtion } from '../CreateGroup/DefineCondition'; +import TokenGatedIcon from '../../../icons/TokenGatedIcon.svg'; import ConditionsComponent from '../CreateGroup/ConditionsComponent'; import { ConditionArray } from '../exportedTypes'; +import { ACCESS_TYPE_TITLE } from '../constants'; const UPDATE_KEYS = { REMOVE_MEMBER: 'REMOVE_MEMBER', @@ -45,7 +44,7 @@ const UPDATE_KEYS = { ADD_ADMIN: 'ADD_ADMIN', } as const; -type UpdateKeys = (typeof UPDATE_KEYS)[keyof typeof UPDATE_KEYS]; +type UpdateKeys = typeof UPDATE_KEYS[keyof typeof UPDATE_KEYS]; const SUCCESS_MESSAGE = { REMOVE_MEMBER: 'Removed Member successfully', ADD_MEMBER: 'Group Invitation sent', @@ -62,7 +61,7 @@ type PendingMembersProps = { interface ShadowedProps { setPosition: boolean; -}; +} const PendingMembers = ({ groupInfo, @@ -192,58 +191,101 @@ const dummyConditonsData: ConditionArray[] = [ // ], ]; -const dummySingleCondtionData: ConditionArray[] = dummyConditonsData[2].map((criteria) => [ - criteria, -]); +const dummySingleCondtionData: ConditionArray[] = dummyConditonsData[2].map( + (criteria) => [criteria] +); interface ConditionsInformationProps { theme: IChatTheme; groupInfo?: IGroup | null; } -export const ConditionsInformation = ({ theme, groupInfo }: ConditionsInformationProps) => { +export const ConditionsInformation = ({ + theme, + groupInfo, +}: ConditionsInformationProps) => { return ( -
- { - (groupInfo?.rules?.chat?.conditions || groupInfo?.rules?.entry?.conditions) && ( - - ) - } - Conditions to Join - - Conditions to Chat - +
+ {(groupInfo?.rules?.chat?.conditions || + groupInfo?.rules?.entry?.conditions) && ( + + )} + {Object.keys(ACCESS_TYPE_TITLE).map((key) => ( + <> + + { ACCESS_TYPE_TITLE[key as keyof typeof ACCESS_TYPE_TITLE]?.heading} + + + + + + ))}
- ) -} + ); +}; interface GroupTypeProps { theme: IChatTheme; - Icon: string; + icon: string; header: string; subheader: string; cursor?: string; handleNextInformation?: () => void; } -const GroupTypeBadge = ({ theme, Icon, header, subheader, handleNextInformation, cursor }: GroupTypeProps) => { +const GroupTypeBadge = ({ + theme, + icon, + header, + subheader, + handleNextInformation, + cursor, +}: GroupTypeProps) => { return (
-
- +
+ {header} @@ -252,14 +294,13 @@ const GroupTypeBadge = ({ theme, Icon, header, subheader, handleNextInformation,
- ) -} + ); +}; type GroupSectionProps = GroupInfoModalProps & { handleNextInformation: () => void; - handlePreviousInformation: () => void; -} - + handlePreviousInformation?: () => void; +}; type GroupInfoModalProps = { theme: IChatTheme; @@ -273,13 +314,16 @@ export const GROUPINFO_STEPS = { CRITERIA: 2, } as const; -export type GROUP_INFO_TYPE = (typeof GROUPINFO_STEPS)[keyof typeof GROUPINFO_STEPS]; +export type GROUP_INFO_TYPE = + typeof GROUPINFO_STEPS[keyof typeof GROUPINFO_STEPS]; -const GroupInformation = ({ theme, +const GroupInformation = ({ + theme, setModal, groupInfo, - setGroupInfo, handleNextInformation, handlePreviousInformation }: GroupSectionProps) => { - + setGroupInfo, + handleNextInformation, +}: GroupSectionProps) => { const { account } = useChatData(); const [showAddMoreWalletModal, setShowAddMoreWalletModal] = useState(false); @@ -462,7 +506,6 @@ const GroupInformation = ({ theme, function: () => updateGroupAdmin(UPDATE_KEYS.ADD_ADMIN), }; - const handlePrevious = () => { setShowAddMoreWalletModal(false); }; @@ -472,34 +515,42 @@ const GroupInformation = ({ theme, }; return ( -
- +
Group Description {groupInfo?.groupDescription} - - { - (groupInfo.rules?.chat?.conditions || groupInfo.rules?.entry?.conditions) && ( - - ) - } + + {(groupInfo.rules?.chat?.conditions || + groupInfo.rules?.entry?.conditions) && ( + + )} - { - isAccountOwnerAdmin(groupInfo, account!) && + {isAccountOwnerAdmin(groupInfo, account!) && groupInfo?.members && groupInfo?.members?.length < 10 && ( - ) - } + )}
{groupInfo?.pendingMembers?.length > 0 && ( @@ -538,12 +588,7 @@ const GroupInformation = ({ theme, )}
-
+
{groupInfo?.members && groupInfo?.members?.length > 0 && groupInfo?.members.map((item, index) => ( @@ -554,8 +599,8 @@ const GroupInformation = ({ theme, item?.isAdmin && isAccountOwnerAdmin(groupInfo, account!) ? [removeAdminDropdown, removeMemberDropdown] : isAccountOwnerAdmin(groupInfo, account!) - ? [addAdminDropdown, removeMemberDropdown] - : [] + ? [addAdminDropdown, removeMemberDropdown] + : [] } selectedMemberAddress={selectedMemberAddress} setSelectedMemberAddress={setSelectedMemberAddress} @@ -576,8 +621,8 @@ const GroupInformation = ({ theme, /> )}
- ) -} + ); +}; export const GroupInfoModal = ({ theme, @@ -585,27 +630,46 @@ export const GroupInfoModal = ({ groupInfo, setGroupInfo, }: GroupInfoModalProps) => { - const [activeComponent, setActiveComponent] = useState(GROUPINFO_STEPS.GROUP_INFO); + const [activeComponent, setActiveComponent] = useState( + GROUPINFO_STEPS.GROUP_INFO + ); const handleNextInfo = () => { - console.log("criteria") - setActiveComponent(activeComponent + 1 as GROUP_INFO_TYPE); + console.log('criteria'); + setActiveComponent((activeComponent + 1) as GROUP_INFO_TYPE); console.log(activeComponent); }; const handlePreviousInfo = () => { - setActiveComponent(activeComponent - 1 as GROUP_INFO_TYPE); + setActiveComponent((activeComponent - 1) as GROUP_INFO_TYPE); }; const renderComponent = () => { switch (activeComponent) { case GROUPINFO_STEPS.GROUP_INFO: - return ; + return ( + + ); case GROUPINFO_STEPS.CRITERIA: return ; + default: - return ; + return ( + + ); } - } + }; const [showAddMoreWalletModal, setShowAddMoreWalletModal] = useState(false); useState(false); @@ -753,7 +817,13 @@ export const GroupInfoModal = ({ flexDirection="column" padding={isMobile ? '0px auto' : '0px 10px'} > - + ` +const ArrowImage = styled(Image)` margin-left: auto; transform: ${(props) => props?.setPosition ? 'rotate(0)' : 'rotate(180deg)'}; @@ -883,6 +953,17 @@ const Badge = styled.div` font-weight: 700; `; -//auto update members when an user accepts not done +const ConditionSection = styled(Section)<{ theme: IChatTheme }>` + &::-webkit-scrollbar-thumb { + background: ${(props) => props.theme.scrollbarColor}; + border-radius: 10px; + } + &::-webkit-scrollbar-button { + height: 40px; + } + &::-webkit-scrollbar { + width: 4px; + } +`; -//make the profile reusable +//auto update members when an user accepts not done diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx index a3472f4d1..fa245513b 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/ConditionsComponent.tsx @@ -126,7 +126,7 @@ const ConditionsComponent = ({ conditionData, moreOptions = true }: CriteriaProp }; console.log(conditionData) return ( -
+
{/* we can reuse the code by creating a reusable component for it */} {conditionData && conditionData.slice(1).map((criteria, row) => ( diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx index 512269b99..c7610d623 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx @@ -218,7 +218,7 @@ export const GatingRulesInformation = () => { const theme = useContext(ThemeContext); return ( -
+
Learn more about gating rules diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx index 5850954cc..c52d06cac 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupType.tsx @@ -14,7 +14,7 @@ import { ThemeContext } from '../theme/ThemeProvider'; import useMediaQuery from '../../../hooks/useMediaQuery'; import { device } from '../../../config'; import useToast from '../reusables/NewToast'; -import { OPERATOR_OPTIONS, OPERATOR_OPTIONS_INFO } from '../constants'; +import { ACCESS_TYPE_TITLE, OPERATOR_OPTIONS, OPERATOR_OPTIONS_INFO } from '../constants'; import { ConditionArray } from '../exportedTypes'; import ConditionsComponent from './ConditionsComponent'; import { OperatorContainer } from './OperatorContainer'; @@ -32,16 +32,7 @@ const GROUP_TYPE_OPTIONS: Array = [ }, ]; -const ACCESS_TYPE_TITLE = { - ENTRY: { - heading: 'Conditions to Join', - subHeading: 'Add a condition to join or leave it open for everyone', - }, - CHAT: { - heading: 'Conditions to Chat', - subHeading: 'Add a condition to join or leave it open for everyone', - }, -}; + interface AddConditionProps { heading: string; @@ -156,6 +147,7 @@ const AddConditionSection = ({ setOperator={setConditionOperator} />
+