From 7058dc4ee3d00f4d4e407c656cf671b2d4fd62f2 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 6 Jul 2016 17:58:46 -0700 Subject: Began reworking tx conf view --- ui/app/components/account-panel.js | 2 +- ui/app/components/mini-account-panel.js | 105 ++++++++++++++++++++++++++++++++ ui/app/components/pending-tx-details.js | 83 ++++++++++++++++++++----- 3 files changed, 174 insertions(+), 16 deletions(-) create mode 100644 ui/app/components/mini-account-panel.js (limited to 'ui/app/components') diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index d50522fa2..abaaf8163 100644 --- a/ui/app/components/account-panel.js +++ b/ui/app/components/account-panel.js @@ -22,7 +22,7 @@ AccountPanel.prototype.render = function () { var panelState = { key: `accountPanel${identity.address}`, identiconKey: identity.address, - identiconLabel: identity.name, + identiconLabel: identity.name || '', attributes: [ { key: 'ADDRESS', diff --git a/ui/app/components/mini-account-panel.js b/ui/app/components/mini-account-panel.js new file mode 100644 index 000000000..745ff2077 --- /dev/null +++ b/ui/app/components/mini-account-panel.js @@ -0,0 +1,105 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const Identicon = require('./identicon') +const formatBalance = require('../util').formatBalance +const TransactionIcon = require('./transaction-list-item-icon') + +module.exports = AccountPanel + + +inherits(AccountPanel, Component) +function AccountPanel () { + Component.call(this) +} + +AccountPanel.prototype.render = function () { + var props = this.props + var picOrder = props.picOrder || 'left' + var isFauceting = props.isFauceting + const { attrs, imageSeed } = props + + return ( + + h('.identity-panel.flex-row.flex-left', { + style: { + cursor: props.onClick ? 'pointer' : undefined, + }, + onClick: props.onClick, + }, [ + + this.genIcon(imageSeed, picOrder), + + h('div.flex-column.flex-justify-center', { + style: { + lineHeight: '15px', + order: 2, + display: 'flex', + alignItems: picOrder === 'left' ? 'flex-begin' : 'flex-end', + }, + }, [ + + props.attrs.map((attr) => { + return h('span.font-small', { + key: `mini-${attr}`, + style: { + fontFamily: 'Montserrat UltraLight, Montserrat Light, Montserrat', + }, + }, attr) + }), + + ]), + + ]) + ) +} + +AccountPanel.prototype.genIcon= function(seed, picOrder) { + const props = this.props + + // When there is no seed value, this is a contract creation. + // We then show the contract icon. + if (!seed) { + return h('.identicon-wrapper.flex-column.select-none', { + style: { + order: picOrder === 'left' ? 1 : 3, + }, + }, [ + h('i.fa.fa-file-text-o.fa-lg', { + style: { + fontSize: '42px', + transform: 'translate(0px, -16px)', + }, + }) + ]) + } + + // If there was a seed, we return an identicon for that address. + return h('.identicon-wrapper.flex-column.select-none', { + style: { + order: picOrder === 'left' ? 1 : 3, + }, + }, [ + h(Identicon, { + address: seed, + imageify: props.imageifyIdenticons, + }), + ]) +} + +function balanceOrFaucetingIndication (account, isFauceting) { + // Temporarily deactivating isFauceting indication + // because it shows fauceting for empty restored accounts. + if (/* isFauceting*/ false) { + return { + key: 'Account is auto-funding.', + value: 'Please wait.', + } + } else { + return { + key: 'BALANCE', + value: formatBalance(account.balance), + } + } +} + diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js index 2ba613f20..0d972ea05 100644 --- a/ui/app/components/pending-tx-details.js +++ b/ui/app/components/pending-tx-details.js @@ -2,10 +2,11 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const AccountPanel = require('./account-panel') +const MiniAccountPanel = require('./mini-account-panel') const addressSummary = require('../util').addressSummary const readableDate = require('../util').readableDate const formatBalance = require('../util').formatBalance +const nameForAddress = require('../../lib/contract-namer') module.exports = PendingTxDetails @@ -14,12 +15,10 @@ function PendingTxDetails () { Component.call(this) } -PendingTxDetails.prototype.render = function () { - var state = this.props - return this.renderGeneric(h, state) -} +const PTXP = PendingTxDetails.prototype -PendingTxDetails.prototype.renderGeneric = function (h, state) { +PTXP.render = function () { + var state = this.props var txData = state.txData var txParams = txData.txParams || {} @@ -27,17 +26,39 @@ PendingTxDetails.prototype.renderGeneric = function (h, state) { var identity = state.identities[address] || { address: address } var account = state.accounts[address] || { address: address } - return ( + var isContractDeploy = !('to' in txParams) + return ( h('div', [ - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - imageifyIdenticons: state.imageifyIdenticons, - }), + h('.flex-row.flex-center', { + style: { + maxWidth: '100%', + }, + }, [ + + h(MiniAccountPanel, { + attrs: [ + identity.name, + addressSummary(address, 6, 4, false), + formatBalance(identity.balance), + ], + imageSeed: address, + imageifyIdenticons: state.imageifyIdenticons, + picOrder: 'right', + }), + + h('img', { + src: 'images/forward-carrat.svg', + style: { + padding: '5px 6px 0px 10px', + height: '48px', + }, + }), + + this.miniAccountPanelForRecipient(), + + ]), // tx data h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ @@ -59,7 +80,39 @@ PendingTxDetails.prototype.renderGeneric = function (h, state) { ]), ]) - ) +} +PTXP.miniAccountPanelForRecipient = function() { + var state = this.props + var txData = state.txData + + var txParams = txData.txParams || {} + var address = txParams.from || state.selectedAddress + var identity = state.identities[address] || { address: address } + var account = state.accounts[address] || { address: address } + + var isContractDeploy = !('to' in txParams) + + // If it's not a contract deploy, send to the account + if (!isContractDeploy) { + return h(MiniAccountPanel, { + attrs: [ + nameForAddress(txParams.to), + addressSummary(txParams.to, 6, 4, false), + ], + imageSeed: address, + imageifyIdenticons: state.imageifyIdenticons, + picOrder: 'left', + }) + } else { + return h(MiniAccountPanel, { + attrs: [ + 'New Contract' + ], + imageifyIdenticons: state.imageifyIdenticons, + picOrder: 'left', + }) + } } + -- cgit v1.2.3