Rewrite AccountQrScreen to use flexbox

The old QR screen was absolutely positioning everything which broke when
the app bar resized for the new UI announcement. This change, while futile*,
makes the QR screen less bad.

* futile because the old UI is being deprecated

old-ui/app/account-qr.js

@@ -0,0 +1,86 @@
+const PropTypes = require('prop-types')
+const {PureComponent} = require('react')
+const h = require('react-hyperscript')
+const {qrcode: qrCode} = require('qrcode-npm')
+const {connect} = require('react-redux')
+const {isHexPrefixed} = require('ethereumjs-util')
+const actions = require('../../ui/app/actions')
+const CopyButton = require('./components/copyButton')
+
+class AccountQrScreen extends PureComponent {
+  static defaultProps = {
+    warning: null,
+  }
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    buyView: PropTypes.any.isRequired,
+    Qr: PropTypes.object.isRequired,
+    selectedAddress: PropTypes.string.isRequired,
+    warning: PropTypes.node,
+  }
+
+  render () {
+    const {dispatch, Qr, selectedAddress, warning} = this.props
+    const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}`
+    const qrImage = qrCode(4, 'M')
+
+    qrImage.addData(address)
+    qrImage.make()
+
+    return h('div.flex-column.full-width', {
+      style: {
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        padding: '50px',
+      },
+    }, [
+      h('div.flex-row.full-width', {
+        style: {
+          alignItems: 'flex-start',
+        },
+      }, [
+        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
+          onClick () {
+            dispatch(actions.backToAccountDetail(selectedAddress))
+          },
+        }),
+      ]),
+      h('div.qr-header', Qr.message),
+      warning && h('span.error.flex-center', {
+        style: {
+          textAlign: 'center',
+          width: '229px',
+          height: '82px',
+        },
+      }, [
+        this.props.warning,
+      ]),
+      h('div#qr-container.flex-column', {
+        style: {
+          marginTop: '25px',
+          marginBottom: '15px',
+        },
+        dangerouslySetInnerHTML: {
+          __html: qrImage.createTableTag(4),
+        },
+      }),
+      h('div.flex-row.full-width', [
+        h('h3.ellip-address.grow-tenx', Qr.data),
+        h(CopyButton, {
+          value: Qr.data,
+        }),
+      ]),
+    ])
+  }
+}
+
+function mapStateToProps (state) {
+  return {
+    Qr: state.appState.Qr,
+    buyView: state.appState.buyView,
+    warning: state.appState.warning,
+  }
+}
+
+module.exports = connect(mapStateToProps)(AccountQrScreen)

old-ui/app/app.js

@@ -14,6 +14,7 @@ const NewKeyChainScreen = require('./new-keychain')
 const UnlockScreen = require('./unlock')
 // accounts
 const AccountDetailScreen = require('./account-detail')
+const AccountQrScreen = require('./account-qr')
 const SendTransactionScreen = require('./send')
 const ConfirmTxScreen = require('./conf-tx')
 // notice
@@ -28,7 +29,6 @@ const NewUiAnnouncement = require('./new-ui-annoucement')
 const AppBar = require('./components/app-bar')
 const Loading = require('./components/loading')
 const BuyView = require('./components/buy-button-subview')
-const QrView = require('./components/qr-code')
 const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
 const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
 const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
@@ -262,31 +262,10 @@ App.prototype.renderPrimary = function () {
 
     case 'qr':
       log.debug('rendering show qr screen')
-      return h('div', {
+      return h(AccountQrScreen, {
-        style: {
+        key: 'account-qr',
-          position: 'absolute',
+        selectedAddress: props.selectedAddress,
-          height: '100%',
+      })
-          top: '0px',
-          left: '0px',
-        },
-      }, [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
-          onClick: () => props.dispatch(actions.backToAccountDetail(props.selectedAddress)),
-          style: {
-            marginLeft: '10px',
-            marginTop: '50px',
-          },
-        }),
-        h('div', {
-          style: {
-            position: 'absolute',
-            left: '44px',
-            width: '285px',
-          },
-        }, [
-          h(QrView, {key: 'qr'}),
-        ]),
-      ])
 
     default:
       log.debug('rendering default, account detail screen')

old-ui/app/components/qr-code.js

@@ -1,79 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const qrCode = require('qrcode-npm').qrcode
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const isHexPrefixed = require('ethereumjs-util').isHexPrefixed
-const CopyButton = require('./copyButton')
-
-module.exports = connect(mapStateToProps)(QrCodeView)
-
-function mapStateToProps (state) {
-  return {
-    Qr: state.appState.Qr,
-    buyView: state.appState.buyView,
-    warning: state.appState.warning,
-  }
-}
-
-inherits(QrCodeView, Component)
-
-function QrCodeView () {
-  Component.call(this)
-}
-
-QrCodeView.prototype.render = function () {
-  const props = this.props
-  const Qr = props.Qr
-  const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}`
-  const qrImage = qrCode(4, 'M')
-  qrImage.addData(address)
-  qrImage.make()
-  return h('.main-container.flex-column', {
-    key: 'qr',
-    style: {
-      justifyContent: 'center',
-      paddingBottom: '45px',
-      paddingLeft: '45px',
-      paddingRight: '45px',
-      alignItems: 'center',
-    },
-  }, [
-    Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message),
-
-    this.props.warning ? this.props.warning && h('span.error.flex-center', {
-      style: {
-        textAlign: 'center',
-        width: '229px',
-        height: '82px',
-      },
-    },
-    this.props.warning) : null,
-
-    h('#qr-container.flex-column', {
-      style: {
-        marginTop: '25px',
-        marginBottom: '15px',
-      },
-      dangerouslySetInnerHTML: {
-        __html: qrImage.createTableTag(4),
-      },
-    }),
-    h('.flex-row', [
-      h('h3.ellip-address', {
-        style: {
-          width: '247px',
-        },
-      }, Qr.data),
-      h(CopyButton, {
-        value: Qr.data,
-      }),
-    ]),
-  ])
-}
-
-QrCodeView.prototype.renderMultiMessage = function () {
-  var Qr = this.props.Qr
-  var multiMessage = Qr.message.map((message) => h('.qr-message', message))
-  return multiMessage
-}

old-ui/app/components/shapeshift-form.js

@@ -3,7 +3,6 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../../ui/app/actions')
-const Qr = require('./qr-code')
 const isValidAddress = require('../util').isValidAddress
 module.exports = connect(mapStateToProps)(ShapeshiftForm)
 
@@ -11,7 +10,6 @@ function mapStateToProps (state) {
   return {
     warning: state.appState.warning,
     isSubLoading: state.appState.isSubLoading,
-    qrRequested: state.appState.qrRequested,
   }
 }
 
@@ -23,7 +21,7 @@ function ShapeshiftForm () {
 }
 
 ShapeshiftForm.prototype.render = function () {
-  return this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain()
+  return this.renderMain()
 }
 
 ShapeshiftForm.prototype.renderMain = function () {