Fix hold reverse swaps (#230)

Fix hold reverse swaps

Author: michael1011

src/components/inputarea/index.js

@@ -110,15 +110,24 @@ class InputArea extends React.Component {
 
   render() {
     const {
-      classes,
-      autoFocus,
-      height,
+      value,
       width,
+      height,
+      classes,
       onChange,
+      autoFocus,
       placeholder,
       showQrScanner,
     } = this.props;
 
+    if (this.state.value !== value) {
+      this.previousValueProp = value;
+
+      this.setState({
+        value: value,
+      });
+    }
+
     return (
       <div className={classes.formGroup}>
         <ReactNotification ref={this.notificationDom} />
@@ -172,6 +181,7 @@ InputArea.propTypes = {
   width: PropTypes.number.isRequired,
   onChange: PropTypes.func.isRequired,
   error: PropTypes.bool.isRequired,
+  value: PropTypes.string,
   autoFocus: PropTypes.bool,
   placeholder: PropTypes.string,
   showQrScanner: PropTypes.bool,

src/components/qrcode/index.js

@@ -3,13 +3,13 @@ import Qrious from 'qrious';
 import PropTypes from 'prop-types';
 
 class QrCode extends React.Component {
-  render() {
-    const { size, link } = this.props;
-
-    if (link) {
-      this.id = `qr-${link.substring(0, 4)}`;
+  id = '';
 
+  drawQrCode = () => {
+    if (this.id !== '') {
+      const { size, link } = this.props;
       const element = document.getElementById(this.id);
+
       this.qr = new Qrious({
         element,
       });
@@ -24,8 +24,26 @@ class QrCode extends React.Component {
         foregroundAlpha: 1,
       });
     }
+  };
+
+  componentDidUpdate() {
+    this.drawQrCode();
+  }
 
-    return <canvas id={this.id} />;
+  componentDidMount() {
+    this.drawQrCode();
+  }
+
+  render() {
+    const { link } = this.props;
+
+    if (link) {
+      this.id = `qr-${link.substring(0, 4)}`;
+
+      return <canvas id={this.id} />;
+    } else {
+      return <div />;
+    }
   }
 }
 

src/views/reverse/steps/payInvoice.js

@@ -81,17 +81,21 @@ class PayInvoice extends React.Component {
 
     return (
       <View className={classes.wrapper}>
-        <View className={classes.qrcode}>
-          <DetectResize>
-            {width =>
-              width <= 375 ? (
-                <QrCode size={200} link={swapResponse.invoice} />
-              ) : (
-                <QrCode size={300} link={swapResponse.invoice} />
-              )
-            }
-          </DetectResize>
-        </View>
+        {window.innerWidth < 768 ? (
+          <div />
+        ) : (
+          <View className={classes.qrcode}>
+            <DetectResize>
+              {width =>
+                width <= 375 ? (
+                  <QrCode size={200} link={swapResponse.invoice} />
+                ) : (
+                  <QrCode size={300} link={swapResponse.invoice} />
+                )
+              }
+            </DetectResize>
+          </View>
+        )}
         <View className={classes.info}>
           <p className={classes.title}>
             Pay this {swapInfo.base} Lightning invoice: