From 63ba6d1df4c98bd94f46e979bdffb38fe019aa51 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 31 Aug 2018 12:32:26 -0700 Subject: [PATCH] Add HexToDecimal component --- ui/app/components/hex-as-decimal-input.js | 161 ------------------ .../hex-to-decimal.component.js | 21 +++ ui/app/components/hex-to-decimal/index.js | 1 + .../tests/hex-to-decimal.component.test.js | 26 +++ 4 files changed, 48 insertions(+), 161 deletions(-) delete mode 100644 ui/app/components/hex-as-decimal-input.js create mode 100644 ui/app/components/hex-to-decimal/hex-to-decimal.component.js create mode 100644 ui/app/components/hex-to-decimal/index.js create mode 100644 ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js deleted file mode 100644 index 75303a34a..000000000 --- a/ui/app/components/hex-as-decimal-input.js +++ /dev/null @@ -1,161 +0,0 @@ -const Component = require('react').Component -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const inherits = require('util').inherits -const ethUtil = require('ethereumjs-util') -const BN = ethUtil.BN -const extend = require('xtend') -const connect = require('react-redux').connect - -HexAsDecimalInput.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect()(HexAsDecimalInput) - - -inherits(HexAsDecimalInput, Component) -function HexAsDecimalInput () { - this.state = { invalid: null } - Component.call(this) -} - -/* Hex as Decimal Input - * - * A component for allowing easy, decimal editing - * of a passed in hex string value. - * - * On change, calls back its `onChange` function parameter - * and passes it an updated hex string. - */ - -HexAsDecimalInput.prototype.render = function () { - const props = this.props - const state = this.state - - const { value, onChange, min, max } = props - - const toEth = props.toEth - const suffix = props.suffix - const decimalValue = decimalize(value, toEth) - const style = props.style - - return ( - h('.flex-column', [ - h('.flex-row', { - style: { - alignItems: 'flex-end', - lineHeight: '13px', - fontFamily: 'Montserrat Light', - textRendering: 'geometricPrecision', - }, - }, [ - h('input.hex-input', { - type: 'number', - required: true, - min: min, - max: max, - style: extend({ - display: 'block', - textAlign: 'right', - backgroundColor: 'transparent', - border: '1px solid #bdbdbd', - - }, style), - value: parseInt(decimalValue), - onBlur: (event) => { - this.updateValidity(event) - }, - onChange: (event) => { - this.updateValidity(event) - const hexString = (event.target.value === '') ? '' : hexify(event.target.value) - onChange(hexString) - }, - onInvalid: (event) => { - const msg = this.constructWarning() - if (msg === state.invalid) { - return - } - this.setState({ invalid: msg }) - event.preventDefault() - return false - }, - }), - h('div', { - style: { - color: ' #AEAEAE', - fontSize: '12px', - marginLeft: '5px', - marginRight: '6px', - width: '20px', - }, - }, suffix), - ]), - - state.invalid ? h('span.error', { - style: { - position: 'absolute', - right: '0px', - textAlign: 'right', - transform: 'translateY(26px)', - padding: '3px', - background: 'rgba(255,255,255,0.85)', - zIndex: '1', - textTransform: 'capitalize', - border: '2px solid #E20202', - }, - }, state.invalid) : null, - ]) - ) -} - -HexAsDecimalInput.prototype.setValid = function (message) { - this.setState({ invalid: null }) -} - -HexAsDecimalInput.prototype.updateValidity = function (event) { - const target = event.target - const value = this.props.value - const newValue = target.value - - if (value === newValue) { - return - } - - const valid = target.checkValidity() - if (valid) { - this.setState({ invalid: null }) - } -} - -HexAsDecimalInput.prototype.constructWarning = function () { - const { name, min, max } = this.props - let message = name ? name + ' ' : '' - - if (min && max) { - message += this.context.t('betweenMinAndMax', [min, max]) - } else if (min) { - message += this.context.t('greaterThanMin', [min]) - } else if (max) { - message += this.context.t('lessThanMax', [max]) - } else { - message += this.context.t('invalidInput') - } - - return message -} - -function hexify (decimalString) { - const hexBN = new BN(parseInt(decimalString), 10) - return '0x' + hexBN.toString('hex') -} - -function decimalize (input, toEth) { - if (input === '') { - return '' - } else { - const strippedInput = ethUtil.stripHexPrefix(input) - const inputBN = new BN(strippedInput, 'hex') - return inputBN.toString(10) - } -} diff --git a/ui/app/components/hex-to-decimal/hex-to-decimal.component.js b/ui/app/components/hex-to-decimal/hex-to-decimal.component.js new file mode 100644 index 000000000..6847a6919 --- /dev/null +++ b/ui/app/components/hex-to-decimal/hex-to-decimal.component.js @@ -0,0 +1,21 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import { hexToDecimal } from '../../helpers/conversions.util' + +export default class HexToDecimal extends PureComponent { + static propTypes = { + className: PropTypes.string, + value: PropTypes.string, + } + + render () { + const { className, value } = this.props + const decimalValue = hexToDecimal(value) + + return ( +
+ { decimalValue } +
+ ) + } +} diff --git a/ui/app/components/hex-to-decimal/index.js b/ui/app/components/hex-to-decimal/index.js new file mode 100644 index 000000000..6e8567ca9 --- /dev/null +++ b/ui/app/components/hex-to-decimal/index.js @@ -0,0 +1 @@ +export { default } from './hex-to-decimal.component' diff --git a/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js b/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js new file mode 100644 index 000000000..c98da9ad4 --- /dev/null +++ b/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js @@ -0,0 +1,26 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import HexToDecimal from '../hex-to-decimal.component' + +describe('HexToDecimal Component', () => { + it('should render a prefixed hex as a decimal with a className', () => { + const wrapper = shallow() + + assert.ok(wrapper.hasClass('hex-to-decimal')) + assert.equal(wrapper.text(), '12345') + }) + + it('should render an unprefixed hex as a decimal with a className', () => { + const wrapper = shallow() + + assert.ok(wrapper.hasClass('hex-to-decimal')) + assert.equal(wrapper.text(), '6789') + }) +})