Adds amount and gas field to sendV2.

5 files changed, 186 insertions, 8 deletions

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
new file mode 100644
index 000000000..e0147012f
--- /dev/null
+++ b/ui/app/components/send/currency-display.js
@@ -0,0 +1,85 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('../identicon')
+const AutosizeInput = require('react-input-autosize').default
+const { conversionUtil } = require('../../conversion-util')
+
+module.exports = CurrencyDisplay
+
+inherits(CurrencyDisplay, Component)
+function CurrencyDisplay () {
+  Component.call(this)
+
+  this.state = {
+    minWidth: null,
+  }
+}
+
+function isValidNumber (text) {
+  const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
+  return re.test(text)
+}
+
+CurrencyDisplay.prototype.componentDidMount = function () {
+  this.setState({ minWidth: this.refs.currencyDisplayInput.sizer.scrollWidth + 10 })
+}
+
+CurrencyDisplay.prototype.render = function () {
+  const {
+    className,
+    primaryCurrency,
+    convertedCurrency,
+    value = '',
+    placeholder = '0',
+    conversionRate,
+    convertedPrefix = '',
+    readOnly = false,
+    handleChange,
+    inputFontSize,
+  } = this.props
+  const { minWidth } = this.state
+
+  const convertedValue = conversionUtil(value, {
+    fromNumericBase: 'dec',
+    fromCurrency: primaryCurrency,
+    toCurrency: convertedCurrency,
+    conversionRate,
+  })
+
+  return h('div.currency-display', {
+    className,
+  }, [
+
+    h('div.currency-display__primary-row', [
+
+      h(AutosizeInput, {
+        ref: 'currencyDisplayInput',
+        className: 'currency-display__input-wrapper',
+        inputClassName: 'currency-display__input',
+        value,
+        placeholder,
+        readOnly,
+        minWidth,
+        onChange: (event) => {
+          const newValue = event.target.value
+          if (newValue && !isValidNumber(newValue)) {
+            event.preventDefault()
+          }
+          else {
+            handleChange(newValue)
+          }
+        },
+        style: { fontSize: inputFontSize },
+      }),
+
+      h('span.currency-display__primary-currency', {}, primaryCurrency),
+
+    ]),
+
+    h('div.currency-display__converted-value', {}, `${convertedPrefix}${convertedValue} ${convertedCurrency}`),
+
+  ])
+    
+}
+
diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js
index 20f77b35b..70c3c2622 100644
--- a/ui/app/conversion-util.js
+++ b/ui/app/conversion-util.js
@@ -125,7 +125,7 @@ const conversionUtil = (value, {
   conversionRate,
   ethToUSDRate,
   invertConversionRate,
-  value,
+  value: value || '0',
 });
 
 const addCurrencies = (a, b, { toNumericBase, numberOfDecimals }) => {
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
new file mode 100644
index 000000000..b2776bb47
--- /dev/null
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -0,0 +1,50 @@
+.currency-display {
+  height: 54px;
+  width: 240px;
+  border: 1px solid $alto;
+  border-radius: 4px;
+  background-color: $white;
+  color: $dusty-gray;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: 300;
+  padding: 8px 10px;
+  position: relative;
+
+  &__primary-row {
+    display: flex;
+  }
+
+  &__input-wrapper {
+    margin-top: -1px;
+  }
+
+  &__input {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 22px;
+    border: none;
+    outline: 0 !important;
+  }
+
+  &__primary-currency {
+    color: $scorpion;
+    font-weight: 400;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  &__converted-row {
+    display: flex;
+  }
+
+  &__converted-value,
+  &__converted-currency {
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 12px;
+    line-height: 12px;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 9b3690099..f24a9caa8 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -29,3 +29,5 @@
 @import './token-list.scss';
 
 @import './add-token.scss';
+
+@import './currency-display.scss';
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index dbc8a23d0..47f8b18bd 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -4,6 +4,7 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const FromDropdown = require('./components/send/from-dropdown')
 const ToAutoComplete = require('./components/send/to-autocomplete')
+const CurrencyDisplay = require('./components/send/currency-display')
 
 module.exports = connect(mapStateToProps)(SendTransactionScreen)
 
@@ -19,8 +20,12 @@ function mapStateToProps (state) {
         secondary: `$30${i},000.00 USD`,
       }
     }))
+  const conversionRate = 301.0005
 
-  return { accounts: mockAccounts }
+  return {
+    accounts: mockAccounts,
+    conversionRate
+  }
 }
 
 inherits(SendTransactionScreen, PersistentForm)
@@ -31,10 +36,9 @@ function SendTransactionScreen () {
     newTx: {
       from: '',
       to: '',
-      amountToSend: '0x0',
       gasPrice: null,
-      gas: null,
-      amount: '0x0', 
+      gas: '0.001',
+      amount: '10', 
       txData: null,
       memo: '',
     },
@@ -43,9 +47,9 @@ function SendTransactionScreen () {
 }
 
 SendTransactionScreen.prototype.render = function () {
-  const { accounts } = this.props
+  const { accounts, conversionRate } = this.props
   const { dropdownOpen, newTx } = this.state
-  const { to } = newTx
+  const { to, amount, gas } = newTx
 
   return (
 
@@ -91,7 +95,7 @@ SendTransactionScreen.prototype.render = function () {
 
           h(ToAutoComplete, {
             to,
-            identities: identities.map(({ identity }) => identity),
+            identities: accounts.map(({ identity }) => identity),
             onChange: (event) => {
               this.setState({
                 newTx: {
@@ -104,6 +108,43 @@ SendTransactionScreen.prototype.render = function () {
 
         ]),
 
+        h('div.send-v2__form-row', [
+
+          h('div.send-v2__form-label', 'Amount:'),
+
+          h(CurrencyDisplay, {
+            primaryCurrency: 'ETH',
+            convertedCurrency: 'USD',
+            value: amount,
+            conversionRate,
+            convertedPrefix: '$',
+            handleChange: (value) => {
+              this.setState({
+                newTx: {
+                  ...this.state.newTx,
+                  amount: value,
+                },
+              })
+            }
+          }),          
+
+        ]),
+
+        h('div.send-v2__form-row', [
+
+          h('div.send-v2__form-label', 'Gas fee:'),
+
+          h(CurrencyDisplay, {
+            primaryCurrency: 'ETH',
+            convertedCurrency: 'USD',
+            value: gas,
+            conversionRate,
+            convertedPrefix: '$',
+            readOnly: true,
+          }),          
+
+        ]),
+
       ]),
 
       // Buttons underneath card