diff options
author | Chi Kei Chan <chikeichan@gmail.com> | 2017-10-26 10:46:42 +0800 |
---|---|---|
committer | Chi Kei Chan <chikeichan@gmail.com> | 2017-10-26 10:46:42 +0800 |
commit | db5326dfc288015a4d9f792653a71fd4d7abca33 (patch) | |
tree | cb93f52f999816d07a6146274093aaebdb7ed8d3 /ui/app/components/wallet-view.js | |
parent | a9a841ba01f6bffa29a3e0491e3a88f6aff72ac7 (diff) | |
parent | b2e440e4ffba6db29cf8a928a41534c1f204d485 (diff) | |
download | tangerine-wallet-browser-db5326dfc288015a4d9f792653a71fd4d7abca33.tar.gz tangerine-wallet-browser-db5326dfc288015a4d9f792653a71fd4d7abca33.tar.zst tangerine-wallet-browser-db5326dfc288015a4d9f792653a71fd4d7abca33.zip |
Merge branch 'NewUI-flat' into uat
Diffstat (limited to 'ui/app/components/wallet-view.js')
-rw-r--r-- | ui/app/components/wallet-view.js | 112 |
1 files changed, 52 insertions, 60 deletions
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index a870a24e3..3cb7a8b76 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -3,7 +3,8 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('./identicon') -const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns +// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns +const copyToClipboard = require('copy-to-clipboard') const actions = require('../actions') const BalanceComponent = require('./balance-component') const TokenList = require('./token-list') @@ -19,6 +20,7 @@ function mapStateToProps (state) { identities: state.metamask.identities, accounts: state.metamask.accounts, tokens: state.metamask.tokens, + keyrings: state.metamask.keyrings, selectedAddress: selectors.getSelectedAddress(state), selectedIdentity: selectors.getSelectedIdentity(state), selectedAccount: selectors.getSelectedAccount(state), @@ -28,15 +30,22 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - showSendPage: () => { dispatch(actions.showSendPage()) }, - hideSidebar: () => { dispatch(actions.hideSidebar()) }, + showSendPage: () => dispatch(actions.showSendPage()), + hideSidebar: () => dispatch(actions.hideSidebar()), unsetSelectedToken: () => dispatch(actions.setSelectedToken()), + showAccountDetailModal: () => { + dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) + }, + showAddTokenPage: () => dispatch(actions.showAddTokenPage()), } } inherits(WalletView, Component) function WalletView () { Component.call(this) + this.state = { + hasCopied: false, + } } WalletView.prototype.renderWalletBalance = function () { @@ -47,7 +56,7 @@ WalletView.prototype.renderWalletBalance = function () { hideSidebar, sidebarOpen, } = this.props - console.log({ selectedAccount }) + const selectedClass = selectedTokenAddress ? '' : 'wallet-balance-wrapper--active' @@ -73,13 +82,25 @@ WalletView.prototype.renderWalletBalance = function () { WalletView.prototype.render = function () { const { - network, responsiveDisplayClassname, identities, - selectedAddress, accounts, + responsiveDisplayClassname, + selectedAddress, selectedIdentity, + keyrings, + showAccountDetailModal, + hideSidebar, + showAddTokenPage, } = this.props // temporary logs + fake extra wallets // console.log('walletview, selectedAccount:', selectedAccount) + const keyring = keyrings.find((kr) => { + return kr.accounts.includes(selectedAddress) || + kr.accounts.includes(selectedIdentity.address) + }) + + const type = keyring.type + const isLoose = type !== 'HD Key Tree' + return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: {}, }, [ @@ -88,57 +109,16 @@ WalletView.prototype.render = function () { h('div.flex-column.wallet-view-account-details', { style: {}, }, [ + h('div.wallet-view__sidebar-close', { + onClick: hideSidebar, + }), - h('div.flex-row.account-options-menu', { - style: { - position: 'relative', - }, - }, [ - - h(AccountDropdowns, { - selected: selectedAddress, - network, - identities, - useCssTransition: true, - enableAccountOptions: true, - dropdownWrapperStyle: { - padding: '1px 15px', - marginLeft: '-25px', - position: 'absolute', - width: '122%', // TODO, refactor all of this component out into media queries - }, - menuItemStyles: { - padding: '0px 0px', - margin: '22px 0px', - }, - }, []), - - ]), + h('div.wallet-view__keyring-label', isLoose ? 'IMPORTED' : ''), - h('div.flex-column.flex-center', { + h('div.flex-column.flex-center.wallet-view__name-container', { + style: { margin: '0 auto' }, + onClick: showAccountDetailModal, }, [ - h('div', { - style: { - position: 'relative', - }, - }, [ - h(AccountDropdowns, { - accounts, - style: { - position: 'absolute', - left: 'calc(50% + 28px + 5.5px)', - top: '14px', - }, - innerStyle: { - padding: '10px 16px', - }, - useCssTransition: true, - selected: selectedAddress, - network, - identities, - }, []), - ]), - h(Identicon, { diameter: 54, address: selectedAddress, @@ -150,21 +130,33 @@ WalletView.prototype.render = function () { selectedIdentity.name, ]), + h('button.wallet-view__details-button', 'DETAILS'), ]), ]), - // 'Wallet' - Title - // Not visible on mobile - h('div.flex-column.wallet-view-title-wrapper', {}, [ - h('span.wallet-view-title', {}, [ - 'Wallet', - ]), + + h('div.wallet-view__address', { + onClick: () => { + copyToClipboard(selectedAddress) + this.setState({ hasCopied: true }) + setTimeout(() => this.setState({ hasCopied: false }), 3000) + }, + }, [ + this.state.hasCopied && 'Copied to Clipboard', + !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, + h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), ]), this.renderWalletBalance(), h(TokenList), + h('button.wallet-view__add-token-button', { + onClick: () => { + showAddTokenPage() + hideSidebar() + }, + }, 'Add Token'), ]) } |