Add HexToDecimal component

4 files changed, 48 insertions, 161 deletions

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 (
+      <div className={className}>
+        { decimalValue }
+      </div>
+    )
+  }
+}
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(<HexToDecimal
+      value="0x3039"
+      className="hex-to-decimal"
+    />)
+
+    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(<HexToDecimal
+      value="1A85"
+      className="hex-to-decimal"
+    />)
+
+    assert.ok(wrapper.hasClass('hex-to-decimal'))
+    assert.equal(wrapper.text(), '6789')
+  })
+})