aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/account-menu
diff options
context:
space:
mode:
authorChi Kei Chan <chikeichan@gmail.com>2017-10-16 13:28:25 +0800
committerChi Kei Chan <chikeichan@gmail.com>2017-10-18 13:38:00 +0800
commit5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2 (patch)
tree1020f2895a6a8368a2f50597c8bf86512b98a5a9 /ui/app/components/account-menu
parentac43872c1a1468057974648c8ae90bf1edd708d7 (diff)
downloadtangerine-wallet-browser-5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2.tar
tangerine-wallet-browser-5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2.tar.gz
tangerine-wallet-browser-5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2.tar.bz2
tangerine-wallet-browser-5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2.tar.lz
tangerine-wallet-browser-5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2.tar.xz
tangerine-wallet-browser-5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2.tar.zst
tangerine-wallet-browser-5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2.zip
wip
Diffstat (limited to 'ui/app/components/account-menu')
-rw-r--r--ui/app/components/account-menu/index.js110
1 files changed, 105 insertions, 5 deletions
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index 7dc3d10a5..3b1118271 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -3,7 +3,9 @@ const Component = require('react').Component
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const actions = require('../../actions')
-const { Menu, Item, Divider } = require('../dropdowns/components/menu')
+const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
+const Identicon = require('../identicon')
+const { formatBalance } = require('../../util')
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
@@ -13,21 +15,33 @@ function AccountMenu () { Component.call(this) }
function mapStateToProps (state) {
return {
selectedAddress: state.metamask.selectedAddress,
+ isAccountMenuOpen: state.metamask.isAccountMenuOpen,
+ keyrings: state.metamask.keyrings,
+ identities: state.metamask.identities,
+ accounts: state.metamask.accounts,
+
}
}
-function mapDispatchToProps () {
- return {}
+// identities, accounts, selected, menuItemStyles, actions, keyrings
+
+function mapDispatchToProps (dispatch) {
+ return {
+ toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+ }
}
AccountMenu.prototype.render = function () {
- return h(Menu, { className: 'account-menu' }, [
+ const { isAccountMenuOpen, toggleAccountMenu } = this.props
+
+ return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
+ h(CloseArea, { onClick: toggleAccountMenu }),
h(Item, { className: 'account-menu__header' }, [
'My Accounts',
h('button.account-menu__logout-button', 'Log out'),
]),
h(Divider),
- h(Item, { text: 'hi' }),
+ h('div.account-menu__accounts', this.renderAccounts()),
h(Divider),
h(Item, {
onClick: true,
@@ -53,4 +67,90 @@ AccountMenu.prototype.render = function () {
])
}
+AccountMenu.prototype.renderAccounts = function () {
+ const { identities, accounts, selected, actions, keyrings } = this.props
+
+ return Object.keys(identities).map((key, index) => {
+ const identity = identities[key]
+ const isSelected = identity.address === selected
+
+ const balanceValue = accounts[key].balance
+ const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+ const simpleAddress = identity.address.substring(2).toLowerCase()
+
+ const keyring = keyrings.find((kr) => {
+ return kr.accounts.includes(simpleAddress) ||
+ kr.accounts.includes(identity.address)
+ })
+
+ return h(
+ 'div.account-menu__account',
+ {
+ onClick: () => {
+ this.props.actions.showAccountDetail(identity.address)
+ },
+ },
+ [
+ h('div.account-menu__check-mark', [
+ isSelected ? h('i.fa.fa-check') : null,
+ ]),
+ h(
+ Identicon,
+ {
+ address: identity.address,
+ diameter: 24,
+ },
+ ),
+
+ h('div.account-menu__account-info', [
+
+ this.indicateIfLoose(keyring),
+
+ h('div.account-menu__name', {
+ style: {
+ fontSize: '18px',
+ maxWidth: '145px',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ },
+ }, identity.name || ''),
+
+ h('div.account-menu__balance', formattedBalance),
+ ]),
+
+ h('div.account-menu__action', {
+ onClick: () => {
+ actions.showEditAccountModal(identity)
+ },
+ }, 'Edit'),
+
+// =======
+// },
+// ),
+// this.indicateIfLoose(keyring),
+// h('span', {
+// style: {
+// marginLeft: '20px',
+// fontSize: '24px',
+// maxWidth: '145px',
+// whiteSpace: 'nowrap',
+// overflow: 'hidden',
+// textOverflow: 'ellipsis',
+// },
+// }, identity.name || ''),
+// h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
+// >>>>>>> master:ui/app/components/account-dropdowns.js
+ ],
+ )
+ })
+}
+
+AccountMenu.prototype.indicateIfLoose = function (keyring) {
+ try { // Sometimes keyrings aren't loaded yet:
+ const type = keyring.type
+ const isLoose = type !== 'HD Key Tree'
+ return isLoose ? h('.keyring-label', 'LOOSE') : null
+ } catch (e) { return }
+}