Profile Header Component

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

@@ -26,6 +26,9 @@ const ChatUITest = () => {
 
       <Section>
         <NavMenu>
+        <Link to="/profileHeader" className="nav-button">
+            PROFILE HEADER
+          </Link>
           <Link to="/messageBubble" className="nav-button">
             CHAT BUBBLE
           </Link>

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

@@ -0,0 +1,14 @@
+import { ProfileHeader } from "@pushprotocol/uiweb";
+
+export const ProfileHeaderTest = () => {
+
+    return (
+        <div>
+            <ProfileHeader 
+                // chatId='0x455E5AA18469bC6ccEF49594645666C587A3a71B'
+            chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6'
+            // chatId="831b1d93f36fa2fce6c3d8c7c41c53335c82ad13cbe05478579af235f10716dc"
+             />
+        </div>
+    )
+}

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

@@ -79,6 +79,7 @@ import {
 import ChatUITest from './ChatUITest/ChatUITest';
 import MessageListTest from './ChatUITest/MessageListTest';
 import { MessageBubbles } from './ChatUITest/MessageBubbles';
+import { ProfileHeaderTest } from './ChatUITest/ProfileHeader';
 import { lightChatTheme } from '@pushprotocol/uiweb';
 
 window.Buffer = window.Buffer || Buffer;
@@ -211,7 +212,7 @@ const checkForWeb3Data = ({
 export function App() {
   const { account, library, active, chainId } = useWeb3React();
 
-  const [env, setEnv] = useState<ENV>(ENV.STAGING);
+  const [env, setEnv] = useState<ENV>(ENV.DEV);
   const [isCAIP, setIsCAIP] = useState(false);
 
   const { SpaceWidgetComponent } = useSpaceComponents();
@@ -304,7 +305,7 @@ export function App() {
           <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
-                <ChatUIProvider account={account!} pgpPrivateKey={pgpPrivateKey} env={ENV.STAGING} theme={darkChatTheme}>
+                <ChatUIProvider account={account!} pgpPrivateKey={pgpPrivateKey} env={env} theme={darkChatTheme}>
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route
@@ -491,11 +492,16 @@ export function App() {
                         path="messageList"
                         element={<MessageListTest />}
                       />
-                    </Routes>
-                    {/* <ChatWidgetTest/> */}
-                    {/* <ChatWidgetTest /> */}
-                    <SpaceWidgetComponent spaceId={spaceId} />
-                  </SpacesUIProvider>
+                       <Route
+                        path="profileHeader"
+                        element={<ProfileHeaderTest />}
+                      />
+                  </Routes>
+                  {/* <ChatWidgetTest/> */}
+                  {/* <ChatWidgetTest /> */}
+                  <SpaceWidgetComponent spaceId={spaceId} />
+                </SpacesUIProvider>
+
                 </ChatUIProvider>
               </AccountContext.Provider>
             </SocketContext.Provider>

packages/uiweb/package.json

@@ -14,6 +14,7 @@
     "gif-picker-react": "^1.1.0",
     "html-react-parser": "^1.4.13",
     "moment": "^2.29.4",
+    "react-toastify": "^9.1.3",
     "react-twitter-embed": "^4.0.4"
   },
   "peerDependencies": {