fix: added alias for chatview

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { Section } from '../components/StyledComponents';
 import { CreateGroupModal, MODAL_BACKGROUND_TYPE } from "@pushprotocol/uiweb";
-import { ChatViewComponent } from '@pushprotocol/uiweb';
+import { ChatView } from '@pushprotocol/uiweb';
 
 const ChatViewComponentTest = () => {
   const chatFilterList = [
@@ -15,7 +15,7 @@ const ChatViewComponentTest = () => {
       <h2>Chat UI Test page</h2>
       {/* <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}/> */}
       <ChatViewComponentCard>
-        <ChatViewComponent 
+        <ChatView 
         onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")} 
         chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' 
         limit={10}

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

@@ -313,7 +313,7 @@ export function App() {
           <Web3Context.Provider value={{ account, active, library, chainId }}>
             <SocketContext.Provider value={socketData}>
               <AccountContext.Provider value={{ pgpPrivateKey, setSpaceId }}>
-                <ChatUIProvider  env={env} theme={lightChatTheme} account={account} pgpPrivateKey={pgpPrivateKey} signer={signer}>
+                <ChatUIProvider  env={env} theme={lightChatTheme} >
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route

packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx

@@ -183,7 +183,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
           customStyle={{ fontSize: '17px' }}
         />
         <Section
-          zIndex="300"
+          zIndex="unset"
           flexDirection="row"
           gap="10px"
           margin="0 20px 0 auto"

packages/uiweb/src/lib/components/chat/ChatViewComponent/index.ts

@@ -1 +1,2 @@
-export {ChatViewComponent} from './ChatViewComponent';
+export {ChatViewComponent} from './ChatViewComponent';
+export {ChatViewComponent as ChatView} from './ChatViewComponent';

packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx

@@ -37,9 +37,6 @@ export const ConnectButtonSub = ({autoConnect = false})  => {
     setSigner,
   } = useChatData();
   const theme = useContext(ThemeContext);
-  const {fetchChatProfile} = useGetChatProfile();
-  const {creteChatProfile} = useCreateChatProfile();
-  const {decryptPGPKey} = useDecryptPGPKey();
 
 
   const setUserData = () => {
@@ -54,7 +51,6 @@ export const ConnectButtonSub = ({autoConnect = false})  => {
     } else if (!wallet) {
       setAccount('')
       setSigner(undefined)
-      setPgpPrivateKey(null)
     }
   }
   useEffect(() => {
@@ -63,37 +59,7 @@ export const ConnectButtonSub = ({autoConnect = false})  => {
     setUserData()
   }, [wallet])
 
-  useEffect(() => {
-    (async () => {
-      if (account && signer) {
-        if (!pgpPrivateKey) await handleUserCreation();
-      }
-    })();
-  }, [account, signer]);
-
 
-  const handleUserCreation = async () => {
-    if (!account && !env) return;
-    try {
-      let user  = await fetchChatProfile({ profileId: account! ,env});
-      if (!user) {
-        if (!signer) return;
-        user = await creteChatProfile({ signer: signer ,env});
-      }
-      if (user?.encryptedPrivateKey && !pgpPrivateKey) {
-        const decryptPgpKey = await decryptPGPKey({
-          encryptedPrivateKey: user.encryptedPrivateKey,
-          account: account!,
-          signer: signer,
-          env: env,
-        });
-        if(decryptPgpKey)
-        setPgpPrivateKey(decryptPgpKey);
-      }
-    } catch (e: any) {
-      console.log(e);
-    }
-  };
   return !signer ? (
     <ConnectButtonDiv theme={theme}>
       <button onClick={() => (wallet ? disconnect(wallet) : connect())}>{connecting ? 'connecting' : wallet ? 'disconnect' : 'Connect Wallet'}</button>

packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx

@@ -375,23 +375,19 @@ export const MessageInput: React.FC<MessageInputProps> = ({
     }
   };
 
-  return !Object.keys(chatFeed || {}).length ? (
-    <>
-      {!pgpPrivateKey && (isConnected || !!signer) && (
-        <TypebarSection
-          width="100%"
-          overflow="hidden"
-          borderRadius="13px"
-          position="static"
-          padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
-          background={`${theme.backgroundColor?.messageInputBackground}`}
-          alignItems="center"
-          justifyContent="space-between"
-        >
-          <ConnectButtonSection autoConnect={autoConnect} />
-        </TypebarSection>
-      )}
-    </>
+  return !(pgpPrivateKey && account) && isConnected ? (
+    <TypebarSection
+      width="100%"
+      overflow="hidden"
+      borderRadius="13px"
+      position="static"
+      padding={` ${pgpPrivateKey ? '13px 16px' : ''}`}
+      background={`${theme.backgroundColor?.messageInputBackground}`}
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <ConnectButtonSection autoConnect={autoConnect} />
+    </TypebarSection>
   ) : !checkIfIntent({ chat: chatFeed, account: account! }) &&
     Object.keys(chatFeed || {}).length ? (
     <TypebarSection
@@ -484,7 +480,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
                   groupInfo={chatFeed?.groupInformation}
                   subheader="Please make sure the following conditions
                    are met to pariticpate and send messages."
-                   alert={true}
+                  alert={true}
                 />
                 <ConnectWrapperClose
                   onClick={() => {
@@ -496,7 +492,10 @@ export const MessageInput: React.FC<MessageInputProps> = ({
                 >
                   <ConnectClose>Cancel</ConnectClose>
                 </ConnectWrapperClose>
-                <InfoContainer cta='https://push.org/docs/chat/build/conditional-rules-for-group/' label="Learn more about access gating rules" />
+                <InfoContainer
+                  cta="https://push.org/docs/chat/build/conditional-rules-for-group/"
+                  label="Learn more about access gating rules"
+                />
               </Section>
               {/* </Section> */}
             </Modal>

packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx

@@ -9,6 +9,8 @@ import useGetChatProfile from '../hooks/useGetChatProfile';
 import { IUser, SignerType } from '@pushprotocol/restapi';
 import { IChatTheme, lightChatTheme } from '../components/chat/theme';
 import { getAddressFromSigner, pCAIP10ToWallet } from '../helpers';
+import useCreateChatProfile from '../hooks/useCreateChatProfile';
+import useDecryptPGPKey from '../hooks/useDecryptPGPKey';
 
 
 export interface IChatUIProviderProps {
@@ -40,6 +42,8 @@ export const ChatUIProvider = ({
 
   const [isPushChatSocketConnected, setIsPushChatSocketConnected] =
   useState<boolean>(false);
+  const {createChatProfile} = useCreateChatProfile();
+  const {decryptPGPKey} = useDecryptPGPKey();
 
   useEffect(() => {
     (async()=>{
@@ -59,9 +63,40 @@ export const ChatUIProvider = ({
       setPgpPrivateKeyVal(pgpPrivateKey);
     })()
 
-  }, [env,account,pgpPrivateKey,signer])
+  }, [env,account,signer,pgpPrivateKey])
 
 
+  useEffect(() => {
+    (async () => {
+      if (accountVal && signerVal) {
+        if (!pgpPrivateKeyVal) await handleUserCreation();
+      }
+    })();
+  }, [accountVal, signerVal]);
+
+
+  const handleUserCreation = async () => {
+    if (!accountVal && !envVal) return;
+    try {
+      let user  = await fetchChatProfile({ profileId: accountVal! ,env:envVal});
+      if (!user) {
+        if (!signerVal) return;
+        user = await createChatProfile({ signer: signerVal ,env:envVal});
+      }
+      if (user?.encryptedPrivateKey && !pgpPrivateKey) {
+        const decryptedPgpKey = await decryptPGPKey({
+          encryptedPrivateKey: user.encryptedPrivateKey,
+          account: accountVal!,
+          signer: signerVal,
+          env: envVal,
+        });
+        if(decryptedPgpKey)
+        setPgpPrivateKeyVal(decryptedPgpKey);
+      }
+    } catch (e: any) {
+      console.log(e);
+    }
+  };
 
 
 

packages/uiweb/src/lib/hooks/useCreateChatProfile.ts

@@ -8,7 +8,7 @@ export interface CreateChatProfileParams {
 }
 
 const useCreateChatProfile = () => {
-  const creteChatProfile = useCallback(
+  const createChatProfile = useCallback(
     async ({
       signer,
       env
@@ -27,7 +27,7 @@ const useCreateChatProfile = () => {
     []
   );
 
-  return { creteChatProfile };
+  return { createChatProfile };
 };
 
 export default useCreateChatProfile;