From 6820a245b5d6f27c35494ec03037e80e5b640ea8 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Fri, 22 Nov 2019 20:13:58 -0330
Subject: [PATCH] Convert InputNumber component to use JSX (#7503)

---
 ui/app/components/app/input-number.js | 57 ++++++++++++++-------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/ui/app/components/app/input-number.js b/ui/app/components/app/input-number.js
index ed678755f..d511dd0d6 100644
--- a/ui/app/components/app/input-number.js
+++ b/ui/app/components/app/input-number.js
@@ -1,5 +1,5 @@
+import React from 'react'
 const Component = require('react').Component
-const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const {
   addCurrencies,
@@ -52,32 +52,35 @@ InputNumber.prototype.setValue = function (newValue) {
   }
 }
 
-InputNumber.prototype.render = function () {
+InputNumber.prototype.render = function InputNumber () {
   const { unitLabel, step = 1, placeholder, value } = this.props
 
-  return h('div.customize-gas-input-wrapper', {}, [
-    h('input', {
-      className: 'customize-gas-input',
-      value,
-      placeholder,
-      type: 'number',
-      onChange: e => {
-        this.setValue(e.target.value)
-      },
-      min: 0,
-    }),
-    h('span.gas-tooltip-input-detail', {}, [unitLabel]),
-    h('div.gas-tooltip-input-arrows', {}, [
-      h('div.gas-tooltip-input-arrow-wrapper', {
-        onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })),
-      }, [
-        h('i.fa.fa-angle-up'),
-      ]),
-      h('div.gas-tooltip-input-arrow-wrapper', {
-        onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })),
-      }, [
-        h('i.fa.fa-angle-down'),
-      ]),
-    ]),
-  ])
+  return (
+    <div className="customize-gas-input-wrapper">
+      <input
+        className="customize-gas-input"
+        value={value}
+        placeholder={placeholder}
+        type="number"
+        onChange={e => {
+          this.setValue(e.target.value)
+        }}
+        min={0}
+      />
+      <span className="gas-tooltip-input-detail">{unitLabel}</span>
+      <div className="gas-tooltip-input-arrows">
+        <div className="gas-tooltip-input-arrow-wrapper"
+          onClick={() => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' }))}
+        >
+          <i className="fa fa-angle-up" />
+        </div>
+        <div
+          className="gas-tooltip-input-arrow-wrapper"
+          onClick={() => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' }))}
+        >
+          <i className="fa fa-angle-down" />
+        </div>
+      </div>
+    </div>
+  )
 }