fix: merge main

package.json

@@ -45,7 +45,7 @@
     "react-router-dom": "6.3.0",
     "regenerator-runtime": "0.13.7",
     "socket.io-client": "^4.5.2",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.0.8",
     "tiny-invariant": "^1.2.0",
     "ts-mocha": "^10.0.0",
     "tslib": "^2.3.0",

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Web3Provider } from '@ethersproject/providers';
-import { Chat, ITheme } from '@pushprotocol/uiweb';
+import { SupportChat, ITheme } from '@pushprotocol/uiweb';
 import { lightTheme } from '@pushprotocol/uiweb';
 import { EnvContext, Web3Context } from './context';
 
@@ -31,10 +31,11 @@ export const ChatSupportTest = () => {
   };
 
   return (
-    <Chat
-      account={account}
+    //works as Chat as well as Support Chat
+    <SupportChat
+
       signer={librarySigner}
-      supportAddress="0xD2A371cAFBE09333F6668229E4BD33196583c325"
+      supportAddress="0x6F7919412318E65109c5698bd0E640fc33DE2337"
       apiKey="tAWEnggQ9Z.UaDBNjrvlJZx3giBTIQDcT8bKQo1O1518uF1Tea7rPwfzXv2ouV5rX9ViwgJUrXm"
       env={env}
       greetingMsg="How can i help you?"

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 } 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 = [
@@ -15,7 +15,17 @@ const ChatViewComponentTest = () => {
       <h2>Chat UI Test page</h2>
       <CreateGroupModal onClose={()=>{console.log('in close')}} />
       <ChatViewComponentCard>
-        <ChatViewComponent onGetTokenClick={() => console.log("BOIIII RETURNNNSSSSS")} chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' limit={10} isConnected={true} />
+      <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>
   );
@@ -24,7 +34,8 @@ const ChatViewComponentTest = () => {
 export default ChatViewComponentTest;
 
 const ChatViewComponentCard = styled(Section)`
-  height: 60vh;
+  height: 80vh;
+  position:relative;
 `;
 //c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e
 //4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68

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

@@ -88,6 +88,7 @@ import SearchSpaceTest from './SpaceTest/SearchSpaceTest';
 import SearchGroupTest from './ChatTest/SearchGroupTest';
 import RejectRequestTest from './ChatTest/RejectRequestTest';
 import GetGroupMemberStatusTest from './ChatTest/GetGroupMemberStatusTest';
+import { ChatSupportTest } from './ChatSupportTest';
 
 
 window.Buffer = window.Buffer || Buffer;
@@ -313,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={darkChatTheme} account={account} pgpPrivateKey={pgpPrivateKey} signer={signer}>
+                <ChatUIProvider  env={env} theme={lightChatTheme} >
                   <SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
                     <Routes>
                       <Route
@@ -559,7 +560,10 @@ export function App() {
                       <Route
                         path="ChatProfile"
                         element={<ChatProfileTest />}
-                      />
+                      /> <Route
+                      path="ChatSupport"
+                      element={<ChatSupportTest />}
+                    />
                   </Routes>
                   {/* <ChatWidgetTest/> */}
                   {/* <ChatWidgetTest /> */}

packages/restapi/src/lib/space/acceptPromotionRequest.ts

@@ -1,11 +1,15 @@
+import { produce } from 'immer';
+
 import type Space from './Space';
 import { addSpeakers } from './addSpeakers';
+import sendLiveSpaceData from './helpers/sendLiveSpaceData';
 
 import { pCAIP10ToWallet } from '../helpers';
 import {
   SPACE_ACCEPT_REQUEST_TYPE,
   SPACE_INVITE_ROLES,
 } from '../payloads/constants';
+import { CHAT } from '../types';
 
 export interface IAcceptPromotionRequestType {
   signalData: any;
@@ -35,6 +39,35 @@ export async function acceptPromotionRequest(
     env: this.env,
   });
 
+  const modifiedLiveSpaceData = produce(
+    this.spaceSpecificData.liveSpaceData,
+    (draft) => {
+      const listenerIndex =
+        this.spaceSpecificData.liveSpaceData.listeners.findIndex(
+          (listener) =>
+            pCAIP10ToWallet(listener.address) ===
+            pCAIP10ToWallet(promoteeAddress)
+        );
+
+      draft.listeners.splice(listenerIndex, 1);
+
+      draft.speakers.push({
+        address: pCAIP10ToWallet(promoteeAddress),
+        emojiReactions: null,
+        audio: null,
+      });
+    }
+  );
+
+  await sendLiveSpaceData({
+    spaceId: this.spaceSpecificData.spaceId,
+    pgpPrivateKey: this.pgpPrivateKey,
+    env: this.env,
+    signer: this.signer,
+    liveSpaceData: modifiedLiveSpaceData,
+    action: CHAT.META.SPACE.SPEAKER.PRVILEGE,
+  });
+
   // accept the promotion request
   // this.acceptRequest({
   //   signalData,

packages/uiweb/package.json

@@ -24,6 +24,8 @@
     "livekit-client": "^1.13.3",
     "moment": "^2.29.4",
     "react-icons": "^4.10.1",
+    "react-easy-crop": "^4.1.4",
+    "react-image-file-resizer": "^0.4.7",
     "react-toastify": "^9.1.3",
     "react-twitter-embed": "^4.0.4",
     "uuid": "^9.0.1"
@@ -32,6 +34,6 @@
     "@pushprotocol/restapi": "^1.2.15",
     "@pushprotocol/socket": "^0.5.0",
     "react": ">=16.8.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^6.0.8"
   }
 }

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

@@ -17,7 +17,7 @@ import useToast from '../reusables/NewToast';
 import {
   getNewChatUser,
 } from '../../../helpers';
-import { ModalButtonProps, User } from '../exportedTypes';
+import { IChatTheme, ModalButtonProps, User } from '../exportedTypes';
 import { addWalletValidation } from '../helpers/helper';
 import { device } from '../../../config';
 import CloseIcon from '../../../icons/close.svg';
@@ -44,7 +44,6 @@ export const AddWalletContent = ({
   handleMemberList,
   groupMembers,
   isLoading,
-  modalHeader,
 }: AddWalletContentProps) => {
   const theme = useContext(ThemeContext);
 
@@ -119,6 +118,7 @@ export const AddWalletContent = ({
 
   return (
     <Section
+      margin="auto"
       width={isMobile ? '100%' : '410px'}
       flexDirection="column"
       padding={isMobile ? '0px auto' : '0px 10px'}
@@ -241,15 +241,15 @@ const MultipleMemberList = styled.div`
   }
 `;
 
-const ModalConfirmButton = styled.button<ModalButtonProps>`
+const ModalConfirmButton = styled.button<ModalButtonProps & { theme: IChatTheme } >`
   margin: 60px 0 0 0;
   width: 197px;
   background: ${(props) =>
-    props.memberListCount ? props.theme.backgroundColor.buttonBackground : props.theme.backgroundColor.buttonDisableBackground};
+    props.memberListCount ? props.theme.backgroundColor!.buttonBackground : props.theme.backgroundColor!.buttonDisableBackground};
   color: ${(props) =>
-    props.memberListCount ? props.theme.textColor.buttonText : props.theme.textColor.buttonDisableText};
+    props.memberListCount ? props.theme.textColor!.buttonText : props.theme.textColor!.buttonDisableText};
   border: ${(props) =>
-    props.memberListCount ? 'none' : props.theme.border.modal};
+    props.memberListCount ? 'none' : props.theme.border!.modal};
   min-width: 50%;
   box-sizing: border-box;
   cursor: pointer;