Add info dialog for enabling telegram notifications. Update docs.

docs/how-to-use.md

@@ -152,7 +152,9 @@ You have to copy or scan the invoice with your lightning wallet in order to lock
 <img src="images/how-to-use/contract-box-8.png"  width="370" />
 </div>
 
-Your order will be public for 6 hours. You can check the time left to expiration by checking the "Order" tab. It can be canceled at any time without penalty before it is taken by another robot. Keep the contract tab open to be notified [with this sound](https://github.com/Reckless-Satoshi/robosats/raw/main/frontend/static/assets/sounds/taker-found.mp3). It might be best to do this on a desktop computer and turn on the volume, so you do not miss when your order is taken. It might take long! Maybe you even forget! *Note: If you forget your order and a robot takes it and locks his fidelity bond, you risk losing your own fidelity bond by not fulfilling the next contract steps.*
+Your order will be public for 6 hours. You can check the time left to expiration by checking the "Order" tab. It can be canceled at any time without penalty before it is taken by another robot. Keep the contract tab open to be notified [with this sound](https://github.com/Reckless-Satoshi/robosats/raw/main/frontend/static/assets/sounds/taker-found.mp3). It might be best to do this on a desktop computer and turn on the volume, so you do not miss when your order is taken. It might take long! Maybe you even forget! You can also enable telegram notifications by pressing "Enable Telegram Notification" and then pressing "Start" in the chat. You will receive a welcome message as confirmation of the enabled notifications. Another message will be sent once a taker for your order is found.
+
+*Note: If you forget your order and a robot takes it and locks his fidelity bond, you risk losing your own fidelity bond by not fulfilling the next contract steps.*
 
 In the contract tab you can also see how many other orders are public for the same currency. You can also see how well does your premium ranks among all other orders for the same currency.
 

docs/how-to-use_es.md

@@ -154,7 +154,9 @@ Debes copiar o escanear la factura con tu billetera lightning para bloquear tu f
 <img src="images/how-to-use/contract-box-8.png" width="370" />
 </div>
 
-Tu orden permanecerá publicada durante 6 horas. Puedes comprobar cuánto tiempo le queda consultando la pestaña "Order". Se puede cancelar en cualquier momento sin penalización antes de que otro robot tome tu orden. Mantén abierta la pestaña del contrato para recibir notificaciones [con este sonido](https://github.com/Reckless-Satoshi/robosats/raw/main/frontend/static/assets/sounds/taker-found.mp3). Es aconsejable hacer esto en un ordenador o portátil con el volumen encendido para enterarte cuando alguien tome tu orden porque puede transcurrir bastante tiempo. ¡Quizás incluso olvides que tienes publicada una orden! *Nota: Si no estás pendiente de tu orden y un robot la toma y bloquea su fianza de fidelidad, corres el riesgo de perder la fianza de fidelidad que depositaste por no cumplir con los siguientes pasos del contrato.*
+Tu orden permanecerá publicada durante 6 horas. Puedes comprobar cuánto tiempo le queda consultando la pestaña "Order". Se puede cancelar en cualquier momento sin penalización antes de que otro robot tome tu orden. Mantén abierta la pestaña del contrato para recibir notificaciones [con este sonido](https://github.com/Reckless-Satoshi/robosats/raw/main/frontend/static/assets/sounds/taker-found.mp3). Es aconsejable hacer esto en un ordenador o portátil con el volumen encendido para enterarte cuando alguien tome tu orden porque puede transcurrir bastante tiempo. ¡Quizás incluso olvides que tienes publicada una orden! También puedes activar las notificaciones de telegram. Simplemente pulsa en "Enable Telegram Notifications" y presiona "Start" en la conversación con el bot de RoboSats. Te llegará un mensaje de bienvenida y cuando alguien tome la orden te avisará con un mensaje. 
+
+*Nota: Si no estás pendiente de tu orden y un robot la toma y bloquea su fianza, corres el riesgo de perder tu fianza por no cumplir con los siguientes pasos del contrato.*
 
 En la pestaña del contrato también puedes ver cuántas órdenes hay publicadas para la misma moneda. También puedes en qué posición (en porcentaje) se sitúa la prima de tu oferta con respecto a las demás publicadas con la misma moneda.
 

frontend/src/components/TradeBox.js

@@ -42,6 +42,7 @@ export default class TradeBox extends Component {
     this.state = {
       openConfirmFiatReceived: false,
       openConfirmDispute: false,
+      openEnableTelegram: false,
       badInvoice: false,
       badStatement: false,
       qrscanner: false,
@@ -247,11 +248,50 @@ export default class TradeBox extends Component {
     );
   }
 
+  handleClickOpenTelegramDialog = () => {
+    this.setState({openEnableTelegram: true});
+  };
+  handleClickCloseEnableTelegramDialog = () => {
+      this.setState({openEnableTelegram: false});
+  };
+
+  handleClickEnableTelegram = () =>{
+    window.open("https://t.me/"+this.props.data.tg_bot_name+'?start='+this.props.data.tg_token, '_blank').focus()
+    this.handleClickCloseEnableTelegramDialog();
+  };
+
+  EnableTelegramDialog =() =>{
+  return(
+      <Dialog
+      open={this.state.openEnableTelegram}
+      onClose={this.handleClickCloseEnableTelegramDialog}
+      aria-labelledby="enable-telegram-dialog-title"
+      aria-describedby="enable-telegram-dialog-description"
+      >
+        <DialogTitle id="open-dispute-dialog-title">
+          Enable TG Notifications
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            You will be taken to a conversation with RoboSats telegram bot.
+            Simply open the chat and press "Start". Note that by enabling
+            telegram notifications you might lower your level of anonimity.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={this.handleClickCloseEnableTelegramDialog}>Go back</Button>
+          <Button onClick={this.handleClickEnableTelegram} autoFocus> Enable </Button>
+        </DialogActions>
+      </Dialog>
+    )
+  }
+
   showMakerWait=()=>{
     return (
       <Grid container spacing={1}>
         {/* Make confirmation sound for HTLC received. */}
         <this.Sound soundFileName="locked-invoice"/>
+        <this.EnableTelegramDialog/>
         <Grid item xs={12} align="center">
           <Typography component="subtitle1" variant="subtitle1">
             <b> Your order is public. Wait for a taker. </b>
@@ -274,7 +314,7 @@ export default class TradeBox extends Component {
               {this.props.data.tg_enabled ?
               <Typography color='primary' component="h6" variant="h6" align="center"> Telegram enabled</Typography>
               :
-              <Button color="primary" component="a" target="_blank" href={"https://t.me/"+this.props.data.tg_bot_name+'?start='+this.props.data.tg_token}>
+              <Button color="primary" onClick={this.handleClickOpenTelegramDialog}>
                 <SendIcon/>Enable Telegram Notifications
               </Button>
               }