Merge branch 'alpha' into blurr-fix

push-protocol · May 23, 2024 · d71292c · d71292c
2 parents f48c363 + c52e517
commit d71292c
Show file tree

Hide file tree

Showing 53 changed files with 1,674 additions and 1,051 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/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/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
@@ -341,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

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';
diff --git a/packages/uiweb/.babelrc b/packages/uiweb/.babelrc
@@ -15,7 +15,8 @@
       {
         "root": ["./src"],
         "alias": {
-          "components": "./src/lib/components"
+          "@components": "./src/lib/components",
+          "@icons": "./src/lib/icons"
           // Add more aliases as needed
         }
       }

diff --git a/packages/uiweb/package.json b/packages/uiweb/package.json
@@ -37,7 +37,7 @@
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "@pushprotocol/restapi": "1.7.17",
+    "@pushprotocol/restapi": "1.7.19",
     "@pushprotocol/socket": "^0.5.0",
     "react": ">=16.8.0",
     "styled-components": "^6.0.8"

diff --git a/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx b/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx
@@ -174,7 +174,9 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
         overrideAccount,
       });
 
-      console.debug('UIWeb::ChatPreviewList::loadMoreChats:: Fetched', type, nextpage, currentNonce, chatList);
+      console.debug(
+        `UIWeb::ChatPreviewList::loadMoreChats:: Fetched type - ${type} - nextpage - ${nextpage} - currentNonce - ${currentNonce} - chatList - ${chatList}`
+      );
 
       if (chatList) {
         // get and transform chats
@@ -489,12 +491,25 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
 
   useEffect(() => {
     if (
+      chatPreviewList.page !== 0 &&
       listInnerRef &&
       listInnerRef?.current &&
       listInnerRef?.current?.parentElement &&
-      !chatPreviewList.loading &&
-      !chatPreviewList.loaded
+      !chatPreviewList.loading
     ) {
+      console.debug(
+        'UIWeb::ChatPreviewList::useEffect[chatPreviewList.items]::Checking if we need to load more chats::',
+        chatPreviewList,
+        listInnerRef.current.clientHeight,
+        SCROLL_LIMIT,
+        listInnerRef.current.parentElement.clientHeight,
+        listInnerRef.current.clientHeight + SCROLL_LIMIT < listInnerRef.current.parentElement.clientHeight
+      );
+
+      if (chatPreviewList.loaded) {
+        return;
+      }
+
       if (listInnerRef.current.clientHeight + SCROLL_LIMIT < listInnerRef.current.parentElement.clientHeight) {
         // set loading to true
         setChatPreviewList((prev) => ({
@@ -504,7 +519,7 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
         }));
       }
     }
-  }, [chatPreviewList.page]);
+  }, [chatPreviewList.items]);
 
   // If badges count change
   useEffect(() => {
@@ -610,7 +625,7 @@ export const ChatPreviewList: React.FC<IChatPreviewListProps> = (options: IChatP
               message: 'Invalid search',
             };
           }
-          console.debug(error);
+
           if (!error) {
             const chatInfo = await fetchChat({ chatId: formattedChatId });
             if (chatInfo && chatInfo?.meta?.group)