Message container

packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatUITest.tsx

@@ -35,6 +35,9 @@ const ChatUITest = () => {
           <Link to="/messageList" className="nav-button">
             MESSAGE LIST
           </Link>
+          <Link to="/messageContainer" className="nav-button">
+            MESSAGE CONTAINER
+          </Link>
         </NavMenu>
       </Section>
     </div>

packages/examples/sdk-frontend-react/src/app/ChatUITest/MessageBubbles.tsx

@@ -49,7 +49,7 @@ export const MessageBubbles = () => {
     }, [])
 
     return (
-        <div style={{ height: "300px", width: "500px" }}>
+        <div style={{ height: "350px", width: "500px" }}>
             {message.map((msg) => (
                 <MessageBubble chat={msg} />
             ))}

packages/examples/sdk-frontend-react/src/app/ChatUITest/MessageContainer.tsx

@@ -0,0 +1,32 @@
+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 { EnvContext, Web3Context } from '../context';
+import { MessageContainer } from '@pushprotocol/uiweb';
+
+
+const MessageContainerTest = () => {
+
+
+
+  return (
+    <div>
+      <h2>Chat UI Test page</h2>
+
+      {/* <Loader show={isLoading} /> */}
+    <MessageContainerCard>
+
+      <MessageContainer chatId='24b029b8e07e60291bf9d8c0c48ff993fa1e0a99105459f7404c425c92e91bac' limit={10}/>
+      </MessageContainerCard>
+    </div>
+  );
+};
+
+export default MessageContainerTest;
+
+
+const MessageContainerCard = styled(Section)`
+height:60vh;
+`;

packages/examples/sdk-frontend-react/src/app/ChatUITest/MessageListTest.tsx

@@ -12,22 +12,7 @@ const MessageListTest = () => {
   const { account, pgpPrivateKey } = useContext<any>(Web3Context)
 
   const { env } = useContext<any>(EnvContext);
-  const [conversationHash, setConversationHash] = useState<string>('');
-
-  const fetchConversationHash = async () => {
-    const ConversationHash = await PUSHAPI.chat.conversationHash({
-      account: `eip155:${account}`,
-      conversationId: '831b1d93f36fa2fce6c3d8c7c41c53335c82ad13cbe05478579af235f10716dc',
-      env: env
-    });
-    setConversationHash(ConversationHash.threadHash);
-  }
-  console.log(conversationHash)
-  useEffect(() => {
-    if (pgpPrivateKey) {
-      fetchConversationHash();
-    }
-  })
+
 
   usePushChatSocket();
   return (
@@ -37,8 +22,7 @@ const MessageListTest = () => {
       {/* <Loader show={isLoading} /> */}
 
       <MessageListCard    >
-
-        <MessageList conversationHash={conversationHash} limit={10} isConnected={false} />
+        <MessageList chatId='0xe19c4b204a76db09697ea54c9182eba2195542aD' limit={10} />
 
       </MessageListCard>
       <TypeBar chatId='0xe19c4b204a76db09697ea54c9182eba2195542aD' isConnected={true} />
@@ -51,4 +35,5 @@ export default MessageListTest;
 
 const MessageListCard = styled(Section)`
 height:40vh;
+background:black;
 `;

packages/examples/sdk-frontend-react/src/app/app.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { Route, Routes, Link } from 'react-router-dom';
 import { useWeb3React } from '@web3-react/core';
@@ -79,6 +79,7 @@ import {
 import ChatUITest from './ChatUITest/ChatUITest';
 import MessageListTest from './ChatUITest/MessageListTest';
 import { MessageBubbles } from './ChatUITest/MessageBubbles';
+import MessageContainerTest from './ChatUITest/MessageContainer';
 import { ProfileHeaderTest } from './ChatUITest/ProfileHeader';
 import { lightChatTheme } from '@pushprotocol/uiweb';
 
@@ -211,8 +212,7 @@ const checkForWeb3Data = ({
 
 export function App() {
   const { account, library, active, chainId } = useWeb3React();
-
-  const [env, setEnv] = useState<ENV>(ENV.DEV);
+  const [env, setEnv] = useState<ENV>(ENV.STAGING);
   const [isCAIP, setIsCAIP] = useState(false);
 
   const { SpaceWidgetComponent } = useSpaceComponents();
@@ -492,7 +492,11 @@ export function App() {
                         path="messageList"
                         element={<MessageListTest />}
                       />
-                       <Route
+                      <Route
+                        path="messageContainer"
+                        element={<MessageContainerTest />}
+                        />
+                      <Route
                         path="profileHeader"
                         element={<ProfileHeaderTest />}
                       />
@@ -501,7 +505,6 @@ export function App() {
                   {/* <ChatWidgetTest /> */}
                   <SpaceWidgetComponent spaceId={spaceId} />
                 </SpacesUIProvider>
-
                 </ChatUIProvider>
               </AccountContext.Provider>
             </SocketContext.Provider>