feat: added icon in groupinfo to show if it is token gated or not (#748)

* feat: added icon in groupinfo to show if it is token gated or not * fix: fixed minor text * feat: created group criteria info modal and fixed dropdown * fix: made changes as per the review * fix: removed more options from conditions in group info * fix: fixed minor issues --------- Co-authored-by: Monalisha Mishra <[email protected]>
push-protocol · Oct 6, 2023 · 467c26b · 467c26b
1 parent 6859230
commit 467c26b
Show file tree

Hide file tree

Showing 10 changed files with 579 additions and 167 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -4,4 +4,4 @@
 echo "\nRunning GIT hooks..."
 yarn cleanbuild
 yarn nx affected --target=lint
-# yarn nx affected --target=test
+yarn nx affected --target=test
diff --git 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 = () => {
         <div>
             <ChatProfile 
                 // chatId='0x455E5AA18469bC6ccEF49594645666C587A3a71B'
-            chatId='24b029b8e07e60291bf9d8c0c48ff993fa1e0a99105459f7404c425c92e91bac'
+            chatId='a72832107b8ae7624c1ec997cee8e8b2bc21db708465555c20c4d5e029210cd6'
                 // chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6'
                 style="Info"
              />

diff --git 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 (
     <div>
       <h2>Chat UI Test page</h2>
-      <CreateGroupModal onClose={()=>{console.log('in close')}} />
+      {/* <CreateGroupModal onClose={()=>{console.log('in close')}} /> */}
       <ChatViewComponentCard>
-        <ChatViewComponent onGetTokenClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' limit={10} isConnected={true}  autoConnect={false}/>
+        <ChatViewComponent onGetTokenClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' limit={10} isConnected={true} />
       </ChatViewComponentCard>
     </div>
   );
@@ -27,3 +27,4 @@ const ChatViewComponentCard = styled(Section)`
   height: 60vh;
 `;
 //c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e
+//4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68
diff --git 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) && (
+          <Image
+            src={TokenGatedIcon}
+            height="24px"
+            maxHeight="24px"
+            width={'auto'}
+          />
+        )}
         <Image
           src={groupInfo?.isPublic ? PublicChatIcon : TokenGatedIcon}
           height="28px"
@@ -156,7 +164,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
       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<IChatProfile> = ({
     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<IChatProfile> = ({
         <ProfileContainer
           theme={theme}
           member={{ wallet: getProfileName() as string, image: getImage() }}
-          customStyle={{fontSize:'17px'}}
+          customStyle={{ fontSize: '17px' }}
         />
 
         <Options