+ 0 ? true: false} title="You can claim satoshis!">
0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
title="You have an active order">
@@ -444,6 +445,7 @@ bottomBarDesktop =()=>{
+
@@ -671,8 +673,9 @@ bottomBarPhone =()=>{
-
0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
- title="You have an active order">
+ 0 ? true: false} title="You can claim satoshis!">
+ 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
+ title="You have an active order">
0 & !this.state.profileShown) ? "": null} color="primary">
{
+
diff --git a/frontend/src/components/Chat.js b/frontend/src/components/Chat.js
index 8c165aea..f00c1dba 100644
--- a/frontend/src/components/Chat.js
+++ b/frontend/src/components/Chat.js
@@ -1,7 +1,6 @@
import React, { Component } from 'react';
-import { w3cwebsocket as W3CWebSocket } from "websocket";
-import {Button, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, FormHelperText} from "@mui/material";
-
+import {Button, Badge, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, FormHelperText, Typography} from "@mui/material";
+import ReconnectingWebSocket from 'reconnecting-websocket';
export default class Chat extends Component {
constructor(props) {
@@ -11,32 +10,52 @@ export default class Chat extends Component {
state = {
messages: [],
value:'',
+ connected: false,
+ peer_connected: false,
};
- client = new W3CWebSocket('ws://' + window.location.host + '/ws/chat/' + this.props.orderId + '/');
+ rws = new ReconnectingWebSocket('ws://' + window.location.host + '/ws/chat/' + this.props.orderId + '/');
componentDidMount() {
- this.client.onopen = () => {
- console.log('WebSocket Client Connected')
- }
- this.client.onmessage = (message) => {
+ this.rws.addEventListener('open', () => {
+ console.log('Connected!');
+ this.setState({connected: true});
+ this.rws.send(JSON.stringify({
+ type: "message",
+ message: 'just-connected',
+ nick: this.props.ur_nick,
+ }));
+ });
+
+ this.rws.addEventListener('message', (message) => {
+
const dataFromServer = JSON.parse(message.data);
console.log('Got reply!', dataFromServer.type);
+
if (dataFromServer){
- this.setState((state) =>
- ({
- messages: [...state.messages,
- {
- msg: dataFromServer.message,
- userNick: dataFromServer.user_nick,
- }],
-
- })
-
- )
+ if (dataFromServer.message != 'just-connected' & dataFromServer.message != 'peer-disconnected'){
+ this.setState((state) =>
+ ({
+ messages: [...state.messages,
+ {
+ msg: dataFromServer.message,
+ userNick: dataFromServer.user_nick,
+ }],
+ })
+ )
+ }
+ this.setState({peer_connected: dataFromServer.peer_connected})
}
+ });
- }
+ this.rws.addEventListener('close', () => {
+ console.log('Socket is closed. Reconnect will be attempted');
+ this.setState({connected: false});
+ });
+
+ this.rws.addEventListener('error', () => {
+ console.error('Socket encountered error: Closing socket');
+ });
}
componentDidUpdate() {
@@ -49,7 +68,7 @@ export default class Chat extends Component {
onButtonClicked = (e) => {
if(this.state.value!=''){
- this.client.send(JSON.stringify({
+ this.rws.send(JSON.stringify({
type: "message",
message: this.state.value,
nick: this.props.ur_nick,
@@ -62,17 +81,38 @@ export default class Chat extends Component {
render() {
return (
-
+
+
+
+
+
+
+ You: {this.state.connected ? 'connected': 'disconnected'}
+
+
+
+
+
+
+
+ Peer: {this.state.peer_connected ? 'connected': 'disconnected'}
+
+
+
+
+
{this.state.messages.map(message => <>
{/* If message sender is not our nick, gray color, if it is our nick, green color */}
{message.userNick == this.props.ur_nick ?
+
+
+
}
style={{backgroundColor: '#e8ffe6'}}
title={message.userNick}
@@ -82,10 +122,12 @@ export default class Chat extends Component {
:
+
+
+
}
style={{backgroundColor: '#fcfcfc'}}
title={message.userNick}
@@ -98,20 +140,22 @@ export default class Chat extends Component {
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index 6063aadb..067b4919 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -790,7 +790,6 @@ handleRatingRobosatsChange=(e)=>{
Say hi! Ask for payment details and click "Confirm Sent" as soon as the payment is sent.
}
-