[New-UI] Confirm Screen restyle and connect to state (#2042)

* Adds utility for converting currencies (WIP)

* Implements confirm screen

* Style tweaks.

* Confirm screen total ammount now uses real data.

* Confirm screen total ammount now uses real data.

* Replace content divider with sibling css.

* Replace section divider with scss.

6 files changed, 429 insertions, 197 deletions

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 5e5110d6c..31281faf2 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -1,23 +1,23 @@
 const Component = require('react').Component
+const { connect } = require('react-redux')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../actions')
 const clone = require('clone')
+const FiatValue = require('./fiat-value')
+const Identicon = require('./identicon')
+const { setCurrentCurrency } = require('../actions')
 
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
 const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
 const util = require('../util')
+const { conversionUtil } = require('../conversion-util')
 
 const MIN_GAS_PRICE_GWEI_BN = new BN(1)
 const GWEI_FACTOR = new BN(1e9)
 const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
 
-
-// Faked, for Icon
-const Identicon = require('./identicon')
-const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
-
 // Next: create separate react components
 // roughly 5 components:
 //   heroIcon
@@ -25,23 +25,27 @@ const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
 //   divider
 //   contentBox
 //   actionButtons
-const sectionDivider = h('div', {
-  style: {
-    height: '1px',
-    background: '#E7E7E7',
-  },
-})
-
-const contentDivider = h('div', {
-  style: {
-    marginLeft: '16px',
-    marginRight: '16px',
-    height: '1px',
-    background: '#E7E7E7',
-  },
-})
-
-module.exports = PendingTx
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(PendingTx)
+
+function mapStateToProps (state) {
+  const {
+    conversionRate,
+    identities,
+  } = state.metamask
+
+  return {
+    conversionRate,
+    identities,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setCurrentCurrencyToUSD: () => dispatch(setCurrentCurrency('USD'))
+  }
+}
+
 inherits(PendingTx, Component)
 function PendingTx () {
   Component.call(this)
@@ -52,9 +56,13 @@ function PendingTx () {
   }
 }
 
+PendingTx.prototype.componentWillMount = function () {
+  this.props.setCurrentCurrencyToUSD()
+}
+
 PendingTx.prototype.render = function () {
   const props = this.props
-  const { blockGasLimit } = props
+  const { blockGasLimit, conversionRate, identities } = props
 
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
@@ -76,16 +84,48 @@ PendingTx.prototype.render = function () {
   const gasPriceBn = hexToBn(gasPrice)
 
   const txFeeBn = gasBn.mul(gasPriceBn)
-  const valueBn = hexToBn(txParams.value)
-  const maxCost = txFeeBn.add(valueBn)
 
-  const balanceBn = hexToBn(balance)
-  const insufficientBalance = balanceBn.lt(maxCost)
+  const amountBn = hexToBn(txParams.value)
+
+  // TODO: insufficient balance should be handled on send screen
+  // const maxCost = txFeeBn.add(amountBn)
+  // const balanceBn = hexToBn(balance)
+  // const insufficientBalance = balanceBn.lt(maxCost)
+
+  const fromName = identities[txParams.from].name;
+  const toName = identities[txParams.to].name;
+
+  const endOfFromAddress = txParams.from.slice(txParams.from.length - 4)
+  const endOfToAddress = txParams.to.slice(txParams.to.length - 4)
+
+  const gasFeeInUSD = conversionUtil(txFeeBn, {
+    fromFormat: 'BN',
+    fromCurrency: 'GWEI',
+    toCurrency: 'USD',
+    conversionRate,
+  })
+  const gasFeeInETH = conversionUtil(txFeeBn, {
+    fromFormat: 'BN',
+    fromCurrency: 'GWEI',
+    toCurrency: 'ETH',
+    conversionRate,
+  })
+
+  const totalInUSD = conversionUtil(amountBn, {
+    fromFormat: 'BN',
+    toCurrency: 'USD',
+    conversionRate,
+  })
+  const totalInETH = conversionUtil(amountBn, {
+    fromFormat: 'BN',
+    toCurrency: 'ETH',
+    conversionRate,
+  })
 
   this.inputs = []
 
   return (
-    h('div.flex-column.flex-grow', {
+    h('div.flex-column.flex-grow.confirm-screen-container', {
       style: {
         // overflow: 'scroll',
         minWidth: '355px', // TODO: maxWidth TBD, use home.html
@@ -93,86 +133,79 @@ PendingTx.prototype.render = function () {
     }, [
 
       // Main Send token Card
-      h('div.send-screen.flex-column.flex-grow', {
-        style: {
-          marginLeft: '3.5%',
-          marginRight: '3.5%',
-          background: '#FFFFFF', // $background-white
-          boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)',
-        },
-      }, [
-        h('section.flex-center.flex-row', {
-          style: {
-            zIndex: 15, // $token-icon-z-index
-            marginTop: '-35px',
-          },
-        }, [
-          h(Identicon, {
-            address: ARAGON,
-            diameter: 76,
-          }),
-        ]),
+      h('div.confirm-screen-wrapper.flex-column.flex-grow', {}, [
 
-        //
-        // Required Fields
-        //
+        h('h3.flex-center.confirm-screen-header', {}, [
 
-        h('h3.flex-center', {
-          style: {
-            marginTop: '-18px',
-            fontSize: '16px',
-          },
-        }, [
-          'Confirm Transaction',
+          h('button.confirm-screen-back-button', {}, 'BACK'),
+
+          h('div.confirm-screen-title', {}, 'Confirm Transaction'),
+          
         ]),
 
-        h('h3.flex-center', {
-          style: {
-            textAlign: 'center',
-            fontSize: '12px',
-          },
-        }, [
-          'You\'re sending to Recipient ...5924',
+        h('div.flex-row.flex-center.confirm-screen-identicons', {}, [
+
+          h('div.confirm-screen-account-wrapper', {}, [
+            h(
+              Identicon,
+              {
+                address: txParams.from,
+                diameter: 64,
+                style: {},
+              },
+            ),
+            h('span.confirm-screen-account-name', {}, fromName),
+            h('span.confirm-screen-account-number', {}, endOfFromAddress),
+
+          ]),
+
+          h('i.fa.fa-arrow-right.fa-lg'),
+
+          h('div.confirm-screen-account-wrapper', {}, [
+            h(
+              Identicon,
+              {
+                address: txParams.to,
+                diameter: 64,
+                style: {},
+              },
+            ),
+            h('span.confirm-screen-account-name', {}, toName),
+            h('span.confirm-screen-account-number', {}, endOfToAddress),
+          ])
+
         ]),
 
-        h('h3.flex-center', {
+        h('h3.flex-center.confirm-screen-sending-to-message', {
           style: {
             textAlign: 'center',
-            fontSize: '36px',
-            marginTop: '8px',
-          },
+            fontSize: '16px',
+          }
         }, [
-          '0.24',
+          `You're sending to Recipient ...${endOfToAddress}`
         ]),
 
-        h('h3.flex-center', {
-          style: {
-            textAlign: 'center',
-            fontSize: '12px',
-            marginTop: '4px',
-          },
-        }, [
-          'ANT',
+        h('h3.flex-center.confirm-screen-send-amount', {}, [`$${totalInUSD}`]),
+
+        h('h3.flex-center.confirm-screen-send-amount-currency', {}, [
+          'USD',
         ]),
 
-        // error message
-        props.error && h('span.error.flex-center', props.error),
+        h('div.flex-center.confirm-memo-wrapper', {}, h(
+          'h3.confirm-screen-send-memo', {}, txParams.memo || 'Fake memo'
+        )),
 
-        sectionDivider,
+        // TODO: put this error message in the right place
+        // props.error && h('span.error.flex-center', props.error),
 
-        h('section.flex-row.flex-center', {
+        h('section.flex-row.flex-center.confirm-screen-row', {
         }, [
           h('div', {
             style: {
               width: '50%',
             },
           }, [
-            h('span', {
-              style: {
-                textAlign: 'left',
-                fontSize: '12px',
-              },
-            }, [
+            h('span.confirm-screen-label', {}, [
               'From',
             ]),
           ]),
@@ -182,38 +215,21 @@ PendingTx.prototype.render = function () {
               width: '50%',
             },
           }, [
-            h('div', {
-              style: {
-                textAlign: 'left',
-                fontSize: '10px',
-                marginBottom: '-10px',
-              },
-            }, 'Aragon Token'),
+            h('div.confirm-screen-row-info', {}, fromName),
 
-            h('div', {
-              style: {
-                textAlign: 'left',
-                fontSize: '8px',
-              },
-            }, 'Your Balance 2.34 ANT'),
+            h('div.confirm-screen-row-detail', {}, `...${endOfFromAddress}`),
           ]),
         ]),
 
-        contentDivider,
 
-        h('section.flex-row.flex-center', {
+        h('section.flex-row.flex-center.confirm-screen-row', {
         }, [
           h('div', {
             style: {
               width: '50%',
             },
           }, [
-            h('span', {
-              style: {
-                textAlign: 'left',
-                fontSize: '12px',
-              },
-            }, [
+            h('span.confirm-screen-label', {}, [
               'To',
             ]),
           ]),
@@ -223,38 +239,21 @@ PendingTx.prototype.render = function () {
               width: '50%',
             },
           }, [
-            h('div', {
-              style: {
-                textAlign: 'left',
-                fontSize: '10px',
-                marginBottom: '-10px',
-              },
-            }, 'Ethereum Address'),
+            h('div.confirm-screen-row-info', {}, toName),
 
-            h('div', {
-              style: {
-                textAlign: 'left',
-                fontSize: '8px',
-              },
-            }, '...5924'),
+            h('div.confirm-screen-row-detail', {}, `...${endOfToAddress}`),
           ]),
         ]),
 
-        contentDivider,
 
-        h('section.flex-row.flex-center', {
+        h('section.flex-row.flex-center.confirm-screen-row', {
         }, [
           h('div', {
             style: {
               width: '50%',
             },
           }, [
-            h('span', {
-              style: {
-                textAlign: 'left',
-                fontSize: '12px',
-              },
-            }, [
+            h('span.confirm-screen-label', {}, [
               'Gas Fee',
             ]),
           ]),
@@ -264,49 +263,21 @@ PendingTx.prototype.render = function () {
               width: '50%',
             },
           }, [
-            h('div', {
-              style: {
-                textAlign: 'left',
-                fontSize: '10px',
-                marginBottom: '-10px',
-              },
-            }, '$0.04 USD'),
+            h('div.confirm-screen-row-info', {}, `$${gasFeeInUSD} USD`),
 
-            h('div', {
-              style: {
-                textAlign: 'left',
-                fontSize: '8px',
-              },
-            }, '0.001575 ETH'),
+            h('div.confirm-screen-row-detail', {}, `${gasFeeInETH} ETH`),
           ]),
         ]),
 
-        contentDivider,
 
-        h('section.flex-row.flex-center', {
-          style: {
-            backgroundColor: '#F6F6F6', // $wild-sand
-            borderRadius: '8px',
-            marginLeft: '10px',
-            marginRight: '10px',
-            paddingLeft: '6px',
-            paddingRight: '6px',
-            marginBottom: '10px',
-          },
-        }, [
+        h('section.flex-row.flex-center.confirm-screen-total-box ', {}, [
           h('div', {
             style: {
               width: '50%',
             },
           }, [
-            h('div', {
-              style: {
-                textAlign: 'left',
-                fontSize: '12px',
-                marginBottom: '-10px',
-              },
-            }, [
-              'Total Tokens',
+            h('span.confirm-screen-label', {}, [
+              'Total ',
             ]),
 
             h('div', {
@@ -315,7 +286,7 @@ PendingTx.prototype.render = function () {
                 fontSize: '8px',
               },
             }, [
-              'Total Gas',
+              'Amount + Gas',
             ]),
 
           ]),
@@ -325,20 +296,9 @@ PendingTx.prototype.render = function () {
               width: '50%',
             },
           }, [
-            h('div', {
-              style: {
-                textAlign: 'left',
-                fontSize: '10px',
-                marginBottom: '-10px',
-              },
-            }, '0.24 ANT (127.00 USD)'),
+            h('div.confirm-screen-row-info', {}, `$${totalInUSD} USD`),
 
-            h('div', {
-              style: {
-                textAlign: 'left',
-                fontSize: '8px',
-              },
-            }, '0.249 ETH'),
+            h('div.confirm-screen-row-detail', {}, `${totalInETH} ETH`),
           ]),
         ]),
 
@@ -356,32 +316,14 @@ PendingTx.prototype.render = function () {
         // }, 'Reset'),
 
         // Accept Button
-        h('input.confirm.btn-green', {
+        h('input.confirm-screen-confirm-button', {
           type: 'submit',
           value: 'CONFIRM',
-          style: {
-            marginTop: '8px',
-            width: '8em',
-            color: '#FFFFFF',
-            borderRadius: '2px',
-            fontSize: '12px',
-            lineHeight: '20px',
-            textAlign: 'center',
-            borderStyle: 'none',
-          },
-          disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
+          // disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
         }),
 
         // Cancel Button
-        h('button.cancel.btn-light', {
-          style: {
-            background: '#F7F7F7', // $alabaster
-            border: 'none',
-            opacity: 1,
-            width: '8em',
-          },
-          onClick: props.cancelTransaction,
-        }, 'CANCEL'),
+        h('button.cancel.btn-light.confirm-screen-cancel-button', {}, 'CANCEL'),
       ]),
     ]) // end of minwidth wrapper
   )
diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js
new file mode 100644
index 000000000..8f2214500
--- /dev/null
+++ b/ui/app/conversion-util.js
@@ -0,0 +1,50 @@
+const {
+  numericBalance,
+  parseBalance,
+  formatBalance,
+  normalizeToWei,
+  valueTable,
+} = require('./util')
+const hexToBn = require('../../app/scripts/lib/hex-to-bn')
+const { BN } = require('ethereumjs-util')
+const GWEI_MULTIPLIER = normalizeToWei(hexToBn(valueTable.gwei.toString(16)), 'gwei');
+
+const conversionUtil = (value, {
+  fromCurrency,
+  toCurrency,
+  fromFormat,
+  toFormat,
+  precision = 2,
+  conversionRate,
+}) => {
+  let result;
+  
+  if (fromFormat === 'BN') {
+    if (fromCurrency !== 'GWEI') {
+      result = normalizeToWei(value, 'gwei')
+    }
+    else {
+      result = value
+    }
+
+    result = result.toString(16)
+    result = formatBalance(result, 9)
+    result = result.split(' ')
+    result = Number(result[0]) * 1000000000
+  }
+
+  if (fromCurrency === 'GWEI') {
+    result = result / 1000000000
+  }
+
+  if (toCurrency === 'USD') {
+    result = result * conversionRate
+    result = result.toFixed(precision)
+  }
+
+  return result
+};
+
+module.exports = {
+  conversionUtil,
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
new file mode 100644
index 000000000..da1d00777
--- /dev/null
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -0,0 +1,223 @@
+.confirm-screen-container {
+  position: absolute;
+
+  @media screen and (max-width: 575px) {
+    margin-top: 35px;
+  }
+
+  @media screen and (min-width: 576px) {
+    margin-top: 6.9vh;
+  }
+}
+
+.confirm-screen-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-width: 320px;
+  min-height: 753px;
+  z-index: 100;
+  top: 5%;
+  font-family: 'DIN NEXT';
+  margin-left: 3.5%;
+  margin-right: 3.5%;
+  background: $white;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
+  padding-top: 20px;
+  padding-bottom: 31px;
+
+  @media screen and (min-width: $break-large) {
+    width: 498px;
+  }
+}
+
+.confirm-screen-wrapper > h3,
+.confirm-screen-wrapper > div,
+.confirm-screen-wrapper > section {
+  margin-left: 23px; 
+  margin-right: 23px;
+}
+
+.confirm-screen-wrapper > .confirm-screen-total-box {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.confirm-screen-wrapper > .confirm-memo-wrapper {
+  margin: 0;
+}
+
+.confirm-screen-wrapper > .confirm-screen-header {
+  @media screen and (max-width: $break-small) {
+    margin-left: 8px;
+  }
+}
+
+.confirm-screen-header {
+  font-size: 26px;
+  position: relative;
+
+  @media screen and (max-width: $break-small) {
+   font-size: 22px;
+  }
+}
+
+.confirm-screen-title {
+  @media screen and (max-width: $break-small) {
+   margin-left: 22px;
+   margin-right: 8px;
+  }
+}
+
+.confirm-screen-back-button {
+  background: $white;
+  border: 1px solid $dusty-gray;
+  left: 0;
+  position: absolute;
+  text-align: center;
+  color: $black;
+  padding: 6px 13px 7px 12px;
+  border-radius: 2px;
+  height: 30px;
+  width: 54px;
+
+  @media screen and (max-width: $break-small) {
+   margin-right: 12px;
+  }
+}
+
+.confirm-screen-account-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.confirm-screen-account-name, .confirm-screen-row-info {
+  font-size: 16px;
+  line-height: 24px;
+  color: $scorpion;
+  text-align: center;
+}
+
+.confirm-screen-account-number {
+  font-size: 10px;
+  line-height: 16px;
+  color: $dusty-gray;
+  text-align: center;
+}
+
+.confirm-screen-identicons {
+  margin-top: 48px;
+
+  i {
+    align-self: start;
+    margin: 20px 14px 0 14px;
+  }
+}
+
+.confirm-screen-sending-to-message {
+  text-align: center;
+  font-size: 16px;
+  margin-top: 30px;
+}
+
+.confirm-screen-send-amount {
+  font-size: 64px;
+  color: $scorpion;
+  margin-top: 12px;
+  line-height: 60px; 
+  text-align: center;
+  font-family: 'DIN NEXT Light';
+}
+
+.confirm-screen-send-amount-currency {
+  font-size: 20px;
+  line-height: 20px;
+  text-align: center;
+}
+
+.confirm-memo-wrapper {
+  width: 100%;
+  border-bottom: 1px solid $gallery;
+}
+
+.confirm-screen-send-memo {
+  color: $dusty-gray;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  margin-top: 21px;
+  margin-bottom: 18px;
+}
+
+.confirm-screen-label {
+  font-size: 18px; 
+  line-height: 25px;
+  color: $scorpion;
+  text-align: left;
+}
+
+section .confirm-screen-account-name,
+section .confirm-screen-account-number,
+.confirm-screen-row-info,
+.confirm-screen-row-detail {
+  text-align: left;
+}
+
+.confirm-screen-row {
+  margin-top: 15px;
+  margin-bottom: 11.5px;
+}
+
+.confirm-screen-row-detail {
+  font-size: 12px;
+  line-height: 16px;
+  color: $dusty-gray;
+}
+
+.confirm-screen-total-box {
+  background-color: $wild-sand;
+  border-radius: 8px;
+  margin-left: 10px;
+  margin-right: 10px;
+  padding: 22px 14px 22px;
+  margin-bottom: 10px;
+  margin-top: 13px;
+}
+
+.confirm-screen-confirm-button {
+  height: 62px;
+  width: 216.88px;
+  border-radius: 2px;
+  background-color: #02C9B1;
+  font-size: 16px;
+  color: $white;
+  text-align: center;
+  font-family: 'DIN NEXT';
+  padding-top: 15px;
+  padding-bottom: 15px;
+  margin-top: 23px;
+  border-width: 0;
+  box-shadow: none;
+}
+
+.btn-light.confirm-screen-cancel-button {
+  height: 62px;
+  width: 216.88px;
+  background: none;
+  border: none;
+  opacity: 1;
+  width: 8em;
+  font-family: 'DIN NEXT';
+  border-width: 0;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  font-size: 16px;
+  box-shadow: none;
+}
+
+#pending-tx-form {
+  flex: 1 0 auto;
+}
+
+.confirm-screen-row + .confirm-screen-row {
+  border-top: 1px solid $gallery;
+}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 952d11ce4..63ac8bd47 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -14,6 +14,8 @@
 
 @import './send.scss';
 
+@import './confirm.scss';
+
 // Balances
 @import './hero-balance.scss';
 
diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
index 2027ca7e2..5b7817651 100644
--- a/ui/app/css/itcss/settings/typography.scss
+++ b/ui/app/css/itcss/settings/typography.scss
@@ -50,6 +50,20 @@
 }
 
 @font-face {
+  font-family: 'DIN NEXT';
+  src: url('/fonts/DIN NEXT/DIN NEXT W01 Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN NEXT Light';
+  src: url('/fonts/DIN NEXT/DIN NEXT W10 Light.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
   font-family: 'Lato';
   src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
   font-weight: 400;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 93156de9c..7de7ca4f5 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -30,6 +30,7 @@ $concrete: #f3f3f3;
 $tundora: #4d4d4d;
 $nile-blue: #1b344d;
 $scorpion: #5d5d5d;
+$caribbean-green: #02C9B1;
 $silver: #cdcdcd;
 $crimson: #e91550;
 $blue-lagoon: #038789;