1 files changed, 76 insertions, 0 deletions
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
new file mode 100644
index 000000000..523c1264b
--- /dev/null
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -0,0 +1,76 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const extend = require('xtend')
+
+module.exports = HexAsDecimalInput
+
+inherits(HexAsDecimalInput, Component)
+function HexAsDecimalInput () {
+  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 { value, onChange } = props
+  const toEth = props.toEth
+  const suffix = props.suffix
+  const decimalValue = decimalize(value, toEth)
+  const style = props.style
+
+  return (
+    h('.flex-row', {
+      style: {
+        alignItems: 'flex-end',
+        lineHeight: '13px',
+        fontFamily: 'Montserrat Light',
+        textRendering: 'geometricPrecision',
+      },
+    }, [
+      h('input.ether-balance.ether-balance-amount', {
+        style: extend({
+          display: 'block',
+          textAlign: 'right',
+          backgroundColor: 'transparent',
+          border: '1px solid #bdbdbd',
+        }, style),
+        value: decimalValue,
+        onChange: (event) => {
+          const hexString = hexify(event.target.value)
+          onChange(hexString)
+        },
+      }),
+      h('div', {
+        style: {
+          color: ' #AEAEAE',
+          fontSize: '12px',
+          marginLeft: '5px',
+          marginRight: '6px',
+          width: '20px',
+        },
+      }, suffix),
+    ])
+  )
+}
+
+function hexify (decimalString) {
+  const hexBN = new BN(decimalString, 10)
+  return '0x' + hexBN.toString('hex')
+}
+
+function decimalize (input, toEth) {
+  const strippedInput = ethUtil.stripHexPrefix(input)
+  const inputBN = new BN(strippedInput, 'hex')
+  return inputBN.toString(10)
+}