From 35039b589893f72b0ac9468cae67d208bf7666cc Mon Sep 17 00:00:00 2001 From: Harsh | Push Date: Thu, 18 Jan 2024 18:36:19 +0400 Subject: [PATCH] Chat Preview List workable PoC (#987) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: revert space changes * fix: merge main * fix: signer compatibility with viem and ethers (#567) * fix: signer compatibility with viem and ethers * fix: revert space changes * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.26 * Update README.md * Update README.md * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.3 * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.27 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.4 * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.5 * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.6 * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.7 * fix: add: scw sig verification (#593) * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.28 * fix: url correction * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.29 * ci(socket): šŸŽ‰ cut release to socket-v0.5.2 * fix: fixed subscribe and unsubscribe * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.5 * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.8 * Feat/chat components (#621) * feat: created architechture * fix: added context values (#594) * Chat dataprovider (#596) * feat: data provider for chat component * fix: replaced react.usestate to usestate * fix: added props as the initial state and changed state name * fix: reverted chat context changes and renamed values * fix: added test page for chat ui components (#597) * added chatbubble component (#602) * feat: added chatbubble component * fix: made the messageBubble's width to fit-content --------- Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> * fix: added theme * Group chat bubble (#604) * feat: moved test component to testui folder & replaced dummy data with sdk response * feat: added twitter card and address for group chat received msg * feat: made the messageaddress reusable, added account from context * fix: removed unnecessary div and unused props and console logs * feat: adding pfp in text bubbles * fix: replaced hook with function and added pfp to messagebubble * fix: fixed image alignment * fix: changed border-radius of msg bubble and changed function name * fix: fixed theme and decryptedPrivateKey name (#616) * fix: fixed theme and decryptedPrivateKey name * fix: fixed bug * fix: fixed theme reviews * Message list (#615) * fix: message list comp * fix: message list comp * fix: added pagination * fix: added pagination * fix: pagination * fix: create useChatData hook * fix: fixed minor bug * fix: socket issues fixed * fix: added theme in msgbubble (#620) * fix: added theme in msgbubble * fix: fixed import --------- Co-authored-by: Monalisha Mishra --------- Co-authored-by: Satyam <100528412+KlausMikhaelson@users.noreply.github.com> Co-authored-by: KlausMikhaelson * fix: add alpha support to UI web * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.0 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.6 * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.9 * Feat/chat components (#625) * feat: created architechture * fix: added context values (#594) * Chat dataprovider (#596) * feat: data provider for chat component * fix: replaced react.usestate to usestate * fix: added props as the initial state and changed state name * fix: reverted chat context changes and renamed values * fix: added test page for chat ui components (#597) * added chatbubble component (#602) * feat: added chatbubble component * fix: made the messageBubble's width to fit-content --------- Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> * fix: added theme * Group chat bubble (#604) * feat: moved test component to testui folder & replaced dummy data with sdk response * feat: added twitter card and address for group chat received msg * feat: made the messageaddress reusable, added account from context * fix: removed unnecessary div and unused props and console logs * feat: adding pfp in text bubbles * fix: replaced hook with function and added pfp to messagebubble * fix: fixed image alignment * fix: changed border-radius of msg bubble and changed function name * fix: fixed theme and decryptedPrivateKey name (#616) * fix: fixed theme and decryptedPrivateKey name * fix: fixed bug * fix: fixed theme reviews * Message list (#615) * fix: message list comp * fix: message list comp * fix: added pagination * fix: added pagination * fix: pagination * fix: create useChatData hook * fix: fixed minor bug * fix: socket issues fixed * fix: added theme in msgbubble (#620) * fix: added theme in msgbubble * fix: fixed import --------- Co-authored-by: Monalisha Mishra * fix: exported the theme (#623) * fix: exported the theme * fix: fixed issues --------- Co-authored-by: Monalisha Mishra --------- Co-authored-by: Satyam <100528412+KlausMikhaelson@users.noreply.github.com> Co-authored-by: KlausMikhaelson * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.1 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.7 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.8 * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.10 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.9 * 632 group access control sdk changes (#640) * fix: group access control changes * fix: get group access SDK fix * fix: removed unnecessary param * Update README.md * Update README.md * Update README.md * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.30 * Reduce profile creation signature to 2 (#639) * fix: reduced signatures * fix: fixed examples * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.31 * fix: Read me fixes * fix: Space rules * Update README.md * Update README.md * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.32 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.10 * Feat/chat components (#658) * feat: created architechture * fix: added context values (#594) * Chat dataprovider (#596) * feat: data provider for chat component * fix: replaced react.usestate to usestate * fix: added props as the initial state and changed state name * fix: reverted chat context changes and renamed values * fix: added test page for chat ui components (#597) * added chatbubble component (#602) * feat: added chatbubble component * fix: made the messageBubble's width to fit-content --------- Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> * fix: added theme * Group chat bubble (#604) * feat: moved test component to testui folder & replaced dummy data with sdk response * feat: added twitter card and address for group chat received msg * feat: made the messageaddress reusable, added account from context * fix: removed unnecessary div and unused props and console logs * feat: adding pfp in text bubbles * fix: replaced hook with function and added pfp to messagebubble * fix: fixed image alignment * fix: changed border-radius of msg bubble and changed function name * fix: fixed theme and decryptedPrivateKey name (#616) * fix: fixed theme and decryptedPrivateKey name * fix: fixed bug * fix: fixed theme reviews * Message list (#615) * fix: message list comp * fix: message list comp * fix: added pagination * fix: added pagination * fix: pagination * fix: create useChatData hook * fix: fixed minor bug * fix: socket issues fixed * fix: added theme in msgbubble (#620) * fix: added theme in msgbubble * fix: fixed import --------- Co-authored-by: Monalisha Mishra * fix: exported the theme (#623) * fix: exported the theme * fix: fixed issues --------- Co-authored-by: Monalisha Mishra * Typebar component (#631) * feat: added typebar UI * feat: added functions to typebar * fix: added icon * fix: fixed theme issues --------- Co-authored-by: Monalisha Mishra * feat: added connectbutton * fix: fixed connectbtn ui and remove disconnect and fixed error on disconnect * fix: fixed create account getting called twice * Profile Header Component (#636) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * Message container (#635) * fix: added theme in msgbubble * fix: fixed import * fix: fixed message-list * fix: added approve intent * fix: added fixes * fix: fixed socket bug * fix: fixed message from socket * fix: fixed minor issues * fix: fixed typebar theming * fix: fixed env issue * fix: fixed message not updating issue * refactor: added isConnected prop in msgContainer * refactor: resolve merge conflicts * fix: fixed request sending * fix: fixed decryption * fix: fixed env issue * feat: added profile header in message container --------- Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta * fix: updated svg to react component * fix: changed svg to tsx component * fix: fixed review changes (#646) * fix: fixed review changes * fix: resolved issues --------- Co-authored-by: Nilesh Gupta * Profile Header -> Chat Profile fixes (#647) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * fix: notifs * fix: correct theme colors * fix: renaming profileHeader * fix: qa fixes * fix: loader * refactor: resolved issues * fix: edit types --------- Co-authored-by: Nilesh Gupta * fix: resolved package not added issue * Fix: modal issue in group info && alert remove members (#653) * fix: modal * fix: update changes * refactor: resolved issue --------- Co-authored-by: Nilesh Gupta * fix: QA fixes (#654) --------- Co-authored-by: Monalisha Mishra Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Co-authored-by: Satyam <100528412+KlausMikhaelson@users.noreply.github.com> Co-authored-by: KlausMikhaelson Co-authored-by: Kolade * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.11 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.12 * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.11 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.13 * fix: update read me file * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.14 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.15 * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.12 * Feat/chat components (#679) * feat: created architechture * fix: added context values (#594) * Chat dataprovider (#596) * feat: data provider for chat component * fix: replaced react.usestate to usestate * fix: added props as the initial state and changed state name * fix: reverted chat context changes and renamed values * fix: added test page for chat ui components (#597) * added chatbubble component (#602) * feat: added chatbubble component * fix: made the messageBubble's width to fit-content --------- Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> * fix: added theme * Group chat bubble (#604) * feat: moved test component to testui folder & replaced dummy data with sdk response * feat: added twitter card and address for group chat received msg * feat: made the messageaddress reusable, added account from context * fix: removed unnecessary div and unused props and console logs * feat: adding pfp in text bubbles * fix: replaced hook with function and added pfp to messagebubble * fix: fixed image alignment * fix: changed border-radius of msg bubble and changed function name * fix: fixed theme and decryptedPrivateKey name (#616) * fix: fixed theme and decryptedPrivateKey name * fix: fixed bug * fix: fixed theme reviews * Message list (#615) * fix: message list comp * fix: message list comp * fix: added pagination * fix: added pagination * fix: pagination * fix: create useChatData hook * fix: fixed minor bug * fix: socket issues fixed * fix: added theme in msgbubble (#620) * fix: added theme in msgbubble * fix: fixed import --------- Co-authored-by: Monalisha Mishra * fix: exported the theme (#623) * fix: exported the theme * fix: fixed issues --------- Co-authored-by: Monalisha Mishra * Typebar component (#631) * feat: added typebar UI * feat: added functions to typebar * fix: added icon * fix: fixed theme issues --------- Co-authored-by: Monalisha Mishra * feat: added connectbutton * fix: fixed connectbtn ui and remove disconnect and fixed error on disconnect * fix: fixed create account getting called twice * Profile Header Component (#636) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * Message container (#635) * fix: added theme in msgbubble * fix: fixed import * fix: fixed message-list * fix: added approve intent * fix: added fixes * fix: fixed socket bug * fix: fixed message from socket * fix: fixed minor issues * fix: fixed typebar theming * fix: fixed env issue * fix: fixed message not updating issue * refactor: added isConnected prop in msgContainer * refactor: resolve merge conflicts * fix: fixed request sending * fix: fixed decryption * fix: fixed env issue * feat: added profile header in message container --------- Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta * fix: updated svg to react component * fix: changed svg to tsx component * fix: fixed review changes (#646) * fix: fixed review changes * fix: resolved issues --------- Co-authored-by: Nilesh Gupta * Profile Header -> Chat Profile fixes (#647) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * fix: notifs * fix: correct theme colors * fix: renaming profileHeader * fix: qa fixes * fix: loader * refactor: resolved issues * fix: edit types --------- Co-authored-by: Nilesh Gupta * fix: resolved package not added issue * Fix: modal issue in group info && alert remove members (#653) * fix: modal * fix: update changes * refactor: resolved issue --------- Co-authored-by: Nilesh Gupta * fix: QA fixes (#654) * Connect btn revamp (#668) * fix: added theme in msgbubble * fix: fixed import * fix: fixed message-list * fix: added approve intent * fix: added fixes * fix: fixed socket bug * fix: fixed message from socket * fix: fixed minor issues * fix: fixed typebar theming * fix: fixed env issue * fix: fixed message not updating issue * refactor: added isConnected prop in msgContainer * refactor: resolve merge conflicts * fix: fixed request sending * fix: fixed decryption * fix: fixed env issue * feat: added profile header in message container * feat: adding rainbowkit for btn * fix: fix issues * fix: addec onnect functionality * fix: connect button * fix: added hack for rainbowkit css --------- Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta * Typebar UI issue (#666) * fix: fixed typebar space not working and theme * fix: fixed gif and emoji --------- Co-authored-by: KlausMikhaelson * fix: fixed theme colours * fix: added theme for brb * fix: added filter hat * fix: merged with main * fix: fixed msg border * fix: fixed theme * fix: fixed fonts * fix: fixed bug * Access control (#672) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * fix: added minor fix --------- Co-authored-by: Monalisha Mishra * fix: fixed padding issues * fix(f): fixed build issues * fix: fix for chat status test * Check rules access control (#678) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * 662 group access control v2 changes (#663) * fix: spaces access API * fix: custom endpoint doc impl * Update README.md * Update README.md * fix: review comments change * fix: read me update * Update README.md * Update README.md * fix: origin in user creation (#665) * fix: origin in user creation * Update README.md * fix: review comments * 662 group access control v2 changes (#677) * fix: spaces access API * fix: custom endpoint doc impl * Update README.md * Update README.md * fix: review comments change * fix: read me update * Update README.md * Update README.md * fix(spaces): broadcast changes and UX fixes (#674) * fix: fix UI grid view (#642) * fix: fix UI grid view * refactor: conditional added * fix: resolved muting/unmuting try catch error (#657) * fix(spaces): fix livepeer broadcast (#656) * fix(spaces): fix livepeer broadcast * fix(spaces): fix data shown for unjoined space & promote listener logic --------- Co-authored-by: Madhur Gupta * refactor(spaces): use local state instead of get from server while meta message fire (#676) --------- Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Nilesh Gupta * feat: added verification option to show only on token gated groups * fix: fixing group access control --------- Co-authored-by: Monalisha Mishra Co-authored-by: Mohammed S Co-authored-by: Madhur Gupta Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Nilesh Gupta * fix: fixed build --------- Co-authored-by: Satyam <100528412+KlausMikhaelson@users.noreply.github.com> Co-authored-by: KlausMikhaelson Co-authored-by: Kolade Co-authored-by: Nilesh Gupta Co-authored-by: Mohammed S Co-authored-by: Madhur Gupta Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.2 * fix: dummy change * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.13 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.16 * Join group option (#681) * feat: created architechture * fix: added context values (#594) * Chat dataprovider (#596) * feat: data provider for chat component * fix: replaced react.usestate to usestate * fix: added props as the initial state and changed state name * fix: reverted chat context changes and renamed values * fix: added test page for chat ui components (#597) * added chatbubble component (#602) * feat: added chatbubble component * fix: made the messageBubble's width to fit-content --------- Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> * fix: added theme * Group chat bubble (#604) * feat: moved test component to testui folder & replaced dummy data with sdk response * feat: added twitter card and address for group chat received msg * feat: made the messageaddress reusable, added account from context * fix: removed unnecessary div and unused props and console logs * feat: adding pfp in text bubbles * fix: replaced hook with function and added pfp to messagebubble * fix: fixed image alignment * fix: changed border-radius of msg bubble and changed function name * fix: fixed theme and decryptedPrivateKey name (#616) * fix: fixed theme and decryptedPrivateKey name * fix: fixed bug * fix: fixed theme reviews * Message list (#615) * fix: message list comp * fix: message list comp * fix: added pagination * fix: added pagination * fix: pagination * fix: create useChatData hook * fix: fixed minor bug * fix: socket issues fixed * fix: added theme in msgbubble (#620) * fix: added theme in msgbubble * fix: fixed import --------- Co-authored-by: Monalisha Mishra * fix: exported the theme (#623) * fix: exported the theme * fix: fixed issues --------- Co-authored-by: Monalisha Mishra * Typebar component (#631) * feat: added typebar UI * feat: added functions to typebar * fix: added icon * fix: fixed theme issues --------- Co-authored-by: Monalisha Mishra * feat: added connectbutton * fix: fixed connectbtn ui and remove disconnect and fixed error on disconnect * fix: fixed create account getting called twice * Profile Header Component (#636) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * Message container (#635) * fix: added theme in msgbubble * fix: fixed import * fix: fixed message-list * fix: added approve intent * fix: added fixes * fix: fixed socket bug * fix: fixed message from socket * fix: fixed minor issues * fix: fixed typebar theming * fix: fixed env issue * fix: fixed message not updating issue * refactor: added isConnected prop in msgContainer * refactor: resolve merge conflicts * fix: fixed request sending * fix: fixed decryption * fix: fixed env issue * feat: added profile header in message container --------- Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta * fix: updated svg to react component * fix: changed svg to tsx component * fix: fixed review changes (#646) * fix: fixed review changes * fix: resolved issues --------- Co-authored-by: Nilesh Gupta * Profile Header -> Chat Profile fixes (#647) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * fix: notifs * fix: correct theme colors * fix: renaming profileHeader * fix: qa fixes * fix: loader * refactor: resolved issues * fix: edit types --------- Co-authored-by: Nilesh Gupta * fix: resolved package not added issue * Fix: modal issue in group info && alert remove members (#653) * fix: modal * fix: update changes * refactor: resolved issue --------- Co-authored-by: Nilesh Gupta * fix: QA fixes (#654) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * Connect btn revamp (#668) * fix: added theme in msgbubble * fix: fixed import * fix: fixed message-list * fix: added approve intent * fix: added fixes * fix: fixed socket bug * fix: fixed message from socket * fix: fixed minor issues * fix: fixed typebar theming * fix: fixed env issue * fix: fixed message not updating issue * refactor: added isConnected prop in msgContainer * refactor: resolve merge conflicts * fix: fixed request sending * fix: fixed decryption * fix: fixed env issue * feat: added profile header in message container * feat: adding rainbowkit for btn * fix: fix issues * fix: addec onnect functionality * fix: connect button * fix: added hack for rainbowkit css --------- Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta * Typebar UI issue (#666) * fix: fixed typebar space not working and theme * fix: fixed gif and emoji --------- Co-authored-by: KlausMikhaelson * fix: fixed theme colours * fix: added theme for brb * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * fix: added filter hat * fix: merged with main * fix: fixed msg border * fix: fixed theme * fix: fixed fonts * fix: fixed bug * Access control (#672) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * fix: added minor fix --------- Co-authored-by: Monalisha Mishra * fix: fixed padding issues * fix(f): fixed build issues * fix: fix for chat status test * feat: added verification option to show only on token gated groups * fix: fixing group access control * Check rules access control (#678) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * 662 group access control v2 changes (#663) * fix: spaces access API * fix: custom endpoint doc impl * Update README.md * Update README.md * fix: review comments change * fix: read me update * Update README.md * Update README.md * fix: origin in user creation (#665) * fix: origin in user creation * Update README.md * fix: review comments * 662 group access control v2 changes (#677) * fix: spaces access API * fix: custom endpoint doc impl * Update README.md * Update README.md * fix: review comments change * fix: read me update * Update README.md * Update README.md * fix(spaces): broadcast changes and UX fixes (#674) * fix: fix UI grid view (#642) * fix: fix UI grid view * refactor: conditional added * fix: resolved muting/unmuting try catch error (#657) * fix(spaces): fix livepeer broadcast (#656) * fix(spaces): fix livepeer broadcast * fix(spaces): fix data shown for unjoined space & promote listener logic --------- Co-authored-by: Madhur Gupta * refactor(spaces): use local state instead of get from server while meta message fire (#676) --------- Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Nilesh Gupta * feat: added verification option to show only on token gated groups * fix: fixing group access control --------- Co-authored-by: Monalisha Mishra Co-authored-by: Mohammed S Co-authored-by: Madhur Gupta Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Nilesh Gupta * fix: fixed build * feat: added send request to join group * fix: fixed verification on send * fix: fixed verify access btn not showing after joining group * fix: fixed join group showing for members too * fix: fixed join group showing to members * 667 chat.send enhancement (#673) * fix: changes messageObj for meta and reaction message type * fix: enhance send fn * fix: fixed intent issues * 680 group rules cosmetic changes (#682) * fix: fixed guild condition * fix: add did validation * fix: fixed * fix: fixed minor issues * fix: fixe dissue * fix: fixed minor issues * fix: check for scroll * fix: fixed scrolling * fix: fixed theme * fix: fixed * fix: fixed * fix: fixed * fix: fixed issues * fix: fixed * feat: added toast in join group btn for pvt groups * fix: fixed blurr --------- Co-authored-by: Monalisha Mishra Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Co-authored-by: Kolade Co-authored-by: Nilesh Gupta Co-authored-by: Mohammed S Co-authored-by: Madhur Gupta Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Aman Gupta * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.3 * Join group option (#687) * feat: created architechture * fix: added context values (#594) * Chat dataprovider (#596) * feat: data provider for chat component * fix: replaced react.usestate to usestate * fix: added props as the initial state and changed state name * fix: reverted chat context changes and renamed values * fix: added test page for chat ui components (#597) * added chatbubble component (#602) * feat: added chatbubble component * fix: made the messageBubble's width to fit-content --------- Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> * fix: added theme * Group chat bubble (#604) * feat: moved test component to testui folder & replaced dummy data with sdk response * feat: added twitter card and address for group chat received msg * feat: made the messageaddress reusable, added account from context * fix: removed unnecessary div and unused props and console logs * feat: adding pfp in text bubbles * fix: replaced hook with function and added pfp to messagebubble * fix: fixed image alignment * fix: changed border-radius of msg bubble and changed function name * fix: fixed theme and decryptedPrivateKey name (#616) * fix: fixed theme and decryptedPrivateKey name * fix: fixed bug * fix: fixed theme reviews * Message list (#615) * fix: message list comp * fix: message list comp * fix: added pagination * fix: added pagination * fix: pagination * fix: create useChatData hook * fix: fixed minor bug * fix: socket issues fixed * fix: added theme in msgbubble (#620) * fix: added theme in msgbubble * fix: fixed import --------- Co-authored-by: Monalisha Mishra * fix: exported the theme (#623) * fix: exported the theme * fix: fixed issues --------- Co-authored-by: Monalisha Mishra * Typebar component (#631) * feat: added typebar UI * feat: added functions to typebar * fix: added icon * fix: fixed theme issues --------- Co-authored-by: Monalisha Mishra * feat: added connectbutton * fix: fixed connectbtn ui and remove disconnect and fixed error on disconnect * fix: fixed create account getting called twice * Profile Header Component (#636) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * Message container (#635) * fix: added theme in msgbubble * fix: fixed import * fix: fixed message-list * fix: added approve intent * fix: added fixes * fix: fixed socket bug * fix: fixed message from socket * fix: fixed minor issues * fix: fixed typebar theming * fix: fixed env issue * fix: fixed message not updating issue * refactor: added isConnected prop in msgContainer * refactor: resolve merge conflicts * fix: fixed request sending * fix: fixed decryption * fix: fixed env issue * feat: added profile header in message container --------- Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta * fix: updated svg to react component * fix: changed svg to tsx component * fix: fixed review changes (#646) * fix: fixed review changes * fix: resolved issues --------- Co-authored-by: Nilesh Gupta * Profile Header -> Chat Profile fixes (#647) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * fix: notifs * fix: correct theme colors * fix: renaming profileHeader * fix: qa fixes * fix: loader * refactor: resolved issues * fix: edit types --------- Co-authored-by: Nilesh Gupta * fix: resolved package not added issue * Fix: modal issue in group info && alert remove members (#653) * fix: modal * fix: update changes * refactor: resolved issue --------- Co-authored-by: Nilesh Gupta * fix: QA fixes (#654) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * Connect btn revamp (#668) * fix: added theme in msgbubble * fix: fixed import * fix: fixed message-list * fix: added approve intent * fix: added fixes * fix: fixed socket bug * fix: fixed message from socket * fix: fixed minor issues * fix: fixed typebar theming * fix: fixed env issue * fix: fixed message not updating issue * refactor: added isConnected prop in msgContainer * refactor: resolve merge conflicts * fix: fixed request sending * fix: fixed decryption * fix: fixed env issue * feat: added profile header in message container * feat: adding rainbowkit for btn * fix: fix issues * fix: addec onnect functionality * fix: connect button * fix: added hack for rainbowkit css --------- Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta * Typebar UI issue (#666) * fix: fixed typebar space not working and theme * fix: fixed gif and emoji --------- Co-authored-by: KlausMikhaelson * fix: fixed theme colours * fix: added theme for brb * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * fix: added filter hat * fix: merged with main * fix: fixed msg border * fix: fixed theme * fix: fixed fonts * fix: fixed bug * Access control (#672) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * fix: added minor fix --------- Co-authored-by: Monalisha Mishra * fix: fixed padding issues * fix(f): fixed build issues * fix: fix for chat status test * feat: added verification option to show only on token gated groups * fix: fixing group access control * Check rules access control (#678) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * 662 group access control v2 changes (#663) * fix: spaces access API * fix: custom endpoint doc impl * Update README.md * Update README.md * fix: review comments change * fix: read me update * Update README.md * Update README.md * fix: origin in user creation (#665) * fix: origin in user creation * Update README.md * fix: review comments * 662 group access control v2 changes (#677) * fix: spaces access API * fix: custom endpoint doc impl * Update README.md * Update README.md * fix: review comments change * fix: read me update * Update README.md * Update README.md * fix(spaces): broadcast changes and UX fixes (#674) * fix: fix UI grid view (#642) * fix: fix UI grid view * refactor: conditional added * fix: resolved muting/unmuting try catch error (#657) * fix(spaces): fix livepeer broadcast (#656) * fix(spaces): fix livepeer broadcast * fix(spaces): fix data shown for unjoined space & promote listener logic --------- Co-authored-by: Madhur Gupta * refactor(spaces): use local state instead of get from server while meta message fire (#676) --------- Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Nilesh Gupta * feat: added verification option to show only on token gated groups * fix: fixing group access control --------- Co-authored-by: Monalisha Mishra Co-authored-by: Mohammed S Co-authored-by: Madhur Gupta Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Nilesh Gupta * fix: fixed build * feat: added send request to join group * fix: fixed verification on send * fix: fixed verify access btn not showing after joining group * fix: fixed join group showing for members too * fix: fixed join group showing to members * 667 chat.send enhancement (#673) * fix: changes messageObj for meta and reaction message type * fix: enhance send fn * fix: fixed intent issues * 680 group rules cosmetic changes (#682) * fix: fixed guild condition * fix: add did validation * fix: fixed * fix: fixed minor issues * fix: fixe dissue * fix: fixed minor issues * fix: check for scroll * fix: fixed scrolling * fix: fixed theme * fix: fixed * fix: fixed * fix: fixed * fix: fixed issues * fix: fixed * feat: added toast in join group btn for pvt groups * fix: fixed blurr * fix: fixed minor issues rules * fix: fixed * fix: fixed --------- Co-authored-by: Satyam <100528412+KlausMikhaelson@users.noreply.github.com> Co-authored-by: KlausMikhaelson Co-authored-by: Kolade Co-authored-by: Nilesh Gupta Co-authored-by: Mohammed S Co-authored-by: Madhur Gupta Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Aman Gupta * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.4 * Join group option (#688) * feat: created architechture * fix: added context values (#594) * Chat dataprovider (#596) * feat: data provider for chat component * fix: replaced react.usestate to usestate * fix: added props as the initial state and changed state name * fix: reverted chat context changes and renamed values * fix: added test page for chat ui components (#597) * added chatbubble component (#602) * feat: added chatbubble component * fix: made the messageBubble's width to fit-content --------- Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> * fix: added theme * Group chat bubble (#604) * feat: moved test component to testui folder & replaced dummy data with sdk response * feat: added twitter card and address for group chat received msg * feat: made the messageaddress reusable, added account from context * fix: removed unnecessary div and unused props and console logs * feat: adding pfp in text bubbles * fix: replaced hook with function and added pfp to messagebubble * fix: fixed image alignment * fix: changed border-radius of msg bubble and changed function name * fix: fixed theme and decryptedPrivateKey name (#616) * fix: fixed theme and decryptedPrivateKey name * fix: fixed bug * fix: fixed theme reviews * Message list (#615) * fix: message list comp * fix: message list comp * fix: added pagination * fix: added pagination * fix: pagination * fix: create useChatData hook * fix: fixed minor bug * fix: socket issues fixed * fix: added theme in msgbubble (#620) * fix: added theme in msgbubble * fix: fixed import --------- Co-authored-by: Monalisha Mishra * fix: exported the theme (#623) * fix: exported the theme * fix: fixed issues --------- Co-authored-by: Monalisha Mishra * Typebar component (#631) * feat: added typebar UI * feat: added functions to typebar * fix: added icon * fix: fixed theme issues --------- Co-authored-by: Monalisha Mishra * feat: added connectbutton * fix: fixed connectbtn ui and remove disconnect and fixed error on disconnect * fix: fixed create account getting called twice * Profile Header Component (#636) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * Message container (#635) * fix: added theme in msgbubble * fix: fixed import * fix: fixed message-list * fix: added approve intent * fix: added fixes * fix: fixed socket bug * fix: fixed message from socket * fix: fixed minor issues * fix: fixed typebar theming * fix: fixed env issue * fix: fixed message not updating issue * refactor: added isConnected prop in msgContainer * refactor: resolve merge conflicts * fix: fixed request sending * fix: fixed decryption * fix: fixed env issue * feat: added profile header in message container --------- Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta * fix: updated svg to react component * fix: changed svg to tsx component * fix: fixed review changes (#646) * fix: fixed review changes * fix: resolved issues --------- Co-authored-by: Nilesh Gupta * Profile Header -> Chat Profile fixes (#647) * feat: profile header * feat: update profile header * fix: update hooks * fix: video icon ui * feat: add group modal * fix: add modal info * fix: edit components * fix: commit modal theme * fix: updating UI * fix: ensname * fix: add notifs * fix: remove alerts * fix: remove alert logs * fix: push fixes * fix: conflicts * fix: notifs * fix: correct theme colors * fix: renaming profileHeader * fix: qa fixes * fix: loader * refactor: resolved issues * fix: edit types --------- Co-authored-by: Nilesh Gupta * fix: resolved package not added issue * Fix: modal issue in group info && alert remove members (#653) * fix: modal * fix: update changes * refactor: resolved issue --------- Co-authored-by: Nilesh Gupta * fix: QA fixes (#654) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * Connect btn revamp (#668) * fix: added theme in msgbubble * fix: fixed import * fix: fixed message-list * fix: added approve intent * fix: added fixes * fix: fixed socket bug * fix: fixed message from socket * fix: fixed minor issues * fix: fixed typebar theming * fix: fixed env issue * fix: fixed message not updating issue * refactor: added isConnected prop in msgContainer * refactor: resolve merge conflicts * fix: fixed request sending * fix: fixed decryption * fix: fixed env issue * feat: added profile header in message container * feat: adding rainbowkit for btn * fix: fix issues * fix: addec onnect functionality * fix: connect button * fix: added hack for rainbowkit css --------- Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta * Typebar UI issue (#666) * fix: fixed typebar space not working and theme * fix: fixed gif and emoji --------- Co-authored-by: KlausMikhaelson * fix: fixed theme colours * fix: added theme for brb * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * fix: added filter hat * fix: merged with main * fix: fixed msg border * fix: fixed theme * fix: fixed fonts * fix: fixed bug * Access control (#672) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * fix: added minor fix --------- Co-authored-by: Monalisha Mishra * fix: fixed padding issues * fix(f): fixed build issues * fix: fix for chat status test * feat: added verification option to show only on token gated groups * fix: fixing group access control * Check rules access control (#678) * fix: fixed typebar space not working and theme * feat: created access control UI * feat: created verify access control hook * fix: fixed access control hook issue * feat: added access control verification * feat: added onclick props for integration team to pass function and fixed btn ui * fix: added link for learn more * fix: fixed msg not updating in socket issue * 662 group access control v2 changes (#663) * fix: spaces access API * fix: custom endpoint doc impl * Update README.md * Update README.md * fix: review comments change * fix: read me update * Update README.md * Update README.md * fix: origin in user creation (#665) * fix: origin in user creation * Update README.md * fix: review comments * 662 group access control v2 changes (#677) * fix: spaces access API * fix: custom endpoint doc impl * Update README.md * Update README.md * fix: review comments change * fix: read me update * Update README.md * Update README.md * fix(spaces): broadcast changes and UX fixes (#674) * fix: fix UI grid view (#642) * fix: fix UI grid view * refactor: conditional added * fix: resolved muting/unmuting try catch error (#657) * fix(spaces): fix livepeer broadcast (#656) * fix(spaces): fix livepeer broadcast * fix(spaces): fix data shown for unjoined space & promote listener logic --------- Co-authored-by: Madhur Gupta * refactor(spaces): use local state instead of get from server while meta message fire (#676) --------- Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Nilesh Gupta * feat: added verification option to show only on token gated groups * fix: fixing group access control --------- Co-authored-by: Monalisha Mishra Co-authored-by: Mohammed S Co-authored-by: Madhur Gupta Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Nilesh Gupta * fix: fixed build * feat: added send request to join group * fix: fixed verification on send * fix: fixed verify access btn not showing after joining group * fix: fixed join group showing for members too * fix: fixed join group showing to members * 667 chat.send enhancement (#673) * fix: changes messageObj for meta and reaction message type * fix: enhance send fn * fix: fixed intent issues * 680 group rules cosmetic changes (#682) * fix: fixed guild condition * fix: add did validation * fix: fixed * fix: fixed minor issues * fix: fixe dissue * fix: fixed minor issues * fix: check for scroll * fix: fixed scrolling * fix: fixed theme * fix: fixed * fix: fixed * fix: fixed * fix: fixed issues * fix: fixed * feat: added toast in join group btn for pvt groups * fix: fixed blurr * fix: fixed minor issues rules * fix: fixed * fix: fixed * fix: fixed socket issue * fix: fixed --------- Co-authored-by: Satyam <100528412+KlausMikhaelson@users.noreply.github.com> Co-authored-by: KlausMikhaelson Co-authored-by: Kolade Co-authored-by: Nilesh Gupta Co-authored-by: Mohammed S Co-authored-by: Madhur Gupta Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Aman Gupta * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.5 * fix: fixed (#689) * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.6 * chat Load issue fixed (#690) * fix: fixed * fix: fixed minor issues * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.7 * fix: fixed msg bubble width (#691) * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.8 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.17 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.18 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.19 * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.33 * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.33 * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.9 * Onboarding blocknative (#702) * fix: added reusable folder * fix: fixed theme for modal * fix: removed reusables from export * fix: fixed fallback for message input * feat: replaced rainbowkit with blocknative * fix: removed unused code --------- Co-authored-by: Monalisha Mishra * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.10 * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.33 * Fix connect button issue (#710) * fix: fixed connect button blocknative * fix: fixed message fetching * fix: removed console * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.11 * fix: added condition while showing tokengatedIcon (#715) * fix: added disconnect for wallet (#721) * fix: added disconnect for wallet * fix: added autoConnect * Wallet disconnect (#722) * fix: added disconnect for wallet * fix: added autoConnect * fix: changed onClick to onGetTokenClick * Wallet disconnect (#723) * fix: added disconnect for wallet * fix: added autoConnect * fix: changed onClick to onGetTokenClick * fix: fixed errors * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.12 * Changed messageInput params Case (#725) * fix: added disconnect for wallet * fix: added autoConnect * fix: changed onClick to onGetTokenClick * fix: fixed errors * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.13 * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.20 * Wallet disconnect (#728) * fix: added disconnect for wallet * fix: added autoConnect * fix: changed onClick to onGetTokenClick * fix: fixed errors * fix: added coinbase wallet * fix: img added * fix: fixed metamask not showing if not present in it --------- Co-authored-by: KlausMikhaelson * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.14 * Wallet disconnect (#732) * fix: added disconnect for wallet * fix: added autoConnect * fix: changed onClick to onGetTokenClick * fix: fixed errors * fix: added coinbase wallet * fix: img added * fix: fixed metamask not showing if not present in it * fix: fixed injected wallets --------- Co-authored-by: KlausMikhaelson * ci(uiweb): šŸŽ‰ cut beta release to uiweb-v0.0.1-alpha.15 * fix: added class based implementation for notification (#699) * fix: added class based implementation for notification * fix: class based implementation for notification * fix: small fixes * fix: minor fixes and testcases * fix: fixes for testcases * fix: updated core abi and minor fixes * fix: removed comment * fix: minor fixes and additional checks * fix: minor fixes * fix: viem support for contract and new folder structure * fix: changed typescript 5.0.2 and configured eslint * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.34 * 720 pushstream class implementation (#729) * chore: added an example of automated chat using the new class based initialization * fix: fixed usecases * chore: added an example of automated chat using the new class based iā€¦ (#712) * chore: added an example of automated chat using the new class based initialization * fix: fixed usecases --------- Co-authored-by: aman035 * chore(automated chat example): tweaked automated chat example * fix: stream changes * fix: stream changes * fix: added chat.decrypt (#726) * fix: added chat.decrypt * fix: fix examples * fix: stream changes * fix: PUSH Stream Changes * fix: chat classes split * fix: Notification socket initialisations and rules backward compatibility * fix: added message decrypt * fix: review comments * fix: socket events * fix: test case fix and UserInfo to user * fix: rip PushNotification class * fix: additional check --------- Co-authored-by: harshrajat Co-authored-by: aman035 Co-authored-by: Harsh | Push Co-authored-by: akp111 * fix: remove only from test * fix: error fixed * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.35 * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.35 * fix: stream cases * 720 pushstream class implementation (#737) * fix: stream changes * fix: stream changes * fix: stream changes * fix: PUSH Stream Changes * fix: chat classes split * fix: Notification socket initialisations and rules backward compatibility * fix: added message decrypt * fix: review comments * fix: socket events * fix: test case fix and UserInfo to user * fix: rip PushNotification class * fix: additional check * fix: minor fixes --------- Co-authored-by: Mohammed S * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.21 * fix: corrected example * fix: some changes on stream * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.36 * fix: minor fixes * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.37 * fix: error handling in socket events * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.38 * fix: more fixes * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.39 * fix: minor fixes * fix: socket enabled * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.40 * fix: minor fixes * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.41 * Add counter for update channel (#740) * fix: added counter to update group * fix: added counter logic, moved delegate and alias function to channel class * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.42 * Add counter for update channel (#741) * fix: added counter to update group * fix: added counter logic, moved delegate and alias function to channel class * fix: added readme for notification * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.43 * fix: minor fix * ci(uiweb): šŸŽ‰ cut release to uiweb-v1.1.14 * fix: log removed * ci(restapi): šŸŽ‰ cut beta release to restapi-v0.0.1-alpha.44 * docs: fix tests * Feat/space backup (#746) * refactor: added code for joining livekit room for listeners (#731) * feat: drop in livekit inplace of livepeer (#736) * feat: drop in livekit inplace of livepeer * feat: added microphone * feat: added mic * feat: added access control --------- Co-authored-by: Nilesh Gupta * fix: Notification event mutation * Notification setting changes (#752) * Arbitrum changes (#735) * fix: inital implementation for arbitrum changes * fix: more changes * fix: added final changes * fix: minor fixes * fix: fixed typo * fix: notification settings related changes * fix: added index parameter for notification * fix: restored config * Arnab/livekit fixes (#754) * refactor: added code for joining livekit room for listeners (#731) * feat: drop in livekit inplace of livepeer * feat: added microphone * feat: added mic * feat: added access control * feat: fixes for livekit API call --------- Co-authored-by: Nilesh Gupta * ci(restapi): šŸŽ‰ cut release to restapi-v1.4.22 * fix: added settings * fix: added settings (#762) * fix: build fix * fix: minor fix * fix: minor fix * Added initial chat sidebar * fix: pagination done * fix: added fuse network * Working stream with hacks, working badges, working loading, partial loading, not working accept stream * fix: focus back to message input after sending the message (#1014) * fix: added support for ens (#1008) * feat: add video SDK v2 and video stream (#1017) * add: ethers support (#952) * fix: fix viem support, add ethers support * fix: remove @pushprotocol/socket dependency from restapi * fix: changed ethers fn * fix: fix ether changes * fix: fix subscribev2 * chore: readme changes * fix: fix ethers provider issue * fix: fix channel.update * feat(video-v2): add video v2 class and stream (#930) * feat(video-v2): add highlevel video class * feat(video): add video stream * fix(sendnotification): modify rules.access.data to be an object & code cleanup * fix(video): remove signer from input, throw err if signer, decrypted pgp key not found * feat(video): add sendNotification calls in connect, disconnect methods * fix(videonotificationrules): typo in VideoNotificationRules interface * feat(video stream): handle connect, retry internally from the SDK * feat(video connect): remove the connect method from the videov2 SDK * fix(videov2): create push signer instance to get chain id in initialize() * fix(video stream): add backwards compatibilty to rules object for older SDK versions * fix(video stream): fix bug in rules object creation * feat(video): update param names for video.initialize() * feat(video): add internal event handlers for stream in video SDK --------- Co-authored-by: Mohammed S --------- Co-authored-by: Aman Gupta Co-authored-by: Mohammed S * fix: Added ethersV6SignerType in uiweb signer types (#1018) * fix: added pushUser and stream (#1023) * fix: case sensative file inclusion (#1024) * fix: added themisation and ens resolve * fix: fixed a bug * 963 improvement proposal support for fuse network (#1026) * fix: case sensative file inclusion * fix: changed icon dimesnion * streaming tweaks * streaming tweaks with connected in restapi * fix(video stream): add video event type enum in CONSTANTS (#1032) * fix: added search for chatPreviewList * fix: added error codes * frontend react demo adjustment and rebasing * duplicate import fix * fix: refatored code * fix: changed chatSender to chatParticipant * adding onChatSelected and onUnreadCountChange * fix: name change fix --------- Co-authored-by: aman035 Co-authored-by: Mohammed S Co-authored-by: Mohammed S Co-authored-by: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Co-authored-by: Satyam <100528412+KlausMikhaelson@users.noreply.github.com> Co-authored-by: KlausMikhaelson Co-authored-by: Nilesh Gupta Co-authored-by: Monalisha Mishra Co-authored-by: Kolade Co-authored-by: Madhur Gupta Co-authored-by: Arnab Chatterjee <60937304+arn4b@users.noreply.github.com> Co-authored-by: Ashis Kumar Pradhan <38760485+akp111@users.noreply.github.com> Co-authored-by: akp111 Co-authored-by: Pritipriya Singh --- .vscode/settings.json | 3 + .../src/app/ChatUITest/ChatPreview.tsx | 65 ++ .../src/app/ChatUITest/ChatPreviewList.tsx | 53 ++ .../src/app/ChatUITest/ChatUITest.tsx | 19 +- .../src/app/ChatUITest/ChatViewComponent.tsx | 21 +- .../sdk-frontend-react/src/app/app.tsx | 155 ++-- .../examples/stream-notifications/index.js | 74 +- .../restapi/src/lib/pushstream/PushStream.ts | 24 +- .../chat/ChatPreview/ChatPreview.tsx | 181 ++++ .../lib/components/chat/ChatPreview/index.ts | 1 + .../chat/ChatPreviewList/ChatPreviewList.tsx | 800 ++++++++++++++++++ .../components/chat/ChatPreviewList/index.ts | 1 + .../chat/ChatProfile/ChatProfile.tsx | 5 +- .../ChatViewComponent.tsx | 12 +- .../{ChatViewComponent => ChatView}/index.ts | 0 .../chat/ChatViewList/ChatViewList.tsx | 20 +- .../src/lib/components/chat/exportedTypes.ts | 52 +- .../src/lib/components/chat/helpers/helper.ts | 284 +++++-- .../uiweb/src/lib/components/chat/index.ts | 11 +- .../src/lib/components/chat/theme/index.ts | 76 +- .../src/lib/components/reusables/index.tsx | 2 +- .../components/reusables/sharedStyling.tsx | 114 ++- packages/uiweb/src/lib/helpers/chat/chat.ts | 2 +- packages/uiweb/src/lib/hooks/chat/index.ts | 2 +- .../lib/hooks/chat/useFetchHistoryMessages.ts | 51 -- .../hooks/chat/useFetchMessageUtilities.ts | 100 +++ .../src/lib/hooks/chat/useGetGroupByIDnew.ts | 35 + .../src/lib/hooks/chat/usePushChatSocket.ts | 5 +- .../src/lib/hooks/chat/usePushChatStream.ts | 211 +++-- 29 files changed, 1967 insertions(+), 412 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx create mode 100644 packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx create mode 100644 packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx create mode 100644 packages/uiweb/src/lib/components/chat/ChatPreview/index.ts create mode 100644 packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx create mode 100644 packages/uiweb/src/lib/components/chat/ChatPreviewList/index.ts rename packages/uiweb/src/lib/components/chat/{ChatViewComponent => ChatView}/ChatViewComponent.tsx (98%) rename packages/uiweb/src/lib/components/chat/{ChatViewComponent => ChatView}/index.ts (100%) delete mode 100644 packages/uiweb/src/lib/hooks/chat/useFetchHistoryMessages.ts create mode 100644 packages/uiweb/src/lib/hooks/chat/useFetchMessageUtilities.ts create mode 100644 packages/uiweb/src/lib/hooks/chat/useGetGroupByIDnew.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..e1786ec1c --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "workbench.activityBar.orientation": "vertical" +} \ No newline at end of file diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx new file mode 100644 index 000000000..b8633c48e --- /dev/null +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreview.tsx @@ -0,0 +1,65 @@ +import { ChatPreview } from "@pushprotocol/uiweb"; + +const ChatPreviewTest = () => { + + return ( +
+ + + +
+ ) +} + +export default ChatPreviewTest; \ No newline at end of file diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx new file mode 100644 index 000000000..9f11c4ed9 --- /dev/null +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx @@ -0,0 +1,53 @@ +import React, { useContext, useState } from 'react'; +import { Checkbox } from '../components/Checkbox'; + +import { ChatPreviewList } from "@pushprotocol/uiweb"; + +const ChatPreviewListTest = () => { + // define controls + const [chatRequests, setChatRequests] = useState(false); + const [address, setAddress] = useState(); + + // set controls + const handleChatRequestsCheckbox = () => { + setChatRequests(!chatRequests); + }; + + const handleAddressChange = (e: React.SyntheticEvent) => { + setAddress((e.target as HTMLInputElement).value); + }; + + return ( + <> + +

+ +
+ +

+ +
+ console.log('hello onChatSelected')} + onUnreadCountChange={()=>console.log('hello onUnreadCountChange')} + // listType='SEARCH' + // searchParamter='fabio.eth' + /> +
+ + ) +} + +export default ChatPreviewListTest; \ No newline at end of file diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatUITest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatUITest.tsx index 06cdb3837..0fdffc567 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatUITest.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatUITest.tsx @@ -1,8 +1,8 @@ import { useState } from 'react'; -import styled from 'styled-components'; import { Link } from 'react-router-dom'; -import { Section } from '../components/StyledComponents'; +import styled from 'styled-components'; import Loader from '../components/Loader'; +import { Section } from '../components/StyledComponents'; const ChatUITest = () => { const [isLoading, setIsLoading] = useState(false); @@ -29,16 +29,21 @@ const ChatUITest = () => { CHAT PROFILE - + CHAT BUBBLE - + CHAT VIEW LIST - - CHAT VIEW COMPONENT + + CHAT VIEW + + + CHAT PREVIEW + + + CHAT PREVIEW LIST - diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx index c3ac5da4d..e64ba67a7 100644 --- 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,7 @@ import styled from 'styled-components'; +import { ChatView, CreateGroupModal, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from "@pushprotocol/uiweb"; import { Section } from '../components/StyledComponents'; -import { CreateGroupModal, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from "@pushprotocol/uiweb"; -import { ChatView } from '@pushprotocol/uiweb'; const ChatViewComponentTest = () => { const chatFilterList = [ @@ -12,20 +11,20 @@ const ChatViewComponentTest = () => { return (
-

Chat UI Test page

+

Chat View Test page

{/* {console.log('in close')}} /> */} {/* {console.log('in close')}} modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */} console.log("BOIIII RETURNNNSSSSS")} - chatId='0xf8250D363BD1F25f52F10C21188fe82c68C049c4' - component={} - limit={10} - isConnected={true} - groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} - groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE} - verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE} + onVerificationFail={() => console.log("Verification Failed")} + chatId='0xf8250D363BD1F25f52F10C21188fe82c68C049c4' + component={} + limit={10} + isConnected={true} + groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} + groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE} + verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE} />
diff --git a/packages/examples/sdk-frontend-react/src/app/app.tsx b/packages/examples/sdk-frontend-react/src/app/app.tsx index 1f60c2ad4..f121847d5 100644 --- a/packages/examples/sdk-frontend-react/src/app/app.tsx +++ b/packages/examples/sdk-frontend-react/src/app/app.tsx @@ -1,94 +1,96 @@ +import { useWeb3React } from '@web3-react/core'; +import { Buffer } from 'buffer'; import { useContext, useEffect, useMemo, useState } from 'react'; +import { Link, Route, Routes } from 'react-router-dom'; import styled from 'styled-components'; -import { Route, Routes, Link } from 'react-router-dom'; -import { useWeb3React } from '@web3-react/core'; -import ConnectButtonComp from './components/Connect'; -import { Checkbox } from './components/Checkbox'; -import Dropdown from './components/Dropdown'; -import { - Web3Context, - EnvContext, - SocketContext, - AccountContext, -} from './context'; -import { useSDKSocket } from './hooks'; import { ReactComponent as PushLogo } from '../assets/pushLogo.svg'; -import NotificationsTest from './NotificationsTest'; -import SecretNotificationsTest from './SecretNotificationsTest'; -import ChannelsTest from './ChannelsTest'; import AliasTest from './AliasTest'; -import EmbedTest from './EmbedTest'; -import PayloadsTest from './PayloadsTest'; -import SocketTest from './SocketTest'; +import ChannelsTest from './ChannelsTest'; +import AddAdminsToGroupTest from './ChatTest/AddAdminsToGroupTest'; +import AddMembersToGroupTest from './ChatTest/AddMembersToGroupTest'; +import ApproveRequestTest from './ChatTest/ApproveRequestTest'; +import AuthUpdateUserTest from './ChatTest/AuthUpdateUser'; import ChatTest from './ChatTest/ChatTest'; -import GetUserTest from './ChatTest/GetUser'; +import ConversationHashTest from './ChatTest/ConversationHash'; +import CreateGroupTest from './ChatTest/CreateGroupTest'; import CreateUserTest from './ChatTest/CreateUser'; -import SendMessageTest from './ChatTest/SendMessageTest'; -import ApproveRequestTest from './ChatTest/ApproveRequestTest'; import GetChatsTest from './ChatTest/GetChats'; -import ConversationHashTest from './ChatTest/ConversationHash'; -import HistoryTest from './ChatTest/History'; +import GetGroupAccessTest from './ChatTest/GetGroupAccessTest'; +import GetGroupTest from './ChatTest/GetGroupTest'; import GetRequestsTest from './ChatTest/GetRequests'; +import GetUserTest from './ChatTest/GetUser'; +import GetUsersBatchTest from './ChatTest/GetUsersBatchTest'; +import HistoryTest from './ChatTest/History'; +import RemoveAdminsFromGroupTest from './ChatTest/RemoveAdminsFromGroupTest'; +import RemoveMembersFromGroupTest from './ChatTest/RemoveMembersFromGroupTest'; +import SendMessageTest from './ChatTest/SendMessageTest'; +import UpdateGroupTest from './ChatTest/UpdateGroupTest'; +import UpdateUserProfile from './ChatTest/UpdateUserProfile'; import DelegationTest from './DelegationTest'; -import CreateGroupTest from './ChatTest/CreateGroupTest'; -import AddMembersToGroupTest from './ChatTest/AddMembersToGroupTest'; -import AddAdminsToGroupTest from './ChatTest/AddAdminsToGroupTest'; +import EmbedTest from './EmbedTest'; +import NotificationsTest from './NotificationsTest'; +import PayloadsTest from './PayloadsTest'; +import SecretNotificationsTest from './SecretNotificationsTest'; +import SocketTest from './SocketTest'; +import AddListenersToSpaceTest from './SpaceTest/AddListenersToSpaceTest'; +import AddSpeakersToSpaceTest from './SpaceTest/AddSpeakersToSpaceTest'; +import ApproveSpaceRequestTest from './SpaceTest/ApproveSpaceRequestTest'; import CreateSpaceTest from './SpaceTest/CreateSpaceTest'; -import UpdateSpaceTest from './SpaceTest/UpdateSpaceTest'; -import GetSpaceTest from './SpaceTest/GetSpaceTest'; +import GetSpaceAccessTest from './SpaceTest/GetSpaceAccessTest'; import GetSpaceInfoTest from './SpaceTest/GetSpaceInfoTest'; -import ApproveSpaceRequestTest from './SpaceTest/ApproveSpaceRequestTest'; -import UpdateGroupTest from './ChatTest/UpdateGroupTest'; -import GetGroupTest from './ChatTest/GetGroupTest'; -import GetGroupAccessTest from './ChatTest/GetGroupAccessTest'; -import GetUsersBatchTest from './ChatTest/GetUsersBatchTest'; -import AuthUpdateUserTest from './ChatTest/AuthUpdateUser'; -import UpdateUserProfile from './ChatTest/UpdateUserProfile'; -import { Buffer } from 'buffer'; -import { ENV } from './helpers'; +import GetSpaceTest from './SpaceTest/GetSpaceTest'; +import GetSpacesRequestsTest from './SpaceTest/GetSpacesRequestsTest'; +import GetSpacesTest from './SpaceTest/GetSpacesTest'; +import GetSpacesTrendingTest from './SpaceTest/GetSpacesTrendingTest'; +import RemoveListenersFromSpaceTest from './SpaceTest/RemoveListenersFromSpaceTest'; +import RemoveSpeakersFromSpaceTest from './SpaceTest/RemoveSpeakersFromSpaceTest'; import SpaceTest from './SpaceTest/SpaceTest'; import StartSpaceTest from './SpaceTest/StartSpaceTest'; import StopSpaceTest from './SpaceTest/StopSpaceTest'; -import RemoveMembersFromGroupTest from './ChatTest/RemoveMembersFromGroupTest'; -import RemoveAdminsFromGroupTest from './ChatTest/RemoveAdminsFromGroupTest'; -import AddSpeakersToSpaceTest from './SpaceTest/AddSpeakersToSpaceTest'; -import AddListenersToSpaceTest from './SpaceTest/AddListenersToSpaceTest'; -import RemoveListenersFromSpaceTest from './SpaceTest/RemoveListenersFromSpaceTest'; -import RemoveSpeakersFromSpaceTest from './SpaceTest/RemoveSpeakersFromSpaceTest'; -import GetSpacesTest from './SpaceTest/GetSpacesTest'; -import GetSpacesRequestsTest from './SpaceTest/GetSpacesRequestsTest'; -import GetSpacesTrendingTest from './SpaceTest/GetSpacesTrendingTest'; -import GetSpaceAccessTest from './SpaceTest/GetSpaceAccessTest'; - -import SpaceUITest from './SpaceUITest/SpaceUITest'; +import UpdateSpaceTest from './SpaceTest/UpdateSpaceTest'; +import { Checkbox } from './components/Checkbox'; +import ConnectButtonComp from './components/Connect'; +import Dropdown from './components/Dropdown'; import { - SpaceWidget, - SpaceBanner, - SpaceFeed, - CreateSpaceComponent, - SpaceInvitesComponent, -} from './SpaceUITest'; -import { useSpaceComponents } from './SpaceUITest/useSpaceComponents'; + AccountContext, + EnvContext, + SocketContext, + Web3Context, +} from './context'; +import { ENV } from './helpers'; +import { useSDKSocket } from './hooks'; + import * as PushAPI from '@pushprotocol/restapi'; -import { ChatWidgetTest } from './ChatWidgetTest'; import { CHAT_THEME_OPTIONS, ChatUIProvider, SpacesUI, SpacesUIProvider, darkChatTheme, + lightChatTheme, } from '@pushprotocol/uiweb'; -import ChatUITest from './ChatUITest/ChatUITest'; +import { ChatSupportTest } from './ChatSupportTest'; +import GetGroupMemberStatusTest from './ChatTest/GetGroupMemberStatusTest'; +import RejectRequestTest from './ChatTest/RejectRequestTest'; +import SearchGroupTest from './ChatTest/SearchGroupTest'; +import ChatPreviewTest from './ChatUITest/ChatPreview'; +import ChatPreviewListTest from './ChatUITest/ChatPreviewList'; import { ChatProfileTest } from './ChatUITest/ChatProfile'; -import ChatViewListTest from './ChatUITest/ChatViewListTest'; +import ChatUITest from './ChatUITest/ChatUITest'; import { ChatViewBubbles } from './ChatUITest/ChatViewBubble'; import ChatViewComponentTest from './ChatUITest/ChatViewComponent'; -import { lightChatTheme } from '@pushprotocol/uiweb'; +import ChatViewListTest from './ChatUITest/ChatViewListTest'; +import { ChatWidgetTest } from './ChatWidgetTest'; import SearchSpaceTest from './SpaceTest/SearchSpaceTest'; -import SearchGroupTest from './ChatTest/SearchGroupTest'; -import RejectRequestTest from './ChatTest/RejectRequestTest'; -import GetGroupMemberStatusTest from './ChatTest/GetGroupMemberStatusTest'; -import { ChatSupportTest } from './ChatSupportTest'; +import { + CreateSpaceComponent, + SpaceBanner, + SpaceFeed, + SpaceInvitesComponent, + SpaceWidget, +} from './SpaceUITest'; +import SpaceUITest from './SpaceUITest/SpaceUITest'; +import { useSpaceComponents } from './SpaceUITest/useSpaceComponents'; import GetGroupMemberCountTest from './ChatTest/GetGroupMemberCountTest'; import GetGroupInfoTest from './ChatTest/GetGroupInfoTest'; import GetGroupMembersTest from './ChatTest/GetGroupMembersTest'; @@ -565,24 +567,33 @@ export function App() { /> {/* chat ui components routes */} } /> } /> } - /> + /> } - /> } - /> + /> + } + /> + } + /> + } + /> {/* */} {/* */} diff --git a/packages/examples/stream-notifications/index.js b/packages/examples/stream-notifications/index.js index 550e84a65..3e8f370d3 100644 --- a/packages/examples/stream-notifications/index.js +++ b/packages/examples/stream-notifications/index.js @@ -7,16 +7,16 @@ import input from 'input'; // else we will need testnet ETH in a wallet to create channel console.log("This demo requires a channel on staging, you can create one here: https://push.org/docs/notifications"); console.log("Alternatively just leave the input empty and we will simulate a notification! (Note: this option will throw few warnings)"); -let pk = await input.text('Enter private key of your channel on staging, learn more: https://push.org/docs/notifications -'); -if (pk.length > 0 && pk.substr(0, 2) !== '0x') { - pk = '0x' + pk; -} +// let pk = await input.text('Enter private key of your channel on staging, learn more: https://push.org/docs/notifications -'); +// if (pk.length > 0 && pk.substr(0, 2) !== '0x') { +// pk = '0x' + pk; +// } -// Loading signer from private key, ideally this is the wallet you will connect -const signer = pk.length > 0 ? new ethers.Wallet(pk) : ethers.Wallet.createRandom(); +// // Loading signer from private key, ideally this is the wallet you will connect +// const signer = pk.length > 0 ? new ethers.Wallet(pk) : ethers.Wallet.createRandom(); -// Print wallet address -console.log('Sending notification from Wallet address: ', signer.address); +// // Print wallet address +// console.log('Sending notification from Wallet address: ', signer.address); // Initialize wallet user, pass 'prod' instead of 'staging' for mainnet apps const userAlice = await PushAPI.initialize(signer, { env: CONSTANTS.ENV.STAGING }); @@ -48,16 +48,54 @@ stream.on(CONSTANTS.STREAM.CONNECT, async () => { }); } }); +// const channelSubs = await userAlice.channel.subscribers({ +// channel: 'eip155:1:0x03EAAAa48ea78d1E66eA3458364d553AD981871E', +// page: 1, +// limit: 10 +// }) +// console.log(channelSubs); -// Setup responder for CONSTANTS.STREAM.DISCONNECT event -stream.on(CONSTANTS.STREAM.DISCONNECT, () => { - console.log('Stream Disconnected'); -}); +const aliceChats = await userAlice.chat.list("CHATS"); +console.log(aliceChats); -// Setup responder for CONSTANTS.STREAM.NOTIF event -stream.on(CONSTANTS.STREAM.NOTIF, (notificaiton) => { - console.log("Notification received", notificaiton); -}); -// Connect stream -stream.connect(); \ No newline at end of file +// // IMPORTANT: Setup stream events before stream.connect() +// const stream = await userAlice.initStream([ +// CONSTANTS.STREAM.CONNECT, +// CONSTANTS.STREAM.DISCONNECT, +// CONSTANTS.STREAM.NOTIF +// ]); + +// // Setup responder for CONSTANTS.STREAM.CONNECT event +// stream.on(CONSTANTS.STREAM.CONNECT, async () => { +// console.log('Stream Connected'); + +// // stream connected, send a message +// // Sending a test notification +// console.log("Sending notification, you should see 'Notification recieved event' in a few moments"); + +// if (pk.length > 0) { +// // Send broadcast to all opted in users +// await userAlice.channel.send(['*'], { +// notification: { title: 'GM', body: "It's a me, Mario!!!" }, +// }); +// } else { +// // Send targeted notification to own wallet, creating a simulated notification +// await userAlice.channel.send([signer.address], { +// notification: { title: 'GM', body: "It's targeted, simulated notification" }, +// }); +// } +// }); + +// // Setup responder for CONSTANTS.STREAM.DISCONNECT event +// stream.on(CONSTANTS.STREAM.DISCONNECT, () => { +// console.log('Stream Disconnected'); +// }); + +// // Setup responder for CONSTANTS.STREAM.NOTIF event +// stream.on(CONSTANTS.STREAM.NOTIF, (notificaiton) => { +// console.log("Notification received", notificaiton); +// }); + +// // Connect stream +// stream.connect(); \ 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 3b944a884..6fdc051fe 100644 --- a/packages/restapi/src/lib/pushstream/PushStream.ts +++ b/packages/restapi/src/lib/pushstream/PushStream.ts @@ -1,21 +1,21 @@ import { EventEmitter } from 'events'; -import { createSocketConnection } from './socketClient'; +import { ALPHA_FEATURE_CONFIG } from '../config'; import { ENV, PACKAGE_BUILD } from '../constants'; +import { pCAIP10ToWallet, walletToPCAIP10 } from '../helpers'; +import { ADDITIONAL_META_TYPE } from '../payloads'; +import { Chat } from '../pushapi/chat'; +import { ProgressHookType, SignerType } from '../types'; +import { DataModifier } from './DataModifier'; import { + EVENTS, GroupEventType, MessageEventType, MessageOrigin, NotificationEventType, PushStreamInitializeProps, - STREAM, - EVENTS + STREAM } from './pushStreamTypes'; -import { DataModifier } from './DataModifier'; -import { pCAIP10ToWallet, walletToPCAIP10 } from '../helpers'; -import { Chat } from '../pushapi/chat'; -import { ProgressHookType, SignerType } from '../types'; -import { ALPHA_FEATURE_CONFIG } from '../config'; -import { ADDITIONAL_META_TYPE } from '../payloads'; +import { createSocketConnection } from './socketClient'; export class PushStream extends EventEmitter { private pushChatSocket: any; @@ -380,6 +380,12 @@ export class PushStream extends EventEmitter { } }); } + + this.disconnected = false; + } + + public connected(): boolean { + return (this.pushNotificationSocket && this.pushNotificationSocket.connected) || (this.pushChatSocket && this.pushChatSocket.connected); } public async disconnect(): Promise { diff --git a/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx b/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx new file mode 100644 index 000000000..13c445e73 --- /dev/null +++ b/packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx @@ -0,0 +1,181 @@ +import React, { useContext, useEffect, useRef, useState } from 'react'; + +import styled from 'styled-components'; + +import { useChatData } from '../../../hooks'; +import { Button, Image, Section } from '../../reusables'; + +import { IChatPreviewProps } from '../exportedTypes'; +import { IChatTheme } from '../theme'; +import { ThemeContext } from '../theme/ThemeProvider'; +import { formatAddress, formatDate } from '../helpers'; + +/** + * @interface IThemeProps + * this interface is used for defining the props for styled components + */ +interface IThemeProps { + theme?: IChatTheme; + blur?: boolean; +} + +export const ChatPreview: React.FC = ( + options: IChatPreviewProps +) => { + const theme = useContext(ThemeContext); + const {env} = useChatData(); + const [formattedAddress,setFormattedAddress] = useState(''); + + useEffect(()=>{ + (async()=>{ + const address = await formatAddress(options.chatPreviewPayload,env); + setFormattedAddress(address); + })(); + + + },[]) + + + return ( + + + + ); +}; + +//styles +const ChatPreviewContainer = styled(Section)` + &::-webkit-scrollbar-thumb { + background: ${(props) => props.theme.scrollbarColor}; + border-radius: 10px; + } + + &::-webkit-scrollbar { + width: 5px; + } + ${({ blur }) => + blur && + ` + filter: blur(12px); + `} + overscroll-behavior: contain; + scroll-behavior: smooth; +`; + +// Styled component for the name of the person in the inbox +const Account = styled.div` + font-weight: ${(props) => props.theme.fontWeight?.chatPreviewParticipantText}; + font-size: ${(props) => props.theme.fontSize?.chatPreviewParticipantText}; + color: ${(props) => props.theme.textColor?.chatPreviewParticipantText}; + flex: 1; + align-self: stretch; + text-align: start; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-right: 10px; +`; + +const Dated = styled.div` + font-weight: ${(props) => props.theme.fontWeight?.chatPreviewDateText}; + font-size: ${(props) => props.theme.fontSize?.chatPreviewDateText}; + color: ${(props) => props.theme.textColor?.chatPreviewDateText}; +`; + +// Styled component for the last message in the inbox +const Message = styled.div` + font-weight: ${(props) => props.theme.fontWeight?.chatPreviewMessageText}; + font-size: ${(props) => props.theme.fontSize?.chatPreviewMessageText}; + color: ${(props) => props.theme.textColor?.chatPreviewMessageText}; + flex: 1; + align-self: stretch; + text-align: start; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-right: 10px; +`; + +const Badge = styled.div` + background: ${(props) => props.theme.backgroundColor?.chatPreviewBadgeBackground}; + font-weight: ${(props) => props.theme.fontWeight?.chatPreviewBadgeText}; + font-size: ${(props) => props.theme.fontSize?.chatPreviewBadgeText}; + color: ${(props) => props.theme.textColor?.chatPreviewBadgeText}; + padding: 0px 8px; + min-height: 24px; + border-radius: 24px; + align-self: center; + +`; diff --git a/packages/uiweb/src/lib/components/chat/ChatPreview/index.ts b/packages/uiweb/src/lib/components/chat/ChatPreview/index.ts new file mode 100644 index 000000000..d410f258d --- /dev/null +++ b/packages/uiweb/src/lib/components/chat/ChatPreview/index.ts @@ -0,0 +1 @@ +export { ChatPreview } from './ChatPreview'; diff --git a/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx b/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx new file mode 100644 index 000000000..f2a0a8ced --- /dev/null +++ b/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx @@ -0,0 +1,800 @@ +import React, { useContext, useEffect, useRef, useState } from 'react'; + +import { + ChatPreviewListErrorCodes, + Group, + IChatPreviewListError, + IChatPreviewListProps, + IChatPreviewPayload, +} from '../exportedTypes'; + +import { CONSTANTS, IFeeds, IUser } from '@pushprotocol/restapi'; +import { ethers } from 'ethers'; +import styled from 'styled-components'; + +import { useChatData, usePushChatStream } from '../../../hooks'; +import useChatProfile from '../../../hooks/chat/useChatProfile'; +import useFetchMessageUtilities from '../../../hooks/chat/useFetchMessageUtilities'; +import useGetGroupByIDnew from '../../../hooks/chat/useGetGroupByIDnew'; +import { Button, Section, Span, Spinner } from '../../reusables'; +import { ChatPreview } from '../ChatPreview'; + +import { getAddress, pCAIP10ToWallet } from '../../../helpers'; +import { + generateRandomNonce, + transformChatItems, + transformStreamToIChatPreviewPayload, +} from '../helpers'; +import { IChatTheme } from '../theme'; +import { ThemeContext } from '../theme/ThemeProvider'; + +// Define Interfaces +/** + * @interface IThemeProps + * this interface is used for defining the props for styled components + */ +interface IThemeProps { + theme?: IChatTheme; + blur: boolean; +} + +interface IChatPreviewList { + nonce: string; + items: IChatPreviewPayload[]; + page: number; + preloading: boolean; //if wallet is not connected + loading: boolean; //when scrolling for more index + loaded: boolean; + reset: boolean; //if chat has an error & we need to reload everything + resume: boolean; //if chat has an error & we need to resume loading + errored: boolean; + error: null | IChatPreviewListError; +} + +interface IChatPreviewListMeta { + selectedChatId?: string; + badges: { + [chatId: string]: number; + }; +} + +// Define Constants +const CHAT_PAGE_LIMIT = 10; + +export const ChatPreviewList: React.FC = ( + options: IChatPreviewListProps +) => { + // get hooks + const { env, signer, account, pushUser } = useChatData(); + const { fetchChatProfile } = useChatProfile(); + const { getGroupByIDnew } = useGetGroupByIDnew(); + const { fetchLatestMessage, fetchChatList } = useFetchMessageUtilities(); + + // set chat preview list + const [chatPreviewList, setChatPreviewList] = useState({ + nonce: 'INITIAL_NONCE', + items: [], + page: 1, + preloading: true, + loading: false, + loaded: false, + reset: false, + resume: false, + errored: false, + error: null, + }); + + // set chat preview list meta + const [chatPreviewListMeta, setChatPreviewListMeta] = + useState({ + selectedChatId: undefined, + badges: {}, + }); + + // set theme + const theme = useContext(ThemeContext); + + // set ref + const listInnerRef = useRef(null); + + const { chatStream, chatRequestStream, chatAcceptStream, groupMetaStream } = + usePushChatStream(); + + // Helper Functions + + // Add to chat items + const addChatItems: (items: IChatPreviewPayload[]) => void = ( + items: IChatPreviewPayload[] + ) => { + const combinedItems: IChatPreviewPayload[] = [ + ...items, + ...chatPreviewList.items, + ].filter( + (item, index, self) => + index === self.findIndex((t) => t.chatId === item.chatId) + ); + + setChatPreviewList((prev) => ({ + ...prev, + items: combinedItems, + })); + + // increment badge for each item + items.forEach((item) => { + // only increment if not selected + if (chatPreviewListMeta.selectedChatId !== item.chatId) { + setBadge( + item.chatId!, + chatPreviewListMeta.badges[item.chatId!] + ? chatPreviewListMeta.badges[item.chatId!] + 1 + : 1 + ); + } + }); + }; + + // Remove from chat items + const removeChatItems: (items: string[]) => void = (items: string[]) => { + const combinedItems: IChatPreviewPayload[] = [ + ...chatPreviewList.items, + ].filter((item) => !items.includes(item.chatId!)); + + setChatPreviewList((prev) => ({ + ...prev, + items: combinedItems, + })); + + // remove badge for each item + items.forEach((item) => { + setBadge(item!, 0); + }); + }; + + // Transform stream message + const transformStreamMessage: (item: any) => void = async (item: any) => { + if (!pushUser) { + return; + } + + console.log('Transforming stream message', item); + + // transform the item to IChatPreviewPayload + const modItem = transformStreamToIChatPreviewPayload(item); + + // now check if this message is already present in the list + const chatItem = chatPreviewList.items.find( + (chatItem) => chatItem.chatId === modItem.chatId + ); + + // if chat item is present, take pfp an group name if request + if (chatItem) { + modItem.chatPic = chatItem.chatPic; + modItem.chatParticipant = chatItem.chatParticipant; + } else { + // if not present, fetch profile + if (!modItem.chatGroup) { + const profile = await pushUser.profile.info({ + overrideAccount: modItem.chatParticipant, + }); + modItem.chatPic = profile.picture; + } else { + const profile = await pushUser.chat.group.info(modItem.chatId!); + modItem.chatPic = profile.groupImage; + modItem.chatParticipant = profile.groupName; + } + } + // modify the chat items + addChatItems([modItem]); + }; + + // Transform accepted request + const transformAcceptedRequest: (item: any) => void = async (item: any) => { + if (!pushUser) { + return; + } + + // if we are on requests tab then remove the chat item + if (options.listType === CONSTANTS.CHAT.LIST_TYPE.REQUESTS) { + removeChatItems([item.chatId]); + } else { + // pass it as transform stream message to add + transformStreamMessage(item); + } + }; + + // get type and override account + + const getTypeAndAccount = () => { + const type = options.listType + ? options.listType + : CONSTANTS.CHAT.LIST_TYPE.CHATS; + const overrideAccount = options.overrideAccount + ? options.overrideAccount + : undefined; + return { type, overrideAccount }; + }; + + //Initialise chat + const initializeChatList = async () => { + // Load chat type from options, if not present, default to CHATS + const { type, overrideAccount } = getTypeAndAccount(); + const newpage = 1; + + // store current nonce and page + const currentNonce = chatPreviewList.nonce; + if (type === 'SEARCH') { + await handleSearch(currentNonce); + } else { + const chatList = await fetchChatList({ + type, + page: newpage, + limit: CHAT_PAGE_LIMIT, + overrideAccount, + }); + if (chatList) { + // get and transform chats + const transformedChats = transformChatItems(chatList); + console.log( + `currentNonce: ${currentNonce}, chatPreviewList.nonce: ${chatPreviewList.nonce}` + ); + + // return if nonce doesn't match or if page is not 1 + if ( + currentNonce !== chatPreviewList.nonce || + chatPreviewList.page !== 1 + ) { + return; + } + + setChatPreviewList((prev) => ({ + nonce: generateRandomNonce(), + items: transformedChats, + page: 1, + preloading: false, + loading: false, + loaded: false, + reset: false, + resume: false, + errored: false, + error: null, + })); + } else { + // return if nonce doesn't match + console.debug( + `Errored: currentNonce: ${currentNonce}, chatPreviewList.nonce: ${chatPreviewList.nonce}` + ); + if (currentNonce !== chatPreviewList.nonce) { + return; + } + + setChatPreviewList({ + nonce: generateRandomNonce(), + items: [], + page: 1, + preloading: false, + loading: false, + loaded: false, + reset: false, + resume: false, + errored: true, + error: { + code: ChatPreviewListErrorCodes.CHAT_PREVIEW_LIST_PRELOAD_ERROR, + message: 'No chats found', + }, + }); + } + } + }; + + //load more chats + const loadMoreChats = async () => { + // Load chat type from options, if not present, default to CHATS + const { type, overrideAccount } = getTypeAndAccount(); + const newpage = chatPreviewList.page + 1; + + // store current nonce and page + const currentNonce = chatPreviewList.nonce; + const currentPage = newpage; + + if ( + type === CONSTANTS.CHAT.LIST_TYPE.CHATS || + type === CONSTANTS.CHAT.LIST_TYPE.REQUESTS + ) { + const chatList = await fetchChatList({ + type, + page: newpage, + limit: CHAT_PAGE_LIMIT, + overrideAccount, + }); + if (chatList) { + // get and transform chats + const transformedChats = transformChatItems(chatList); + + // return if nonce doesn't match or if page plus 1 is not the same as new page + if ( + currentNonce !== chatPreviewList.nonce || + chatPreviewList.page + 1 !== currentPage + ) { + return; + } + + setChatPreviewList((prev) => ({ + nonce: generateRandomNonce(), + items: [...prev.items, ...transformedChats], + page: newpage, + preloading: false, + loading: false, + loaded: transformedChats.length < CHAT_PAGE_LIMIT ? true : false, + reset: false, + resume: false, + errored: false, + error: null, + })); + } else { + // return if nonce doesn't match or if page plus 1 is not the same as new page + if ( + currentNonce !== chatPreviewList.nonce || + chatPreviewList.page + 1 !== newpage + ) { + return; + } + + setChatPreviewList((prev) => ({ + ...prev, + nonce: generateRandomNonce(), + reset: false, + resume: false, + errored: true, + error: { + code: ChatPreviewListErrorCodes.CHAT_PREVIEW_LIST_LOAD_ERROR, + message: 'Unable to load more chats', + }, + })); + } + } + }; + + // Define Chat Preview List Meta Functions + // Set selected badge + const setSelectedBadge: (chatId: string) => void = (chatId: string) => { + // selected will reduce badge to 0 + setChatPreviewListMeta((prev) => ({ + selectedChatId: chatId, + badges: { + ...prev.badges, + [chatId]: 0, + }, + })); + + // call onChatSelected if present + if (options?.onChatSelected) { + options.onChatSelected(chatId); + } + }; + + // Set badge + const setBadge: (chatId: string, num: number) => void = ( + chatId: string, + num: number + ) => { + // increment badge + setChatPreviewListMeta((prev) => ({ + ...prev, + badges: { + ...prev.badges, + [chatId]: prev.badges ? num : 0, + }, + })); + }; + + // Reset badge + const resetBadge: () => void = () => { + // reset badge + setChatPreviewListMeta({ + selectedChatId: undefined, + badges: {}, + }); + }; + + + // Effects + + // If account, env or signer changes + useEffect(() => { + setChatPreviewList({ + nonce: generateRandomNonce(), + items: [], + page: 1, + preloading: true, + loading: false, + loaded: false, + reset: false, + resume: false, + errored: false, + error: null, + }); + resetBadge(); + }, [account, signer, env]); + + // If push user changes | preloading + useEffect(() => { + if (!pushUser) { + return; + } + + // reset the entire state + setChatPreviewList({ + nonce: generateRandomNonce(), + items: [], + page: 1, + preloading: true, + loading: false, + loaded: false, + reset: true, + resume: false, + errored: false, + error: null, + }); + }, [ + options?.searchParamter, + pushUser, + options.listType, + options.overrideAccount, + ]); + + // If reset is called + useEffect(() => { + if (!pushUser) { + return; + } + + // reset badge as well + resetBadge(); + + if (chatPreviewList.reset) { + initializeChatList(); + } + }, [chatPreviewList.reset]); + + // If loading becomes active + useEffect(() => { + if (chatPreviewList.loading || chatPreviewList.resume) { + loadMoreChats(); + } + }, [chatPreviewList.loading, chatPreviewList.resume]); + + // If badges count change + useEffect(() => { + // Count all badges object that are greater than 0 + const count = Object.values(chatPreviewListMeta.badges).reduce( + (acc, cur) => acc > 0 ? 1 + cur : cur, + 0 + ); + + // Call onBadgeCountChange if present + if (options?.onUnreadCountChange) { + options.onUnreadCountChange(count); + } + }, [chatPreviewListMeta.badges]); + + // Define stream objects + useEffect(() => { + if ( + Object.keys(chatStream).length > 0 && + chatStream.constructor === Object + ) { + console.debug('Chat stream', chatStream); + if (options.listType === CONSTANTS.CHAT.LIST_TYPE.CHATS) { + transformStreamMessage(chatStream); + } + } + }, [chatStream]); + + useEffect(() => { + if ( + Object.keys(chatStream).length > 0 && + chatStream.constructor === Object + ) { + console.debug('Chat request stream', chatStream); + if (options.listType === CONSTANTS.CHAT.LIST_TYPE.REQUESTS) { + transformStreamMessage(chatStream); + } + } + }, [chatRequestStream]); + + useEffect(() => { + if ( + Object.keys(chatStream).length > 0 && + chatStream.constructor === Object + ) { + console.debug('Chat accept stream', chatAcceptStream); + transformAcceptedRequest(chatStream); + } + }, [chatAcceptStream]); + + //search method for a chatId + const handleSearch = async (currentNonce: string) => { + let error; + let searchedChat: IChatPreviewPayload = { + chatId: undefined, + chatPic: null, + chatParticipant: '', + chatGroup: false, + chatTimestamp: undefined, + chatMsg: { + messageType: '', + messageContent: '', + }, + }; + //check if searchParamter is there + try { + if (options?.searchParamter) { + let formattedChatId: string | null = options?.searchParamter; + let userProfile: IUser | null = null; + let groupProfile: Group; + + //check if ens then convert to address + if (formattedChatId.includes('.')) { + const address = await getAddress(formattedChatId, env)!; + if (address) formattedChatId = pCAIP10ToWallet(address); + else { + error = { + code: ChatPreviewListErrorCodes.CHAT_PREVIEW_LIST_INVALID_SEARCH_ERROR, + message: 'Invalid search', + }; + } + } + if (!error) { + if (await ethers.utils.isAddress(formattedChatId)) { + //fetch profile + userProfile = await fetchChatProfile({ + profileId: formattedChatId, + }); + } else { + //fetch group info + groupProfile = await getGroupByIDnew({ groupId: formattedChatId }); + } + if (!userProfile && !groupProfile) { + error = { + code: ChatPreviewListErrorCodes.CHAT_PREVIEW_LIST_INVALID_SEARCH_ERROR, + message: 'Invalid search', + }; + } else { + searchedChat = { + ...searchedChat, + chatId: formattedChatId!, + chatGroup: !!groupProfile, + chatPic: + (userProfile?.profile?.picture ?? groupProfile?.groupImage) || + null, + chatParticipant: formattedChatId!, + }; + //fetch latest chat + const latestMessage = await fetchLatestMessage({ + chatId: formattedChatId, + }); + if (latestMessage) { + searchedChat = { + ...searchedChat, + chatMsg: { + messageType: latestMessage[0]?.messageType, + messageContent: latestMessage[0]?.messageContent, + }, + chatTimestamp: latestMessage[0]?.timestamp, + }; + } + + // return if nonce doesn't match or if page is not 1 + if ( + currentNonce !== chatPreviewList.nonce || + chatPreviewList.page !== 1 + ) { + return; + } + setChatPreviewList((prev) => ({ + nonce: generateRandomNonce(), + items: [...[searchedChat]], + page: 1, + preloading: false, + loading: false, + loaded: false, + reset: false, + resume: false, + errored: false, + error: null, + })); + } + } + } else { + error = { + code: ChatPreviewListErrorCodes.CHAT_PREVIEW_LIST_INSUFFICIENT_INPUT, + message: 'Insufficient input for search', + }; + } + if (error) { + setChatPreviewList({ + nonce: generateRandomNonce(), + items: [], + page: 1, + preloading: false, + loading: false, + loaded: false, + reset: false, + resume: false, + errored: true, + error: error, + }); + } + } catch (e) { + // return if nonce doesn't match + console.debug( + `Errored: currentNonce: ${currentNonce}, chatPreviewList.nonce: ${chatPreviewList.nonce}` + ); + if (currentNonce !== chatPreviewList.nonce) { + return; + } + + setChatPreviewList({ + nonce: generateRandomNonce(), + items: [], + page: 1, + preloading: false, + loading: false, + loaded: false, + reset: false, + resume: false, + errored: true, + error: { + code: ChatPreviewListErrorCodes.CHAT_PREVIEW_LIST_PRELOAD_ERROR, + message: 'Error in searching', + }, + }); + } + }; + // Attach scroll listener + const onScroll = async () => { + const element = listInnerRef.current; + + if (element) { + const windowHeight = element.clientHeight; + const scrollHeight = element.scrollHeight; + const scrollTop = element.scrollTop; + const scrollBottom = scrollHeight - scrollTop - windowHeight; + if ( + scrollBottom <= 20 && + !chatPreviewList.preloading && + !chatPreviewList.loading && + !chatPreviewList.loaded && + !chatPreviewList.reset && + !chatPreviewList.errored + ) { + // set loading to true + setChatPreviewList((prev) => ({ + ...prev, + nonce: generateRandomNonce(), + loading: true, + })); + } + } + }; + + // Helper functions + + // Render + return ( + + {/* do actual chat previews */} + {chatPreviewList.items.map((item: IChatPreviewPayload) => { + return ( + + ); + })} + + {/* if errored out for any reason */} + {chatPreviewList.errored && ( +
+ {chatPreviewList.error?.message} + {!!( + chatPreviewList.error?.code !== + ChatPreviewListErrorCodes.CHAT_PREVIEW_LIST_INVALID_SEARCH_ERROR && + chatPreviewList.error?.code !== + ChatPreviewListErrorCodes.CHAT_PREVIEW_LIST_INSUFFICIENT_INPUT + ) && ( + + )} +
+ )} + + {(chatPreviewList.preloading || chatPreviewList.loading) && + !chatPreviewList.errored && ( +
+ +
+ )} + + ); +}; + +//styles +const ChatPreviewListContainer = styled(Section)` + height: inherit; + overflow: hidden scroll; + flex-direction: column; + width: 100%; + justify-content: start; + padding: 0 2px; + + &::-webkit-scrollbar-thumb { + background: ${(props) => props.theme.scrollbarColor}; + border-radius: 10px; + } + + &::-webkit-scrollbar { + width: 5px; + } + + overscroll-behavior: contain; + scroll-behavior: smooth; +`; diff --git a/packages/uiweb/src/lib/components/chat/ChatPreviewList/index.ts b/packages/uiweb/src/lib/components/chat/ChatPreviewList/index.ts new file mode 100644 index 000000000..92b11eafe --- /dev/null +++ b/packages/uiweb/src/lib/components/chat/ChatPreviewList/index.ts @@ -0,0 +1 @@ +export { ChatPreviewList } from './ChatPreviewList'; diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx index 4358eef0d..365696b1a 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx @@ -34,6 +34,7 @@ import GreyImage from '../../../icons/greyImage.png'; import InfoIcon from '../../../icons/infodark.svg'; import VerticalEllipsisIcon from '../../../icons/VerticalEllipsis.svg'; import { TokenGatedSvg } from '../../../icons/TokenGatedSvg'; +import useGetChatProfile from '../../../hooks/useGetChatProfile'; export const ChatProfile: React.FC = ({ @@ -46,7 +47,7 @@ export const ChatProfile: React.FC = ({ const theme = useContext(ThemeContext); const { account, env } = useChatData(); const { getGroupByID } = useGetGroupByID(); - const { fetchChatProfile } = useChatProfile(); + const { fetchChatProfile } = useGetChatProfile(); const [isGroup, setIsGroup] = useState(false); const [options, setOptions] = useState(false); @@ -69,7 +70,7 @@ export const ChatProfile: React.FC = ({ const fetchProfileData = async () => { if (isValidETHAddress(chatId)) { - const ChatProfile = await fetchChatProfile({ profileId: chatId }); + const ChatProfile = await fetchChatProfile({ profileId: chatId,env }); const result = await resolveNewEns(chatId, provider); setEnsName(result); setChatInfo(ChatProfile); diff --git a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx b/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx similarity index 98% rename from packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx rename to packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx index 3c8d43587..5add4f36f 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewComponent/ChatViewComponent.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx @@ -1,16 +1,16 @@ import React, { useContext } from 'react'; import { IChatTheme, IChatViewComponentProps, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../exportedTypes'; +import { chatLimit, device } from '../../../config'; import { Section, Span } from '../../reusables'; import { ChatViewList } from '../ChatViewList'; -import { chatLimit, device } from '../../../config'; -import { ThemeContext } from '../theme/ThemeProvider'; -import { useChatData } from '../../../hooks/chat/useChatData'; -import { MessageInput } from '../MessageInput'; -import { ChatProfile } from '../ChatProfile'; import styled from 'styled-components'; +import { useChatData } from '../../../hooks/chat/useChatData'; import useMediaQuery from '../../../hooks/useMediaQuery'; +import { ChatProfile } from '../ChatProfile'; +import { MessageInput } from '../MessageInput'; +import { ThemeContext } from '../theme/ThemeProvider'; /** * @interface IThemeProps @@ -84,7 +84,7 @@ export const ChatViewComponent: React.FC = ( {(!signer && !(!!account && !!pgpPrivateKey) && !isConnected) && (
- You need to either pass signer or isConnected to send + You need to either pass signer or isConnected to send messages{' '}
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewComponent/index.ts b/packages/uiweb/src/lib/components/chat/ChatView/index.ts similarity index 100% rename from packages/uiweb/src/lib/components/chat/ChatViewComponent/index.ts rename to packages/uiweb/src/lib/components/chat/ChatView/index.ts diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx index 260851ae7..b386bcfce 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx @@ -9,11 +9,7 @@ import { import moment from 'moment'; import styled from 'styled-components'; -import { IChatViewListProps } from '../exportedTypes'; import { chatLimit } from '../../../config'; -import useFetchHistoryMessages from '../../../hooks/chat/useFetchHistoryMessages'; -import { Section, Span, Spinner } from '../../reusables'; -import { ChatViewBubble } from '../ChatViewBubble'; import { appendUniqueMessages, checkIfIntent, @@ -25,15 +21,19 @@ import { walletToPCAIP10, } from '../../../helpers'; import { useChatData, usePushChatSocket } from '../../../hooks'; +import useFetchMessageUtilities from '../../../hooks/chat/useFetchMessageUtilities'; +import { Section, Span, Spinner } from '../../reusables'; +import { ChatViewBubble } from '../ChatViewBubble'; +import { IChatViewListProps } from '../exportedTypes'; import { IGroup, Messagetype } from '../../../types'; -import { ThemeContext } from '../theme/ThemeProvider'; import { IChatTheme } from '../theme'; +import { ThemeContext } from '../theme/ThemeProvider'; -import { ENCRYPTION_KEYS, EncryptionMessage } from './MessageEncryption'; +import useFetchChat from '../../../hooks/chat/useFetchChat'; import useGetGroup from '../../../hooks/chat/useGetGroup'; import useGetChatProfile from '../../../hooks/useGetChatProfile'; -import useFetchChat from '../../../hooks/chat/useFetchChat'; import { ApproveRequestBubble } from './ApproveRequestBubble'; +import { ENCRYPTION_KEYS, EncryptionMessage } from './MessageEncryption'; /** * @interface IThemeProps @@ -59,8 +59,8 @@ export const ChatViewList: React.FC = ( const [messages, setMessages] = useState(); const [loading, setLoading] = useState(true); const [conversationHash, setConversationHash] = useState(); - const { historyMessages, loading: messageLoading } = - useFetchHistoryMessages(); + const { historyMessages, historyLoading: messageLoading } = + useFetchMessageUtilities(); const listInnerRef = useRef(null); const [isMember, setIsMember] = useState(false); const { fetchChat } = useFetchChat(); @@ -135,7 +135,7 @@ export const ChatViewList: React.FC = ( //moniters socket changes useEffect(() => { - if (checkIfSameChat(messagesSinceLastConnection, account!, chatId.includes(":") ? chatId.split(":")[1] : chatId)) { + if (checkIfSameChat(messagesSinceLastConnection, account!, chatId)) { const updatedChatFeed = chatFeed; updatedChatFeed.msg = messagesSinceLastConnection; if (!Object.keys(messages || {}).length) { diff --git a/packages/uiweb/src/lib/components/chat/exportedTypes.ts b/packages/uiweb/src/lib/components/chat/exportedTypes.ts index 3e14ff012..870beebcb 100644 --- a/packages/uiweb/src/lib/components/chat/exportedTypes.ts +++ b/packages/uiweb/src/lib/components/chat/exportedTypes.ts @@ -1,6 +1,38 @@ -import type { IMessageIPFS } from '@pushprotocol/restapi'; +import type { CONSTANTS, GroupDTO, GroupInfoDTO, IMessageIPFS } from '@pushprotocol/restapi'; +import { IGroup } from '../../types'; import { IChatTheme } from "./theme"; -import { IGroup } from '../../types' + + +export interface IChatPreviewPayload { + chatId: string | undefined; + chatPic: string | null; + chatParticipant: string; + chatGroup: boolean; + chatTimestamp: number | undefined; + chatMsg?: { + messageType: string; + messageContent: string | object; + } +} + +export interface IChatPreviewProps { + chatPreviewPayload: IChatPreviewPayload; + selected?: boolean; + setSelected?: (chatId: string) => void; + badge?: { + count?: number; + }; +} +export type Group = GroupInfoDTO| GroupDTO | undefined; + +export interface IChatPreviewListProps { + overrideAccount?: string; + listType?: 'CHATS' | 'REQUESTS' | 'SEARCH'; + prefillChatPreviewList?: Array; + searchParamter?: string; + onChatSelected?: (chatId: string) => void; + onUnreadCountChange?: (count: number) => void; +} export interface IChatViewListProps { chatId: string; @@ -152,7 +184,7 @@ export interface ModalButtonProps { }; -export {IChatTheme} from './theme'; +export { IChatTheme } from './theme'; export interface ConditionData { operator?: string; @@ -162,4 +194,16 @@ export interface ConditionData { data?: Record; } -export type ConditionArray = ConditionData[]; \ No newline at end of file +export type ConditionArray = ConditionData[]; + +export enum ChatPreviewListErrorCodes { + CHAT_PREVIEW_LIST_PRELOAD_ERROR = 'CPL-001', + CHAT_PREVIEW_LIST_LOAD_ERROR = 'CPL-002', + CHAT_PREVIEW_LIST_INVALID_SEARCH_ERROR = 'CPL-003', + CHAT_PREVIEW_LIST_INSUFFICIENT_INPUT = 'CPL-004', +} + +export interface IChatPreviewListError { + code: ChatPreviewListErrorCodes; + message: string; +} \ No newline at end of file diff --git a/packages/uiweb/src/lib/components/chat/helpers/helper.ts b/packages/uiweb/src/lib/components/chat/helpers/helper.ts index 77899a9b0..accc3b568 100644 --- a/packages/uiweb/src/lib/components/chat/helpers/helper.ts +++ b/packages/uiweb/src/lib/components/chat/helpers/helper.ts @@ -1,109 +1,225 @@ -import { IMessagePayload, User } from "../exportedTypes"; -import { ethers } from "ethers"; -import { IGroup } from "../../../types"; -import { walletToPCAIP10 } from "../../../helpers"; -import { IFeeds } from "@pushprotocol/restapi"; - +import { IChatPreviewPayload, IMessagePayload, User } from '../exportedTypes'; +import { ethers } from 'ethers'; +import { IGroup } from '../../../types'; +import { getAddress, walletToPCAIP10 } from '../../../helpers'; +import { Env, IFeeds } from '@pushprotocol/restapi'; +import moment from 'moment'; export const profilePicture = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAvklEQVR4AcXBsW2FMBiF0Y8r3GQb6jeBxRauYRpo4yGQkMd4A7kg7Z/GUfSKe8703fKDkTATZsJsrr0RlZSJ9r4RLayMvLmJjnQS1d6IhJkwE2bT13U/DBzp5BN73xgRZsJMmM1HOolqb/yWiWpvjJSUiRZWopIykTATZsJs5g+1N6KSMiO1N/5DmAkzYTa9Lh6MhJkwE2ZzSZlo7xvRwson3txERzqJhJkwE2bT6+JhoKTMJ2pvjAgzYSbMfgDlXixqjH6gRgAAAABJRU5ErkJggg==`; - export const displayDefaultUser = ({ caip10 }: { caip10: string }): User => { - const userCreated: User = { - did: caip10, - wallets: caip10, - publicKey: 'temp', - profilePicture: profilePicture, - encryptedPrivateKey: 'temp', - encryptionType: 'temp', - signature: 'temp', - sigType: 'temp', - about: null, - name: null, - numMsg: 1, - allowedNumMsg: 100, - linkedListHash: null, - }; - return userCreated; + const userCreated: User = { + did: caip10, + wallets: caip10, + publicKey: 'temp', + profilePicture: profilePicture, + encryptedPrivateKey: 'temp', + encryptionType: 'temp', + signature: 'temp', + sigType: 'temp', + about: null, + name: null, + numMsg: 1, + allowedNumMsg: 100, + linkedListHash: null, }; + return userCreated; +}; -export const findObject = (data: any,parentArray: any[],property: string ): boolean => { - let isPresent = false; - if(data) { +export const findObject = ( + data: any, + parentArray: any[], + property: string +): boolean => { + let isPresent = false; + if (data) { parentArray.map((value) => { if (value[property] == data[property]) { isPresent = true; } }); + } + return isPresent; +}; + +export const MemberAlreadyPresent = (member: any, groupMembers: any) => { + const memberCheck = groupMembers?.find( + (x: any) => x.wallet?.toLowerCase() == member.wallets?.toLowerCase() + ); + if (memberCheck) { + return true; + } + return false; +}; + +export const addWalletValidation = ( + member: User, + memberList: any, + groupMembers: any, + account: any +) => { + const checkIfMemberisAlreadyPresent = MemberAlreadyPresent( + member, + groupMembers + ); + + let errorMessage = ''; + + if (checkIfMemberisAlreadyPresent) { + errorMessage = 'This Member is Already present in the group'; + } + + if (memberList?.length + groupMembers?.length >= 9) { + errorMessage = 'No More Addresses can be added'; + } + + if (memberList?.length >= 9) { + errorMessage = 'No More Addresses can be added'; + } + + if (findObject(member, memberList, 'wallets')) { + errorMessage = 'Address is already added'; + } + + if ( + member?.wallets?.toLowerCase() === walletToPCAIP10(account)?.toLowerCase() + ) { + errorMessage = 'Group Creator cannot be added as Member'; + } + + return errorMessage; +}; + +export function isValidETHAddress(address: string) { + return ethers.utils.isAddress(address); +} + +export const checkIfMember = (chatFeed: IFeeds, account: string) => { + const members = chatFeed?.groupInformation?.members || []; + const pendingMembers = chatFeed?.groupInformation?.pendingMembers || []; + const allMembers = [...members, ...pendingMembers]; + let isMember = false; + allMembers.forEach((acc) => { + if (acc.wallet.toLowerCase() === walletToPCAIP10(account!).toLowerCase()) { + isMember = true; } - return isPresent; + }); + + return isMember; +}; + +export const checkIfAccessVerifiedGroup = (chatFeed: IFeeds) => { + let isRules = false; + if ( + chatFeed?.groupInformation?.rules && + (chatFeed?.groupInformation?.rules?.entry || + chatFeed?.groupInformation?.rules?.chat) + ) { + isRules = true; } + return isRules; +}; -export const MemberAlreadyPresent = (member: any, groupMembers: any )=>{ - const memberCheck = groupMembers?.find((x: any)=>x.wallet?.toLowerCase() == member.wallets?.toLowerCase()); - if(memberCheck){ - return true; +// Format address +export const formatAddress = async ( + chatPreviewPayload: IChatPreviewPayload, + env: Env +) => { + let formattedAddress = chatPreviewPayload?.chatParticipant; + + if (!chatPreviewPayload?.chatGroup) { + // check and remove eip155: + if (formattedAddress.includes('eip155:')) { + formattedAddress = formattedAddress.replace('eip155:', ''); + } else if (formattedAddress.includes('.')) { + formattedAddress = (await getAddress(formattedAddress, env))!; } - return false; } -export const addWalletValidation = (member:User,memberList:any,groupMembers:any,account: any) =>{ - const checkIfMemberisAlreadyPresent = MemberAlreadyPresent(member, groupMembers); - - let errorMessage = ''; - - if (checkIfMemberisAlreadyPresent) { - errorMessage = "This Member is Already present in the group" - } - - if (memberList?.length + groupMembers?.length >= 9) { - errorMessage = 'No More Addresses can be added' - } - - if (memberList?.length >= 9) { - errorMessage = 'No More Addresses can be added' - } - - if (findObject(member, memberList, 'wallets')) { - errorMessage = 'Address is already added' - } - - if (member?.wallets?.toLowerCase() === walletToPCAIP10(account)?.toLowerCase()) { - errorMessage = 'Group Creator cannot be added as Member' - } - - return errorMessage; + return formattedAddress; +}; + +// Format date +export const formatDate = (chatPreviewPayload: IChatPreviewPayload) => { + let formattedDate; + if (chatPreviewPayload.chatTimestamp) { + const today = moment(); + const timestamp = moment(chatPreviewPayload.chatTimestamp); + if (timestamp.isSame(today, 'day')) { + // If the timestamp is from today, show the time + formattedDate = timestamp.format('HH:mm'); + } else if (timestamp.isSame(today.subtract(1, 'day'), 'day')) { + // If the timestamp is from yesterday, show 'Yesterday' + formattedDate = 'Yesterday'; + } else { + // If the timestamp is from before yesterday, show the date + // Use 'L' to format the date based on the locale + formattedDate = timestamp.format('L'); + } } -export function isValidETHAddress(address: string) { - return ethers.utils.isAddress(address); + return formattedDate ?? ''; +}; + +// Generate random nonce +export const generateRandomNonce: () => string = () => { + let text = ''; + const possible = + 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + + for (let i = 0; i < 32; i++) { + text += possible.charAt(Math.floor(Math.random() * possible.length)); } - export const checkIfMember = (chatFeed:IFeeds,account:string) => { - const members = chatFeed?.groupInformation?.members || []; - const pendingMembers = chatFeed?.groupInformation?.pendingMembers || []; - const allMembers = [...members, ...pendingMembers]; - let isMember = false; - allMembers.forEach((acc) => { - if ( - acc.wallet.toLowerCase() === walletToPCAIP10(account!).toLowerCase() - ) { - isMember = true; - } - }); + return text; +}; + + // Transform chat payloads + export const transformChatItems: (items: IFeeds[]) => IChatPreviewPayload[] = ( + items: IFeeds[] + ) => { + // map but also filter to remove any duplicates which might creep in if stream sends a message + const transformedItems: IChatPreviewPayload[] = items + .map((item: IFeeds) => ({ + chatId: item.chatId, + chatPic: item.groupInformation + ? item.groupInformation.groupImage + : item.profilePicture, + chatParticipant: item.groupInformation + ? item.groupInformation.groupName + : item.did, + chatGroup: item.groupInformation ? true : false, + chatTimestamp: item.msg.timestamp, + chatMsg: { + messageType: item.msg.messageType, + messageContent: item.msg.messageContent, + }, + })) + .filter( + (item, index, self) => + index === self.findIndex((t) => t.chatId === item.chatId) + ); - - return isMember; + return transformedItems; }; - export const checkIfAccessVerifiedGroup = (chatFeed:IFeeds) => { - let isRules = false; - if ( - chatFeed?.groupInformation?.rules && - (chatFeed?.groupInformation?.rules?.entry || - chatFeed?.groupInformation?.rules?.chat) - ) { - isRules = true; - } - return isRules; + export const transformStreamToIChatPreviewPayload: ( + item: any + ) => IChatPreviewPayload = (item: any) => { + // transform the item + const transformedItem: IChatPreviewPayload = { + chatId: item.chatId, + chatPic: null, // for now, we don't have a way to get pfp from stream + chatParticipant: item.meta.group + ? null // we take from fetching info + : item.to[0], + chatGroup: item.meta.group, + chatTimestamp: Number(item.timestamp), + chatMsg: { + messageType: item.message.type, + messageContent: item.message.content, + }, + }; + + return transformedItem; }; diff --git a/packages/uiweb/src/lib/components/chat/index.ts b/packages/uiweb/src/lib/components/chat/index.ts index a068675e7..d8233a17b 100644 --- a/packages/uiweb/src/lib/components/chat/index.ts +++ b/packages/uiweb/src/lib/components/chat/index.ts @@ -1,8 +1,11 @@ +export * from './ChatPreview'; +export * from './ChatPreviewList'; +export * from "./ChatProfile"; +export * from './ChatView'; export { ChatViewBubble } from './ChatViewBubble'; export * from './ChatViewList'; +export * from "./CreateGroup"; +export * from "./MessageInput"; export * from './exportedTypes'; -export * from "./ChatProfile" -export * from './ChatViewComponent' -export * from "./MessageInput" export * from './theme'; -export * from "./CreateGroup"; \ No newline at end of file + diff --git a/packages/uiweb/src/lib/components/chat/theme/index.ts b/packages/uiweb/src/lib/components/chat/theme/index.ts index e703dbc29..a1a85b668 100644 --- a/packages/uiweb/src/lib/components/chat/theme/index.ts +++ b/packages/uiweb/src/lib/components/chat/theme/index.ts @@ -11,6 +11,7 @@ interface IBorder { searchInput?:string; modal?:string; modalInnerComponents?:string; + chatPreview?:string; } interface IBorderRadius { chatViewComponent?: string; @@ -19,6 +20,7 @@ interface IBorderRadius { searchInput?:string; modal?:string; modalInnerComponents?:string; + chatPreview?:string; } interface IBackgroundColor { chatViewComponentBackground?: string; @@ -36,7 +38,11 @@ interface IBackgroundColor { toastSuccessBackground?: string; toastErrorBackground?: string; toastShadowBackground?: string; - criteriaLabelBackground?:string; + criteriaLabelBackground?:string; + chatPreviewBackground?:string; + chatPreviewSelectedBackground?:string; + chatPreviewBadgeBackground?:string; + chatPreviewHoverBackground?:string; } interface ITextColor { @@ -55,6 +61,10 @@ interface ITextColor { searchPlaceholderText?:string; modalHeadingText?:string; modalSubHeadingText?:string; + chatPreviewParticipantText?:string; + chatPreviewMessageText?:string; + chatPreviewDateText?:string; + chatPreviewBadgeText?:string; } interface IFont { chatProfileText?: string; @@ -68,6 +78,10 @@ interface IFont { chatSentBubbleTimestampText?: string; searchInputText?:string; searchPlaceholderText?:string; + chatPreviewParticipantText?:string; + chatPreviewMessageText?:string; + chatPreviewDateText?:string; + chatPreviewBadgeText?:string; } interface IFontWeight { chatProfileText?: string; @@ -81,6 +95,10 @@ interface IFontWeight { chatSentBubbleTimestampText?: string; searchInputText?:string; searchPlaceholderText?:string; + chatPreviewParticipantText?:string; + chatPreviewMessageText?:string; + chatPreviewDateText?:string; + chatPreviewBadgeText?:string; } interface IIconColor { emoji?: string; @@ -117,7 +135,8 @@ export const lightChatTheme: IChatTheme = { messageInput: '13px', searchInput: '99px', modal: '16px', - modalInnerComponents:'12px' + modalInnerComponents:'12px', + chatPreview:'24px', }, backgroundColor: { @@ -139,7 +158,11 @@ export const lightChatTheme: IChatTheme = { toastErrorBackground: 'linear-gradient(90.15deg, #FF2070 -125.65%, #FF2D79 -125.63%, #FFF9FB 42.81%)', toastShadowBackground: '#ccc', - criteriaLabelBackground: '#657795' + criteriaLabelBackground: '#657795', + chatPreviewBackground:'#fff', + chatPreviewSelectedBackground:'#f5f5f5', + chatPreviewBadgeBackground:'rgb(226,8,128)', + chatPreviewHoverBackground:'#f5f5f5' }, fontSize: { @@ -153,7 +176,11 @@ export const lightChatTheme: IChatTheme = { chatReceivedBubbleTimestampText: '12px', chatSentBubbleTimestampText: '12px', searchInputText:'16px', - searchPlaceholderText:'16px' + searchPlaceholderText:'16px', + chatPreviewParticipantText:'16px', + chatPreviewMessageText:'14px', + chatPreviewDateText:'12px', + chatPreviewBadgeText:'12px' }, fontWeight: { @@ -167,7 +194,11 @@ export const lightChatTheme: IChatTheme = { chatReceivedBubbleTimestampText: '400', chatSentBubbleTimestampText: '400', searchInputText:'400', - searchPlaceholderText:'400' + searchPlaceholderText:'400', + chatPreviewParticipantText:'600', + chatPreviewMessageText:'400', + chatPreviewDateText:'400', + chatPreviewBadgeText:'600' }, fontFamily: 'inherit', @@ -178,7 +209,8 @@ export const lightChatTheme: IChatTheme = { messageInput: 'none', searchInput:'1px solid transparent', modal:'none', - modalInnerComponents:'1px solid rgb(194, 203, 219)' + modalInnerComponents:'1px solid rgb(194, 203, 219)', + chatPreview:'none' }, iconColor: { @@ -203,6 +235,10 @@ export const lightChatTheme: IChatTheme = { searchPlaceholderText:'rgb(101, 119, 149)', modalHeadingText:'#000', modalSubHeadingText:'rgb(101, 119, 149)', + chatPreviewParticipantText:'#000', + chatPreviewMessageText:'#888', + chatPreviewDateText:'#888', + chatPreviewBadgeText:'#fff' }, backdropFilter: 'none', spinnerColor: 'rgb(202, 89, 155)', @@ -216,7 +252,8 @@ export const darkChatTheme: IChatTheme = { messageInput: '13px', searchInput: '99px', modal: '16px', - modalInnerComponents:'12px' + modalInnerComponents:'12px', + chatPreview:'24px', }, backgroundColor: { @@ -237,6 +274,10 @@ export const darkChatTheme: IChatTheme = { toastErrorBackground: 'linear-gradient(89.96deg, #FF2070 -101.85%, #2F3137 51.33%)', toastShadowBackground: '#00000010', + chatPreviewBackground:'rgb(47, 49, 55)', + chatPreviewSelectedBackground:'rgb(64, 70, 80)', + chatPreviewBadgeBackground:'rgb(226,8,128)', + chatPreviewHoverBackground:'rgb(64, 70, 80)' }, fontSize: { @@ -250,7 +291,11 @@ export const darkChatTheme: IChatTheme = { chatReceivedBubbleTimestampText: '12px', chatSentBubbleTimestampText: '12px', searchInputText:'16px', - searchPlaceholderText:'16px' + searchPlaceholderText:'16px', + chatPreviewParticipantText:'16px', + chatPreviewMessageText:'14px', + chatPreviewDateText:'12px', + chatPreviewBadgeText:'12px' }, fontWeight: { @@ -264,7 +309,11 @@ export const darkChatTheme: IChatTheme = { chatReceivedBubbleTimestampText: '400', chatSentBubbleTimestampText: '400', searchInputText:'400', - searchPlaceholderText:'400' + searchPlaceholderText:'400', + chatPreviewParticipantText:'600', + chatPreviewMessageText:'400', + chatPreviewDateText:'400', + chatPreviewBadgeText:'600' }, fontFamily: 'inherit', @@ -275,7 +324,8 @@ export const darkChatTheme: IChatTheme = { messageInput: 'none', searchInput:'1px solid transparent', modal:'none', - modalInnerComponents:'1px solid rgb(74, 79, 103)' + modalInnerComponents:'1px solid rgb(74, 79, 103)', + chatPreview:'none' }, iconColor: { @@ -299,7 +349,11 @@ export const darkChatTheme: IChatTheme = { searchPlaceholderText:'rgb(101, 119, 149)', modalHeadingText:'#fff', modalSubHeadingText:'rgb(182, 188, 214)', - buttonDisableText:'#B6BCD6' + buttonDisableText:'#B6BCD6', + chatPreviewParticipantText:'#000', + chatPreviewMessageText:'#888', + chatPreviewDateText:'#888', + chatPreviewBadgeText:'#fff' }, backdropFilter: 'none', spinnerColor: 'rgb(202, 89, 155)', diff --git a/packages/uiweb/src/lib/components/reusables/index.tsx b/packages/uiweb/src/lib/components/reusables/index.tsx index a6c6bf05e..8e325f506 100644 --- a/packages/uiweb/src/lib/components/reusables/index.tsx +++ b/packages/uiweb/src/lib/components/reusables/index.tsx @@ -1,3 +1,3 @@ export * from './Spinner'; export * from './Tooltip'; -export * from './sharedStyling'; \ No newline at end of file +export * from './sharedStyling'; diff --git a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx index 6ce67adbf..1878c921d 100644 --- a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx +++ b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx @@ -149,19 +149,127 @@ export const Image = styled.img` object-fit: ${(props) => props.objectFit || 'fill'}; `; + +type ButtonStyleProps = { + display?: string; + lineHeight?: string; + height?: string; + minHeight?: string; + flex?: string; + flexDirection?: string; + alignSelf?: string; + alignItems?: string; + justifyContent?: string; + fontWeight?: string; + fontSize?: string; + color?: string; + background?: string; + margin?: string; + padding?: string; + border?: string; + borderRadius?: string; + position?: string; + textDecoration?: string; + width?: string; + overflow?: string; + zIndex?: string; + cursor?: string; + fontFamily?: string; + hover?: string; + hoverBackground?: string; + hoverBorder?: string; + hoverSVGPathStroke?: string; +}; + +export const Button = styled.button` + display: ${(props) => props.display || "initial"}; + line-height: ${(props) => props.lineHeight || "26px"}; + flex: ${(props) => props.flex || "initial"}; + flex-direction: ${(props) => props.flexDirection || "row"}; + align-self: ${(props) => props.alignSelf || "auto"}; + align-items: ${(props) => props.alignItems || "center"}; + justify-content: ${(props) => props.justifyContent || "center"}; + font-weight: ${(props) => props.fontWeight || 400}; + font-size: ${(props) => props.fontSize || "inherit"}; + color: ${(props) => props.color || "inherit"}; + background: ${(props) => props.background || "inherit"}; + margin: ${(props) => props.margin || "initial"}; + + height: ${(props) => props.height || "initial"}; + min-height: ${(props) => props.minHeight || 'auto'}; + padding: ${(props) => props.padding || "initial"}; + border: ${(props) => props.border || "none"}; + border-radius: ${(props) => props.borderRadius || "inherit"}; + position: ${(props) => props.position || "relative"}; + text-decoration: ${(props) => props.textDecoration || "none"}; + width: ${(props) => props.width || "initial"}; + overflow: ${(props) => props.overflow || "hidden"}; + z-index: ${(props) => props.zIndex || "3"}; + cursor: ${(props) => props.cursor || "pointer"}; + font-family: ${(props) => props.fontFamily || "inherit"}; + + &:before { + background: ${(props) => props.hover || (props.background ? props.background : "transparent")}; + bottom: 0; + content: ""; + display: none; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: -1; + } + + &:after { + background: ${(props) => props.hoverBackground || "#000"}; + bottom: 0; + content: ""; + left: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + z-index: -1; + } + + &:hover { + border: ${(props) => props.hoverBorder || "inherit"}; + + & svg > path { + stroke: ${(props) => props.hoverSVGPathStroke || "auto"}; + } + } + + &:hover:before { + display: block; + } + + &:hover:after { + opacity: 0.08; + } + &:active:after { + opacity: 0.15; + } + + & > div { + display: flex; + } +`; + type DivStyleProps = { height?: string; width?: string; cursor?: string; - alignSelf?:string; - margin?:string; + alignSelf?: string; + margin?: string; textAlign?:string; }; export const Div = styled.div` height: ${(props) => props.height || 'auto'}; width: ${(props) => props.width || '100%'}; - margin: ${(props) => props.margin || '0px'}; + margin: ${(props) => props.margin || '0px'}; cursor: ${(props) => props.cursor || 'default'}; align-self: ${(props) => props.alignSelf || 'center'}; text-align: ${(props) => props.textAlign || 'default'}; `; + diff --git a/packages/uiweb/src/lib/helpers/chat/chat.ts b/packages/uiweb/src/lib/helpers/chat/chat.ts index 3b68d1d3c..51c26197d 100644 --- a/packages/uiweb/src/lib/helpers/chat/chat.ts +++ b/packages/uiweb/src/lib/helpers/chat/chat.ts @@ -223,7 +223,7 @@ export const checkIfSameChat = ( account: string, chatId: string ) => { - if (ethers.utils.isAddress(chatId)) { + if (ethers.utils.isAddress(pCAIP10ToWallet(chatId))) { chatId = walletToPCAIP10(chatId); if ( Object.keys(msg || {}).length && diff --git a/packages/uiweb/src/lib/hooks/chat/index.ts b/packages/uiweb/src/lib/hooks/chat/index.ts index 7b3e13bc7..1302b78c7 100644 --- a/packages/uiweb/src/lib/hooks/chat/index.ts +++ b/packages/uiweb/src/lib/hooks/chat/index.ts @@ -1,4 +1,4 @@ -export * from './useFetchHistoryMessages'; +export * from './useFetchMessageUtilities'; export * from './useChatData'; export * from './useChatProfile'; diff --git a/packages/uiweb/src/lib/hooks/chat/useFetchHistoryMessages.ts b/packages/uiweb/src/lib/hooks/chat/useFetchHistoryMessages.ts deleted file mode 100644 index 0082622f9..000000000 --- a/packages/uiweb/src/lib/hooks/chat/useFetchHistoryMessages.ts +++ /dev/null @@ -1,51 +0,0 @@ - -import * as PushAPI from '@pushprotocol/restapi'; -import type { IMessageIPFS } from '@pushprotocol/restapi'; -import { useCallback, useContext, useState } from 'react'; -import { ChatDataContext } from '../../context'; -import { useChatData } from './useChatData'; - - - - - interface HistoryMessagesParams { - threadHash: string; - limit?: number; - } - - -const useFetchHistoryMessages - = () => { - const [error, setError] = useState(); - const [loading, setLoading] = useState(false); - - const { account, env,pgpPrivateKey } = useChatData(); - - const historyMessages = useCallback(async ({threadHash,limit = 10,}:HistoryMessagesParams) => { - - setLoading(true); - try { - const chatHistory:IMessageIPFS[] = await PushAPI.chat.history({ - threadhash: threadHash, - account:account ? account : '0xeeE5A266D7cD954bE3Eb99062172E7071E664023', - toDecrypt: pgpPrivateKey ? true : false, - pgpPrivateKey: String(pgpPrivateKey), - limit: limit, - env: env - }); - chatHistory.reverse(); - return chatHistory; - } catch (error: Error | any) { - setLoading(false); - setError(error.message); - console.log(error); - return; - } finally { - setLoading(false); - } - }, [pgpPrivateKey,account,env]); - - return { historyMessages, error, loading }; -}; - -export default useFetchHistoryMessages; diff --git a/packages/uiweb/src/lib/hooks/chat/useFetchMessageUtilities.ts b/packages/uiweb/src/lib/hooks/chat/useFetchMessageUtilities.ts new file mode 100644 index 000000000..45ad1ec25 --- /dev/null +++ b/packages/uiweb/src/lib/hooks/chat/useFetchMessageUtilities.ts @@ -0,0 +1,100 @@ + +import * as PushAPI from '@pushprotocol/restapi'; +import type { IMessageIPFS } from '@pushprotocol/restapi'; +import { useCallback, useContext, useState } from 'react'; +import { ChatDataContext } from '../../context'; +import { useChatData } from './useChatData'; + + + + + interface HistoryMessagesParams { + threadHash: string; + limit?: number; + } + interface FetchLatestMessageParams { + chatId: string; + + } + interface FetchChatListParams { + type: keyof typeof PushAPI.ChatListType; + overrideAccount?:string; + page:number; + limit:number; + + } + + +const useFetchMessageUtilities + = () => { + const [error, setError] = useState(); + const [historyLoading, setHistoryLoading] = useState(false); + const [latestLoading, setLatestLoading] = useState(false); + const [chatListLoading, setChatListLoading] = useState(false); + + + const { account, env,pgpPrivateKey ,pushUser} = useChatData(); + const fetchChatList = useCallback(async ({type,page,limit,overrideAccount = undefined}:FetchChatListParams) => { + + setChatListLoading(true); + try { + const chats = await pushUser?.chat + .list(type, { + overrideAccount: overrideAccount, + page: page, + limit: limit, + }) + return chats; + } catch (error: Error | any) { + setChatListLoading(false); + setError(error.message); + console.log(error); + return; + } finally { + setChatListLoading(false); + } + }, [pushUser,account,env]); + const fetchLatestMessage = useCallback(async ({chatId}:FetchLatestMessageParams) => { + + setLatestLoading(true); + try { + const latestChat:IMessageIPFS[] = await pushUser?.chat.latest(chatId) as IMessageIPFS[]; + return latestChat; + } catch (error: Error | any) { + setLatestLoading(false); + setError(error.message); + console.log(error); + return; + } finally { + setLatestLoading(false); + } + }, [pushUser,account,env]); + + const historyMessages = useCallback(async ({threadHash,limit = 10,}:HistoryMessagesParams) => { + + setHistoryLoading(true); + try { + const chatHistory:IMessageIPFS[] = await PushAPI.chat.history({ + threadhash: threadHash, + account:account ? account : '0xeeE5A266D7cD954bE3Eb99062172E7071E664023', + toDecrypt: pgpPrivateKey ? true : false, + pgpPrivateKey: String(pgpPrivateKey), + limit: limit, + env: env + }); + chatHistory.reverse(); + return chatHistory; + } catch (error: Error | any) { + setHistoryLoading(false); + setError(error.message); + console.log(error); + return; + } finally { + setHistoryLoading(false); + } + }, [pgpPrivateKey,account,env]); + + return { historyMessages, error, historyLoading ,latestLoading,fetchLatestMessage,fetchChatList,chatListLoading}; +}; + +export default useFetchMessageUtilities; diff --git a/packages/uiweb/src/lib/hooks/chat/useGetGroupByIDnew.ts b/packages/uiweb/src/lib/hooks/chat/useGetGroupByIDnew.ts new file mode 100644 index 000000000..8dcbebebc --- /dev/null +++ b/packages/uiweb/src/lib/hooks/chat/useGetGroupByIDnew.ts @@ -0,0 +1,35 @@ +import * as PushAPI from '@pushprotocol/restapi'; +import { Env } from '@pushprotocol/restapi'; +import { useCallback, useContext, useState } from 'react'; +import { useChatData } from './useChatData'; +import { Group } from '../../components'; + +interface GetGroupParams { + groupId: string; +} + +const useGetGroupByIDnew = () => { + const [error, setError] = useState(); + const [loading, setLoading] = useState(false); + const { pushUser } = useChatData(); + + const getGroupByIDnew = useCallback( + async ({ groupId }: GetGroupParams) => { + setLoading(true); + let group: Group; + try { + group = await pushUser?.chat.group.info(groupId); + + } catch (error) { + console.log(error); + return; + } + return group; + }, + [pushUser] + ); + + return { getGroupByIDnew, error, loading }; +}; + +export default useGetGroupByIDnew; \ No newline at end of file diff --git a/packages/uiweb/src/lib/hooks/chat/usePushChatSocket.ts b/packages/uiweb/src/lib/hooks/chat/usePushChatSocket.ts index ad2c0c097..463331ca5 100644 --- a/packages/uiweb/src/lib/hooks/chat/usePushChatSocket.ts +++ b/packages/uiweb/src/lib/hooks/chat/usePushChatSocket.ts @@ -1,11 +1,11 @@ +import * as PushAPI from '@pushprotocol/restapi'; import { createSocketConnection, EVENTS } from '@pushprotocol/socket'; import { useCallback, useEffect, useState } from 'react'; import { ENV } from '../../config'; -import * as PushAPI from '@pushprotocol/restapi'; -import { useChatData } from './useChatData'; import { SOCKET_TYPE } from '../../types'; import useGetChatProfile from '../useGetChatProfile'; +import { useChatData } from './useChatData'; export type PushChatSocketHookOptions = { account?: string | null; @@ -51,7 +51,6 @@ const {fetchChatProfile} = useGetChatProfile(); pushChatSocket?.on(EVENTS.CHAT_RECEIVED_MESSAGE, async (chat: any) => { - if (!connectedProfile || !pgpPrivateKey) { return; } diff --git a/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts b/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts index bb50c32cb..3a9e2f92c 100644 --- a/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts +++ b/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts @@ -1,126 +1,109 @@ /* eslint-disable react-hooks/rules-of-hooks */ -import { useEffect, useState } from 'react'; import { CONSTANTS, PushAPI, SignerType } from '@pushprotocol/restapi'; +import { PushStream } from '@pushprotocol/restapi/src/lib/pushstream/pushStreamTypes'; +import { useEffect, useRef, useState } from 'react'; import { ENV } from '../../config'; import { useChatData } from './useChatData'; - export const usePushChatStream = () => { + const { + account, + pushChatStream, + setPushChatStream, + setIsPushChatStreamConnected, + env, + pushUser, + } = useChatData(); + + const [chatStream, setChatStream] = useState({}); // to track any new messages + const [chatAcceptStream, setChatAcceptStream] = useState({}); // to track any new messages + const [chatRequestStream, setChatRequestStream] = useState({}); // any message in request + const [groupMetaStream, setGroupMetaStream] = useState({}); //group info + + const attachListenersAndConnect = async (stream: PushStream) => { + stream?.on(CONSTANTS.STREAM.CONNECT, (err: Error) => { + setIsPushChatStreamConnected(true); + }); + + stream?.on(CONSTANTS.STREAM.DISCONNECT, (err: Error) => { + setIsPushChatStreamConnected(false); + }); + + //Listen for chat messages, your message, request, accept, rejected, + stream?.on(CONSTANTS.STREAM.CHAT, (message: any) => { + if (message.event === 'chat.request') { + setChatRequestStream(message); + } else if (message.event === 'chat.accept') { + setChatAcceptStream(message); + } else if (message.event === 'chat.message') { + setChatStream(message); + } + }); + + // Listen for group info + stream?.on(CONSTANTS.STREAM.CHAT_OPS, (chatops: any) => { + setGroupMetaStream(chatops); + }); + + console.debug('stream listeners attached'); + }; + + /** + * Whenever the requisite params to create a connection object change + * - disconnect the old connection + * - create a new connection object + */ + useEffect(() => { + if (!pushUser) { + return; + } - const { - account, - pushChatStream, - setPushChatStream, - setIsPushChatStreamConnected, - env, - pushUser - - } = useChatData(); - - - const [chatStream, setChatStream] = useState({}) // to track any new messages - const [chatRequestStream, setChatRequestStream] = useState({}); // any message in request - const [groupMetaStream, setGroupMetaStream] = useState({}); //group info - - const addSocketEvents = async () => { - console.warn('\n--> addChatSocketEvents - stream'); - pushChatStream?.on(CONSTANTS.STREAM.CONNECT, (err: Error) => { - console.log('CONNECTED - stream: ', err); - setIsPushChatStreamConnected(true); - }); - - pushChatStream?.on(CONSTANTS.STREAM.DISCONNECT, (err: Error) => { - console.log('DIS-CONNECTED: - stream ', err); - setIsPushChatStreamConnected(false); - }); - - - //Listen for chat messages, your message, request, accept, rejected, - pushChatStream?.on(CONSTANTS.STREAM.CHAT, (message: any) => { - if ((message.event === "chat.request")) { - setChatRequestStream(message); - } else { - setChatStream(message); - } - - }); - pushChatStream?.on(CONSTANTS.STREAM.CHAT_OPS, (chatops: any) => { - setGroupMetaStream(chatops) - }); + const initPushUser = async () => { + // create a new connection object + if (!pushUser.stream) { + const stream = await pushUser?.initStream( + [ + CONSTANTS.STREAM.CHAT, + CONSTANTS.STREAM.CHAT_OPS, + CONSTANTS.STREAM.CONNECT, + CONSTANTS.STREAM.DISCONNECT, + ], + { + connection: { + retries: 3, // number of retries in case of error + }, + raw: true, + } + ); + + // attach listeneres + await attachListenersAndConnect(stream); + } + + // establish a new connection + if (!pushUser.stream.connected()) { + await pushUser.stream?.connect(); + console.debug('Connect stream: ', pushUser); + } }; + initPushUser(); - - const removeSocketEvents = () => { - pushChatStream?.disconnect(); + // Return a function to clean up the effect + return () => { + if (pushUser && pushUser.stream) { + pushUser.stream?.disconnect(); + console.debug('Disconnect stream: ', pushUser); + } }; - - // eslint-disable-next-line react-hooks/rules-of-hooks - useEffect(() => { - if (pushChatStream) { - addSocketEvents(); - } - - return () => { - if (pushChatStream) { - removeSocketEvents(); - } - } - }, [pushChatStream]); - - - /** - * Whenever the requisite params to create a connection object change - * - disconnect the old connection - * - create a new connection object - */ - - useEffect(() => { - if (pushUser) { - if(pushChatStream){ - pushChatStream?.disconnect(); - } - else { - console.log(pushChatStream) - const main = async () => { - const newstream = await pushUser?.initStream( - [ - CONSTANTS.STREAM.CHAT, - CONSTANTS.STREAM.CHAT_OPS, - CONSTANTS.STREAM.CONNECT, - CONSTANTS.STREAM.DISCONNECT, - - ], - { - - connection: { - retries: 3, // number of retries in case of error - }, - raw: true - } - ); - console.log('new connection object: ---- ', newstream); - await newstream?.connect(); - setPushChatStream(newstream); - - }; - main().catch((err) => - console.log("error initializing the stream", err) - ); - } - - - } - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [account, env,pushUser]); - - - - return { - chatStream, - groupMetaStream, - chatRequestStream, - } -}; \ No newline at end of file + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [pushUser, env, account]); + + return { + chatStream, + chatRequestStream, + chatAcceptStream, + groupMetaStream, + }; +};