ReadOnlyInput component.

ui/app/components/qr-code.js

@@ -4,6 +4,7 @@ const qrCode = require('qrcode-npm').qrcode
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const isHexPrefixed = require('ethereumjs-util').isHexPrefixed
+const ReadOnlyInput = require('./readonly-input')
 
 module.exports = connect(mapStateToProps)(QrCodeView)
 
@@ -46,18 +47,11 @@ QrCodeView.prototype.render = function () {
         __html: qrImage.createTableTag(4),
       },
     }),
-    h('.div.ellip-address-wrapper', [
+    h(ReadOnlyInput, {
-      h('input.qr-ellip-address', {
+      wrapperClass: 'ellip-address-wrapper',
-        style: {
+      inputClass: 'qr-ellip-address',
-          width: '247px',
+      value: Qr.data,
-        },
+    }),
-        value: Qr.data,
-        readOnly: true,
-      }),
-      // h(CopyButton, {
-      //   value: Qr.data,
-      // }),
-    ]),
   ])
 }
 

ui/app/components/readonly-input.js

@@ -0,0 +1,27 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = ReadOnlyInput
+
+inherits(ReadOnlyInput, Component)
+function ReadOnlyInput () {
+  Component.call(this)
+}
+
+ReadOnlyInput.prototype.render = function () {
+  const {
+    wrapperClass,
+    inputClass,
+    value,
+  } = this.props
+
+  return h('div', {className: wrapperClass}, [
+    h('input', {
+      className: inputClass,
+      value,
+      readOnly: true,
+    }),
+  ])
+}
+

ui/app/css/itcss/components/modal.scss

@@ -234,7 +234,7 @@
 }
 
 .account-modal-container .qr-ellip-address {
-  width: 254px;
+  width: 247px;
   border: none;
   font-family: 'Montserrat Light';
   font-size: 14px;