[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.

1 files changed, 139 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
   )