From 1e83835ba8cce0fdf794092a8c55b6c68664204a Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 12 Sep 2017 02:49:05 -0230 Subject: [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. --- ui/app/components/pending-tx.js | 336 +++++++++++++++++----------------------- 1 file changed, 139 insertions(+), 197 deletions(-) (limited to 'ui/app/components/pending-tx.js') 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 ) -- cgit