From 5eb3d5d485b17b98b19443d8def2f03dec9b38ef Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 3 Jul 2017 15:39:25 -0700 Subject: Make folder for responsive UI --- ui/classic/app/account-detail.js | 311 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 311 insertions(+) create mode 100644 ui/classic/app/account-detail.js (limited to 'ui/classic/app/account-detail.js') diff --git a/ui/classic/app/account-detail.js b/ui/classic/app/account-detail.js new file mode 100644 index 000000000..bed05a7fb --- /dev/null +++ b/ui/classic/app/account-detail.js @@ -0,0 +1,311 @@ +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 CopyButton = require('./components/copyButton') +const AccountInfoLink = require('./components/account-info-link') +const actions = require('./actions') +const ReactCSSTransitionGroup = require('react-addons-css-transition-group') +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 Tooltip = require('./components/tooltip') +const TabBar = require('./components/tab-bar') +const TokenList = require('./components/token-list') + +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, + } +} + +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', [ + + // identicon, label, balance, etc + h('.account-data-subsection', { + style: { + margin: '0 20px', + }, + }, [ + + // 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', + }, + }, [ + 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('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name), + ]), + 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', + marginTop: '10px', + marginBottom: '15px', + color: '#AEAEAE', + }, + }, checksumAddress), + + // copy and export + + h('.flex-row', { + style: { + justifyContent: 'flex-end', + }, + }, [ + + h(AccountInfoLink, { selected, network }), + + h(CopyButton, { + value: checksumAddress, + }), + + h(Tooltip, { + title: 'QR Code', + }, [ + h('i.fa.fa-qrcode.pointer.pop-hover', { + onClick: () => props.dispatch(actions.showQrView(selected, identity ? identity.name : '')), + style: { + fontSize: '18px', + position: 'relative', + color: 'rgb(247, 134, 28)', + top: '5px', + marginLeft: '3px', + marginRight: '3px', + }, + }), + ]), + + h(Tooltip, { + title: 'Export Private Key', + }, [ + h('div', { + style: { + display: 'flex', + alignItems: 'center', + }, + }, [ + h('img.cursor-pointer.color-orange', { + src: 'images/key-32.png', + onClick: () => this.requestAccountExport(selected), + style: { + height: '19px', + }, + }), + ]), + ]), + ]), + ]), + + // 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('button', { + onClick: () => props.dispatch(actions.buyEthView(selected)), + style: { + marginBottom: '20px', + marginRight: '8px', + position: 'absolute', + left: '219px', + }, + }, 'BUY'), + + h('button', { + onClick: () => props.dispatch(actions.showSendPage()), + style: { + marginBottom: '20px', + marginRight: '8px', + }, + }, 'SEND'), + + ]), + ]), + + // subview (tx history, pk export confirm, buy eth warning) + h(ReactCSSTransitionGroup, { + className: 'css-transition-group', + transitionName: 'main', + transitionEnterTimeout: 300, + transitionLeaveTimeout: 300, + }, [ + 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', [ + + 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)) + }, + }) +} + +AccountDetailScreen.prototype.requestAccountExport = function () { + this.props.dispatch(actions.requestExportAccount()) +} -- cgit