Switch and better UX

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)
 

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) => {

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<Props> = ({ orderId, setAudit, audit, createJsonFile }) => {
@@ -58,4 +58,4 @@ const ChatBottom: React.FC<Props> = ({ orderId, setAudit, audit, createJsonFile
   );
 };
 
-export default ChatBottom;
+export default ChatBottom;

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<Props> = ({
   orderId,
   userNick,
   takerNick,
+  messages,
+  setMessages,
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -42,7 +45,6 @@ const EncryptedSocketChat: React.FC<Props> = ({
   );
   const [peerPubKey, setPeerPubKey] = useState<string>();
   const [token] = useState<string>(systemClient.getCookie('robot_token') || '');
-  const [messages, setMessages] = useState<EncryptedChatMessage[]>([]);
   const [serverMessages, setServerMessages] = useState<ServerMessage[]>([]);
   const [value, setValue] = useState<string>('');
   const [connection, setConnection] = useState<WebsocketConnection>();
@@ -150,7 +152,7 @@ const EncryptedSocketChat: React.FC<Props> = ({
       // 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<Props> = ({
           onClickBack={() => setAudit(false)}
         />
 
-        <ChatBottom orderId={orderId} audit={audit} setAudit={setAudit} createJsonFile={createJsonFile}/>
+        <ChatBottom
+          orderId={orderId}
+          audit={audit}
+          setAudit={setAudit}
+          createJsonFile={createJsonFile}
+        />
       </Grid>
     </Container>
   );

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<Props> = ({
@@ -30,6 +32,8 @@ const EncryptedTurtleChat: React.FC<Props> = ({
   userNick,
   takerNick,
   chatOffset,
+  messages,
+  setMessages,
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -42,11 +46,8 @@ const EncryptedTurtleChat: React.FC<Props> = ({
   const [ownEncPrivKey] = useState<string>(
     (systemClient.getCookie('enc_priv_key') ?? '').split('\\').join('\n'),
   );
-  const [peerPubKey, setPeerPubKey] = useState<string>(
-    '-----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<string>();
   const [token] = useState<string>(systemClient.getCookie('robot_token') || '');
-  const [messages, setMessages] = useState<EncryptedChatMessage[]>([]);
   const [value, setValue] = useState<string>('');
   const [audit, setAudit] = useState<boolean>(false);
   const [waitingEcho, setWaitingEcho] = useState<boolean>(false);
@@ -78,7 +79,7 @@ const EncryptedTurtleChat: React.FC<Props> = ({
     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<Props> = ({
     };
   };
 
-  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<Props> = ({
         ).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<Props> = ({
           passphrase={token || ''}
           onClickBack={() => setAudit(false)}
         />
-        <ChatBottom orderId={orderId} audit={audit} setAudit={setAudit} createJsonFile={createJsonFile} />
+        <ChatBottom
+          orderId={orderId}
+          audit={audit}
+          setAudit={setAudit}
+          createJsonFile={createJsonFile}
+        />
       </Grid>
     </Container>
   );

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<Props> = ({
   userNick,
   chatOffset,
 }: Props): JSX.Element => {
+  const [messages, setMessages] = useState<EncryptedChatMessage[]>([]);
+
   return turtleMode ? (
     <EncryptedTrutleChat
+      messages={messages}
+      setMessages={setMessages}
       orderId={orderId}
       takerNick={takerNick}
       userNick={userNick}
       chatOffset={chatOffset}
     />
   ) : (
-    <EncryptedSocketChat orderId={orderId} takerNick={takerNick} userNick={userNick} />
+    <EncryptedSocketChat
+      messages={messages}
+      setMessages={setMessages}
+      orderId={orderId}
+      takerNick={takerNick}
+      userNick={userNick}
+    />
   );
 };
 

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 {
             </b>{' '}
             {' ' + this.stepXofY()}
           </Typography>
+          <Grid item>
+            <Tooltip
+              enterTouchDelay={0}
+              placement='top'
+              title={t('Activate turtle mode (Use it when the connection is slow)')}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  width: '4em',
+                  height: '1.1em',
+                }}
+              >
+                <Switch
+                  size='small'
+                  disabled={false}
+                  checked={this.state.turtle_mode}
+                  onChange={() => this.setState({ turtle_mode: !this.state.turtle_mode })}
+                />
+                <WifiTetheringErrorIcon sx={{ color: 'text.secondary' }} />
+              </div>
+            </Tooltip>
+          </Grid>
         </Grid>
         <Grid item xs={12} align='center'>
           {this.props.data.is_seller ? (
@@ -1470,7 +1497,7 @@ class TradeBox extends Component {
         </Grid>
 
         <EncryptedChat
-          turtleMode={this.props.data.turtle_mode}
+          turtleMode={this.state.turtle_mode}
           chatOffset={this.props.data.chat_offset}
           orderId={this.props.data.id}
           takerNick={this.props.data.taker_nick}