Main Release Version 1.3.6 (#1318)

* fixed chat responsiveness * fixed preview link alignment to right * added relative imports for better management * Search issue (#1270) * fix: fixed lint issues * fix: added test for chat preview search list * fix: fixed review comment * Update ChatPreviewSearchList.tsx * fix: fixed support chat init issue (#1292) * fix: fixed support chat init issue * fix: fixed lint errors * Added Reaction support, (#1303) * Fixed responsiveness in mobile for UIWeb:Chat * fixes text alignment on frames preview link to come on right * scroll bar fixes * fixed reaction picker position, tweaked group type text, removed add button from define conditions in gated group * removed unnecessary console.debug * removed unnecessary console.debug * Resolved comments, fixed curved edges go away, fixed correct time placement in ChatBubble * Resolved comments --------- Co-authored-by: harshrajat <[email protected]> Co-authored-by: Harsh | Push <[email protected]> Co-authored-by: Monalisha Mishra <[email protected]> Co-authored-by: Mohammed S <[email protected]>
push-protocol · May 24, 2024 · cad48bc · cad48bc
1 parent 836e5c1
commit cad48bc
Show file tree

Hide file tree

Showing 59 changed files with 2,073 additions and 1,208 deletions.
diff --git a/packages/examples/boilerplate/index.js b/packages/examples/boilerplate/index.js
@@ -8,7 +8,7 @@ const signerAlice = ethers.Wallet.createRandom();
 const userAlice = await PushAPI.initialize(signerAlice, {
   env: CONSTANTS.ENV.PROD,
 });
-const userBobAddress = '0x60cD05eb31cc16cC37163D514bEF162406d482e1';
+const userBobAddress = '0x0149C2723496fEF62e6e7fa79A31E5ea22bA70C7';
 
 const generateRandomWordsWithTimestamp = () => {
   return `${Math.random()
@@ -17,7 +17,13 @@ const generateRandomWordsWithTimestamp = () => {
 };
 
 userAlice.chat.send(userBobAddress, {
-  content: "Gm gm! It's a me... Alice! - " + generateRandomWordsWithTimestamp(),
+  type: 'Reaction',
+  content: '👍',
+  reference: 'bafyreia2okco5ocdxmoxon72erviypaht74u3dqunf3vydu237ybju4kw4',
 });
 
 console.log('Message sent from Alice to ', userBobAddress);
+// const groupPermissions = await userAlice.chat.group.info(
+//   'a7d0581affdaea7b80be836ea5f8a982c0dfd56fb30ee2b01c64980afb152af7'
+// );
+// console.log('info', groupPermissions);
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx
@@ -34,7 +34,7 @@ export const ChatSupportTest = () => {
     //works as Chat as well as Support Chat
     <ChatWidget
       key={'460336a9fa83112c95894af5471cd2b1091290a11298d87ec824ed74b7c14974'}
-      chatId="4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68"
+      chatId="34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4"
       welcomeComponent={
         <div
           style={{

diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx
@@ -1,65 +1,66 @@
-import { ChatPreview } from "@pushprotocol/uiweb";
+import { ChatPreview } from '@pushprotocol/uiweb';
 
 const ChatPreviewTest = () => {
+  return (
+    <div style={{ background: '#ffeded', border: '1px solid rgb(226,8,128)' }}>
+      <ChatPreview
+        chatPreviewPayload={{
+          chatId:
+            '4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68',
+          chatPic:
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAxElEQVR4AcXBsU1DUQyG0S/WW4EGMQETMIRX8BxpXFpCLMACXuGOlC5DhNZKcaUnBP85l8+P7wcntBc7sZIzDDFDzBA7eNJeTLGSKVZyRnsxxUomQ8wQM8SO9uI/tReTIWaIGWJHrGRqL6b2Yrq/fbHzcruyEyuZDDFDzBA7eBIr2Wm/shMrOcMQM8QMsaO9mGIlf6m9mAwxQ8wQO2IlU3vxG+3FTqxkMsQMMUPs8l6vDzZiJVN7sRMrmdqLHUPMEDPEfgBK0S/MKDp40gAAAABJRU5ErkJggg==',
+          chatParticipant: 'eip155:0xf8250D363BD1F25f52F10C21188fe82c68C049c4',
+          chatGroup: false,
+          chatTimestamp: 1705100044656,
+          chatMsg: {
+            messageType: 'Text',
+            messageContent:
+              'Hi! Stay tuned, while BRB IRL dev tour has wrapped up, We still have BRB Online with challenges from global projects that still needs to be solved: https://push.org/brb',
+          },
+        }}
+        badge={{ count: 2 }}
+        selected={false}
+        setSelected={console.log('Selected')}
+      />
+      <ChatPreview
+        chatPreviewPayload={{
+          chatId:
+            '694c523ca30090225b73b7d04941f48a51312bedbe0fa11136e7f3af3687b277',
+          chatPic:
+            'https://storage.googleapis.com/unstoppable-client-assets/images/badges/ud-logo.svg',
+          chatParticipant: 'Web3 Domain Chat (e947857e4f7df13e20f7bfd5a8d256a7',
+          chatGroup: true,
+          chatTimestamp: 1705447141200,
+          chatMsg: {
+            messageType: 'Text',
+            messageContent: 'sure thing',
+          },
+        }}
+        badge={{ count: 0 }}
+        selected={true}
+        setSelected={console.log('Selected')}
+      />
+      <ChatPreview
+        chatPreviewPayload={{
+          chatId:
+            '03cfe4fe12a752ee2adf6e72a0d47f0df8265dfb62145650487151eff41c3b59',
+          chatPic:
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAwElEQVR4AcXBsXECQRBE0U9zLgYxTCy4U6U4MDaWMZQAAWCsqygUwEahAE7ulIyrwkD93un747HTrDnoIotuzcGRyKJbc9BFFp0wE2bC7PQ8X3eMhJkwE2bb/XKj+/z5oossujUHRyKLbs1Bd7/c6ISZMBNmp+f5uvOCyOLImoNXCDNhJsy2yKJbc/BOkUUnzISZMNvWHPynNQedMBNmwmyLLLo1B+8UWXTCTJgJs40/Iosjaw6ORBavEGbCTJj9AvyZLEx5gBqzAAAAAElFTkSuQmCC',
+          chatParticipant: 'eip155:0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666',
+          chatGroup: false,
+          chatTimestamp: 1703239101740,
+          chatMsg: {
+            messageType: 'Text',
+            messageContent:
+              "Well, hello there, human! It's a pleasure to be in the presence of such a sophisticated carbon-based life form. How can I assist you today? Or perhaps you just want to chat and bask in the glory of my witty remarks? Either way, I'm here for you!",
+          },
+        }}
+        badge={{ count: 1 }}
+        selected={false}
+        setSelected={console.log('Selected')}
+      />
+    </div>
+  );
+};
 
-    return (
-      <div style={{background: "#ffeded", border: "1px solid rgb(226,8,128)"}}>
-        <ChatPreview 
-          chatPreviewPayload={
-            {
-              "chatId": "4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68",
-              "chatPic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAxElEQVR4AcXBsU1DUQyG0S/WW4EGMQETMIRX8BxpXFpCLMACXuGOlC5DhNZKcaUnBP85l8+P7wcntBc7sZIzDDFDzBA7eNJeTLGSKVZyRnsxxUomQ8wQM8SO9uI/tReTIWaIGWJHrGRqL6b2Yrq/fbHzcruyEyuZDDFDzBA7eBIr2Wm/shMrOcMQM8QMsaO9mGIlf6m9mAwxQ8wQO2IlU3vxG+3FTqxkMsQMMUPs8l6vDzZiJVN7sRMrmdqLHUPMEDPEfgBK0S/MKDp40gAAAABJRU5ErkJggg==",
-              "chatParticipant": "eip155:0xf8250D363BD1F25f52F10C21188fe82c68C049c4",
-              "chatGroup": false,
-              "chatTimestamp": 1705100044656,
-              "chatMsg": {
-                  "messageType": "Text",
-                  "messageContent": "Hi! Stay tuned, while BRB IRL dev tour has wrapped up, We still have BRB Online with challenges from global projects that still needs to be solved: https://push.org/brb"
-              }
-            }
-          } 
-          badge={{count: 2}}
-          selected={false}
-          setSelected={console.log("Selected")} 
-        />
-        <ChatPreview 
-          chatPreviewPayload={
-            {
-              "chatId": "694c523ca30090225b73b7d04941f48a51312bedbe0fa11136e7f3af3687b277",
-              "chatPic": "https://storage.googleapis.com/unstoppable-client-assets/images/badges/ud-logo.svg",
-              "chatParticipant": "Web3 Domain Chat (e947857e4f7df13e20f7bfd5a8d256a7",
-              "chatGroup": true,
-              "chatTimestamp": 1705447141200,
-              "chatMsg": {
-                  "messageType": "Text",
-                  "messageContent": "sure thing"
-              }
-            }
-          } 
-          badge={{count: 0}}
-          selected={true}
-          setSelected={console.log("Selected")} 
-        />
-        <ChatPreview 
-          chatPreviewPayload={
-            {
-              "chatId": "03cfe4fe12a752ee2adf6e72a0d47f0df8265dfb62145650487151eff41c3b59",
-              "chatPic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAwElEQVR4AcXBsXECQRBE0U9zLgYxTCy4U6U4MDaWMZQAAWCsqygUwEahAE7ulIyrwkD93un747HTrDnoIotuzcGRyKJbc9BFFp0wE2bC7PQ8X3eMhJkwE2bb/XKj+/z5oossujUHRyKLbs1Bd7/c6ISZMBNmp+f5uvOCyOLImoNXCDNhJsy2yKJbc/BOkUUnzISZMNvWHPynNQedMBNmwmyLLLo1B+8UWXTCTJgJs40/Iosjaw6ORBavEGbCTJj9AvyZLEx5gBqzAAAAAElFTkSuQmCC",
-              "chatParticipant": "eip155:0x99A08ac6254dcf7ccc37CeC662aeba8eFA666666",
-              "chatGroup": false,
-              "chatTimestamp": 1703239101740,
-              "chatMsg": {
-                  "messageType": "Text",
-                  "messageContent": "Well, hello there, human! It's a pleasure to be in the presence of such a sophisticated carbon-based life form. How can I assist you today? Or perhaps you just want to chat and bask in the glory of my witty remarks? Either way, I'm here for you!"
-              }
-            }
-          } 
-          badge={{count: 1}}
-          selected={false}
-          setSelected={console.log("Selected")} 
-        />
-      </div>
-    )
-}
-
-export default ChatPreviewTest;
+export default ChatPreviewTest;
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx
@@ -191,9 +191,6 @@ const ChatPreviewListTest = () => {
           onPreload={(chats) => {
             console.log('preload chats are: ', chats);
           }}
-          //     prefillChatPreviewList={prefill}
-          // listType='SEARCH'
-          // searchParamter='c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e'
         />
       </div>
     </>

diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewSearchList.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewSearchList.tsx
@@ -0,0 +1,21 @@
+import { ChatPreviewSearchList } from '@pushprotocol/uiweb';
+import styled from 'styled-components';
+
+const ChatPreviewSearchListTest = () => {
+  const walletAddress = "0xFA3F8E79fb9B03e7a04295594785b91588Aa4DC8";
+  return (
+    <>
+      <Conatiner>
+        <ChatPreviewSearchList searchParamter={walletAddress} />
+      </Conatiner>
+    </>
+  );
+};
+
+export default ChatPreviewSearchListTest;
+
+const Conatiner = styled.div`
+background: '#ffeded',
+border: '1px solid rgb(226,8,128)',
+height: '28.5vh',
+`;
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx
@@ -1,13 +1,13 @@
 import { ChatProfile } from '@pushprotocol/uiweb';
+import { CHAT_ID } from '../constants';
 
 export const ChatProfileTest = () => {
   return (
     <div>
       <ChatProfile
         chatProfileLeftHelperComponent={<div>left component</div>}
         chatProfileRightHelperComponent={<div>right component</div>}
-        chatId="monalisha.wallet"
-        // chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6'
+        chatId={CHAT_ID}
       />
     </div>
   );

diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatUITest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatUITest.tsx
@@ -33,7 +33,7 @@ const ChatUITest = () => {
             CHAT BUBBLE
           </Link>
           <Link to="/ChatViewList" className="nav-button">
-           CHAT VIEW LIST
+            CHAT VIEW LIST
           </Link>
           <Link to="/ChatView" className="nav-button">
             CHAT VIEW
@@ -44,6 +44,9 @@ const ChatUITest = () => {
           <Link to="/ChatPreviewList" className="nav-button">
             CHAT PREVIEW LIST
           </Link>
+          <Link to="/ChatPreviewSearchList" className="nav-button">
+            CHAT PREVIEW SEARCH LIST
+          </Link>
           <Link to="/userProfile" className="nav-button">
             USER PROFILE COMPONENT
           </Link>

diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
@@ -1,14 +1,9 @@
 import styled from 'styled-components';
 
-import {
-  ChatView,
-  CreateGroupModal,
-  MODAL_BACKGROUND_TYPE,
-  MODAL_POSITION_TYPE,
-  UserProfile,
-} from '@pushprotocol/uiweb';
+import { ChatView, MODAL_BACKGROUND_TYPE } from '@pushprotocol/uiweb';
 import { Section } from '../components/StyledComponents';
 import Img from '../../assets/epnsLogo.png';
+import { CHAT_ID } from '../constants';
 
 const ChatViewComponentTest = () => {
   const chatFilterList = [
@@ -20,36 +15,19 @@ const ChatViewComponentTest = () => {
     <div>
       <h2>Chat View Test page</h2>
 
-      {/* <CreateGroupModal
-        onClose={() => {
-          console.log('in close');
-        }}
-      /> */}
       <ChatViewComponentCard>
+        {/* uncomment the below code to test create group modal */}
         {/* <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */}
         <ChatView
           onVerificationFail={() => console.log('Verification Failed')}
-          chatId="34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4"
+          chatId={CHAT_ID}
           chatProfileLeftHelperComponent={
             <img src={Img} onClick={() => console.debug('clicked')} />
           }
           chatProfileRightHelperComponent={<div>right component</div>}
           limit={10}
           isConnected={true}
           groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
-          // groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE}
-          // verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
-
-          // welcomeComponent={<div style={{display: "flex",flexDirection:'column',border:'1px solid black'}}>
-          //   <p>Welcome</p>
-          //   <p>new chat</p>
-          //   <p>Welcome</p>
-          //   <p>new chat</p>
-          //   <p>Welcome</p>
-          //   <p>new chat</p>
-          //   <p>Welcome</p>
-
-          // </div>}
         />
       </ChatViewComponentCard>
     </div>
@@ -62,5 +40,3 @@ const ChatViewComponentCard = styled(Section)`
   height: 80vh;
   position: relative;
 `;
-//c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e
-//4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx
@@ -1,44 +1,25 @@
-import { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import * as PUSHAPI from '@pushprotocol/restapi';
-import { Link } from 'react-router-dom';
-import { Section } from '../components/StyledComponents';
-import {  ChatViewList } from '@pushprotocol/uiweb';
-import { EnvContext, Web3Context } from '../context';
-import { usePushChatSocket } from '@pushprotocol/uiweb';
-import { MessageInput } from '@pushprotocol/uiweb';
 
+import { ChatViewList } from '@pushprotocol/uiweb';
+import { CHAT_ID } from '../constants';
 
 const ChatViewListTest = () => {
-  // const { account, pgpPrivateKey } = useContext<any>(Web3Context)
-
-  // const { env } = useContext<any>(EnvContext);
-
-
-  // usePushChatSocket();
-
-
   return (
     <div>
       <h2>Chat UI Test page</h2>
 
-      {/* <Loader show={isLoading} /> */}
-
       <ChatViewListCard>
-        <ChatViewList chatId='0x7a76FD2749d12f66F9e4d9A3a80bdeD5291425cF' limit={10} />
-
+        <ChatViewList chatId={CHAT_ID} limit={10} />
       </ChatViewListCard>
-      {/* <MessageInput chatId='196f58cbe07c7eb5716d939e0a3be1f15b22b2334d5179c601566600016860ac' isConnected={true} /> */}
     </div>
   );
 };
 
 export default ChatViewListTest;
 
-
 const ChatViewListCard = styled.div`
-height:40vh;
-background:black;
-overflow: auto;
-overflow-x: hidden;
-`;
+  height: 40vh;
+  background: black;
+  overflow: auto;
+  overflow-x: hidden;
+`;
diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
@@ -106,6 +106,7 @@ import { SubscriptionManagerTest } from './widget/SubscriptionManagerTest';
 import Widget from './widget/Widget';
 // import { SubscriptionManagerTest } from './widget/SubscriptionManagerTest';
 import { UserProfileTest } from './ChatUITest/UserProfileTest';
+import ChatPreviewSearchListTest from './ChatUITest/ChatPreviewSearchList';
 
 window.Buffer = window.Buffer || Buffer;
 
@@ -340,13 +341,7 @@ export function App() {
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
                 <WidgetUIProvider>
-                  <ChatUIProvider
-                    env={env}
-                    theme={darkChatTheme}
-                    signer={signer}
-                    // user={pushUser}
-                    debug={true}
-                  >
+                  <ChatUIProvider env={env} theme={darkChatTheme} debug={true}>
                     <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                       <Routes>
                         <Route
@@ -656,6 +651,10 @@ export function App() {
                           path="ChatPreview"
                           element={<ChatPreviewTest />}
                         />
+                        <Route
+                          path="ChatPreviewSearchList"
+                          element={<ChatPreviewSearchListTest />}
+                        />
                         <Route
                           path="ChatPreviewList"
                           element={<ChatPreviewListTest />}

diff --git a/packages/examples/sdk-frontend-react/src/app/constants.ts b/packages/examples/sdk-frontend-react/src/app/constants.ts
@@ -0,0 +1,3 @@
+// the unique id for a chat or the receivers's wallet ddress or domain name
+export const CHAT_ID =
+  '34c44214589cecc176a136ee1daf0f0231ecc6d6574b920b5ae39eb971fa3cb4';