Chart turtle mode (#312)

* Add Chat Turtle Mode

* Unused code

* Switch and better UX

* translations

Co-authored-by: KoalaSat <yv1vtrul@duck.com>

chat/serializers.py

@@ -18,7 +18,7 @@ class Meta:
 class PostMessageSerializer(serializers.ModelSerializer):
     class Meta:
         model = Message
-        fields = ("PGP_message", "order", "offset")
+        fields = ("PGP_message", "order_id", "offset")
         depth = 0
 
     offset = serializers.IntegerField(

chat/views.py

@@ -58,13 +58,15 @@ def get(self, request, format=None):
             chatroom.maker_connected = True
             chatroom.save()
             peer_connected = chatroom.taker_connected
+            peer_public_key = order.taker.profile.public_key
         elif chatroom.taker == request.user:
             chatroom.maker_connected = order.maker_last_seen > (
                 timezone.now() - timedelta(minutes=1)
             )
             chatroom.taker_connected = True
             chatroom.save()
             peer_connected = chatroom.maker_connected
+            peer_public_key = order.maker.profile.public_key
 
         messages = []
         for message in queryset:
@@ -79,7 +81,7 @@ def get(self, request, format=None):
             }
             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

@@ -66,6 +66,7 @@ class OrderPage extends Component {
       openStoreToken: false,
       tabValue: 1,
       orderId: this.props.match.params.orderId,
+      chat_offset: 0,
     };
 
     // Refresh delays according to Order status
@@ -109,6 +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,
     };
 
     const completeStateVars = Object.assign({}, newStateVars, otherStateVars);
@@ -117,7 +119,10 @@ class OrderPage extends Component {
 
   getOrderDetails = (id) => {
     this.setState({ orderId: id });
-    apiClient.get('/api/order/?order_id=' + id).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

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { Grid, useTheme, Tooltip, Button } from '@mui/material';
+import { ExportIcon } from '../../../Icons';
+import KeyIcon from '@mui/icons-material/Key';
+import { useTranslation } from 'react-i18next';
+import { saveAsJson } from '../../../../utils';
+
+interface Props {
+  orderId: number;
+  setAudit: (audit: boolean) => void;
+  audit: boolean;
+  createJsonFile: () => object;
+}
+
+const ChatBottom: React.FC<Props> = ({ orderId, setAudit, audit, createJsonFile }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  return (
+    <>
+      <Grid item xs={6}>
+        <Tooltip
+          placement='bottom'
+          enterTouchDelay={0}
+          enterDelay={500}
+          enterNextDelay={2000}
+          title={t('Verify your privacy')}
+        >
+          <Button size='small' color='primary' variant='outlined' onClick={() => setAudit(!audit)}>
+            <KeyIcon />
+            {t('Audit PGP')}{' '}
+          </Button>
+        </Tooltip>
+      </Grid>
+
+      <Grid item xs={6}>
+        <Tooltip
+          placement='bottom'
+          enterTouchDelay={0}
+          enterDelay={500}
+          enterNextDelay={2000}
+          title={t('Save full log as a JSON file (messages and credentials)')}
+        >
+          <Button
+            size='small'
+            color='primary'
+            variant='outlined'
+            onClick={() => saveAsJson('complete_log_chat_' + orderId + '.json', createJsonFile())}
+          >
+            <div style={{ width: '1.4em', height: '1.4em' }}>
+              <ExportIcon sx={{ width: '0.8em', height: '0.8em' }} />
+            </div>{' '}
+            {t('Export')}{' '}
+          </Button>
+        </Tooltip>
+      </Grid>
+    </>
+  );
+};
+
+export default ChatBottom;

frontend/src/components/TradeBox/EncryptedChat/ChatHeader/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Grid, Paper, Typography, useTheme } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  connected: boolean;
+  peerConnected: boolean;
+}
+
+const ChatHeader: React.FC<Props> = ({ connected, peerConnected }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const connectedColor = theme.palette.mode === 'light' ? '#b5e3b7' : '#153717';
+  const connectedTextColor = theme.palette.getContrastText(connectedColor);
+
+  return (
+    <Grid container spacing={0.5}>
+      <Grid item xs={0.3} />
+      <Grid item xs={5.5}>
+        <Paper elevation={1} sx={connected ? { backgroundColor: connectedColor } : {}}>
+          <Typography variant='caption' sx={{ color: connectedTextColor }}>
+            {t('You') + ': '}
+            {connected ? t('connected') : t('disconnected')}
+          </Typography>
+        </Paper>
+      </Grid>
+      <Grid item xs={0.4} />
+      <Grid item xs={5.5}>
+        <Paper elevation={1} sx={peerConnected ? { backgroundColor: connectedColor } : {}}>
+          <Typography variant='caption' sx={{ color: connectedTextColor }}>
+            {t('Peer') + ': '}
+            {peerConnected ? t('connected') : t('disconnected')}
+          </Typography>
+        </Paper>
+      </Grid>
+      <Grid item xs={0.3} />
+    </Grid>
+  );
+};
+
+export default ChatHeader;