Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-13 02:46:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Switch and better UX

Browse Source
This commit is contained in:
KoalaSat 2022-11-02 17:39:02 +01:00
parent df6e476613
commit 432e4d2399
No known key found for this signature in database
GPG Key ID: 2F7F61C6146AB157
7 changed files with 71 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
chat/views.py
View File

@ -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)

12
frontend/src/basic/OrderPage/index.js
View File

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

4
frontend/src/components/TradeBox/EncryptedChat/ChatBottom/index.tsx
View File

@ -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;

15
frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx
View File

@ -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>
);

31
frontend/src/components/TradeBox/EncryptedChat/EncryptedTrutleChat/index.tsx
View File

@ -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>
);

14
frontend/src/components/TradeBox/EncryptedChat/index.tsx
View File

@ -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}
/>
);
};

29
frontend/src/components/TradeBox/index.js
View File

@ -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}