diff --git a/package.json b/package.json index 75a2f612f0..0f8815c313 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@mui/material": "^5.5.0", "@pushprotocol/restapi": "0.0.1-alpha.71", "@pushprotocol/socket": "0.5.3", - "@pushprotocol/uiweb": "1.3.1-alpha.6", + "@pushprotocol/uiweb": "1.3.1-alpha.7", "@reduxjs/toolkit": "^1.7.1", "@testing-library/dom": "^9.0.1", "@testing-library/jest-dom": "^4.2.4", diff --git a/src/components/chat/w2wChat/chatBox/ChatBox.tsx b/src/components/chat/w2wChat/chatBox/ChatBox.tsx index c9e0c6a061..da3074bfcb 100644 --- a/src/components/chat/w2wChat/chatBox/ChatBox.tsx +++ b/src/components/chat/w2wChat/chatBox/ChatBox.tsx @@ -127,13 +127,15 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => { const getChatId = () => { let chatId = selectedChatId || currentChat?.did; + + console.log("Chat Id in ChatBox >>>>>>>",chatId); + if(chatId){ return (chatId?.includes(':nft:') ? chatId.replace(/eip155:\d+:/, 'eip155:').split(':nft')[0] : chatId) ; } return chatId; - }; const handleCloseSuccessSnackbar = (event?: React.SyntheticEvent | Event, reason?: string): void => { @@ -171,9 +173,11 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => { { id: 7, content: 'Access to more chat requests and messages will be added in the near future' }, ]; + console.log("viewChatBox >>>>><<<<<<<<<>>>>>>>><<<<<<<",viewChatBox,getChatId()); + return ( - {(!viewChatBox && !getChatId() )? ( + {(!viewChatBox || !getChatId()) ? ( {activeTab == 4 && ( { if (!(wallet?.accounts?.length > 0)) { const walletConnected = await connect(); - return walletConnected[0]; + console.log("Wallet Connected >>>",walletConnected); + if (walletConnected.length > 0) { + return walletConnected[0]; + }else{ + return null; + } } } @@ -89,7 +94,8 @@ const AppContextProvider = ({ children }) => { return userPushInstance; } else { const walletConnected = await connect(); - if (walletConnected) { + console.log("Wallet Connected >>>",walletConnected); + if (walletConnected.length > 0) { const userPushInstance = await initializePushSDK(walletConnected[0]); return userPushInstance; } else { @@ -111,6 +117,7 @@ const AppContextProvider = ({ children }) => { } const initialisePushSdkReadMode = async () => { + console.log("Initialising Push SDK Read Mode") let userInstance; userInstance = await PushAPI.initialize({ env: appConfig.appEnv, @@ -232,6 +239,7 @@ const AppContextProvider = ({ children }) => { const initializePushSDK = async (wallet?: any) => { let userInstance; + console.log("Initialising Push General Mode"); try { let web3Provider = provider; diff --git a/src/helpers/w2w/index.ts b/src/helpers/w2w/index.ts index 929b8486d4..b78553d5d8 100644 --- a/src/helpers/w2w/index.ts +++ b/src/helpers/w2w/index.ts @@ -1,4 +1,5 @@ // Internal Components +import { ethers } from 'ethers'; import { ConnectedUser, Feeds, MessageIPFSWithCID } from '../../types/chat'; import * as AES from './aes'; import * as Ceramic from './ceramic'; @@ -176,3 +177,51 @@ export default { DID: DIDHelper, Ceramic: Ceramic, }; + +export const reformatChatId = (chatid: string): string => { + let isWallet = false; + + // check if chatid: is appened, then skip anything else + if (chatid.startsWith('chatid:')) { + return chatid; + } + + // check if .eth is at the end, then skip anything else + if (chatid.endsWith('.eth')) { + return chatid; + } + + // check if .wallet is at the end, then skip anything else + if (chatid.endsWith('.wallet')) { + return chatid; + } + // check if this is eip155: which is considered default and therefore remove it + if (chatid.startsWith('eip155:') && !chatid.includes(':nft')) { + chatid = chatid.replace('eip155:', ''); + isWallet = true; + } + + if (chatid.includes(':nft')) { + chatid = chatid.replace(/eip155:\d+:/, 'eip155:').split(':nft')[0]; + } + + // check if this is eip155: which is considered default and therefore remove it + if (chatid.startsWith('eip155:')) { + chatid = chatid.replace('eip155:', ''); + isWallet = true; + } + + // check if this is an account address or not and based on that take appropriate action + if (!isWallet && ethers.utils.isAddress(chatid)) { + isWallet = true; + } + + // if all checks fail then this is probably a chat id + // WARNING: THIS WILL FAIL WITH NON-EVMS, NEED NODES TO INDICATE CHATID: + if (!isWallet) { + // append chatid: + chatid = `chatid:${chatid}`; + } + + return chatid; +}; diff --git a/src/modules/chat/ChatModule.tsx b/src/modules/chat/ChatModule.tsx index 045b89bd85..b1121b1a99 100644 --- a/src/modules/chat/ChatModule.tsx +++ b/src/modules/chat/ChatModule.tsx @@ -60,7 +60,7 @@ export const Context = React.createContext(null); // Create Header function Chat({ chatid }) { - const { account, chainId, provider,wallet } = useAccount(); + const { account, chainId, provider, wallet } = useAccount(); const { videoCallData } = useContext(VideoCallContext); const { @@ -71,7 +71,8 @@ function Chat({ chatid }) { connectedUser, setConnectedUser, displayQR, - setDisplayQR + setDisplayQR, + handleConnectWallet } = useContext(AppContext); const { userPushSDKInstance } = useSelector((state: any) => { @@ -108,7 +109,7 @@ function Chat({ chatid }) { connectedUser && socketData.messagesSinceLastConnection && w2wHelper.caip10ToWallet(socketData.messagesSinceLastConnection.fromCAIP10).toLowerCase() !== - account.toLowerCase() + account.toLowerCase() ) { if (currentChat) getUpdatedInbox(socketData.messagesSinceLastConnection); } @@ -311,10 +312,10 @@ function Chat({ chatid }) { return chatid; } - // check if .wallet is at the end, then skip anything else - if (chatid.endsWith('.wallet')) { - return chatid; - } + // check if .wallet is at the end, then skip anything else + if (chatid.endsWith('.wallet')) { + return chatid; + } // check if this is eip155: which is considered default and therefore remove it if (chatid.startsWith('eip155:') && !chatid.includes(':nft')) { chatid = chatid.replace('eip155:', ''); @@ -374,28 +375,31 @@ function Chat({ chatid }) { }; useEffect(() => { + let formattedchatId = selectedChatId || chatid; - + + console.log("Formatted Chat Id: " + formattedchatId); + if (formattedchatId) { - setViewChatBox(true); formattedchatId = reformatChatId(formattedchatId); - navigate(`/chat/${formattedchatId}`); - } - else - { + // navigate(`/chat/${formattedchatId}`); + setViewChatBox(true); + } else { setViewChatBox(false); navigate(`/chat`); } }, [selectedChatId]); - useEffect(() => {}, [account, connectedUser?.privateKey]); + useEffect(() => { }, [account, connectedUser?.privateKey]); + + console.log("userPushSDKInstance in Chat Module <<<>>>><<<>>>",userPushSDKInstance); return ( 0 ? account: readOnlyWallet} + account={wallet?.accounts?.length > 0 ? account : readOnlyWallet} pgpPrivateKey={pgpPvtKey} user={userPushSDKInstance} > @@ -451,7 +455,7 @@ function Chat({ chatid }) { {}} + onConfirm={() => { }} toastObject={groupInfoToast} modalPadding="0px" modalPosition={MODAL_POSITION.ON_PARENT} @@ -547,16 +551,14 @@ const Container = styled.div` @media ${device.laptop} { margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.TABLET}; - height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.TABLET.TOP} - ${ - globalsMargin.MINI_MODULES.TABLET.BOTTOM -}); + height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.TABLET.TOP} - ${globalsMargin.MINI_MODULES.TABLET.BOTTOM + }); } @media ${device.mobileL} { margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.MOBILE}; - height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.MOBILE.TOP} - ${ - globalsMargin.MINI_MODULES.MOBILE.BOTTOM -}); + height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.MOBILE.TOP} - ${globalsMargin.MINI_MODULES.MOBILE.BOTTOM + }); border: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE}; `; diff --git a/src/sections/chat/ChatSidebarSection.tsx b/src/sections/chat/ChatSidebarSection.tsx index 050dcee715..e3c25faf92 100644 --- a/src/sections/chat/ChatSidebarSection.tsx +++ b/src/sections/chat/ChatSidebarSection.tsx @@ -8,6 +8,7 @@ import { useClickAway } from 'react-use'; import styled, { useTheme } from 'styled-components'; import { useSelector } from 'react-redux'; import { ethers } from 'ethers'; +import { useNavigate } from 'react-router-dom'; // Internal Compoonents import { ChatPreviewList, UserProfile } from '@pushprotocol/uiweb'; @@ -21,7 +22,7 @@ import { getIsNewTagVisible } from 'helpers/TimerHelper'; import { fetchIntent } from 'helpers/w2w/user'; import { Context } from 'modules/chat/ChatModule'; import { Feeds } from 'types/chat'; -import { caip10ToWallet } from 'helpers/w2w'; +import { caip10ToWallet, reformatChatId } from 'helpers/w2w'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { AppContext } from 'contexts/AppContext'; import NewTag from 'components/NewTag'; @@ -71,9 +72,11 @@ const ChatSidebarSection = ({ showCreateGroupModal, autofilledSearch }) => { const { setSelectedChatId } = useContext(Context); const { setMode } = useContext(GlobalContext); + const {wallet} = useAccount(); + const isNewTagVisible = getIsNewTagVisible(new Date('2023-02-22T00:00:00.000'), 90); - const { connectedUser, displayQR, setDisplayQR, initializePushSDK, handleConnectWallet } = useContext(AppContext); + const { connectedUser, displayQR, setDisplayQR, initializePushSDK, handleConnectWallet,connectWallet } = useContext(AppContext); const [searchedUser, setSearchedUser] = useState(''); const { activeTab, setActiveTab } = useContext(Context); @@ -93,24 +96,57 @@ const ChatSidebarSection = ({ showCreateGroupModal, autofilledSearch }) => { }; useClickAway(containerRef, () => closeQRDropdown()); + let navigate = useNavigate(); + const formatChatParticipant = async (chatParticipant: string, chatId: string) => { let formattedChatParticipant = chatParticipant; - //Checking if the user has signed the message or not - if (userPushSDKInstance.decryptedPgpPvtKey) { - if (!formattedChatParticipant.includes('.')) { - if (!await ethers.utils.isAddress(caip10ToWallet(formattedChatParticipant))) - formattedChatParticipant = chatId; + + //TODO: Check if the user has wallet connected or not if not then connect their wallet. + // when wallet gets connected then the dapp reloads, so when searched and then clicked on the chat for selecting navigate to chat/id. + + + let userPushInstance = userPushSDKInstance; + + if (!formattedChatParticipant.includes('.')) { + if (!await ethers.utils.isAddress(caip10ToWallet(formattedChatParticipant))) + formattedChatParticipant = chatId; + } + let formattedchatId = reformatChatId(formattedChatParticipant); + + console.log("Wallet in Chatsidebar ",wallet); + + // When the user has not connected their wallet, i.e, they try chat in guest mode + if(!(wallet?.accounts?.length > 0)) { + + let walletConnected = await connectWallet(); + + console.log("User Push Instance in Chat sidebar",walletConnected); + + if(walletConnected){ + navigate(`/chat/${formattedchatId}`); + // return formattedChatParticipant; } - return formattedChatParticipant; - } else { - if (userPushSDKInstance.account === readOnlyWallet) { - handleConnectWallet(); - } else if (userPushSDKInstance.signer === undefined || userPushSDKInstance.decryptedPgpPvtKey === undefined) { - await initializePushSDK(); - return null; + + }else{ + console.log("When wallet is connected then we have to do this",userPushInstance); + + if(!userPushInstance.decryptedPgpPvtKey){ + userPushInstance = await handleConnectWallet(); } + + console.log("User Push Instance in Chat sidebar 2",userPushInstance); + + if(userPushInstance.decryptedPgpPvtKey){ + return formattedChatParticipant; + } + + } + + + + } const handleCreateGroup = async () => { diff --git a/yarn.lock b/yarn.lock index fec4edc6f2..cf98b37a79 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5407,7 +5407,7 @@ __metadata: "@mui/material": ^5.5.0 "@pushprotocol/restapi": 0.0.1-alpha.71 "@pushprotocol/socket": 0.5.3 - "@pushprotocol/uiweb": 1.3.1-alpha.6 + "@pushprotocol/uiweb": 1.3.1-alpha.7 "@reduxjs/toolkit": ^1.7.1 "@testing-library/dom": ^6.12.2 "@testing-library/jest-dom": ^4.2.4 @@ -5647,9 +5647,9 @@ __metadata: languageName: node linkType: hard -"@pushprotocol/uiweb@npm:1.3.1-alpha.6": - version: 1.3.1-alpha.6 - resolution: "@pushprotocol/uiweb@npm:1.3.1-alpha.6" +"@pushprotocol/uiweb@npm:1.3.1-alpha.7": + version: 1.3.1-alpha.7 + resolution: "@pushprotocol/uiweb@npm:1.3.1-alpha.7" dependencies: "@livekit/components-react": ^1.2.2 "@livekit/components-styles": ^1.0.6 @@ -5682,7 +5682,7 @@ __metadata: react: ">=16.8.0" styled-components: ^6.0.8 viem: ^1.3.0 - checksum: b931b0e27ef2d209d46d19c651de538a0843f914509a53f7bdbb69e71156406287d2c1561c037f4762523e48bf3d2704e0c2a273b9b0736dcf4ab203f19894d4 + checksum: 5b5a667799185aa6c9fdfff9e498e8d90fb905bf0596a377f2f131b1eaff84ff1684a7d3a8b0842f92436bd096f8353f6f4976191bd360a25c686ff79b88a6c6 languageName: node linkType: hard