diff --git a/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx index 905cd14ee..336586c14 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Web3Provider } from '@ethersproject/providers'; -import { SupportChat, ITheme } from '@pushprotocol/uiweb'; +import { SupportChat, ITheme, ChatWidget } from '@pushprotocol/uiweb'; import { lightTheme } from '@pushprotocol/uiweb'; import { EnvContext, Web3Context } from './context'; @@ -32,13 +32,29 @@ export const ChatSupportTest = () => { return ( //works as Chat as well as Support Chat - +

Welcome

+

new chat

+

Welcome

+

new chat

+

Welcome

+

new chat

+

Welcome

+ + + } + /> + // ); }; diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx index a021edfba..8237d5984 100644 --- a/packages/examples/sdk-frontend-react/src/app/app.tsx +++ b/packages/examples/sdk-frontend-react/src/app/app.tsx @@ -345,7 +345,7 @@ export function App() { diff --git a/packages/restapi/CHANGELOG.md b/packages/restapi/CHANGELOG.md index b63ac582d..d3df01c8f 100644 --- a/packages/restapi/CHANGELOG.md +++ b/packages/restapi/CHANGELOG.md @@ -2,6 +2,29 @@ This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver). +## [0.0.1-alpha.89](https://github.com/push-protocol/push-sdk/compare/restapi-0.0.1-alpha.88...restapi-0.0.1-alpha.89) (2024-04-27) + + +### Bug Fixes + +* stream fixes ([72516df](https://github.com/push-protocol/push-sdk/commit/72516df0740eadc3da2bc990a4b8780b5067f34b)) + + + +## [0.0.1-alpha.88](https://github.com/push-protocol/push-sdk/compare/restapi-0.0.1-alpha.87...restapi-0.0.1-alpha.88) (2024-04-25) + + +### Bug Fixes + +* logs ([05b8c22](https://github.com/push-protocol/push-sdk/commit/05b8c22638235a6af0acdf419e1c44614635e746)) +* Merge branch 'alpha' into alpha-deployment ([e30e7b6](https://github.com/push-protocol/push-sdk/commit/e30e7b6dc9c90585ffc66231ac20ef008bb1ded7)) + + + +## [0.0.1-alpha.87](https://github.com/push-protocol/push-sdk/compare/restapi-0.0.1-alpha.86...restapi-0.0.1-alpha.87) (2024-04-25) + + + ## [0.0.1-alpha.86](https://github.com/push-protocol/push-sdk/compare/restapi-0.0.1-alpha.85...restapi-0.0.1-alpha.86) (2024-04-23) diff --git a/packages/restapi/package.json b/packages/restapi/package.json index eb3fad6a2..1b737bd84 100644 --- a/packages/restapi/package.json +++ b/packages/restapi/package.json @@ -1,6 +1,6 @@ { "name": "@pushprotocol/restapi", - "version": "0.0.1-alpha.86", + "version": "0.0.1-alpha.89", "type": "commonjs", "publishConfig": { "registry": "https://registry.npmjs.org/" diff --git a/packages/restapi/src/lib/pushapi/chat.ts b/packages/restapi/src/lib/pushapi/chat.ts index 893ab2ed3..b3570b291 100644 --- a/packages/restapi/src/lib/pushapi/chat.ts +++ b/packages/restapi/src/lib/pushapi/chat.ts @@ -26,7 +26,11 @@ import { import * as PUSH_USER from '../user'; import * as PUSH_CHAT from '../chat'; import { PGPHelper } from '../chat/helpers'; -import { convertToValidDID, isValidPushCAIP } from '../helpers'; +import { + convertToValidDID, + isValidPushCAIP, + walletToPCAIP10, +} from '../helpers'; import { ChatUpdateGroupProfileType, updateGroupProfile, @@ -297,7 +301,22 @@ export class Chat { }; try { const chatInfo = await PUSH_CHAT.getChatInfo(request); - const finalRecipient = chatInfo.meta?.group ? chatInfo.chatId : recipient; + const isGroupChat = chatInfo.meta?.group ?? false; + let finalRecipient = recipient; // Default to recipient + if (isGroupChat) { + // If it's a group chat, use the chatId as the recipient + finalRecipient = chatInfo.chatId; + } else { + // If it's not a group chat, find the actual recipient among participants + const participants = chatInfo.participants ?? []; + // Find the participant that is not the account being used + const participant = participants.find( + (participant) => participant !== walletToPCAIP10(accountToUse) + ); + if (participant) { + finalRecipient = participant; + } + } const response: ChatInfoResponse = { meta: chatInfo.meta, list: chatInfo.list, @@ -729,4 +748,4 @@ export class Chat { }); }, }; -} \ No newline at end of file +} diff --git a/packages/restapi/src/lib/pushstream/PushStream.ts b/packages/restapi/src/lib/pushstream/PushStream.ts index 9126278ea..f7b09ebcf 100644 --- a/packages/restapi/src/lib/pushstream/PushStream.ts +++ b/packages/restapi/src/lib/pushstream/PushStream.ts @@ -31,6 +31,10 @@ export class PushStream extends EventEmitter { private listen: StreamType[]; private disconnected: boolean; public uid: string; + public chatSocketCount: number; + public notifSocketCount: number; + public chatSocketConnected: boolean; + public notifSocketConnected: boolean; constructor( account: string, private _listen: StreamType[], @@ -48,6 +52,10 @@ export class PushStream extends EventEmitter { this.listen = _listen; this.disconnected = false; this.uid = uuidv4(); + this.chatSocketCount = 0; + this.notifSocketCount = 0; + this.chatSocketConnected = false; + this.notifSocketConnected = false; this.chatInstance = new Chat( this.account, this.options.env as ENV, @@ -116,372 +124,428 @@ export class PushStream extends EventEmitter { } public async connect(): Promise { - const shouldInitializeChatSocket = - !this.listen || - this.listen.length === 0 || - this.listen.includes(STREAM.CHAT) || - this.listen.includes(STREAM.CHAT_OPS) || - this.listen.includes(STREAM.SPACE) || - this.listen.includes(STREAM.SPACE_OPS); - const shouldInitializeNotifSocket = - !this.listen || - this.listen.length === 0 || - this.listen.includes(STREAM.NOTIF) || - this.listen.includes(STREAM.NOTIF_OPS) || - this.listen.includes(STREAM.VIDEO); - - let isChatSocketConnected = false; - let isNotifSocketConnected = false; - - // Function to check and emit the STREAM.CONNECT event - const checkAndEmitConnectEvent = () => { - if ( - ((shouldInitializeChatSocket && isChatSocketConnected) || - !shouldInitializeChatSocket) && - ((shouldInitializeNotifSocket && isNotifSocketConnected) || - !shouldInitializeNotifSocket) - ) { - this.emit(STREAM.CONNECT); - //console.log('Emitted STREAM.CONNECT'); - } - }; + return new Promise(async (resolve, reject) => { + const shouldInitializeChatSocket = + !this.listen || + this.listen.length === 0 || + this.listen.includes(STREAM.CHAT) || + this.listen.includes(STREAM.CHAT_OPS) || + this.listen.includes(STREAM.SPACE) || + this.listen.includes(STREAM.SPACE_OPS); + const shouldInitializeNotifSocket = + !this.listen || + this.listen.length === 0 || + this.listen.includes(STREAM.NOTIF) || + this.listen.includes(STREAM.NOTIF_OPS) || + this.listen.includes(STREAM.VIDEO); + + let isChatSocketConnected = false; + let isNotifSocketConnected = false; + // Function to check and emit the STREAM.CONNECT event + const checkAndEmitConnectEvent = () => { + if ( + ((shouldInitializeChatSocket && isChatSocketConnected) || + !shouldInitializeChatSocket) && + ((shouldInitializeNotifSocket && isNotifSocketConnected) || + !shouldInitializeNotifSocket) + ) { + this.emit(STREAM.CONNECT); + console.log('RestAPI::PushStream::connect - Emitted STREAM.CONNECT'); + resolve(); + } + }; - const handleSocketDisconnection = async (socketType: 'chat' | 'notif') => { - //console.log(`${socketType.toUpperCase()} Socket Disconnected`); - - if (socketType === 'chat') { - isChatSocketConnected = false; - if (isNotifSocketConnected) { - if ( - this.pushNotificationSocket && - this.pushNotificationSocket.connected - ) { - //console.log('Disconnecting Notification Socket...'); - this.pushNotificationSocket.disconnect(); - } - } else { - // Emit STREAM.DISCONNECT only if the notification socket was already disconnected - this.emit(STREAM.DISCONNECT); - //console.log('Emitted STREAM.DISCONNECT '); + const TIMEOUT_DURATION = 5000; // Timeout duration in milliseconds + setTimeout(() => { + if (!(this.notifSocketConnected || this.chatSocketConnected)) { + reject(new Error('Connection timeout')); // Reject the promise if connect event is not emitted within the timeout } - } else if (socketType === 'notif') { - isNotifSocketConnected = false; - if (isChatSocketConnected) { - if (this.pushChatSocket && this.pushChatSocket.connected) { - //console.log('Disconnecting Chat Socket...'); - this.pushChatSocket.disconnect(); + }, TIMEOUT_DURATION); + + const handleSocketDisconnection = async ( + socketType: 'chat' | 'notif' + ) => { + if (socketType === 'chat') { + isChatSocketConnected = false; + this.chatSocketConnected = false; + this.chatSocketCount--; + if (isNotifSocketConnected) { + if ( + this.pushNotificationSocket && + this.pushNotificationSocket.connected + ) { + console.log( + 'RestAPI::PushStream::handleSocketDisconnection - Disconnecting Notification Socket...' + ); + this.pushNotificationSocket.disconnect(); + } + } else { + // Emit STREAM.DISCONNECT only if the notification socket was already disconnected + this.emit(STREAM.DISCONNECT); + console.log( + 'RestAPI::PushStream::handleSocketDisconnection - Emitted STREAM.DISCONNECT for chat.' + ); + } + } else if (socketType === 'notif') { + isNotifSocketConnected = false; + this.notifSocketConnected = false; + this.notifSocketCount--; + if (isChatSocketConnected) { + if (this.pushChatSocket && this.pushChatSocket.connected) { + console.log( + 'RestAPI::PushStream::handleSocketDisconnection - Disconnecting Chat Socket...' + ); + this.pushChatSocket.disconnect(); + } + } else { + // Emit STREAM.DISCONNECT only if the chat socket was already disconnected + this.emit(STREAM.DISCONNECT); + console.log( + 'RestAPI::PushStream::handleSocketDisconnection - Emitted STREAM.DISCONNECT for notification.' + ); } - } else { - // Emit STREAM.DISCONNECT only if the chat socket was already disconnected - this.emit(STREAM.DISCONNECT); - //console.log('Emitted STREAM.DISCONNECT'); } - } - }; - - if (shouldInitializeChatSocket) { - if (!this.pushChatSocket) { - // If pushChatSocket does not exist, create a new socket connection - this.pushChatSocket = await createSocketConnection({ - user: walletToPCAIP10(this.account), - socketType: 'chat', - socketOptions: { - autoConnect: this.options?.connection?.auto ?? true, - reconnectionAttempts: this.options?.connection?.retries ?? 3, - }, - env: this.options?.env as ENV, - }); + }; + if (shouldInitializeChatSocket) { if (!this.pushChatSocket) { - throw new Error('Push chat socket not connected'); - } - } else if (!this.pushChatSocket.connected) { - // If pushChatSocket exists but is not connected, attempt to reconnect - //console.log('Attempting to reconnect push chat socket...'); - this.pushChatSocket.connect(); // Assuming connect() is the method to re-establish connection - } else { - // If pushChatSocket is already connected - //console.log('Push chat socket already connected'); - } - } - - if (shouldInitializeNotifSocket) { - if (!this.pushNotificationSocket) { - // If pushNotificationSocket does not exist, create a new socket connection - this.pushNotificationSocket = await createSocketConnection({ - user: pCAIP10ToWallet(this.account), - env: this.options?.env as ENV, - socketOptions: { - autoConnect: this.options?.connection?.auto ?? true, - reconnectionAttempts: this.options?.connection?.retries ?? 3, - }, - }); + // If pushChatSocket does not exist, create a new socket connection + console.log( + 'RestAPI::PushStream::ChatSocket::Create - pushChatSocket does not exist, creating new socket connection...' + ); - if (!this.pushNotificationSocket) { - throw new Error('Push notification socket not connected'); + this.pushChatSocket = await createSocketConnection({ + user: walletToPCAIP10(this.account), + socketType: 'chat', + socketOptions: { + autoConnect: this.options?.connection?.auto ?? true, + reconnectionAttempts: this.options?.connection?.retries ?? 3, + }, + env: this.options?.env as ENV, + }); + + if (!this.pushChatSocket) { + reject( + new Error( + 'RestAPI::PushStream::ChatSocket::Error - Push chat socket not connected' + ) + ); + } + } else if (this.pushChatSocket && !this.chatSocketConnected) { + // If pushChatSocket exists but is not connected, attempt to reconnect + console.log( + 'RestAPI::PushStream::ChatSocket::Reconnect - Attempting to reconnect push chat socket...' + ); + this.pushChatSocket.connect(); // Assuming connect() is the method to re-establish connection + } else { + console.log( + 'RestAPI::PushStream::ChatSocket::Status - Push chat socket already connected' + ); } - } else if (!this.pushNotificationSocket.connected) { - // If pushNotificationSocket exists but is not connected, attempt to reconnect - //console.log('Attempting to reconnect push notification socket...'); - this.pushNotificationSocket.connect(); // Assuming connect() is the method to re-establish connection - } else { - // If pushNotificationSocket is already connected - //console.log('Push notification socket already connected'); } - } - - const shouldEmit = (eventType: STREAM): boolean => { - if (!this.listen || this.listen.length === 0) { - return true; - } - return this.listen.includes(eventType); - }; - if (this.pushChatSocket) { - this.pushChatSocket.on(EVENTS.CONNECT, async () => { - isChatSocketConnected = true; - checkAndEmitConnectEvent(); - //console.log(`Chat Socket Connected (ID: ${this.pushChatSocket.id})`); - }); - - this.pushChatSocket.on(EVENTS.DISCONNECT, async () => { - await handleSocketDisconnection('chat'); - }); - - this.pushChatSocket.on(EVENTS.CHAT_GROUPS, (data: any) => { - try { - const modifiedData = DataModifier.handleChatGroupEvent( - data, - this.raw - ); - modifiedData.event = DataModifier.convertToProposedName( - modifiedData.event + if (shouldInitializeNotifSocket) { + if (!this.pushNotificationSocket) { + // If pushNotificationSocket does not exist, create a new socket connection + console.log( + 'RestAPI::PushStream::NotifSocket::Create - pushNotificationSocket does not exist, creating new socket connection...' ); - modifiedData.streamUid = this.uid; - DataModifier.handleToField(modifiedData); - if (this.shouldEmitChat(data.chatId)) { - if ( - data.eventType === GroupEventType.JoinGroup || - data.eventType === GroupEventType.LeaveGroup || - data.eventType === MessageEventType.Request || - data.eventType === GroupEventType.Remove || - data.eventType === GroupEventType.RoleChange - ) { - if (shouldEmit(STREAM.CHAT)) { - this.emit(STREAM.CHAT, modifiedData); - } - } else { - if (shouldEmit(STREAM.CHAT_OPS)) { - this.emit(STREAM.CHAT_OPS, modifiedData); - } - } + this.pushNotificationSocket = await createSocketConnection({ + user: pCAIP10ToWallet(this.account), + env: this.options?.env as ENV, + socketOptions: { + autoConnect: this.options?.connection?.auto ?? true, + reconnectionAttempts: this.options?.connection?.retries ?? 3, + }, + }); + + if (!this.pushNotificationSocket) { + reject( + new Error( + 'RestAPI::PushStream::NotifSocket::Error - Push notification socket not connected' + ) + ); } - } catch (error) { - console.error( - 'Error handling CHAT_GROUPS event:', - error, - 'Data:', - data + } else if (this.pushNotificationSocket && !this.notifSocketConnected) { + // If pushNotificationSocket exists but is not connected, attempt to reconnect + console.log( + 'RestAPI::PushStream::NotifSocket::Reconnect - Attempting to reconnect push notification socket...' + ); + this.notifSocketCount++; + this.pushNotificationSocket.connect(); // Assuming connect() is the method to re-establish connection + } else { + // If pushNotificationSocket is already connected + console.log( + 'RestAPI::PushStream::NotifSocket::Status - Push notification socket already connected' ); } - }); + } - this.pushChatSocket.on( - EVENTS.CHAT_RECEIVED_MESSAGE, - async (data: any) => { - try { - if ( - data.messageCategory == 'Chat' || - data.messageCategory == 'Request' - ) { - // Dont call this if read only mode ? - if (this.decryptedPgpPvtKey) { - data = await this.chatInstance.decrypt([data]); - data = data[0]; - } - } + const shouldEmit = (eventType: STREAM): boolean => { + if (!this.listen || this.listen.length === 0) { + return true; + } + return this.listen.includes(eventType); + }; + + if (this.pushChatSocket) { + this.pushChatSocket.on(EVENTS.CONNECT, async () => { + isChatSocketConnected = true; + this.chatSocketCount++; + this.chatSocketConnected = true; + checkAndEmitConnectEvent(); + console.log( + `RestAPI::PushStream::EVENTS.CONNECT::Chat Socket Connected (ID: ${this.pushChatSocket.id})` + ); + }); + + this.pushChatSocket.on(EVENTS.DISCONNECT, async () => { + await handleSocketDisconnection('chat'); + }); - const modifiedData = DataModifier.handleChatEvent(data, this.raw); + this.pushChatSocket.on(EVENTS.CHAT_GROUPS, (data: any) => { + try { + const modifiedData = DataModifier.handleChatGroupEvent( + data, + this.raw + ); modifiedData.event = DataModifier.convertToProposedName( modifiedData.event ); modifiedData.streamUid = this.uid; DataModifier.handleToField(modifiedData); if (this.shouldEmitChat(data.chatId)) { - if (shouldEmit(STREAM.CHAT)) { - this.emit(STREAM.CHAT, modifiedData); + if ( + data.eventType === GroupEventType.JoinGroup || + data.eventType === GroupEventType.LeaveGroup || + data.eventType === MessageEventType.Request || + data.eventType === GroupEventType.Remove || + data.eventType === GroupEventType.RoleChange + ) { + if (shouldEmit(STREAM.CHAT)) { + this.emit(STREAM.CHAT, modifiedData); + } + } else { + if (shouldEmit(STREAM.CHAT_OPS)) { + this.emit(STREAM.CHAT_OPS, modifiedData); + } } } } catch (error) { console.error( - 'Error handling CHAT_RECEIVED_MESSAGE event:', + 'Error handling CHAT_GROUPS event:', error, 'Data:', data ); } - } - ); + }); - this.pushChatSocket.on('SPACES', (data: any) => { - try { - const modifiedData = DataModifier.handleSpaceEvent(data, this.raw); - modifiedData.event = DataModifier.convertToProposedNameForSpace( - modifiedData.event - ); + this.pushChatSocket.on( + EVENTS.CHAT_RECEIVED_MESSAGE, + async (data: any) => { + try { + if ( + data.messageCategory == 'Chat' || + data.messageCategory == 'Request' + ) { + // Dont call this if read only mode ? + if (this.decryptedPgpPvtKey) { + data = await this.chatInstance.decrypt([data]); + data = data[0]; + } + } + + const modifiedData = DataModifier.handleChatEvent(data, this.raw); + modifiedData.event = DataModifier.convertToProposedName( + modifiedData.event + ); + DataModifier.handleToField(modifiedData); + if (this.shouldEmitChat(data.chatId)) { + if (shouldEmit(STREAM.CHAT)) { + this.emit(STREAM.CHAT, modifiedData); + } + } + } catch (error) { + console.error( + 'Error handling CHAT_RECEIVED_MESSAGE event:', + error, + 'Data:', + data + ); + } + } + ); - DataModifier.handleToField(modifiedData); - modifiedData.streamUid = this.uid; + this.pushChatSocket.on('SPACES', (data: any) => { + try { + const modifiedData = DataModifier.handleSpaceEvent(data, this.raw); + modifiedData.event = DataModifier.convertToProposedNameForSpace( + modifiedData.event + ); - if (this.shouldEmitSpace(data.spaceId)) { - if ( - data.eventType === SpaceEventType.Join || - data.eventType === SpaceEventType.Leave || - data.eventType === MessageEventType.Request || - data.eventType === SpaceEventType.Remove || - data.eventType === SpaceEventType.Start || - data.eventType === SpaceEventType.Stop - ) { + DataModifier.handleToField(modifiedData); + + if (this.shouldEmitSpace(data.spaceId)) { + if ( + data.eventType === SpaceEventType.Join || + data.eventType === SpaceEventType.Leave || + data.eventType === MessageEventType.Request || + data.eventType === SpaceEventType.Remove || + data.eventType === SpaceEventType.Start || + data.eventType === SpaceEventType.Stop + ) { + if (shouldEmit(STREAM.SPACE)) { + this.emit(STREAM.SPACE, modifiedData); + } + } else { + if (shouldEmit(STREAM.SPACE_OPS)) { + this.emit(STREAM.SPACE_OPS, modifiedData); + } + } + } + } catch (error) { + console.error('Error handling SPACES event:', error, 'Data:', data); + } + }); + + this.pushChatSocket.on('SPACES_MESSAGES', (data: any) => { + try { + const modifiedData = DataModifier.handleSpaceEvent(data, this.raw); + modifiedData.event = DataModifier.convertToProposedNameForSpace( + modifiedData.event + ); + + DataModifier.handleToField(modifiedData); + + if (this.shouldEmitSpace(data.spaceId)) { if (shouldEmit(STREAM.SPACE)) { this.emit(STREAM.SPACE, modifiedData); } - } else { - if (shouldEmit(STREAM.SPACE_OPS)) { - this.emit(STREAM.SPACE_OPS, modifiedData); - } } + } catch (error) { + console.error('Error handling SPACES event:', error, 'Data:', data); } - } catch (error) { - console.error('Error handling SPACES event:', error, 'Data:', data); - } - }); + }); + } - this.pushChatSocket.on('SPACES_MESSAGES', (data: any) => { - try { - const modifiedData = DataModifier.handleSpaceEvent(data, this.raw); - modifiedData.event = DataModifier.convertToProposedNameForSpace( - modifiedData.event + if (this.pushNotificationSocket) { + this.pushNotificationSocket.on(EVENTS.CONNECT, async () => { + console.log( + `RestAPI::PushStream::NotifSocket::Connect - Notification Socket Connected (ID: ${this.pushNotificationSocket.id})` ); + isNotifSocketConnected = true; + this.notifSocketCount++; + this.notifSocketConnected = true; + checkAndEmitConnectEvent(); + }); - DataModifier.handleToField(modifiedData); - modifiedData.streamUid = this.uid; + this.pushNotificationSocket.on(EVENTS.DISCONNECT, async () => { + console.log( + 'RestAPI::PushStream::NotifSocket::Disconnect - Notification socket disconnected.' + ); + await handleSocketDisconnection('notif'); + }); - if (this.shouldEmitSpace(data.spaceId)) { - if (shouldEmit(STREAM.SPACE)) { - this.emit(STREAM.SPACE, modifiedData); + this.pushNotificationSocket.on(EVENTS.USER_FEEDS, (data: any) => { + try { + if ( + data.payload.data.additionalMeta?.type === + `${ADDITIONAL_META_TYPE.PUSH_VIDEO}+1` && + shouldEmit(STREAM.VIDEO) && + this.shouldEmitVideo(data.sender) + ) { + // Video Notification + const modifiedData = DataModifier.mapToVideoEvent( + data, + this.account === data.sender + ? MessageOrigin.Self + : MessageOrigin.Other, + this.raw + ); + + this.emit(STREAM.VIDEO, modifiedData); + } else { + // Channel Notification + const modifiedData = DataModifier.mapToNotificationEvent( + data, + NotificationEventType.INBOX, + this.account === data.sender ? 'self' : 'other', + this.raw + ); + + if (this.shouldEmitChannel(modifiedData.from)) { + if (shouldEmit(STREAM.NOTIF)) { + this.emit(STREAM.NOTIF, modifiedData); + } + } } + } catch (error) { + console.error( + `RestAPI::PushStream::NotifSocket::UserFeeds::Error - Error handling event: ${error}, Data: ${JSON.stringify( + data + )}` + ); } - } catch (error) { - console.error('Error handling SPACES event:', error, 'Data:', data); - } - }); - } + }); - if (this.pushNotificationSocket) { - this.pushNotificationSocket.on(EVENTS.CONNECT, async () => { - /*console.log( - `Notification Socket Connected (ID: ${this.pushNotificationSocket.id})` - );*/ - isNotifSocketConnected = true; - checkAndEmitConnectEvent(); - }); - - this.pushNotificationSocket.on(EVENTS.DISCONNECT, async () => { - await handleSocketDisconnection('notif'); - //console.log(`Notification Socket Disconnected`); - }); - - this.pushNotificationSocket.on(EVENTS.USER_FEEDS, (data: any) => { - try { - if ( - data.payload.data.additionalMeta?.type === - `${ADDITIONAL_META_TYPE.PUSH_VIDEO}+1` && - shouldEmit(STREAM.VIDEO) && - this.shouldEmitVideo(data.sender) - ) { - // Video Notification - const modifiedData = DataModifier.mapToVideoEvent( - data, - this.account === data.sender - ? MessageOrigin.Self - : MessageOrigin.Other, - this.raw - ); - modifiedData.streamUid = this.uid; - this.emit(STREAM.VIDEO, modifiedData); - } else { - // Channel Notification + this.pushNotificationSocket.on(EVENTS.USER_SPAM_FEEDS, (data: any) => { + try { const modifiedData = DataModifier.mapToNotificationEvent( data, - NotificationEventType.INBOX, + NotificationEventType.SPAM, this.account === data.sender ? 'self' : 'other', this.raw ); - modifiedData.streamUid = this.uid; - + modifiedData.origin = + this.account === modifiedData.from ? 'self' : 'other'; if (this.shouldEmitChannel(modifiedData.from)) { if (shouldEmit(STREAM.NOTIF)) { this.emit(STREAM.NOTIF, modifiedData); } } + } catch (error) { + console.error( + 'Error handling USER_SPAM_FEEDS event:', + error, + 'Data:', + data + ); } - } catch (error) { - console.error( - 'Error handling USER_FEEDS event:', - error, - 'Data:', - data - ); - } - }); - - this.pushNotificationSocket.on(EVENTS.USER_SPAM_FEEDS, (data: any) => { - try { - const modifiedData = DataModifier.mapToNotificationEvent( - data, - NotificationEventType.SPAM, - this.account === data.sender ? 'self' : 'other', - this.raw - ); - modifiedData.origin = - this.account === modifiedData.from ? 'self' : 'other'; - if (this.shouldEmitChannel(modifiedData.from)) { - if (shouldEmit(STREAM.NOTIF)) { - this.emit(STREAM.NOTIF, modifiedData); - } - } - } catch (error) { - console.error( - 'Error handling USER_SPAM_FEEDS event:', - error, - 'Data:', - data - ); - } - }); - } + }); + } - this.disconnected = false; + this.disconnected = false; + }); } public connected(): boolean { - return ( - (this.pushNotificationSocket && this.pushNotificationSocket.connected) || - (this.pushChatSocket && this.pushChatSocket.connected) + // Log the connection status of both sockets with detailed prefix + console.log( + `RestAPI::PushStream::connected::Notification Socket Connected: ${this.notifSocketConnected}` ); + console.log( + `RestAPI::PushStream::connected::Chat Socket Connected: ${this.chatSocketConnected}` + ); + + return this.notifSocketConnected || this.chatSocketConnected; } public async disconnect(): Promise { // Disconnect push chat socket if connected - if (this.pushChatSocket) { + if (this.pushChatSocket && this.chatSocketConnected) { this.pushChatSocket.disconnect(); - //console.log('Push chat socket disconnected.'); + console.log( + 'RestAPI::PushStream::disconnect::Push chat socket disconnected.' + ); } // Disconnect push notification socket if connected - if (this.pushNotificationSocket) { + if (this.pushNotificationSocket && this.notifSocketConnected) { this.pushNotificationSocket.disconnect(); - //console.log('Push notification socket disconnected.'); + console.log( + 'RestAPI::PushStream::disconnect::Push notification socket disconnected.' + ); } } diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx index 33d71f339..63c4bcce5 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx @@ -183,7 +183,7 @@ export const ChatProfile: React.FC = ({ zIndex="unset" flexDirection="row" gap="10px" - margin="0 20px 0 auto" + margin="0 10px 0 auto" alignSelf="center" > {chatProfileRightHelperComponent && !groupInfo && ( @@ -259,7 +259,6 @@ export const ChatProfile: React.FC = ({ return null; } }; - const Container = styled.div` width: 100%; background: ${(props) => props.theme.backgroundColor.chatProfileBackground}; diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx index e7a672dbb..9d5874222 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx @@ -126,13 +126,18 @@ const MessageCard = ({ const time = moment(chat.timestamp).format('hh:mm a'); return ( -
{time} -
+ ); }; @@ -391,3 +396,7 @@ const FileDownloadIcon = styled.i` const FileDownloadIconAnchor = styled.a` font-size: 20px; `; +const MessageSection = styled(Section)<{border:string}>` +border: ${(props) => props.border}; +`; + diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx index c845676bc..5d2a0ca77 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx @@ -14,6 +14,7 @@ import { chatLimit } from '../../../config'; import { appendUniqueMessages, dateToFromNowDaily, + getAddress, pCAIP10ToWallet, walletToPCAIP10, } from '../../../helpers'; @@ -33,7 +34,10 @@ import { ChatInfoResponse } from '../types'; import useUserProfile from '../../../hooks/useUserProfile'; import useGetGroupByIDnew from '../../../hooks/chat/useGetGroupByIDnew'; import useToast from '../reusables/NewToast'; -import { checkIfNewRequest, transformStreamToIMessageIPFSWithCID } from '../helpers'; +import { + checkIfNewRequest, + transformStreamToIMessageIPFSWithCID, +} from '../helpers'; /** * @interface IThemeProps @@ -82,6 +86,8 @@ export const ChatViewList: React.FC = ( const [participantJoinStream, setParticipantJoinStream] = useState({}); // to track if a participant joins a group const [groupUpdateStream, setGroupUpdateStream] = useState({}); + const [formattedChatId, setFormattedChatId] = useState(''); + // const { // chatStream, // groupUpdateStream, @@ -95,7 +101,9 @@ export const ChatViewList: React.FC = ( usePushChatStream(); useEffect(() => { window.addEventListener('chatStream', (e: any) => setChatStream(e.detail)); - window.addEventListener('chatRequestStream', (e: any) => setChatRequestStream(e.detail)); + window.addEventListener('chatRequestStream', (e: any) => + setChatRequestStream(e.detail) + ); window.addEventListener('chatAcceptStream', (e: any) => setChatAcceptStream(e.detail) ); @@ -115,7 +123,9 @@ export const ChatViewList: React.FC = ( window.removeEventListener('chatStream', (e: any) => setChatStream(e.detail) ); - window.removeEventListener('chatRequestStream', (e: any) => setChatRequestStream(e.detail)); + window.removeEventListener('chatRequestStream', (e: any) => + setChatRequestStream(e.detail) + ); window.removeEventListener('chatAcceptStream', (e: any) => setChatAcceptStream(e.detail) @@ -151,7 +161,12 @@ export const ChatViewList: React.FC = ( (async () => { if (!user) return; if (chatId) { - const chat = await fetchChat({ chatId: chatId }); + let formattedChatId; + if (chatId.includes('.')) { + formattedChatId = (await getAddress(chatId, env))!; + } else formattedChatId = chatId; + setFormattedChatId(formattedChatId); + const chat = await fetchChat({ chatId: formattedChatId }); if (Object.keys(chat || {}).length) { setChatInfo(chat as ChatInfoResponse); } @@ -173,7 +188,7 @@ export const ChatViewList: React.FC = ( profileId: pCAIP10ToWallet( chatInfo?.participants.find( (address) => address != walletToPCAIP10(account) - ) || chatId + ) || formattedChatId ), env, user, @@ -181,7 +196,7 @@ export const ChatViewList: React.FC = ( if (UserProfile) setUserInfo(UserProfile); setChatStatusText(ChatStatus.FIRST_CHAT); } else if (chatInfo && chatInfo?.meta?.group) { - GroupProfile = await getGroupByIDnew({ groupId: chatId }); + GroupProfile = await getGroupByIDnew({ groupId: formattedChatId }); if (GroupProfile) setGroupInfo(GroupProfile); else { setChatStatusText(ChatStatus.INVALID_CHAT); @@ -230,12 +245,15 @@ export const ChatViewList: React.FC = ( ) transformGroupDetails(groupUpdateStream); }, [groupUpdateStream]); - + const transformSteamMessage = (item: any) => { if (!user) { return; } - if (chatInfo && ((item?.chatId == chatInfo?.chatId) || checkIfNewRequest(item,chatId))) { + if ( + chatInfo && + (item?.chatId == chatInfo?.chatId || checkIfNewRequest(item, formattedChatId)) + ) { const transformedMessage = transformStreamToIMessageIPFSWithCID(item); if (messages && messages.length) { const newChatViewList = appendUniqueMessages( @@ -344,7 +362,7 @@ export const ChatViewList: React.FC = ( if (user) { const chatHistory = await historyMessages({ limit: limit, - chatId, + chatId:formattedChatId, reference, }); if (chatHistory?.length) { @@ -476,7 +494,7 @@ export const ChatViewList: React.FC = ( })} {chatInfo && chatInfo?.list === 'REQUESTS' && ( - + )} } diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx index 9487cde83..5c77b10c9 100644 --- a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx +++ b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx @@ -22,6 +22,7 @@ import { ConnectButtonComp } from '../ConnectButton'; import useToast from '../reusables/NewToast'; import { ConditionsInformation } from '../ChatProfile/GroupInfoModal'; import { + getAddress, pCAIP10ToWallet, setAccessControl, walletToPCAIP10, @@ -106,6 +107,8 @@ export const MessageInput: React.FC = ({ const [fileUploading, setFileUploading] = useState(false); const [isRules, setIsRules] = useState(false); const [isMember, setIsMember] = useState(false); + const [formattedChatId, setFormattedChatId] = useState(''); + //hack for stream not working const [chatAcceptStream, setChatAcceptStream] = useState({}); // to track any new messages const [participantRemoveStream, setParticipantRemoveStream] = useState( @@ -215,7 +218,7 @@ export const MessageInput: React.FC = ({ setVerified(true); } else { setVerified(false); - setAccessControl(chatId, true); + setAccessControl(formattedChatId, true); } } } @@ -225,7 +228,12 @@ export const MessageInput: React.FC = ({ (async () => { if (!user) return; if (chatId) { - const chat = await fetchChat({ chatId: chatId }); + let formattedChatId; + if (chatId.includes('.')) { + formattedChatId = (await getAddress(chatId, env))!; + } else formattedChatId = chatId; + setFormattedChatId(formattedChatId); + const chat = await fetchChat({ chatId: formattedChatId }); if (Object.keys(chat || {}).length) { setChatInfo(chat as ChatInfoResponse); } @@ -237,7 +245,7 @@ export const MessageInput: React.FC = ({ (async () => { let GroupProfile; if (chatInfo && chatInfo?.meta?.group) { - GroupProfile = await getGroupByIDnew({ groupId: chatId }); + GroupProfile = await getGroupByIDnew({ groupId: formattedChatId }); if (GroupProfile) setGroupInfo(GroupProfile); } })(); @@ -311,13 +319,13 @@ export const MessageInput: React.FC = ({ }; const checkVerification = () => { - verifyAccessControl({ chatId, did: account! }); + verifyAccessControl({ chatId:formattedChatId, did: account! }); }; const handleJoinGroup = async () => { if (chatInfo && groupInfo && groupInfo?.isPublic) { const response = await joinGroup({ - chatId, + chatId:formattedChatId, }); if (typeof response !== 'string') { showSuccess('Success', 'Successfully joined group'); @@ -416,7 +424,7 @@ export const MessageInput: React.FC = ({ try { const sendMessageResponse = await sendMessage({ message: content, - chatId, + chatId:formattedChatId, messageType: type as any, }); if ( @@ -424,7 +432,7 @@ export const MessageInput: React.FC = ({ typeof sendMessageResponse === 'string' && sendMessageResponse.includes('403') ) { - setAccessControl(chatId, true); + setAccessControl(formattedChatId, true); setVerified(false); setVerificationSuccessfull(false); } @@ -479,7 +487,7 @@ export const MessageInput: React.FC = ({ alignItems="center" > = ({ {gif && (
= ({ {!fileUploading && file && ( <>
= ({
sendTextMsg()} > @@ -691,7 +700,7 @@ export const MessageInput: React.FC = ({ }; const TypebarSection = styled(Section)<{ border?: string }>` - gap: 10px; + // gap: 10px; border: ${(props) => props.border || 'none'}; @media ${device.mobileL} { gap: 0px; @@ -707,7 +716,7 @@ const MultiLineInput = styled.textarea` font-family: inherit; font-weight: 400; transform: translateY(3px); - font-size: 16px; + font-size: 15px; outline: none; overflow-y: auto; box-sizing: border-box; diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts index d9d9acd80..71bffbffa 100644 --- a/packages/uiweb/src/lib/components/chat/theme/index.ts +++ b/packages/uiweb/src/lib/components/chat/theme/index.ts @@ -2,7 +2,15 @@ * @file theme file: all the predefined themes are defined here */ import { CHAT_THEME_OPTIONS } from '../exportedTypes'; - +// bgColorPrimary: "#fff", +// bgColorSecondary: "#D53A94", +// textColorPrimary: "#1e1e1e", +// textColorSecondary: "#fff", +// btnColorPrimary: "#D53A94", +// btnColorSecondary: "#494D5F", +// border: "1px solid #E4E8EF", done +// borderRadius:"24px", done +// moduleColor:"#fff", //theme type interface IBorder { chatViewComponent?: string; @@ -13,6 +21,9 @@ interface IBorder { modalInnerComponents?:string; chatPreview?:string; userProfile?:string; + chatWidget?:string; + chatSentBubble?: string; + chatReceivedBubble?: string; } interface IBorderRadius { chatViewComponent?: string; @@ -23,6 +34,7 @@ interface IBorderRadius { modalInnerComponents?:string; chatPreview?:string; userProfile?:string; + chatWidget?:string; } interface IBackgroundColor { chatViewComponentBackground?: string; @@ -46,6 +58,8 @@ interface IBackgroundColor { chatPreviewBadgeBackground?:string; chatPreviewHoverBackground?:string; userProfileBackground?:string; + chatWidgetModalBackground?:string; + } interface ITextColor { @@ -69,6 +83,7 @@ interface ITextColor { chatPreviewDateText?:string; chatPreviewBadgeText?:string; userProfileText?:string; + chatWidgetModalHeadingText?:string; } interface IFont { chatProfileText?: string; @@ -144,7 +159,8 @@ export const lightChatTheme: IChatTheme = { modal: '16px', modalInnerComponents:'12px', chatPreview:'24px', - userProfile:'0px' + userProfile:'0px', + chatWidget:'24px' }, backgroundColor: { @@ -171,7 +187,10 @@ export const lightChatTheme: IChatTheme = { chatPreviewSelectedBackground:'#f5f5f5', chatPreviewBadgeBackground:'rgb(226,8,128)', chatPreviewHoverBackground:'#f5f5f5', - userProfileBackground:'#fff' + userProfileBackground:'#fff', + + chatWidgetModalBackground:'#fff', + }, fontSize: { @@ -222,7 +241,10 @@ export const lightChatTheme: IChatTheme = { modal:'none', modalInnerComponents:'1px solid rgb(194, 203, 219)', chatPreview:'none', - userProfile:'none' + userProfile:'none', + chatWidget:'1px solid #E4E8EF', + chatReceivedBubble:'none', + chatSentBubble:'none' }, iconColor: { @@ -252,7 +274,9 @@ export const lightChatTheme: IChatTheme = { chatPreviewMessageText:'#888', chatPreviewDateText:'#888', chatPreviewBadgeText:'#fff', - userProfileText:'#000' + userProfileText:'#000', + chatWidgetModalHeadingText:'#000', + }, backdropFilter: 'none', spinnerColor: 'rgb(202, 89, 155)', @@ -268,7 +292,8 @@ export const darkChatTheme: IChatTheme = { modal: '16px', modalInnerComponents:'12px', chatPreview:'24px', - userProfile:'0px' + userProfile:'0px', + chatWidget:'24px' }, backgroundColor: { @@ -293,7 +318,10 @@ export const darkChatTheme: IChatTheme = { chatPreviewSelectedBackground:'rgb(64, 70, 80)', chatPreviewBadgeBackground:'rgb(226,8,128)', chatPreviewHoverBackground:'rgb(64, 70, 80)', - userProfileBackground:'rgb(47, 49, 55)' + userProfileBackground:'rgb(47, 49, 55)', + + chatWidgetModalBackground:'rgb(47, 49, 55)', + }, fontSize: { @@ -344,7 +372,9 @@ export const darkChatTheme: IChatTheme = { modal:'none', modalInnerComponents:'1px solid rgb(74, 79, 103)', chatPreview:'none', - userProfile:'none' + userProfile:'none', + chatReceivedBubble:'none', + chatSentBubble:'none' }, iconColor: { @@ -374,7 +404,9 @@ export const darkChatTheme: IChatTheme = { chatPreviewMessageText:'#888', chatPreviewDateText:'#888', chatPreviewBadgeText:'#fff', - userProfileText:'rgb(182, 188, 214)' + userProfileText:'rgb(182, 188, 214)', + chatWidgetModalHeadingText:'#fff', + }, backdropFilter: 'none', spinnerColor: 'rgb(202, 89, 155)', diff --git a/packages/uiweb/src/lib/components/chatWidget/ChatWidget.tsx b/packages/uiweb/src/lib/components/chatWidget/ChatWidget.tsx new file mode 100644 index 000000000..e827f8653 --- /dev/null +++ b/packages/uiweb/src/lib/components/chatWidget/ChatWidget.tsx @@ -0,0 +1,82 @@ +import React, { useContext, useEffect, useState } from 'react'; + +import styled from 'styled-components'; +import { ChatIcon } from '../../icons/ChatIcon'; +import { Modal } from './Modal'; +import { Div } from '../reusables/sharedStyling'; +import { ThemeContext } from '../chat/theme/ThemeProvider'; +import { IChatTheme } from '../chat'; + +import { Constants } from '../../config'; + + +/** + * @interface IThemeProps + * this interface is used for defining the props for styled components + */ +interface IThemeProps { + theme?: IChatTheme; +} + +export type ChatWidgetProps = { + chatId: string; + modalTitle?: string; + welcomeComponent?: React.ReactNode; +}; + +export const ChatWidget: React.FC = ({ + chatId, + modalTitle = Constants.DEFAULT_TITLE, + welcomeComponent = null +}) => { + const [isModalOpen, setIsModalOpen] = useState(false); + const theme = useContext(ThemeContext); + + + return ( + + {!isModalOpen && ( + + )} + {isModalOpen && ( + + )} + + ); +}; + +//styles + +const Container = styled.div` + font-family: 'Strawford'; + flex: 1; + display: flex; + position: fixed; + bottom: 0; + right: 0; + width: fit-content; + z-index: 9999999999; + margin: 0 3rem 2rem 0; + align-items: center; + justify-content: center; +`; + +const Button = styled.button` + background: ${(props) => props.theme?.backgroundColor?.buttonBackground}; + border: none; + cursor: pointer; + border-radius: 18px; + padding: 16.5px 16.5px 13px 18.5px; +`; + +const Image = styled.img``; diff --git a/packages/uiweb/src/lib/components/chatWidget/Modal.tsx b/packages/uiweb/src/lib/components/chatWidget/Modal.tsx new file mode 100644 index 000000000..e1ec12809 --- /dev/null +++ b/packages/uiweb/src/lib/components/chatWidget/Modal.tsx @@ -0,0 +1,109 @@ +import React, { useContext } from 'react'; +import styled from 'styled-components'; + +import { Div, Section, Span } from '../reusables/sharedStyling'; +import { ChatProfile, ChatViewList, IChatTheme, MessageInput } from '../chat'; +import { useChatData } from '../../hooks'; +import { SponserPushIcon } from '../../icons/SponserPush'; +import { ThemeContext } from '../chat/theme/ThemeProvider'; +import { MinimizeIcon } from '../../icons/Minimize'; + +/** + * @interface IThemeProps + * this interface is used for defining the props for styled components + */ +interface IThemeProps { + theme?: IChatTheme; +} + +type ModalProps = { + chatId: string; + isModalOpen: boolean; + setIsModalOpen: React.Dispatch>; + modalTitle: string; + welcomeComponent: React.ReactNode; +}; +export const Modal: React.FC = ({ + chatId, + isModalOpen, + setIsModalOpen, + modalTitle, + welcomeComponent, +}) => { + const { account, user, signer } = useChatData(); + const theme = useContext(ThemeContext); + return ( + + {/* check other inputs for the components */} + + + {modalTitle} + +
setIsModalOpen(!isModalOpen)} + > + +
+ +
+ +
+ {!user || (user && user?.readmode()) ? ( + <>{welcomeComponent} + ) : ( + + + + )} +
+ +
+ +
+
+
+ +
+ + ); +}; + +//styles +const Container = styled.div` + display: flex; + gap: 10px; + flex-direction: column; + box-sizing: border-box; + background: ${(props) => + props.theme?.backgroundColor?.chatWidgetModalBackground}; + border: ${(props) => props.theme?.border?.chatWidget}; + + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07); + border-radius: ${(props) => props.theme?.borderRadius?.chatWidget}; + height: 585px; + max-height: 585px; + width: 350px; + max-width: 350px; + padding: 0 15px; +`; +const HeaderSection = styled(Section)` + border-bottom: ${(props) => props.theme.border?.chatWidget}; + align-items: center; + justify-content: center; + padding: 17px; +`; diff --git a/packages/uiweb/src/lib/components/chatWidget/index.ts b/packages/uiweb/src/lib/components/chatWidget/index.ts new file mode 100644 index 000000000..f5bbb0a9b --- /dev/null +++ b/packages/uiweb/src/lib/components/chatWidget/index.ts @@ -0,0 +1 @@ +export * from './ChatWidget'; \ No newline at end of file diff --git a/packages/uiweb/src/lib/components/index.ts b/packages/uiweb/src/lib/components/index.ts index a166c6e40..a8e67bb13 100644 --- a/packages/uiweb/src/lib/components/index.ts +++ b/packages/uiweb/src/lib/components/index.ts @@ -5,4 +5,5 @@ export * from './space'; export * from './supportChat'; export * from './chatAndNotification'; export * from './chat'; -export * from './widget'; \ No newline at end of file +export * from './widget'; +export * from './chatWidget'; \ No newline at end of file diff --git a/packages/uiweb/src/lib/components/reusables/GlobalStyle.tsx b/packages/uiweb/src/lib/components/reusables/GlobalStyle.tsx new file mode 100644 index 000000000..4c627c024 --- /dev/null +++ b/packages/uiweb/src/lib/components/reusables/GlobalStyle.tsx @@ -0,0 +1,10 @@ +import { createGlobalStyle } from "styled-components"; + +// Define global styles +export const GlobalStyle = createGlobalStyle` + :root { + --onboard-modal-z-index:9999999999999 !important; + /* Wallet connect modal z-index */ + --wcm-z-index: 9999999999999 !important; + } +`; \ No newline at end of file diff --git a/packages/uiweb/src/lib/components/reusables/index.tsx b/packages/uiweb/src/lib/components/reusables/index.tsx index 8e325f506..593224092 100644 --- a/packages/uiweb/src/lib/components/reusables/index.tsx +++ b/packages/uiweb/src/lib/components/reusables/index.tsx @@ -1,3 +1,4 @@ export * from './Spinner'; export * from './Tooltip'; export * from './sharedStyling'; +export * from './GlobalStyle'; diff --git a/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx b/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx index ee42f5d17..4b569936f 100644 --- a/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx +++ b/packages/uiweb/src/lib/dataProviders/ChatDataProvider.tsx @@ -1,22 +1,22 @@ import { useState, ReactNode, useEffect } from 'react'; + +import { IUser, PushAPI, SignerType } from '@pushprotocol/restapi'; + + import { Constants, ENV, GUEST_MODE_ACCOUNT } from '../config'; import { ChatDataContext, IChatDataContextValues, } from '../context/chatContext'; import { ThemeContext } from '../components/chat/theme/ThemeProvider'; -import useGetChatProfile from '../hooks/useGetChatProfile'; -import { IUser, PushAPI, 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'; -import useInitializePushUser from '../hooks/useInitializeUser'; import useInitializeUser from '../hooks/useInitializeUser'; -import useChatProfile from '../hooks/chat/useChatProfile'; import usePushUserInfoUtilities from '../hooks/chat/useUserInfoUtilities'; import useUserProfile from '../hooks/useUserProfile'; +import { GlobalStyle } from '../components/reusables'; + export interface IChatUIProviderProps { children: ReactNode; @@ -123,7 +123,6 @@ export const ChatUIProvider = ({ } })(); }, [account, env, pgpPrivateKey]); -console.debug('userval',userVal) const value: IChatDataContextValues = { account: accountVal, signer: signerVal, @@ -151,6 +150,7 @@ console.debug('userval',userVal) return ( + {children} diff --git a/packages/uiweb/src/lib/helpers/chat/chat.ts b/packages/uiweb/src/lib/helpers/chat/chat.ts index 74e3c8fce..45c335461 100644 --- a/packages/uiweb/src/lib/helpers/chat/chat.ts +++ b/packages/uiweb/src/lib/helpers/chat/chat.ts @@ -11,13 +11,13 @@ import type { IUser, } from '@pushprotocol/restapi'; import { isPCAIP, pCAIP10ToWallet, walletToPCAIP10 } from '../address'; -import { Group } from '../../components'; +import { Group, IChatTheme } from '../../components'; import { getData } from './localStorage'; import { ethers } from 'ethers'; import { PushAPI } from '@pushprotocol/restapi'; type HandleOnChatIconClickProps = { isModalOpen: boolean; - setIsModalOpen: (isModalOpen: boolean) => void; + setIsModalOpen: React.Dispatch>; }; type GetChatsType = { @@ -222,3 +222,4 @@ export const appendUniqueMessages = ( // ); return appendedArray; }; + diff --git a/packages/uiweb/src/lib/icons/SponserPush.tsx b/packages/uiweb/src/lib/icons/SponserPush.tsx index 92b05c2cb..a191b3776 100644 --- a/packages/uiweb/src/lib/icons/SponserPush.tsx +++ b/packages/uiweb/src/lib/icons/SponserPush.tsx @@ -1,10 +1,10 @@ import React from 'react'; -export const SponserPushIcon = () => { +export const SponserPushIcon = ({ color }: { color?: string }) => { return ( - +