fix: added alias for chatview (#820)

* fix: added alias for chatview * fix: fixed modal position * fix: added chain icon in criteria condition
push-protocol · Nov 9, 2023 · 2940242 · 2940242
1 parent 54f6ee4
commit 2940242
Show file tree

Hide file tree

Showing 19 changed files with 362 additions and 149 deletions.
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,8 +1,8 @@
 import styled from 'styled-components';
 
 import { Section } from '../components/StyledComponents';
-import { CreateGroupModal, MODAL_BACKGROUND_TYPE } from "@pushprotocol/uiweb";
-import { ChatViewComponent } from '@pushprotocol/uiweb';
+import { CreateGroupModal, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from "@pushprotocol/uiweb";
+import { ChatView } from '@pushprotocol/uiweb';
 
 const ChatViewComponentTest = () => {
   const chatFilterList = [
@@ -13,14 +13,17 @@ const ChatViewComponentTest = () => {
   return (
     <div>
       <h2>Chat UI Test page</h2>
-      {/* <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}/> */}
       <ChatViewComponentCard>
-        <ChatViewComponent 
+      <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/>
+
+        <ChatView 
         onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")} 
         chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' 
         limit={10}
          isConnected={true} 
          groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}
+         groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE}
+         verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE}
          />
       </ChatViewComponentCard>
     </div>
@@ -30,7 +33,8 @@ const ChatViewComponentTest = () => {
 export default ChatViewComponentTest;
 
 const ChatViewComponentCard = styled(Section)`
-  height: 60vh;
+  height: 80vh;
+  position:relative;
 `;
 //c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e
 //4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68
diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx
@@ -314,7 +314,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

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -24,7 +24,9 @@ import {
   IChatProfile,
   IChatTheme,
   MODAL_BACKGROUND_TYPE,
+  MODAL_POSITION_TYPE,
   ModalBackgroundType,
+  ModalPositionType,
 } from '../exportedTypes';
 import { InfuraAPIKey, allowedNetworks, device } from '../../../config';
 import { resolveNewEns, shortenText } from '../../../helpers';
@@ -67,42 +69,40 @@ const Options = ({
 
   if (groupInfo && isGroup) {
     return (
+      <ImageItem onClick={() => setOptions(true)}>
+        <Image
+          src={VerticalEllipsisIcon}
+          height="21px"
+          maxHeight="32px"
+          width={'auto'}
+          cursor="pointer"
+        />
 
-        <ImageItem onClick={() => setOptions(true)}>
-          <Image
-            src={VerticalEllipsisIcon}
-            height="21px"
-            maxHeight="32px"
-            width={'auto'}
-            cursor="pointer"
-          />
-
-          {options && (
-            <DropDownBar theme={theme} ref={DropdownRef}>
-              <DropDownItem cursor="pointer" onClick={ShowModal}>
-                <Image
-                  src={InfoIcon}
-                  height="21px"
-                  maxHeight="21px"
-                  width={'auto'}
-                  cursor="pointer"
-                />
-
-                <TextItem cursor="pointer">Group Info</TextItem>
-              </DropDownItem>
-            </DropDownBar>
-          )}
-          {modal && (
-            <GroupInfoModal
-              theme={theme}
-              setModal={setModal}
-              groupInfo={groupInfo}
-              setGroupInfo={setGroupInfo}
-              groupInfoModalBackground={groupInfoModalBackground}
-            />
-          )}
-        </ImageItem>
+        {options && (
+          <DropDownBar theme={theme} ref={DropdownRef}>
+            <DropDownItem cursor="pointer" onClick={ShowModal}>
+              <Image
+                src={InfoIcon}
+                height="21px"
+                maxHeight="21px"
+                width={'auto'}
+                cursor="pointer"
+              />
 
+              <TextItem cursor="pointer">Group Info</TextItem>
+            </DropDownItem>
+          </DropDownBar>
+        )}
+        {modal && (
+          <GroupInfoModal
+            theme={theme}
+            setModal={setModal}
+            groupInfo={groupInfo}
+            setGroupInfo={setGroupInfo}
+            groupInfoModalBackground={groupInfoModalBackground}
+          />
+        )}
+      </ImageItem>
     );
   } else {
     return null;
@@ -113,6 +113,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   chatId,
   style,
   groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
 }) => {
   const theme = useContext(ThemeContext);
   const { account, env } = useChatData();
@@ -127,6 +128,16 @@ export const ChatProfile: React.FC<IChatProfile> = ({
   const isMobile = useMediaQuery(device.tablet);
   const l1ChainId = allowedNetworks[env].includes(1) ? 1 : 5;
   const provider = new ethers.providers.InfuraProvider(l1ChainId, InfuraAPIKey);
+  const DropdownRef = useRef(null);
+  const [modal, setModal] = useState(false);
+
+  useClickAway(DropdownRef, () => {
+    setOptions(false);
+  });
+
+  const ShowModal = () => {
+    setModal(true);
+  };
 
   const fetchProfileData = async () => {
     if (isValidETHAddress(chatId)) {
@@ -176,19 +187,18 @@ export const ChatProfile: React.FC<IChatProfile> = ({
 
   if (chatId && style === 'Info') {
     return (
-      <Container theme={theme}  >
+      <Container theme={theme}>
         <ProfileContainer
           theme={theme}
           member={{ wallet: getProfileName() as string, image: getImage() }}
           customStyle={{ fontSize: '17px' }}
         />
         <Section
-          zIndex="300"
+          zIndex="unset"
           flexDirection="row"
           gap="10px"
           margin="0 20px 0 auto"
           alignSelf="center"
-
         >
           {(groupInfo?.rules?.chat?.conditions ||
             groupInfo?.rules?.entry?.conditions) && <TokenGatedSvg />}
@@ -201,16 +211,54 @@ export const ChatProfile: React.FC<IChatProfile> = ({
             />
           )}
 
-          <Options
+          {!!groupInfo && isGroup && (
+            <ImageItem onClick={() => setOptions(true)}>
+              <Image
+                src={VerticalEllipsisIcon}
+                height="21px"
+                maxHeight="32px"
+                width={'auto'}
+                cursor="pointer"
+              />
+
+              {options && (
+                <DropDownBar theme={theme} ref={DropdownRef}>
+                  <DropDownItem cursor="pointer" onClick={ShowModal}>
+                    <Image
+                      src={InfoIcon}
+                      height="21px"
+                      maxHeight="21px"
+                      width={'auto'}
+                      cursor="pointer"
+                    />
+
+                    <TextItem cursor="pointer">Group Info</TextItem>
+                  </DropDownItem>
+                </DropDownBar>
+              )}
+            </ImageItem>
+          )}
+
+          {/* <Options
             options={options}
             setOptions={setOptions}
             isGroup={isGroup}
             groupInfo={groupInfo}
             setGroupInfo={setGroupInfo}
             theme={theme}
             groupInfoModalBackground={groupInfoModalBackground}
-          />
+          /> */}
         </Section>
+        {modal && (
+            <GroupInfoModal
+              theme={theme}
+              setModal={setModal}
+              groupInfo={groupInfo!}
+              setGroupInfo={setGroupInfo}
+              groupInfoModalBackground={groupInfoModalBackground}
+              groupInfoModalPositionType={groupInfoModalPositionType}
+            />
+          )}
         {/* {!isGroup && 
                     <VideoChatSection>
                         <Image src={VideoChatIcon} height="18px" maxHeight="18px" width={'auto'} />

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx
@@ -35,7 +35,7 @@ import { copyToClipboard, shortenText } from '../../../helpers';
 import ConditionsComponent from '../CreateGroup/ConditionsComponent';
 import { ACCESS_TYPE_TITLE, OPERATOR_OPTIONS_INFO } from '../constants';
 import { getRuleInfo } from '../helpers/getRulesToCondtionArray';
-import { MODAL_BACKGROUND_TYPE, ModalBackgroundType } from '../exportedTypes';
+import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, ModalBackgroundType, ModalPositionType } from '../exportedTypes';
 import { TokenGatedSvg } from '../../../icons/TokenGatedSvg';
 
 const UPDATE_KEYS = {
@@ -315,6 +315,7 @@ type GroupInfoModalProps = {
   groupInfo: IGroup;
   setGroupInfo: React.Dispatch<React.SetStateAction<IGroup | null | undefined>>;
   groupInfoModalBackground?: ModalBackgroundType;
+  groupInfoModalPositionType?: ModalPositionType;
 };
 
 export const GROUPINFO_STEPS = {
@@ -578,6 +579,7 @@ export const GroupInfoModal = ({
   groupInfo,
   setGroupInfo,
   groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+  groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
 }: GroupInfoModalProps) => {
   const [activeComponent, setActiveComponent] = useState<GROUP_INFO_TYPE>(
     GROUPINFO_STEPS.GROUP_INFO
@@ -738,6 +740,7 @@ export const GroupInfoModal = ({
       <Modal
         clickawayClose={onClose}
         modalBackground={groupInfoModalBackground}
+        modalPositionType={groupInfoModalPositionType}
       >
         {!showAddMoreWalletModal && (
           <Section

diff --git a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx b/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { IChatTheme, IChatViewComponentProps, MODAL_BACKGROUND_TYPE } from '../exportedTypes';
+import { IChatTheme, IChatViewComponentProps, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../exportedTypes';
 
 import { Section, Span } from '../../reusables';
 import { ChatViewList } from '../ChatViewList';
@@ -36,7 +36,10 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
     isConnected = true,
     autoConnect = false,
     onVerificationFail,
-    groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY
+    groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+    groupInfoModalPositionType =  MODAL_POSITION_TYPE.GLOBAL,
+    verificationFailModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
+    verificationFailModalPosition = MODAL_POSITION_TYPE.GLOBAL,
   } = options || {};
 
   const { env, signer, account, pgpPrivateKey } = useChatData();
@@ -59,7 +62,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
       padding="13px"
       theme={theme}
     >
-      {chatProfile && <ChatProfile chatId={chatId} style="Info" groupInfoModalBackground={groupInfoModalBackground} />}
+      {chatProfile && <ChatProfile chatId={chatId} style="Info" groupInfoModalBackground={groupInfoModalBackground} groupInfoModalPositionType={groupInfoModalPositionType}/>}
       <Section
         flex="1 1 auto"
         overflow="hidden"
@@ -86,14 +89,16 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (
         </Section>
       )}
       {(messageInput && (!!signer || (!!account && !!pgpPrivateKey) || isConnected )) && (
-        <Section flex="0 1 auto">
+        <Section flex="0 1 auto" position='static'>
           <MessageInput
             onVerificationFail={onVerificationFail}
             chatId={chatId}
             file={file}
             emoji={emoji}
             gif={gif}
             isConnected={isConnected}
+            verificationFailModalBackground={verificationFailModalBackground}
+            verificationFailModalPosition={verificationFailModalPosition}
             autoConnect = {autoConnect}
           />
         </Section>

diff --git a/packages/uiweb/src/lib/components/chat/ChatViewComponent/index.ts b/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';
diff --git a/packages/uiweb/src/lib/components/chat/ConnectButton/ConnectButton.tsx b/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>