From 89c74ac4adf7d064e144594537d8e8ee5a0f8082 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Fri, 27 Jul 2018 19:43:07 -0230 Subject: [PATCH] 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 | 86 ++++++++++++++++++++++++ old-ui/app/app.js | 31 ++------- old-ui/app/components/qr-code.js | 79 ---------------------- old-ui/app/components/shapeshift-form.js | 4 +- 4 files changed, 92 insertions(+), 108 deletions(-) create mode 100644 old-ui/app/account-qr.js delete mode 100644 old-ui/app/components/qr-code.js diff --git a/old-ui/app/account-qr.js b/old-ui/app/account-qr.js new file mode 100644 index 000000000..b41cc5112 --- /dev/null +++ b/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) diff --git a/old-ui/app/app.js b/old-ui/app/app.js index 7f25cadbb..d3e9e823b 100644 --- a/old-ui/app/app.js +++ b/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', { - style: { - position: 'absolute', - 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'}), - ]), - ]) + return h(AccountQrScreen, { + key: 'account-qr', + selectedAddress: props.selectedAddress, + }) default: log.debug('rendering default, account detail screen') diff --git a/old-ui/app/components/qr-code.js b/old-ui/app/components/qr-code.js deleted file mode 100644 index 06b9aed9b..000000000 --- a/old-ui/app/components/qr-code.js +++ /dev/null @@ -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 -} diff --git a/old-ui/app/components/shapeshift-form.js b/old-ui/app/components/shapeshift-form.js index 97068db0a..14de309ab 100644 --- a/old-ui/app/components/shapeshift-form.js +++ b/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 () {