diff --git a/chat/views.py b/chat/views.py index 4dbffff8..5d6b7b34 100644 --- a/chat/views.py +++ b/chat/views.py @@ -69,10 +69,6 @@ class ChatView(viewsets.ViewSet): peer_public_key = order.maker.profile.public_key messages = [] - peer_public_key_data = { - "message": peer_public_key - } - messages.append(peer_public_key_data) for message in queryset: d = ChatSerializer(message).data print(d) @@ -85,7 +81,7 @@ class ChatView(viewsets.ViewSet): } messages.append(data) - response = {"peer_connected": peer_connected, "messages": messages} + response = {"peer_connected": peer_connected, "messages": messages, "peer_pubkey": peer_public_key} return Response(response, status.HTTP_200_OK) diff --git a/frontend/src/basic/OrderPage/index.js b/frontend/src/basic/OrderPage/index.js index 13da6879..dad6b6b4 100644 --- a/frontend/src/basic/OrderPage/index.js +++ b/frontend/src/basic/OrderPage/index.js @@ -67,7 +67,6 @@ class OrderPage extends Component { tabValue: 1, orderId: this.props.match.params.orderId, chat_offset: 0, - turtle_mode: false, }; // Refresh delays according to Order status @@ -111,7 +110,7 @@ class OrderPage extends Component { currencyCode: this.getCurrencyCode(newStateVars.currency), penalty: newStateVars.penalty, // in case penalty time has finished, it goes back to null invoice_expired: newStateVars.invoice_expired, // in case invoice had expired, it goes back to null when it is valid again - chat_offset: this.state.chat_offset + newStateVars?.chat.messages.length, + chat_offset: this.state.chat_offset + newStateVars?.chat?.messages.length, }; const completeStateVars = Object.assign({}, newStateVars, otherStateVars); @@ -121,12 +120,9 @@ class OrderPage extends Component { getOrderDetails = (id) => { this.setState({ orderId: id }); - let path = '/api/order/?order_id=' + id; - if (this.state.turtle_mode) { - path += '&offset=' + this.state.chat_offset; - } - - apiClient.get(path).then(this.orderDetailsReceived); + apiClient + .get('/api/order/?order_id=' + id + '&offset=' + this.state.chat_offset) + .then(this.orderDetailsReceived); }; orderDetailsReceived = (data) => { diff --git a/frontend/src/components/TradeBox/EncryptedChat/ChatBottom/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/ChatBottom/index.tsx index 896d7857..a1de80b2 100644 --- a/frontend/src/components/TradeBox/EncryptedChat/ChatBottom/index.tsx +++ b/frontend/src/components/TradeBox/EncryptedChat/ChatBottom/index.tsx @@ -9,7 +9,7 @@ interface Props { orderId: number; setAudit: (audit: boolean) => void; audit: boolean; - createJsonFile: () => object + createJsonFile: () => object; } const ChatBottom: React.FC = ({ orderId, setAudit, audit, createJsonFile }) => { @@ -58,4 +58,4 @@ const ChatBottom: React.FC = ({ orderId, setAudit, audit, createJsonFile ); }; -export default ChatBottom; \ No newline at end of file +export default ChatBottom; diff --git a/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx index 65cb72fb..d2192962 100644 --- a/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx +++ b/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx @@ -10,7 +10,6 @@ import { websocketClient, WebsocketConnection } from '../../../../services/Webso // Icons import CircularProgress from '@mui/material/CircularProgress'; import KeyIcon from '@mui/icons-material/Key'; -import { ExportIcon } from '../../../Icons'; import { useTheme } from '@mui/system'; import MessageCard from '../MessageCard'; import ChatHeader from '../ChatHeader'; @@ -21,12 +20,16 @@ interface Props { orderId: number; userNick: string; takerNick: string; + messages: EncryptedChatMessage[]; + setMessages: (messages: EncryptedChatMessage[]) => void; } const EncryptedSocketChat: React.FC = ({ orderId, userNick, takerNick, + messages, + setMessages, }: Props): JSX.Element => { const { t } = useTranslation(); const theme = useTheme(); @@ -42,7 +45,6 @@ const EncryptedSocketChat: React.FC = ({ ); const [peerPubKey, setPeerPubKey] = useState(); const [token] = useState(systemClient.getCookie('robot_token') || ''); - const [messages, setMessages] = useState([]); const [serverMessages, setServerMessages] = useState([]); const [value, setValue] = useState(''); const [connection, setConnection] = useState(); @@ -150,7 +152,7 @@ const EncryptedSocketChat: React.FC = ({ // We allow plaintext communication. The user must write # to start // If we receive an plaintext message else if (dataFromServer.message.substring(0, 1) == '#') { - setMessages((prev) => { + setMessages((prev: EncryptedChatMessage[]) => { const existingMessage = prev.find( (item) => item.plainTextMessage === dataFromServer.message, ); @@ -312,7 +314,12 @@ const EncryptedSocketChat: React.FC = ({ onClickBack={() => setAudit(false)} /> - + ); diff --git a/frontend/src/components/TradeBox/EncryptedChat/EncryptedTrutleChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/EncryptedTrutleChat/index.tsx index fbce2017..bc1c79c4 100644 --- a/frontend/src/components/TradeBox/EncryptedChat/EncryptedTrutleChat/index.tsx +++ b/frontend/src/components/TradeBox/EncryptedChat/EncryptedTrutleChat/index.tsx @@ -23,6 +23,8 @@ interface Props { userNick: string; takerNick: string; chatOffset: number; + messages: EncryptedChatMessage[]; + setMessages: (messages: EncryptedChatMessage[]) => void; } const EncryptedTurtleChat: React.FC = ({ @@ -30,6 +32,8 @@ const EncryptedTurtleChat: React.FC = ({ userNick, takerNick, chatOffset, + messages, + setMessages, }: Props): JSX.Element => { const { t } = useTranslation(); const theme = useTheme(); @@ -42,11 +46,8 @@ const EncryptedTurtleChat: React.FC = ({ const [ownEncPrivKey] = useState( (systemClient.getCookie('enc_priv_key') ?? '').split('\\').join('\n'), ); - const [peerPubKey, setPeerPubKey] = useState( - '-----BEGIN PGP PUBLIC KEY BLOCK-----mDMEY0sj/RYJKwYBBAHaRw8BAQdALiPlUEfnW9k+pVMHuUstKpdfJRNN07+Huam7jP96vj20TFJvYm9TYXRzIElEIDFlMWUzM2VkMTc0ZTgzNTYzM2JkOTY5N2UyNTBhYTllNzgzYTBjMjUyZDMwYWU3ZDI4ZWFjNzUxMzFkMDI4ZjGIjAQQFgoAPgUCY0sj/QQLCQcICRBvpYjDqTP2jQMVCAoEFgACAQIZAQIbAwIeARYhBLm0oAYSSNiZp+gd32+liMOpM/aNAADR6AD/Yrlucc5F+rQxzKZSDcGvubK4lapfyYbgN+pgvRE9bX8A/jwDgWI07mR5bK1JPKDGzGdX4rnG1RPFkGY0n/XpTigGuDgEY0sj/RIKKwYBBAGXVQEFAQEHQK/+5UIZE6WWvPpPF4BAPnPDyEpAm82bDuaB3iup8+EXAwEIB4h4BBgWCAAqBQJjSyP9CRBvpYjDqTP2jQIbDBYhBLm0oAYSSNiZp+gd32+liMOpM/aNAABzuQD9F6/YNXr4hoDHYnVQR0n0LSKyhTV8FDusOuWrMzw3BcIBAMbTMHP1ykB7xTivGVvypRKsS5oMloqv59bJx01fzLEL=H0Iy-----END PGP PUBLIC KEY BLOCK-----', - ); + const [peerPubKey, setPeerPubKey] = useState(); const [token] = useState(systemClient.getCookie('robot_token') || ''); - const [messages, setMessages] = useState([]); const [value, setValue] = useState(''); const [audit, setAudit] = useState(false); const [waitingEcho, setWaitingEcho] = useState(false); @@ -78,7 +79,7 @@ const EncryptedTurtleChat: React.FC = ({ apiClient.get(`/api/chat?order_id=${orderId}&offset=${lastIndex}`).then((results: any) => { if (results) { setPeerConnected(results.peer_connected); - storePeerPubKey(results.messages); + setPeerPubKey(results.peer_public_key); setServerMessages(results.messages); } }); @@ -96,17 +97,6 @@ const EncryptedTurtleChat: React.FC = ({ }; }; - const storePeerPubKey: (dataFromServer: ServerMessage[]) => void = (dataFromServer) => { - dataFromServer.forEach((data) => { - if ( - data.message.substring(0, 36) == `-----BEGIN PGP PUBLIC KEY BLOCK-----` && - data.message != ownPubKey - ) { - setPeerPubKey(data.message); - } - }); - }; - const onMessage: (dataFromServer: ServerMessage) => void = (dataFromServer) => { if (dataFromServer) { // If we receive an encrypted message @@ -119,7 +109,7 @@ const EncryptedTurtleChat: React.FC = ({ ).then((decryptedData) => { setLastSent(decryptedData.decryptedMessage === lastSent ? '----BLANK----' : lastSent); setLastIndex(lastIndex < dataFromServer.index ? dataFromServer.index : lastIndex); - setMessages((prev) => { + setMessages((prev: EncryptedChatMessage[]) => { const existingMessage = prev.find((item) => item.index === dataFromServer.index); if (existingMessage) { return prev; @@ -299,7 +289,12 @@ const EncryptedTurtleChat: React.FC = ({ passphrase={token || ''} onClickBack={() => setAudit(false)} /> - + ); diff --git a/frontend/src/components/TradeBox/EncryptedChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/index.tsx index 61e1d9b2..2739d86f 100644 --- a/frontend/src/components/TradeBox/EncryptedChat/index.tsx +++ b/frontend/src/components/TradeBox/EncryptedChat/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import EncryptedSocketChat from './EncryptedSocketChat'; import EncryptedTrutleChat from './EncryptedTrutleChat'; @@ -32,15 +32,25 @@ const EncryptedChat: React.FC = ({ userNick, chatOffset, }: Props): JSX.Element => { + const [messages, setMessages] = useState([]); + return turtleMode ? ( ) : ( - + ); }; diff --git a/frontend/src/components/TradeBox/index.js b/frontend/src/components/TradeBox/index.js index 51712928..5e5e8c0e 100644 --- a/frontend/src/components/TradeBox/index.js +++ b/frontend/src/components/TradeBox/index.js @@ -19,6 +19,7 @@ import { ListItem, ListItemText, Divider, + Switch, ListItemIcon, Dialog, DialogActions, @@ -37,6 +38,7 @@ import { apiClient } from '../../services/api'; // Icons import PercentIcon from '@mui/icons-material/Percent'; +import SelfImprovement from '@mui/icons-material/SelfImprovement'; import BookIcon from '@mui/icons-material/Book'; import LockIcon from '@mui/icons-material/Lock'; import LockOpenIcon from '@mui/icons-material/LockOpen'; @@ -47,6 +49,7 @@ import PlayCircleIcon from '@mui/icons-material/PlayCircle'; import BoltIcon from '@mui/icons-material/Bolt'; import LinkIcon from '@mui/icons-material/Link'; import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'; +import WifiTetheringErrorIcon from '@mui/icons-material/WifiTetheringError'; import FavoriteIcon from '@mui/icons-material/Favorite'; import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'; import RefreshIcon from '@mui/icons-material/Refresh'; @@ -72,6 +75,7 @@ class TradeBox extends Component { badInvoice: false, badAddress: false, badStatement: false, + turtle_mode: false, }; } @@ -1438,6 +1442,29 @@ class TradeBox extends Component { {' '} {' ' + this.stepXofY()} + + +
+ this.setState({ turtle_mode: !this.state.turtle_mode })} + /> + +
+
+
{this.props.data.is_seller ? ( @@ -1470,7 +1497,7 @@ class TradeBox extends Component {