From 6561e75aa2fb03c77544da3c090ad6ea2883d29a Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 14 Nov 2017 12:34:23 -0330 Subject: Add old-ui directory --- old-ui/app/account-detail.js | 291 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 291 insertions(+) create mode 100644 old-ui/app/account-detail.js (limited to 'old-ui/app/account-detail.js') diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js new file mode 100644 index 000000000..d4f707e0b --- /dev/null +++ b/old-ui/app/account-detail.js @@ -0,0 +1,291 @@ +const inherits = require('util').inherits +const extend = require('xtend') +const Component = require('react').Component +const h = require('react-hyperscript') +const connect = require('react-redux').connect +const actions = require('./actions') +const valuesFor = require('./util').valuesFor +const Identicon = require('./components/identicon') +const EthBalance = require('./components/eth-balance') +const TransactionList = require('./components/transaction-list') +const ExportAccountView = require('./components/account-export') +const ethUtil = require('ethereumjs-util') +const EditableLabel = require('./components/editable-label') +const TabBar = require('./components/tab-bar') +const TokenList = require('./components/token-list') +const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns + +module.exports = connect(mapStateToProps)(AccountDetailScreen) + +function mapStateToProps (state) { + return { + metamask: state.metamask, + identities: state.metamask.identities, + accounts: state.metamask.accounts, + address: state.metamask.selectedAddress, + accountDetail: state.appState.accountDetail, + network: state.metamask.network, + unapprovedMsgs: valuesFor(state.metamask.unapprovedMsgs), + shapeShiftTxList: state.metamask.shapeShiftTxList, + transactions: state.metamask.selectedAddressTxList || [], + conversionRate: state.metamask.conversionRate, + currentCurrency: state.metamask.currentCurrency, + currentAccountTab: state.metamask.currentAccountTab, + tokens: state.metamask.tokens, + computedBalances: state.metamask.computedBalances, + } +} + +inherits(AccountDetailScreen, Component) +function AccountDetailScreen () { + Component.call(this) +} + +AccountDetailScreen.prototype.render = function () { + var props = this.props + var selected = props.address || Object.keys(props.accounts)[0] + var checksumAddress = selected && ethUtil.toChecksumAddress(selected) + var identity = props.identities[selected] + var account = props.accounts[selected] + const { network, conversionRate, currentCurrency } = props + + return ( + + h('.account-detail-section.full-flex-height', [ + + // identicon, label, balance, etc + h('.account-data-subsection', { + style: { + margin: '0 20px', + flex: '1 0 auto', + }, + }, [ + + // header - identicon + nav + h('div', { + style: { + paddingTop: '20px', + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'flex-start', + }, + }, [ + + // large identicon and addresses + h('.identicon-wrapper.select-none', [ + h(Identicon, { + diameter: 62, + address: selected, + }), + ]), + h('flex-column', { + style: { + lineHeight: '10px', + marginLeft: '15px', + width: '100%', + }, + }, [ + h(EditableLabel, { + textValue: identity ? identity.name : '', + state: { + isEditingLabel: false, + }, + saveText: (text) => { + props.dispatch(actions.saveAccountLabel(selected, text)) + }, + }, [ + + // What is shown when not editing + edit text: + h('label.editing-label', [h('.edit-text', 'edit')]), + h( + 'div', + { + style: { + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + }, + }, + [ + h( + 'div.font-medium.color-forest', + { + name: 'edit', + style: { + }, + }, + [ + h('h2', { + style: { + maxWidth: '180px', + overflow: 'hidden', + textOverflow: 'ellipsis', + padding: '5px 0px', + lineHeight: '25px', + }, + }, [ + identity && identity.name, + ]), + ] + ), + h( + AccountDropdowns, + { + style: { + marginRight: '8px', + marginLeft: 'auto', + cursor: 'pointer', + }, + selected, + network, + identities: props.identities, + enableAccountOptions: true, + }, + ), + ] + ), + ]), + h('.flex-row', { + style: { + width: '15em', + justifyContent: 'space-between', + alignItems: 'baseline', + }, + }, [ + + // address + + h('div', { + style: { + overflow: 'hidden', + textOverflow: 'ellipsis', + paddingTop: '3px', + width: '5em', + fontSize: '13px', + fontFamily: 'Montserrat Light', + textRendering: 'geometricPrecision', + marginBottom: '15px', + color: '#AEAEAE', + }, + }, checksumAddress), + ]), + + // account ballence + + ]), + ]), + h('.flex-row', { + style: { + justifyContent: 'space-between', + alignItems: 'flex-start', + }, + }, [ + + h(EthBalance, { + value: account && account.balance, + conversionRate, + currentCurrency, + style: { + lineHeight: '7px', + marginTop: '10px', + }, + }), + + h('.flex-grow'), + + h('button', { + onClick: () => props.dispatch(actions.buyEthView(selected)), + style: { marginRight: '10px' }, + }, 'BUY'), + + h('button', { + onClick: () => props.dispatch(actions.showSendPage()), + style: { + marginBottom: '20px', + marginRight: '8px', + }, + }, 'SEND'), + + ]), + ]), + + // subview (tx history, pk export confirm, buy eth warning) + this.subview(), + + ]) + ) +} + +AccountDetailScreen.prototype.subview = function () { + var subview + try { + subview = this.props.accountDetail.subview + } catch (e) { + subview = null + } + + switch (subview) { + case 'transactions': + return this.tabSections() + case 'export': + var state = extend({key: 'export'}, this.props) + return h(ExportAccountView, state) + default: + return this.tabSections() + } +} + +AccountDetailScreen.prototype.tabSections = function () { + const { currentAccountTab } = this.props + + return h('section.tabSection.full-flex-height.grow-tenx', [ + + h(TabBar, { + tabs: [ + { content: 'Sent', key: 'history' }, + { content: 'Tokens', key: 'tokens' }, + ], + defaultTab: currentAccountTab || 'history', + tabSelected: (key) => { + this.props.dispatch(actions.setCurrentAccountTab(key)) + }, + }), + + this.tabSwitchView(), + ]) +} + +AccountDetailScreen.prototype.tabSwitchView = function () { + const props = this.props + const { address, network } = props + const { currentAccountTab, tokens } = this.props + + switch (currentAccountTab) { + case 'tokens': + return h(TokenList, { + userAddress: address, + network, + tokens, + addToken: () => this.props.dispatch(actions.showAddTokenPage()), + }) + default: + return this.transactionList() + } +} + +AccountDetailScreen.prototype.transactionList = function () { + const {transactions, unapprovedMsgs, address, + network, shapeShiftTxList, conversionRate } = this.props + + return h(TransactionList, { + transactions: transactions.sort((a, b) => b.time - a.time), + network, + unapprovedMsgs, + conversionRate, + address, + shapeShiftTxList, + viewPendingTx: (txId) => { + this.props.dispatch(actions.viewPendingTx(txId)) + }, + }) +} -- cgit v1.2.3 From f7ad015f5bd3b037b73d7792d0a09d7e0382a511 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 15 Nov 2017 14:05:18 -0330 Subject: Use newui actions in old-ui --- old-ui/app/account-detail.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'old-ui/app/account-detail.js') diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js index d4f707e0b..933f6d6a4 100644 --- a/old-ui/app/account-detail.js +++ b/old-ui/app/account-detail.js @@ -3,7 +3,7 @@ const extend = require('xtend') const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect -const actions = require('./actions') +const actions = require('../../ui/app/actions') const valuesFor = require('./util').valuesFor const Identicon = require('./components/identicon') const EthBalance = require('./components/eth-balance') -- cgit v1.2.3 From 70557e0448a89f5d04be15b7f8152bd398273dbe Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 14:49:59 -0330 Subject: Flex account-data-subsection --- old-ui/app/account-detail.js | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) (limited to 'old-ui/app/account-detail.js') diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js index 933f6d6a4..121f84a0d 100644 --- a/old-ui/app/account-detail.js +++ b/old-ui/app/account-detail.js @@ -78,10 +78,9 @@ AccountDetailScreen.prototype.render = function () { address: selected, }), ]), - h('flex-column', { + h('div.flex-column', { style: { lineHeight: '10px', - marginLeft: '15px', width: '100%', }, }, [ @@ -90,6 +89,9 @@ AccountDetailScreen.prototype.render = function () { state: { isEditingLabel: false, }, + nameLabelStyle: { + marginLeft: '15px', + }, saveText: (text) => { props.dispatch(actions.saveAccountLabel(selected, text)) }, @@ -102,7 +104,7 @@ AccountDetailScreen.prototype.render = function () { { style: { display: 'flex', - justifyContent: 'flex-start', + justifyContent: 'space-between', alignItems: 'center', }, }, @@ -132,8 +134,6 @@ AccountDetailScreen.prototype.render = function () { AccountDropdowns, { style: { - marginRight: '8px', - marginLeft: 'auto', cursor: 'pointer', }, selected, @@ -147,7 +147,6 @@ AccountDetailScreen.prototype.render = function () { ]), h('.flex-row', { style: { - width: '15em', justifyContent: 'space-between', alignItems: 'baseline', }, @@ -164,6 +163,7 @@ AccountDetailScreen.prototype.render = function () { fontSize: '13px', fontFamily: 'Montserrat Light', textRendering: 'geometricPrecision', + marginTop: '15px', marginBottom: '15px', color: '#AEAEAE', }, @@ -191,20 +191,21 @@ AccountDetailScreen.prototype.render = function () { }, }), - h('.flex-grow'), + h('div', {}, [ - h('button', { - onClick: () => props.dispatch(actions.buyEthView(selected)), - style: { marginRight: '10px' }, - }, 'BUY'), + h('button', { + onClick: () => props.dispatch(actions.buyEthView(selected)), + style: { marginRight: '10px' }, + }, 'BUY'), - h('button', { - onClick: () => props.dispatch(actions.showSendPage()), - style: { - marginBottom: '20px', - marginRight: '8px', - }, - }, 'SEND'), + h('button', { + onClick: () => props.dispatch(actions.showSendPage()), + style: { + marginBottom: '20px', + }, + }, 'SEND'), + + ]), ]), ]), -- cgit v1.2.3 From 68ef52e183c8564de83e7d8d41d90c5790f2c1be Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 12 Dec 2017 17:01:15 -0330 Subject: Remove inline style. --- old-ui/app/account-detail.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'old-ui/app/account-detail.js') diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js index 121f84a0d..ee7eb1258 100644 --- a/old-ui/app/account-detail.js +++ b/old-ui/app/account-detail.js @@ -89,9 +89,6 @@ AccountDetailScreen.prototype.render = function () { state: { isEditingLabel: false, }, - nameLabelStyle: { - marginLeft: '15px', - }, saveText: (text) => { props.dispatch(actions.saveAccountLabel(selected, text)) }, -- cgit v1.2.3 From b72610fb534580e607c6934e938c50d58ba05350 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 11 Jan 2018 22:46:41 -0330 Subject: Fix margin styling for name and address in account detail section. (#2790) --- old-ui/app/account-detail.js | 1 + 1 file changed, 1 insertion(+) (limited to 'old-ui/app/account-detail.js') diff --git a/old-ui/app/account-detail.js b/old-ui/app/account-detail.js index ee7eb1258..af189cc79 100644 --- a/old-ui/app/account-detail.js +++ b/old-ui/app/account-detail.js @@ -162,6 +162,7 @@ AccountDetailScreen.prototype.render = function () { textRendering: 'geometricPrecision', marginTop: '15px', marginBottom: '15px', + marginLeft: '15px', color: '#AEAEAE', }, }, checksumAddress), -- cgit v1.2.3