Refactor tooltip to remove external lib; tooltip now updating gas fee in parent.

ui/app/components/gas-tooltip.js

@@ -0,0 +1,79 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const InputNumber = require('./input-number.js')
+
+module.exports = GasTooltip
+
+inherits(GasTooltip, Component)
+function GasTooltip () {
+  Component.call(this)
+  this.state = {
+    gasLimit: 0,
+    gasPrice: 0,
+  }
+
+  this.updateGasPrice = this.updateGasPrice.bind(this);
+  this.updateGasLimit = this.updateGasLimit.bind(this);
+}
+
+GasTooltip.prototype.componentWillMount == function () {
+  const { gasPrice = 0, gasLimit = 0 } = this.props
+
+  this.setState({ gasPrice, gasLimit });
+}
+
+GasTooltip.prototype.updateGasPrice = function (newPrice) {
+  const { onFeeChange } = this.props
+  const { gasLimit } = this.state
+
+  this.setState({ gasPrice: newPrice })
+  onFeeChange({ gasLimit, gasPrice: newPrice })
+}
+
+GasTooltip.prototype.updateGasLimit = function (newLimit) {
+  const { onFeeChange } = this.props
+  const { gasPrice } = this.state
+
+  this.setState({ gasLimit: newLimit })
+  onFeeChange({ gasLimit: newLimit, gasPrice })
+}
+
+GasTooltip.prototype.render = function () {
+  const { position, title, children, className, isOpen } = this.props
+  const { gasPrice, gasLimit } = this.state
+  
+  return isOpen
+    ? h('div.customize-gas-tooltip-container', {}, [
+        h('div.customize-gas-tooltip', {}, [
+          h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
+          h('div.gas-tooltip-input-label', {}, [
+            h('span.gas-tooltip-label', {}, ['Gas Price']),
+            h('i.fa.fa-info-circle')
+          ]),
+          h(InputNumber, {
+            unitLabel: 'GWEI',
+            step: 0.0001,
+            min: 0.0000,
+            placeholder: '0.0000',
+            fixed: 4,
+            initValue: gasPrice,
+            onChange: (newPrice) => this.updateGasPrice(newPrice), 
+          }),
+          h('div.gas-tooltip-input-label', {}, [
+            h('span.gas-tooltip-label', {}, ['Gas Limit']),
+            h('i.fa.fa-info-circle')
+          ]),
+          h(InputNumber, {
+            unitLabel: 'UNITS',
+            step: 1,
+            min: 0,
+            placeholder: '0',
+            initValue: gasLimit,
+            onChange: (newLimit) => this.updateGasLimit(newLimit),  
+          }),
+        ]),
+        h('div.gas-tooltip-arrow', {}),
+      ])
+    : null
+}

ui/app/components/input-number.js

@@ -0,0 +1,57 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const findDOMNode = require('react-dom').findDOMNode
+
+module.exports = InputNumber
+
+inherits(InputNumber, Component)
+function InputNumber () {
+  Component.call(this)
+
+  this.state = {
+    value: 0,
+  }
+
+  this.setValue = this.setValue.bind(this);
+}
+
+InputNumber.prototype.componentWillMount == function () {
+  const { initValue = 0 } = this.props
+
+  this.setState({ value: initValue });
+}
+
+InputNumber.prototype.setValue = function (newValue) {
+  const { fixed, min, onChange } = this.props
+
+  if (fixed) newValue = Number(newValue.toFixed(4))
+
+  if (newValue >= min) {
+    this.setState({ value: newValue })
+    onChange(newValue)
+  }
+}
+
+InputNumber.prototype.render = function () {
+  const { unitLabel, step = 1, min, placeholder } = this.props
+  const { value } = this.state
+
+  return h('div.customize-gas-input-wrapper', {}, [
+    h('input.customize-gas-input', {
+      placeholder,
+      type: 'number',
+      value,
+      onChange: (e) => this.setValue(Number(e.target.value))
+    }),
+    h('span.gas-tooltip-input-detail', {}, [unitLabel]),
+    h('div.gas-tooltip-input-arrows', {}, [
+      h('i.fa.fa-angle-up', {
+        onClick: () => this.setValue(value + step)
+      }),
+      h('i.fa.fa-angle-down', {
+        onClick: () => this.setValue(value - step)
+      }),
+    ]),
+  ])
+}

ui/app/components/new-tooltip.js

@@ -1,66 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const findDOMNode = require('react-dom').findDOMNode
-const ReactTooltip = require('react-tooltip')
-
-module.exports = NewTooltip
-
-inherits(NewTooltip, Component)
-function NewTooltip () {
-  Component.call(this)
-  this.state = {
-    tooltipNode: null,
-    tooltipBase: null,
-  }
-
-  // this.pageClick = this.pageClick.bind(this)
-}
-
-// NewTooltip.prototype.pageClick = function (e) {
-//   // event.preventDefault();
-//   const tooltipNode = this.state.tooltipNode
-//   console.log(`e.target`, e.target);
-//   console.log(`tooltipNode.contains(e.target)`, tooltipNode.contains(e.target));
-// },
-
-NewTooltip.prototype.componentDidMount = function () {
-  const tooltipNode = findDOMNode(this);
-  const tooltipBase = findDOMNode(this.refs.tester)
-
-  this.setState({ tooltipBase, tooltipNode })
-}
-
-NewTooltip.prototype.componentDidUpdate = function () {
-  const { show } = this.props
-  const tooltipBase = this.state.tooltipBase
-  const tooltipNode = this.state.tooltipNode
-  
-  if (show) {
-    ReactTooltip.show(tooltipBase)
-  }
-  else {
-    ReactTooltip.hide(tooltipBase)
-  } 
-}
-
-NewTooltip.prototype.render = function () {
-  const props = this.props
-  const { position, title, children } = props
-
-  return h('div', {}, [
-    h('div', {
-      'data-tip': 'test',
-      'data-for': 'something',
-      'ref': 'tester',
-    }),
-    h(ReactTooltip, {
-      place: position || 'top',
-      effect: 'solid',
-      id: 'something',
-      className: 'send-tooltip',
-      type: 'light',
-    }, children),
-  ])
-    
-}

ui/app/css/itcss/components/send.scss

@@ -82,13 +82,100 @@
   cursor: pointer;
 }
 
-div.__react_component_tooltip.send-tooltip {
+.customize-gas-tooltip-container {
-  left: 177px;
+  position: absolute;
-  top: 50px;
+  left: 76px;
+  bottom: 50px;
   width: 237px;
   height: 307px;
   background-color: white;
   opacity: 1;
   box-shadow: grey 0px 0px 5px;
   z-index: 1050;
+  padding: 13px 19px;
+  font-size: 16px;
+  border-radius: 4px;
+  font-family: 'Montserrat Regular';
+}
+
+.gas-tooltip-arrow {
+  height: 25px;
+  width: 25px;
+  z-index: 1200;
+  background: white;
+  position: absolute;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  left: 107px;
+  top: 294px;
+  -webkit-box-shadow: 0 0 5px grey;
+  box-shadow: 2px 2px 2px $alto;
+}
+
+.customize-gas-tooltip-container input[type=number]::-webkit-inner-spin-button { 
+    -webkit-appearance: none;
+    display:none;
+}
+
+.customize-gas-tooltip-container input[type=number]:hover::-webkit-inner-spin-button { 
+    -webkit-appearance: none;
+    display:none;
+}  
+
+.customize-gas-tooltip {
+  position: relative;
+}
+
+.gas-tooltip-label {
+  font-size: 16px;
+  color: $tundora;
+}
+
+.gas-tooltip-header {
+  padding-bottom: 12px;
+}
+
+.gas-tooltip-input-label {
+  margin-bottom: 5px;
+}
+
+.gas-tooltip-input-label i {
+  color: $silver-chalice;
+  margin-left: 6px;
+}
+
+.customize-gas-input {
+  width: 178px;
+  height: 28px;
+  border: 1px solid $alto;
+  font-size: 16px;
+  color: $nile-blue;
+  padding-left: 8px;
+}
+
+.customize-gas-input-wrapper {
+  position: relative;
+}
+
+.gas-tooltip-input-detail {
+  position: absolute;
+  top: 4px;
+  right: 26px;
+  font-size: 12px;
+  color: $silver-chalice;
+}
+
+.gas-tooltip-input-arrows {
+  position: absolute;
+  top: 0px;
+  left: 178px;
+  width: 17px;
+  height: 28px;
+  border: 1px solid #dadada;
+  border-left: 0px;
+  display: flex;
+  flex-direction: column;
+  color: #9b9b9b;
+  font-size: 0.8em;
+  padding: 1px 4px;
 }

ui/app/send.js

@@ -11,7 +11,7 @@ const isHex = require('./util').isHex
 const EthBalance = require('./components/eth-balance')
 const EnsInput = require('./components/ens-input')
 const ethUtil = require('ethereumjs-util')
-const NewTooltip = require('./components/new-tooltip.js')
+const GasTooltip = require('./components/gas-tooltip.js')
 const { getSelectedIdentity } = require('./selectors')
 
 const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
@@ -54,6 +54,7 @@ function SendTransactionScreen () {
       amount: '0.0001', // see L544
       gasPrice: '4a817c800',
       gas: '0x7b0d',
+      gasFee: 0,
       txData: null,
       memo: '',
     },
@@ -216,6 +217,7 @@ SendTransactionScreen.prototype.render = function () {
 
           h('input.large-input.send-screen-gas-input', {
             placeholder: '0',
+            value: this.state.newTx.gasFee
           }, []),
 
           h('div.send-screen-gas-input-customize', {
@@ -224,8 +226,19 @@ SendTransactionScreen.prototype.render = function () {
             'Customize'
           ]),
 
-          h(NewTooltip, {
+          h(GasTooltip, {
-            show: this.state.tooltipShown,
+            isOpen: this.state.tooltipShown,
+            className: 'send-tooltip',
+            onFeeChange: ({gasLimit, gasPrice}) => {
+              this.setState({
+                newTx: Object.assign(
+                  this.state.newTx,
+                  {
+                    gasFee: ((gasLimit * gasPrice) / 1000000000).toFixed(10),
+                  }
+                ),
+              })
+            }
           }),
 
         ]),