mirror of
https://github.com/RoboSats/robosats.git
synced 2024-09-11 14:05:51 +03:00
Switch and better UX
This commit is contained in:
parent
df6e476613
commit
432e4d2399
@ -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)
|
||||
|
||||
|
@ -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) => {
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user