From 53b8d18a5f649c73a58a96e36a9458903d8af6aa Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Tue, 16 May 2017 15:30:22 -0700
Subject: Complete transition into BN.

---
 ui/app/components/bn-as-decimal-input.js | 143 +++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 ui/app/components/bn-as-decimal-input.js

(limited to 'ui/app/components/bn-as-decimal-input.js')

diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
new file mode 100644
index 000000000..6c2132ca1
--- /dev/null
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -0,0 +1,143 @@
+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 = BnAsDecimalInput
+
+inherits(BnAsDecimalInput, Component)
+function BnAsDecimalInput () {
+  this.state = { invalid: null }
+  Component.call(this)
+}
+
+/* Bn 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.
+ */
+
+BnAsDecimalInput.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+
+  const { value, precision, onChange, min, max } = props
+
+  const suffix = props.suffix
+  const style = props.style
+  const newValue = value.toNumber(10) / scale
+  const scale = Math.pow(10, precision)
+
+  return (
+    h('.flex-column', [
+      h('.flex-row', {
+        style: {
+          alignItems: 'flex-end',
+          lineHeight: '13px',
+          fontFamily: 'Montserrat Light',
+          textRendering: 'geometricPrecision',
+        },
+      }, [
+        h('input.hex-input', {
+          type: 'number',
+          step: 'any',
+          required: true,
+          min: min,
+          max: max,
+          style: extend({
+            display: 'block',
+            textAlign: 'right',
+            backgroundColor: 'transparent',
+            border: '1px solid #bdbdbd',
+
+          }, style),
+          value: newValue,
+          onBlur: (event) => {
+            this.updateValidity(event)
+          },
+          onChange: (event) => {
+            this.updateValidity(event)
+            const value = (event.target.value === '') ? '' : event.target.value
+            const scaledNumber = Math.floor(scale * value)
+            const precisionBN = new BN(scaledNumber, 10)
+            onChange(precisionBN)
+          },
+          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,
+    ])
+  )
+}
+
+BnAsDecimalInput.prototype.setValid = function (message) {
+  this.setState({ invalid: null })
+}
+
+BnAsDecimalInput.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 })
+  }
+}
+
+BnAsDecimalInput.prototype.constructWarning = function () {
+  const { name, min, max } = this.props
+  let message = name ? name + ' ' : ''
+
+  if (min && max) {
+    message += `must be greater than or equal to  ${min} and less than or equal to ${max}.`
+  } else if (min) {
+    message += `must be greater than or equal to ${min}.`
+  } else if (max) {
+    message += `must be less than or equal to ${max}.`
+  } else {
+    message += 'Invalid input.'
+  }
+
+  return message
+}
-- 
cgit v1.2.3


From d8130f1effc31a866476e10153bd854709ae23be Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Tue, 16 May 2017 16:20:58 -0700
Subject: Fix reset button.

---
 ui/app/components/bn-as-decimal-input.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/bn-as-decimal-input.js')

diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index 6c2132ca1..d0eebe09e 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -16,10 +16,10 @@ function BnAsDecimalInput () {
 /* Bn as Decimal Input
  *
  * A component for allowing easy, decimal editing
- * of a passed in hex string value.
+ * of a passed in bn string value.
  *
  * On change, calls back its `onChange` function parameter
- * and passes it an updated hex string.
+ * and passes it an updated bn string.
  */
 
 BnAsDecimalInput.prototype.render = function () {
@@ -30,8 +30,8 @@ BnAsDecimalInput.prototype.render = function () {
 
   const suffix = props.suffix
   const style = props.style
-  const newValue = value.toNumber(10) / scale
   const scale = Math.pow(10, precision)
+  const newValue = value.toNumber(10) / scale
 
   return (
     h('.flex-column', [
-- 
cgit v1.2.3


From 959038132a6780f1dd7a4db3696d3fdbaad83b88 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Tue, 23 May 2017 10:43:37 -0700
Subject: Increase accuracy of our rounding schemes.

---
 ui/app/components/bn-as-decimal-input.js | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/bn-as-decimal-input.js')

diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index d0eebe09e..fbe36abfb 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -30,8 +30,8 @@ BnAsDecimalInput.prototype.render = function () {
 
   const suffix = props.suffix
   const style = props.style
-  const scale = Math.pow(10, precision)
-  const newValue = value.toNumber(10) / scale
+  const valueString = value.toString(10)
+  const newValue = downsize(valueString, precision, precision)
 
   return (
     h('.flex-column', [
@@ -63,7 +63,9 @@ BnAsDecimalInput.prototype.render = function () {
           onChange: (event) => {
             this.updateValidity(event)
             const value = (event.target.value === '') ? '' : event.target.value
-            const scaledNumber = Math.floor(scale * value)
+
+
+            const scaledNumber = upsize(value, precision, precision)
             const precisionBN = new BN(scaledNumber, 10)
             onChange(precisionBN)
           },
@@ -141,3 +143,24 @@ BnAsDecimalInput.prototype.constructWarning = function () {
 
   return message
 }
+
+
+function downsize (number, scale, precision) {
+  if (scale === 0) {
+    return Number(number)
+  } else {
+    var decimals = (scale === precision) ? -1 : scale - precision
+    return Number(number.slice(0, -scale) + '.' + number.slice(-scale, decimals))
+  }
+}
+
+function upsize (number, scale, precision) {
+  var string = number.toString()
+  var stringArray = string.split('.')
+  var decimalLength = stringArray[1] ? stringArray[1].length : 0
+  var newString = ((scale === 0) || (decimalLength === 0)) ? stringArray[0] : stringArray[0] + stringArray[1].slice(0, precision)
+  for (var i = decimalLength; i < scale; i++) {
+    newString += '0'
+  }
+  return newString
+}
-- 
cgit v1.2.3


From 31d17c9e25458cd47f8c18ec3b967aecff236ba6 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Tue, 23 May 2017 14:26:37 -0700
Subject: Fix test, create new value for precision/scale

---
 ui/app/components/bn-as-decimal-input.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/bn-as-decimal-input.js')

diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index fbe36abfb..8f56f29ab 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -26,12 +26,12 @@ BnAsDecimalInput.prototype.render = function () {
   const props = this.props
   const state = this.state
 
-  const { value, precision, onChange, min, max } = props
+  const { value, scale, precision, onChange, min, max } = props
 
   const suffix = props.suffix
   const style = props.style
   const valueString = value.toString(10)
-  const newValue = downsize(valueString, precision, precision)
+  const newValue = downsize(valueString, scale, precision)
 
   return (
     h('.flex-column', [
@@ -65,7 +65,7 @@ BnAsDecimalInput.prototype.render = function () {
             const value = (event.target.value === '') ? '' : event.target.value
 
 
-            const scaledNumber = upsize(value, precision, precision)
+            const scaledNumber = upsize(value, scale, precision)
             const precisionBN = new BN(scaledNumber, 10)
             onChange(precisionBN)
           },
-- 
cgit v1.2.3


From 60281f72506c6b1775e75e8426a09d91893ab6ac Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Wed, 24 May 2017 09:55:16 -0700
Subject: Cleanup code.

---
 ui/app/components/bn-as-decimal-input.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/bn-as-decimal-input.js')

diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index 8f56f29ab..de01f8b5f 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -31,7 +31,7 @@ BnAsDecimalInput.prototype.render = function () {
   const suffix = props.suffix
   const style = props.style
   const valueString = value.toString(10)
-  const newValue = downsize(valueString, scale, precision)
+  const newValue = this.downsize(valueString, scale, precision)
 
   return (
     h('.flex-column', [
@@ -65,7 +65,7 @@ BnAsDecimalInput.prototype.render = function () {
             const value = (event.target.value === '') ? '' : event.target.value
 
 
-            const scaledNumber = upsize(value, scale, precision)
+            const scaledNumber = this.upsize(value, scale, precision)
             const precisionBN = new BN(scaledNumber, 10)
             onChange(precisionBN)
           },
@@ -145,20 +145,28 @@ BnAsDecimalInput.prototype.constructWarning = function () {
 }
 
 
-function downsize (number, scale, precision) {
+BnAsDecimalInput.prototype.downsize = function (number, scale, precision) {
+  // if there is no scaling, simply return the number
   if (scale === 0) {
     return Number(number)
   } else {
+    // if the scale is the same as the precision, account for this edge case.
     var decimals = (scale === precision) ? -1 : scale - precision
     return Number(number.slice(0, -scale) + '.' + number.slice(-scale, decimals))
   }
 }
 
-function upsize (number, scale, precision) {
-  var string = number.toString()
-  var stringArray = string.split('.')
+BnAsDecimalInput.prototype.upsize = function (number, scale, precision) {
+  var stringArray = number.toString().split('.')
   var decimalLength = stringArray[1] ? stringArray[1].length : 0
-  var newString = ((scale === 0) || (decimalLength === 0)) ? stringArray[0] : stringArray[0] + stringArray[1].slice(0, precision)
+  var newString = stringArray[0]
+
+  // If there is scaling and decimal parts exist, integrate them in.
+  if ((scale !== 0) && (decimalLength !== 0)) {
+    newString += stringArray[1].slice(0, precision)
+  }
+
+  // Add 0s to account for the upscaling.
   for (var i = decimalLength; i < scale; i++) {
     newString += '0'
   }
-- 
cgit v1.2.3


From 10ca3b6467af2bea723e661160ba5cf2a41ab3b0 Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Wed, 24 May 2017 10:13:43 -0700
Subject: Fix bug where submit was enabled when invalid params were filled out.

---
 ui/app/components/bn-as-decimal-input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/bn-as-decimal-input.js')

diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index de01f8b5f..1d292ca2a 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -67,7 +67,7 @@ BnAsDecimalInput.prototype.render = function () {
 
             const scaledNumber = this.upsize(value, scale, precision)
             const precisionBN = new BN(scaledNumber, 10)
-            onChange(precisionBN)
+            onChange(precisionBN, event.target.checkValidity())
           },
           onInvalid: (event) => {
             const msg = this.constructWarning()
-- 
cgit v1.2.3


From 293d0b4a574e5b20662da244d54357138ac81d5b Mon Sep 17 00:00:00 2001
From: Kevin Serrano <kevin.serrano@consensys.net>
Date: Wed, 24 May 2017 11:02:26 -0700
Subject: Minor cleanup

---
 ui/app/components/bn-as-decimal-input.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/bn-as-decimal-input.js')

diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
index 1d292ca2a..f3ace4720 100644
--- a/ui/app/components/bn-as-decimal-input.js
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -47,8 +47,8 @@ BnAsDecimalInput.prototype.render = function () {
           type: 'number',
           step: 'any',
           required: true,
-          min: min,
-          max: max,
+          min,
+          max,
           style: extend({
             display: 'block',
             textAlign: 'right',
-- 
cgit v1.2.3