diff --git a/client-reactnative/src/Screens/Chat/ChatScreen.tsx b/client-reactnative/src/Screens/Chat/ChatScreen.tsx index beb932245..525592dbf 100644 --- a/client-reactnative/src/Screens/Chat/ChatScreen.tsx +++ b/client-reactnative/src/Screens/Chat/ChatScreen.tsx @@ -1,31 +1,33 @@ -import {observer} from 'mobx-react-lite'; -import React, {useEffect} from 'react'; -import {format} from 'date-fns'; -import {useStores} from '../../stores/context'; -import {getRoomArchiveStanza, getPaginatedArchive} from '../../xmpp/stanzas'; -import ChatContainer from '../../components/Chat/ChatContainer'; -import {IMessage, roomListProps} from '../../stores/chatStore'; -import { View } from 'native-base'; +import { observer } from "mobx-react-lite"; +import React, { useEffect } from "react"; +import { format } from "date-fns"; +import { useStores } from "../../stores/context"; +import { getRoomArchiveStanza, getPaginatedArchive } from "../../xmpp/stanzas"; +import ChatContainer from "../../components/Chat/ChatContainer"; +import { IMessage, roomListProps } from "../../stores/chatStore"; +import { View } from "native-base"; -const ChatScreen = observer(({route}: any) => { - const {chatStore} = useStores(); +const ChatScreen = observer(({ route }: any) => { + const { chatStore } = useStores(); - const {chatJid, chatName} = route.params; - const room:roomListProps = chatStore.roomList.find(item => item.jid === chatJid)||{ - avatar:"", - counter:0, - createdAt:"", - jid:chatJid, - lastUserName:"", - lastUserText:"", - name:chatName?chatName:'', - participants:0, - isFavourite:false, - muted:false, - priority:0, - roomBackground:"", - roomBackgroundIndex:0, - roomThumbnail:"" + const { chatJid, chatName } = route.params; + const room: roomListProps = chatStore.roomList.find( + (item) => item.jid === chatJid + ) || { + avatar: "", + counter: 0, + createdAt: "", + jid: chatJid, + lastUserName: "", + lastUserText: "", + name: chatName ? chatName : "", + participants: 0, + isFavourite: false, + muted: false, + priority: 0, + roomBackground: "", + roomBackgroundIndex: 0, + roomThumbnail: "", }; const messages = chatStore.messages .filter((item: IMessage) => { @@ -66,7 +68,8 @@ const ChatScreen = observer(({route}: any) => { lastUserText: lastMessage?.text, lastUserName: lastMessage?.user?.name, lastMessageTime: - lastMessage?.createdAt && format(lastMessage?.createdAt as Date, 'hh:mm'), + lastMessage?.createdAt && + format(new Date(lastMessage?.createdAt), "hh:mm"), }); }, [!!messages]); @@ -79,7 +82,7 @@ const ChatScreen = observer(({route}: any) => { }; return ( - + { ); }); -export default ChatScreen; \ No newline at end of file +export default ChatScreen; diff --git a/client-reactnative/src/Screens/Chat/NewChatScreen.tsx b/client-reactnative/src/Screens/Chat/NewChatScreen.tsx index 7baeeb37e..7cad4d489 100644 --- a/client-reactnative/src/Screens/Chat/NewChatScreen.tsx +++ b/client-reactnative/src/Screens/Chat/NewChatScreen.tsx @@ -125,13 +125,12 @@ const NewChatScreen = (props: NewChatScreenProps) => { { roomName: chatName, roomDescription: chatDescription }, chatStore.xmpp ); - chatAvatar && setRoomImage( manipulatedWalletAddress + "@" + apiStore.xmppDomains.DOMAIN, roomHash + apiStore.xmppDomains.CONFERENCEDOMAIN, chatAvatar, - "", + "none", "icon", chatStore.xmpp ); diff --git a/client-reactnative/src/Screens/Login/RegularLoginScreen.tsx b/client-reactnative/src/Screens/Login/RegularLoginScreen.tsx index e5d4d709a..524ca7b85 100644 --- a/client-reactnative/src/Screens/Login/RegularLoginScreen.tsx +++ b/client-reactnative/src/Screens/Login/RegularLoginScreen.tsx @@ -100,7 +100,6 @@ export const RegularLoginScreen = ({navigation}: ScreenProps) => { ; -const OtherUserProfileScreen = ({ route }: ScreenProps) => { +const OtherUserProfileScreen = observer(({ route }: ScreenProps) => { + const { loginStore, walletStore, apiStore, chatStore, otherUserStore } = + useStores(); + const navigation = useNavigation(); + + const { setOffset, setTotal, clearPaginationData, anotherUserBalance } = + walletStore; + + const [coinData, setCoinData] = useState([]); + const [itemsData, setItemsData] = useState([]); + const collections = walletStore.anotherUserNfmtCollections; + + const [activeTab, setActiveTab] = useState(0); + const [activeAssetTab, setActiveAssetTab] = useState(1); + + const [isLoading, setIsLoading] = useState(true); + const [isLoadingVCard, setIsLoadingVCard] = useState(true); + + const [itemsBalance, setItemsBalance] = useState(0); + + const anotherUserWalletAddress = loginStore.anotherUserWalletAddress; const linkToken = route.params?.linkToken; - return ; -}; + const anotherUserTransaction = walletStore.anotherUserTransaction; + const transactionCount = walletStore.total; + + const onDirectChatPress = () => { + const otherUserWalletAddress = loginStore.anotherUserWalletAddress; + const myWalletAddress = loginStore.initialData.walletAddress; + const combinedWalletAddress = [myWalletAddress, otherUserWalletAddress] + .sort() + .join("_"); + + const roomJid = + combinedWalletAddress.toLowerCase() + + apiStore.xmppDomains.CONFERENCEDOMAIN; + const combinedUsersName = [ + loginStore.initialData.firstName, + loginStore.anotherUserFirstname, + ] + .sort() + .join(" and "); + + const myXmppUserName = underscoreManipulation(myWalletAddress); + createNewRoom( + myXmppUserName, + combinedWalletAddress.toLowerCase(), + chatStore.xmpp + ); + setOwner( + myXmppUserName, + combinedWalletAddress.toLowerCase(), + chatStore.xmpp + ); + roomConfig( + myXmppUserName, + combinedWalletAddress.toLowerCase(), + { roomName: combinedUsersName, roomDescription: "" }, + chatStore.xmpp + ); + subscribeToRoom(roomJid, myXmppUserName, chatStore.xmpp); + + navigation.navigate("ChatScreen", { + chatJid: roomJid, + chatName: combinedUsersName, + }); + chatStore.toggleShouldCount(false); + + setTimeout(() => { + sendInvite( + underscoreManipulation(myWalletAddress), + roomJid.toLowerCase(), + underscoreManipulation(otherUserWalletAddress), + chatStore.xmpp + ); + }, 3000); + }; + const calculateBalances = () => { + setItemsBalance( + itemsData.reduce((acc, item) => (acc += parseFloat(item.balance)), 0) + ); + }; + const getBalances = async () => { + await walletStore.fetchTransaction( + loginStore.anotherUserWalletAddress, + 10, + 0 + ); + await walletStore.fetchOtherUserWalletBalance( + loginStore.anotherUserWalletAddress, + loginStore.userToken, + linkToken || "" + ); + setIsLoading(false); + setIsLoadingVCard(false); + }; + + useEffect(() => { + if (anotherUserBalance?.length > 0) { + const nfmtItems = produceNfmtItems(anotherUserBalance); + setCoinData( + anotherUserBalance.filter( + (item: any) => item.tokenName === coinsMainName + ) + ); + + setItemsData( + anotherUserBalance + + .filter(filterNftBalances) + .concat(nfmtItems) + + .reverse() + ); + calculateBalances(); + } else { + setItemsData([]) + } + }, [anotherUserBalance.length]); + + useEffect(() => { + calculateBalances(); + + return () => {}; + }, [itemsData, coinData]); + + useEffect(() => { + setOffset(0); + setTotal(0); + + return () => { + clearPaginationData(); + setCoinData([]); + setIsLoading(true); + setIsLoadingVCard(true); + setItemsData([]); + }; + }, []); + + useEffect(() => { + getBalances(); + }, [loginStore.anotherUserWalletAddress]); + + const loadTabContent = () => { + if (activeTab === 0) { + return ( + + ); + } + + if (activeTab === 1) { + return ( + + { + if (anotherUserTransaction.length < walletStore.total) { + walletStore.fetchTransaction( + anotherUserWalletAddress, + walletStore.limit, + walletStore.offset + ); + } + }} + /> + + ); + } + }; + + const onTransactionNumberPress = () => { + setActiveTab(1); + }; + + return ( + + + + activeTab === 1 ? setActiveTab(0) : navigation.goBack() + } + /> + + + + + + {loginStore.anotherUserFirstname[0] + + loginStore.anotherUserLastSeen[0]} + + + + + + + + + + + {loginStore.anotherUserFirstname}{" "} + {loginStore.anotherUserLastname} + + + + ( + + {transactionCount} + + ) + + + + + + + + + {otherUserStore.description} + + + + + + + Chat + + + + + + + + + + + + + + + + {loadTabContent()} + + + + + + + ); +}); + +const styles = StyleSheet.create({ + tokenIconStyle: { + height: hp("3%"), + width: hp("3%"), + }, + + mainContainerStyle: { + backgroundColor: primaryDarkColor, + flex: 1, + }, + tabText: { + fontSize: hp("1.97%"), + fontFamily: boldFont, + }, + coinsItemText: { + fontFamily: textStyles.mediumFont, + fontSize: hp("1.97%"), + color: "#000000", + }, + chatButton: { + fontSize: hp("2.23%"), + fontFamily: textStyles.regularFont, + textAlign: "center", + color: "0000004D", + backgroundColor: commonColors.primaryDarkColor, + borderRadius: 5, + paddingHorizontal: 10, + paddingVertical: 5, + }, + descriptionText: { + fontSize: hp("2.23%"), + fontFamily: textStyles.regularFont, + textAlign: "center", + color: primaryColor, + }, +}); -export default OtherUserProfileScreen; +export default OtherUserProfileScreen; \ No newline at end of file diff --git a/client-reactnative/src/Screens/Profile/ProfileScreen.tsx b/client-reactnative/src/Screens/Profile/ProfileScreen.tsx index 415eaf66d..675780477 100644 --- a/client-reactnative/src/Screens/Profile/ProfileScreen.tsx +++ b/client-reactnative/src/Screens/Profile/ProfileScreen.tsx @@ -4,9 +4,479 @@ You may not use this file except in compliance with the License. You may obtain a copy of the License at https://github.com/dappros/ethora/blob/main/LICENSE. */ -import React from "react"; -import MainProfile from "../../components/Profile/MainProfile"; +import React, { useState, useEffect } from "react"; +import { + SafeAreaView, + Text, + View, + TouchableOpacity, + Linking, +} from "react-native"; +import { + widthPercentageToDP as wp, + heightPercentageToDP as hp, +} from "react-native-responsive-screen"; -export const ProfileScreen = () => { - return ; -}; +import { Avatar, HStack, VStack } from "native-base"; + +import { observer } from "mobx-react-lite"; +import Hyperlink from "react-native-hyperlink"; + +import { useNavigation } from "@react-navigation/native"; +import AntIcon from "react-native-vector-icons/AntDesign"; + +import DocumentPicker from "react-native-document-picker"; +import { commonColors, textStyles } from "../../../docs/config"; +import ProfileModal from "../../components/Modals/Profile/ProfileModal"; +import { QRModal } from "../../components/Modals/QR/QRModal"; +import TransactionsList from "../../components/Nft/NftTransactionList"; +import { ProfileTabs } from "../../components/Profile/ProfileTabs"; +import SecondaryHeader from "../../components/SecondaryHeader/SecondaryHeader"; +import { showToast } from "../../components/Toast/toast"; +import { httpUploadPut } from "../../config/apiService"; +import { changeUserData, fileUpload } from "../../config/routesConstants"; +import { pattern1, pattern2 } from "../../helpers/chat/chatLinkpattern"; +import openChatFromChatLink from "../../helpers/chat/openChatFromChatLink"; +import parseLink from "../../helpers/parseLink"; +import { generateProfileLink } from "../../helpers/generateProfileLink"; +import { useStores } from "../../stores/context"; +import { updateVCard } from "../../xmpp/stanzas"; +import { uploadFiles } from "../../helpers/uploadFiles"; + +const { primaryColor, primaryDarkColor } = commonColors; + +export const ProfileScreen = observer(() => { + const { loginStore, walletStore, chatStore, apiStore } = useStores(); + + const navigation = useNavigation(); + + const { setOffset, setTotal, clearPaginationData, transactions } = + walletStore; + + const { userAvatar, userDescription, initialData, updateUserDisplayName } = + loginStore; + + const { firstName, lastName, walletAddress } = initialData; + + const coinData = walletStore.balance; + + const [activeTab, setActiveTab] = useState(0); + const [activeAssetTab, setActiveAssetTab] = useState(1); + + const [itemsBalance, setItemsBalance] = useState(0); + + const [modalType, setModalType] = useState<"name" | "description" | "">(""); + const [modalVisible, setModalVisible] = useState(false); + + const [qrModalVisible, setQrModalVisible] = useState(false); + + const [isDescriptionEditable, setIsDescriptionEditable] = useState(false); + const [descriptionLocal, setDescriptionLocal] = useState(userDescription); + const [firstNameLocal, setFirstNameLocal] = useState(firstName); + const [lastNameLocal, setLastNameLocal] = useState(lastName); + const userAvatarLocal = userAvatar; + const [uploadedAvatar, setUploadedAvatar] = useState({ + _id: "", + createdAt: "", + expiresAt: 0, + filename: "", + isVisible: true, + location: "", + locationPreview: "", + mimetype: "", + originalname: "", + ownerKey: "", + size: 0, + updatedAt: "", + userId: "", + }); + + useEffect(() => { + setOffset(0); + setTotal(0); + walletStore.fetchOwnTransactions(walletAddress, walletStore.limit, 0); + walletStore.fetchWalletBalance(loginStore.userToken, true); + walletStore.getDocuments(walletAddress); + + return () => { + clearPaginationData(); + }; + }, []); + useEffect(() => { + setDescriptionLocal(userDescription); + }, [userDescription]); + + const calculateAssetsCount = () => { + setItemsBalance( + walletStore.nftItems.reduce( + (acc, item) => (acc += parseFloat(item.balance.toString())), + 0 + ) + ); + }; + + useEffect(() => { + calculateAssetsCount(); + return () => {}; + }, [walletStore.nftItems, coinData]); + + const onNamePressed = () => { + setModalType("name"); + setModalVisible(true); + }; + + const onDescriptionPressed = () => { + setIsDescriptionEditable(true); + setModalType("description"); + setModalVisible(true); + }; + + //changes the user description locally + const onDescriptionChange = (text: string) => { + setDescriptionLocal(text); + }; + + //when user clicks on the backdrop of the modal + const onBackdropPress = () => { + setFirstNameLocal(firstName); + setLastNameLocal(lastName); + setDescriptionLocal(userDescription); + setIsDescriptionEditable(!isDescriptionEditable); + setModalVisible(false); + }; + + //changes the user's profile name locally + const onNameChange = (type: "firstName" | "lastName", text: string) => { + type === "firstName" ? setFirstNameLocal(text) : setLastNameLocal(text); + }; + + const setDescription = async () => { + if (userAvatarLocal || descriptionLocal) { + updateVCard( + userAvatarLocal, + descriptionLocal, + firstName + " " + lastName, + chatStore.xmpp + ); + } + + if (!descriptionLocal) { + updateVCard(userAvatarLocal, "No description", null, chatStore.xmpp); + } + const formData = new FormData(); + formData.append("description", descriptionLocal); + await httpUploadPut( + changeUserData, + formData, + loginStore.userToken, + console.log + ); + setIsDescriptionEditable(false); + setModalVisible(false); + }; + + const setNewName = () => { + //call api to dapp server to change username + //save in async storage + //and then change in mobx store + if (firstNameLocal) { + const bodyData = { + firstName: firstNameLocal, + lastName: lastNameLocal, + }; + updateVCard( + userAvatarLocal, + descriptionLocal, + firstNameLocal + " " + lastNameLocal, + chatStore.xmpp + ); + updateUserDisplayName(bodyData); + } else { + setFirstNameLocal(firstName); + showToast("error", "Error", "First name is required", "top"); + } + setModalVisible(false); + }; + + const handleChatLinks = (url: string) => { + const parsedChatId = parseLink(url); + if (parsedChatId) { + const chatJID = parsedChatId + apiStore.xmppDomains.CONFERENCEDOMAIN; + //argument url can be a chatlink or simple link + //first check if url is a chat link if yes then open chatlink else open the link via browser + if (pattern1.test(url) || pattern2.test(url)) { + openChatFromChatLink( + chatJID, + walletAddress, + navigation, + chatStore.xmpp + ); + } else { + Linking.openURL(url); + } + } + }; + + const QRPressed = () => { + // const xmppId = + // loginStore.initialData.xmppUsername + '@' + apiStore.xmppDomains.DOMAIN; + // const profileLink = `=profileLink&firstName=${firstName}&lastName=${lastName}&walletAddress=${walletAddress}&xmppId=${xmppId}`; + setQrModalVisible(true); + }; + + const sendFiles = async (data: any) => { + try { + const url = fileUpload; + const response = await uploadFiles(data, loginStore.userToken, url); + const file = response.results[0]; + setUploadedAvatar(file); + const formData = new FormData(); + formData.append("description", descriptionLocal); + formData.append("file", file.location); + await httpUploadPut( + changeUserData, + formData, + loginStore.userToken, + console.log + ); + updateVCard(file.location, descriptionLocal, null, chatStore.xmpp); + } catch (error) { + console.log(error); + } + }; + //change user avatar + const onAvatarPress = async () => { + try { + const res = await DocumentPicker.pickSingle({ + type: [DocumentPicker.types.images], + }); + const formData = new FormData(); + formData.append("files", { + name: res.name, + type: res.type, + uri: res.uri, + }); + sendFiles(formData); + } catch (error) { + console.log(error); + } + }; + const onTransactionNumberPress = () => { + setActiveTab(1); + }; + // shows profile tabs which contain documents, items... or transactions + const loadTabContent = () => { + if (activeTab === 0) { + return ( + + ); + } + + if (activeTab === 1) { + return ( + + { + if (transactions.length < walletStore.total) { + walletStore.fetchOwnTransactions( + walletAddress, + walletStore.limit, + walletStore.offset + ); + } + }} + /> + + ); + } + }; + return ( + + + + activeTab === 1 ? setActiveTab(0) : navigation.goBack() + } + /> + + + + + + {firstNameLocal[0] + lastNameLocal[0]} + + + + + + + + + + {firstNameLocal} {lastNameLocal} + + + + + ( + + {walletStore.total} + + ) + + + + + handleChatLinks(url)} + linkStyle={{ + color: "#2980b9", + fontSize: hp("1.8%"), + textDecorationLine: "underline", + }} + > + + {descriptionLocal && !isDescriptionEditable + ? descriptionLocal + : "Add your description"} + + + + + + + + + {loadTabContent()} + + + + setQrModalVisible(false)} + title={"Profile"} + link={generateProfileLink({ + firstName: firstName, + lastName: lastName, + walletAddress: walletAddress, + xmppId: + loginStore.initialData.xmppUsername + + "@" + + apiStore.xmppDomains.DOMAIN, + })} + /> + + ); +}); \ No newline at end of file diff --git a/client-reactnative/src/components/Chat/ChatContainer.tsx b/client-reactnative/src/components/Chat/ChatContainer.tsx index e1922092c..d83578ccb 100644 --- a/client-reactnative/src/components/Chat/ChatContainer.tsx +++ b/client-reactnative/src/components/Chat/ChatContainer.tsx @@ -270,16 +270,10 @@ const ChatContainer = observer((props: ChatContainerProps) => { android: `${RNFetchBlob.fs.dirs.CacheDir}/audio.mp3`, }); - const senderDetails = { - senderFirstName: loginStore.initialData.firstName, - senderLastName: loginStore.initialData.lastName, - senderWalletAddress: loginStore.initialData.walletAddress, - photoURL: loginStore.userAvatar, - }; const giftedRef = useRef(null); const navigation = useNavigation(); const manipulatedWalletAddress: string = underscoreManipulation( - senderDetails.senderWalletAddress + loginStore.initialData.walletAddress ); const { tokenTransferSuccess } = walletStore; const debouncedChatText = useDebounce(text, 500); @@ -420,10 +414,10 @@ const ChatContainer = observer((props: ChatContainerProps) => { mediaListArray.map(async (item) => { // console.log(item.duration, 'masdedia messsdfsdfage'); const data: IMessageToSend = { - senderFirstName: senderDetails.senderFirstName, - senderLastName: senderDetails.senderLastName, - senderWalletAddress: senderDetails.senderWalletAddress, - photoURL: senderDetails.photoURL, + senderFirstName: loginStore.initialData.firstName, + senderLastName: loginStore.initialData.lastName, + senderWalletAddress: loginStore.initialData.walletAddress, + photoURL: loginStore.userAvatar, location: item.location, locationPreview: item.locationPreview, mimetype: item.mimetype, @@ -458,11 +452,7 @@ const ChatContainer = observer((props: ChatContainerProps) => { const parentIndex = messages.findIndex( (item) => item._id === currentMessage?.mainMessage?.id ); - console.log( - //@ts-ignore - giftedRef.current?._messageContainerRef?.current?.scrollToIndex, - "parent Index" - ); + //@ts-ignore giftedRef.current?._messageContainerRef?.current?.scrollToIndex({ animated: true, @@ -540,6 +530,7 @@ const ChatContainer = observer((props: ChatContainerProps) => { showInChannel: showInChannel, push: true, }; + console.log(data); if (isEditing) { sendReplaceMessageStanza( diff --git a/client-reactnative/src/components/Modals/DeleteDialog.tsx b/client-reactnative/src/components/Modals/DeleteDialog.tsx index 515194800..93e61ec00 100644 --- a/client-reactnative/src/components/Modals/DeleteDialog.tsx +++ b/client-reactnative/src/components/Modals/DeleteDialog.tsx @@ -1,6 +1,7 @@ -import React from 'react'; -import {AlertDialog, Center, Button as NativeButton} from 'native-base'; +import React, { useRef } from 'react'; +import {AlertDialog, Box, Center, Button as NativeButton} from 'native-base'; import {Button} from '../Button'; +import { widthPercentageToDP } from 'react-native-responsive-screen'; export const DeleteDialog = ({ open, @@ -21,15 +22,16 @@ export const DeleteDialog = ({ deleteButtonTitle?: string; cancelButtonTitle?: string; }) => { - const cancelRef = React.useRef(null); + const cancelRef = useRef(null); return ( -
+
- + + {title} {description} diff --git a/client-reactnative/src/components/Profile/ProfileTabs.tsx b/client-reactnative/src/components/Profile/ProfileTabs.tsx index e4582d0e9..f8b590a46 100644 --- a/client-reactnative/src/components/Profile/ProfileTabs.tsx +++ b/client-reactnative/src/components/Profile/ProfileTabs.tsx @@ -1,26 +1,26 @@ -import {useNavigation} from '@react-navigation/native'; -import {HStack, VStack} from 'native-base'; -import React, {useState} from 'react'; -import {FlatList, Image, StyleSheet, Text, View} from 'react-native'; +import { useNavigation } from "@react-navigation/native"; +import { HStack, VStack } from "native-base"; +import React, { useState } from "react"; +import { FlatList, Image, StyleSheet, Text, View } from "react-native"; import { coinImagePath, coinReplacedName, commonColors, itemsTransfersAllowed, textStyles, -} from '../../../docs/config'; -import {IDocument, TBalance} from '../../stores/types'; -import {NftListItem} from '../Transactions/NftListItem'; -import {DocumentListItem} from './DocumentListItem'; -import {ProfileTab} from './ProfileTab'; +} from "../../../docs/config"; +import { IDocument, TBalance } from "../../stores/types"; +import { NftListItem } from "../Transactions/NftListItem"; +import { DocumentListItem } from "./DocumentListItem"; +import { ProfileTab } from "./ProfileTab"; import { widthPercentageToDP as wp, heightPercentageToDP as hp, -} from 'react-native-responsive-screen'; -import {NftMediaModal} from '../NftMediaModal'; -import {HomeStackNavigationProp} from '../../navigation/types'; +} from "react-native-responsive-screen"; +import { NftMediaModal } from "../NftMediaModal"; +import { HomeStackNavigationProp } from "../../navigation/types"; -const renderItem = ({item, index}: {item: any; index: number}) => ( +const renderItem = ({ item, index }: { item: any; index: number }) => ( ( - + justifyContent={"space-between"} + alignItems={"center"} + width={"full"} + > + {/* {tokenSymbol} */} - + {coinReplacedName} - + {parseFloat(balance).toFixed(0)} @@ -109,14 +110,14 @@ export const ProfileTabs: React.FC = ({ const [mediaModalData, setMediaModalData] = useState({ open: false, - url: '', - mimetype: '', + url: "", + mimetype: "", }); return ( - - - {itemsTransfersAllowed && collections.length > 0 && ( + + + {itemsTransfersAllowed && !!nftItems.length && ( setActiveAssetTab(1)} @@ -143,7 +144,7 @@ export const ProfileTabs: React.FC = ({ )} - + {activeAssetTab === 1 && nftItems.length === 0 && documents.length === 0 && ( @@ -154,14 +155,14 @@ export const ProfileTabs: React.FC = ({ keyExtractor={(item, index) => index.toString()} /> )} - {activeAssetTab === 1 && ( + {activeAssetTab === 1 && !!nftItems.length && ( ( + renderItem={(e) => ( - navigation.navigate('NftItemHistory', { + navigation.navigate("NftItemHistory", { item: e.item, userWalletAddress: userWalletAddress, }) @@ -182,11 +183,11 @@ export const ProfileTabs: React.FC = ({ {activeAssetTab === 2 && ( ( + renderItem={(e) => ( - navigation.navigate('NftItemHistory', { + navigation.navigate("NftItemHistory", { item: e.item, userWalletAddress: userWalletAddress, }) @@ -207,7 +208,7 @@ export const ProfileTabs: React.FC = ({ {activeAssetTab === 3 && ( ( + renderItem={(e) => ( @@ -218,7 +219,7 @@ export const ProfileTabs: React.FC = ({ }) } onItemPress={() => { - navigation.navigate('DocumentHistoryScreen', { + navigation.navigate("DocumentHistoryScreen", { item: e.item, userWalletAddress: userWalletAddress, }); @@ -232,7 +233,9 @@ export const ProfileTabs: React.FC = ({ setMediaModalData(prev => ({...prev, open: false}))} + closeModal={() => + setMediaModalData((prev) => ({ ...prev, open: false })) + } url={mediaModalData.url} mimetype={mediaModalData.mimetype} /> @@ -242,8 +245,8 @@ export const ProfileTabs: React.FC = ({ const styles = StyleSheet.create({ tokenIconStyle: { - height: hp('3%'), - width: hp('3%'), + height: hp("3%"), + width: hp("3%"), }, mainContainerStyle: { @@ -251,12 +254,12 @@ const styles = StyleSheet.create({ flex: 1, }, tabText: { - fontSize: hp('1.97%'), + fontSize: hp("1.97%"), fontFamily: textStyles.boldFont, }, coinsItemText: { fontFamily: textStyles.mediumFont, - fontSize: hp('1.97%'), - color: '#000000', + fontSize: hp("1.97%"), + color: "#000000", }, }); diff --git a/client-reactnative/src/components/Transactions/TransactionsListItem.tsx b/client-reactnative/src/components/Transactions/TransactionsListItem.tsx index 694024926..bdc7c0eb7 100644 --- a/client-reactnative/src/components/Transactions/TransactionsListItem.tsx +++ b/client-reactnative/src/components/Transactions/TransactionsListItem.tsx @@ -80,7 +80,7 @@ export const TransactionsListItem = (props: TransactionListProps) => { - {truncateString(name, 1)} + {truncateString(name, 15)} diff --git a/client-reactnative/src/helpers/chat/createMessageObject.ts b/client-reactnative/src/helpers/chat/createMessageObject.ts index 3200c6d6d..ae91b643d 100644 --- a/client-reactnative/src/helpers/chat/createMessageObject.ts +++ b/client-reactnative/src/helpers/chat/createMessageObject.ts @@ -95,59 +95,59 @@ export interface IMainMessage { export const createMessageObject = (messageDetails = []) => { const message: IMessage = { - _id: '', - text: '', - createdAt: '', + _id: "", + text: "", + createdAt: "", system: false, tokenAmount: 0, user: { - _id: '', - name: '', - avatar: '', + _id: "", + name: "", + avatar: "", }, - image: '', - realImageURL: '', - localURL: '', + image: "", + realImageURL: "", + localURL: "", isStoredFile: false, mimetype: undefined, - duration: '', - size: '', - waveForm: '', - roomJid: '', - receiverMessageId: '', + duration: "", + size: "", + waveForm: "", + roomJid: "", + receiverMessageId: "", imageLocationPreview: undefined, imageLocation: undefined, - quickReplies: '', + quickReplies: "", wrappable: true, - nftId: '', - nftName: '', - nftActionType: '', - contractAddress: '', - fileName: '', - originalName: '', + nftId: "", + nftName: "", + nftActionType: "", + contractAddress: "", + fileName: "", + originalName: "", isReply: false, mainMessage: undefined, numberOfReplies: 0, showInChannel: false, - preview: '', + preview: "", isReplace: false, - replaceMessageId: '', + replaceMessageId: "", isEdited: false, }; messageDetails.forEach((item: any) => { - if (item.name === 'body') { + if (item.name === "body") { message.text = item.children[0]; } - if (item.name === 'archived') { + if (item.name === "archived") { message._id = item.attrs.id; message.roomJid = item.attrs.by; - message.createdAt = new Date(parseInt(item.attrs.id.substring(0, 13))).toDateString(); + message.createdAt = new Date(parseInt(item.attrs.id.substring(0, 13))); } - if (item.name === 'data') { + if (item.name === "data") { message.user.name = - item.attrs.senderFirstName + ' ' + item.attrs.senderLastName; + item.attrs.senderFirstName + " " + item.attrs.senderLastName; message.user._id = item.attrs.senderJID; - const isSystem = item.attrs.isSystemMessage === 'true'; + const isSystem = item.attrs.isSystemMessage === "true"; message.system = isSystem; message.tokenAmount = +item.attrs?.tokenAmount || 0; message.user.avatar = item.attrs.photoURL || null; @@ -159,24 +159,24 @@ export const createMessageObject = (messageDetails = []) => { message.duration = item.attrs.duration; message.size = item.attrs.size; message.image = item.attrs.location; - message.receiverMessageId = item.attrs.receiverMessageId || ''; - message.quickReplies = item.attrs.quickReplies || ''; - message.attachmentId = item.attrs.attachmentId || ''; + message.receiverMessageId = item.attrs.receiverMessageId || ""; + message.quickReplies = item.attrs.quickReplies || ""; + message.attachmentId = item.attrs.attachmentId || ""; message.wrappable = true; - message.nftId = item.attrs.nftId || ''; - message.nftName = item.attrs.nftName || ''; + message.nftId = item.attrs.nftId || ""; + message.nftName = item.attrs.nftName || ""; message.nftActionType = item.attrs?.nftActionType; message.contractAddress = item.attrs?.contractAddress; - message.fileName = item.attrs.fileName || ''; - message.originalName = item.attrs.originalName || ''; - message.isReply = item.attrs.isReply === 'true' || false; + message.fileName = item.attrs.fileName || ""; + message.originalName = item.attrs.originalName || ""; + message.isReply = item.attrs.isReply === "true" || false; if (item.attrs.mainMessage) { try { const parsedMessage = JSON.parse(item.attrs.mainMessage); const mainMessage: IMainMessage = { - text: parsedMessage.text || '', - id: parsedMessage?.id, - userName: parsedMessage.userName || '', + text: parsedMessage.text || "", + id: parsedMessage?.id && parsedMessage.id.toString(), + userName: parsedMessage.userName || "", createdAt: parsedMessage.createdAt, fileName: parsedMessage.fileName, imageLocation: parsedMessage.imageLocation, @@ -187,7 +187,7 @@ export const createMessageObject = (messageDetails = []) => { duration: parsedMessage.duration, waveForm: parsedMessage.waveForm, attachmentId: parsedMessage.attachmentId, - wrappable: parsedMessage.wrappable === 'true' || false, + wrappable: parsedMessage.wrappable === "true" || false, nftId: parsedMessage.mainMessageNftId, nftActionType: parsedMessage.nftActionType, contractAddress: parsedMessage.contractAddress, @@ -200,11 +200,11 @@ export const createMessageObject = (messageDetails = []) => { } message.numberOfReplies = 0; - message.showInChannel = item.attrs.showInChannel === 'true' || false; + message.showInChannel = item.attrs.showInChannel === "true" || false; message.preview = item.attrs.locationPreview; // message.roomJid = item.attrs.roomJid; } - if (item.name === 'replace') { + if (item.name === "replace") { message.isReplace = true; message.replaceMessageId = item.attrs.id; } diff --git a/client-reactnative/src/stores/chatStore.ts b/client-reactnative/src/stores/chatStore.ts index 6614bbd81..ff8a15c4a 100644 --- a/client-reactnative/src/stores/chatStore.ts +++ b/client-reactnative/src/stores/chatStore.ts @@ -417,12 +417,14 @@ export class ChatStore { const { avatar, name, jid } = props; const anotherUserFirstname = name.split(" ")[0]; const anotherUserLastname = name.split(" ")[1]; - const xmppID = jid.split("@")[0]; - const anotherUserWalletAddress = reverseUnderScoreManipulation(xmppID); + const manipulatedWalletAddress = jid.split("@")[0]; + const anotherUserWalletAddress = reverseUnderScoreManipulation( + manipulatedWalletAddress + ); //this will get the other user's Avatar and description retrieveOtherUserVcard( this.stores.loginStore.initialData.xmppUsername, - xmppID, + jid, this.xmpp ); @@ -630,7 +632,6 @@ export class ChatStore { b: { createdAt: string | number | Date } ) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() )[0]; - if (latestMessage) { map[latestMessage?.roomJid] = { ...this.roomsInfoMap[latestMessage?.roomJid], @@ -664,8 +665,8 @@ export class ChatStore { //subscribes to all default chats mestioned in config subscribeToDefaultChats = () => { - Object.entries(defaultChats).forEach(([key]) => { - const jid = key + this.stores.apiStore.xmppDomains.CONFERENCEDOMAIN; + defaultChats.forEach((chat) => { + const jid = chat.jid + this.stores.apiStore.xmppDomains.CONFERENCEDOMAIN; const manipulatedWalletAddress = underscoreManipulation( this.stores.loginStore.initialData.walletAddress ); @@ -744,7 +745,6 @@ export class ChatStore { } if (stanza.attrs.id === XMPP_TYPES.chatLinkInfo) { - console.log(stanza.attrs.type === "error", "getinfo stanza"); if (stanza.attrs.type !== "error") { runInAction(() => { this.chatLinkInfo[stanza.attrs.from] = @@ -803,10 +803,11 @@ export class ChatStore { anotherUserAvatar = item.children[0].children[0]; } }); - this.stores.otherUserStore.setDataFromVCard( - anotherUserDescription, - anotherUserAvatar - ); + if (anotherUserAvatar && anotherUserDescription) + this.stores.loginStore.setOtherUserVcard({ + anotherUserAvatar: anotherUserAvatar, + anotherUserDescription: anotherUserDescription, + }); } //response when last message of the stack arrived @@ -853,6 +854,7 @@ export class ChatStore { fullName = item.children[0]; } }); + this.stores.loginStore.updateUserPhotoAndDescription( profilePhoto, profileDescription diff --git a/client-reactnative/src/stores/walletStore.ts b/client-reactnative/src/stores/walletStore.ts index dde060e52..80f6ae2f4 100644 --- a/client-reactnative/src/stores/walletStore.ts +++ b/client-reactnative/src/stores/walletStore.ts @@ -562,10 +562,7 @@ export class WalletStore { runInAction(() => { this.offset = this.offset + response.data.limit; this.total = response.data.total; - this.anotherUserTransaction = [ - ...this.anotherUserTransaction, - ...response.data.items, - ].map((item) => mapTransactions(item, walletAddress)); + this.anotherUserTransaction = response.data.items.map((item) => mapTransactions(item, walletAddress)); }); } } catch (error) { diff --git a/client-reactnative/src/xmpp/stanzas.ts b/client-reactnative/src/xmpp/stanzas.ts index aa47b5590..028a5a4c2 100644 --- a/client-reactnative/src/xmpp/stanzas.ts +++ b/client-reactnative/src/xmpp/stanzas.ts @@ -202,37 +202,11 @@ export const sendMediaMessageStanza = async ( xml('data', { xmlns: 'http://' + DOMAIN, senderJID: from + '@' + DOMAIN, - senderFirstName: data.firstName, - senderLastName: data.lastName, - senderWalletAddress: data.walletAddress, isSystemMessage: false, tokenAmount: '0', receiverMessageId: '0', - mucname: data.chatName, - photoURL: data.userAvatar ? data.userAvatar : '', isMediafile: true, - createdAt: data.createdAt, - expiresAt: data.expiresAt, - fileName: data.fileName, - isVisible: data.isVisible, - location: data.location, - locationPreview: data.locationPreview, - mimetype: data.mimetype, - originalName: data.originalName, - ownerKey: data.ownerKey, - size: data.size, - duration: data?.duration, - updatedAt: data.updatedAt, - userId: data.userId, - waveForm: data.waveForm, - attachmentId: data?.attachmentId, - wrappable: data?.wrappable, - nftId: data?.nftId, - isReply: data?.isReply, - mainMessage: data?.mainMessage, - - showInChannel: data?.showInChannel, - nftName: data?.nftName, + ...data }), ); diff --git a/client-web/src/pages/Routes.tsx b/client-web/src/pages/Routes.tsx index dc08c8d50..25142765a 100644 --- a/client-web/src/pages/Routes.tsx +++ b/client-web/src/pages/Routes.tsx @@ -142,11 +142,14 @@ export const Routes = () => { } setLoading(false); - try { - const payload = await onMessageListener(); - sendBrowserNotification(payload.notification.body, () => {}); - } catch (error) { - console.log(error); + + if (appConfig.firebaseWebConfigString) { + try { + const payload = await onMessageListener(); + sendBrowserNotification(payload.notification.body, () => {}); + } catch (error) { + console.log(error); + } } }; diff --git a/client-web/src/utils/index.ts b/client-web/src/utils/index.ts index d786ac0c3..0f2e46dee 100644 --- a/client-web/src/utils/index.ts +++ b/client-web/src/utils/index.ts @@ -246,6 +246,7 @@ function findFirebaseConfig(input: string[]) { } export function getFirebaseConfigFromString(input: string) { + if(!input) return {} const objects = findObjectInString(input); const configString = findFirebaseConfig(objects) const configJson = preprocessInputKeysToJson(configString);