m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Convert QrCodeView to use JSX (#7504)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-23 00:10:35 -03:30 committed by GitHub
parent 7d097dedaf
commit c775a842d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
ui/app/components/ui/qr-code.js
View File

@ -1,7 +1,6 @@
const Component = require('react').Component import PropTypes from 'prop-types'
const h = require('react-hyperscript') import React from 'react'
const qrCode = require('qrcode-generator') const qrCode = require('qrcode-generator')
const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
const { isHexPrefixed } = require('ethereumjs-util') const { isHexPrefixed } = require('ethereumjs-util')
const ReadOnlyInput = require('./readonly-input') const ReadOnlyInput = require('./readonly-input')
@ -17,47 +16,60 @@ function mapStateToProps (state) {
} }
} }
inherits(QrCodeView, Component) function QrCodeView (props) {
const { message, data } = props.Qr
function QrCodeView () { const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${checksumAddress(data)}`
Component.call(this)
}
QrCodeView.prototype.render = function () {
const props = this.props
const { message, data, network } = props.Qr
const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${checksumAddress(data, network)}`
const qrImage = qrCode(4, 'M') const qrImage = qrCode(4, 'M')
qrImage.addData(address) qrImage.addData(address)
qrImage.make() qrImage.make()
return h('.div.flex-column.flex-center', [ return (
<div className="div flex-column flex-center">
{
Array.isArray(message) Array.isArray(message)
? h('.message-container', this.renderMultiMessage()) ? (
: message && h('.qr-header', message), <div className="message-container">
{props.Qr.message.map((message, index) => (
this.props.warning ? this.props.warning && h('span.error.flex-center', { <div className="qr-message" key={index}>
style: { {message}
}, </div>
}, ))}
this.props.warning) : null, </div>
)
h('.div.qr-wrapper', { : message && (
style: {}, <div className="qr-header">
dangerouslySetInnerHTML: { {message}
</div>
)
}
{
props.warning
? (props.warning && (
<span className="error flex-center">
{props.warning}
</span>
))
: null
}
<div
className="div qr-wrapper"
dangerouslySetInnerHTML={{
__html: qrImage.createTableTag(4), __html: qrImage.createTableTag(4),
}, }}
}), />
h(ReadOnlyInput, { <ReadOnlyInput
wrapperClass: 'ellip-address-wrapper', wrapperClass="ellip-address-wrapper"
inputClass: 'qr-ellip-address', inputClass="qr-ellip-address"
value: checksumAddress(data, network), value={checksumAddress(data)}
}), />
]) </div>
)
} }
QrCodeView.prototype.renderMultiMessage = function () { QrCodeView.propTypes = {
var Qr = this.props.Qr warning: PropTypes.node,
var multiMessage = Qr.message.map((message) => h('.qr-message', message)) Qr: PropTypes.shape({
return multiMessage message: PropTypes.array,
data: PropTypes.string.isRequired,
}).isRequired,
} }