1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00
This commit is contained in:
Chi Kei Chan 2017-10-16 01:28:25 -04:00
parent ac43872c1a
commit 5ee6e4d3b3
8 changed files with 159 additions and 11 deletions

View File

@ -201,6 +201,9 @@ var actions = {
callBackgroundThenUpdate, callBackgroundThenUpdate,
forceUpdateMetamaskState, forceUpdateMetamaskState,
TOGGLE_ACCOUNT_MENU: 'TOGGLE_ACCOUNT_MENU',
toggleAccountMenu,
} }
module.exports = actions module.exports = actions
@ -1303,3 +1306,9 @@ function forceUpdateMetamaskState (dispatch) {
dispatch(actions.updateMetamaskState(newState)) dispatch(actions.updateMetamaskState(newState))
}) })
} }
function toggleAccountMenu () {
return {
type: actions.TOGGLE_ACCOUNT_MENU,
}
}

View File

@ -91,6 +91,7 @@ function mapDispatchToProps (dispatch, ownProps) {
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
} }
} }
@ -256,10 +257,12 @@ App.prototype.renderAppBar = function () {
]), ]),
h(Identicon, { h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [
address: this.props.selectedAddress, h(Identicon, {
diameter: 32, address: this.props.selectedAddress,
}), diameter: 32,
}),
]),
]), ]),
]), ]),
]), ]),

View File

@ -3,7 +3,9 @@ const Component = require('react').Component
const connect = require('react-redux').connect const connect = require('react-redux').connect
const h = require('react-hyperscript') const h = require('react-hyperscript')
const actions = require('../../actions') 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) module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
@ -13,21 +15,33 @@ function AccountMenu () { Component.call(this) }
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
selectedAddress: state.metamask.selectedAddress, selectedAddress: state.metamask.selectedAddress,
isAccountMenuOpen: state.metamask.isAccountMenuOpen,
keyrings: state.metamask.keyrings,
identities: state.metamask.identities,
accounts: state.metamask.accounts,
} }
} }
function mapDispatchToProps () { // identities, accounts, selected, menuItemStyles, actions, keyrings
return {}
function mapDispatchToProps (dispatch) {
return {
toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
}
} }
AccountMenu.prototype.render = function () { 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' }, [ h(Item, { className: 'account-menu__header' }, [
'My Accounts', 'My Accounts',
h('button.account-menu__logout-button', 'Log out'), h('button.account-menu__logout-button', 'Log out'),
]), ]),
h(Divider), h(Divider),
h(Item, { text: 'hi' }), h('div.account-menu__accounts', this.renderAccounts()),
h(Divider), h(Divider),
h(Item, { h(Item, {
onClick: true, 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 }
}

View File

@ -41,4 +41,11 @@ Divider.prototype.render = function () {
return h('div.menu__divider') return h('div.menu__divider')
} }
module.exports = { Menu, Item, Divider } inherits(CloseArea, Component)
function CloseArea () { Component.call(this) }
CloseArea.prototype.render = function () {
return h('div.menu__close-area', { onClick: this.props.onClick })
}
module.exports = { Menu, Item, Divider, CloseArea }

View File

@ -136,7 +136,6 @@ WalletView.prototype.render = function () {
selected: selectedAddress, selected: selectedAddress,
network, network,
identities, identities,
enableAccountsSelector: true,
}, []), }, []),
]), ]),

View File

@ -20,6 +20,10 @@
right: calc((100vw - 65vw) / 2); right: calc((100vw - 65vw) / 2);
} }
&__icon {
cursor: pointer;
}
&__header { &__header {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
@ -41,4 +45,13 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
&__accounts {
display: flex;
flex-flow: column nowrap;
overflow-y: auto;
height: 272px;
position: relative;
z-index: 200;
}
} }

View File

@ -10,6 +10,8 @@
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
position: relative;
z-index: 200;
&--clickable { &--clickable {
cursor: pointer; cursor: pointer;
@ -40,4 +42,13 @@
width: 100%; width: 100%;
height: 1px; height: 1px;
} }
&__close-area {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
}
} }

View File

@ -10,6 +10,7 @@ function reduceMetamask (state, action) {
var metamaskState = extend({ var metamaskState = extend({
isInitialized: false, isInitialized: false,
isUnlocked: false, isUnlocked: false,
isAccountMenuOpen: false,
rpcTarget: 'https://rawtestrpc.metamask.io/', rpcTarget: 'https://rawtestrpc.metamask.io/',
identities: {}, identities: {},
unapprovedTxs: {}, unapprovedTxs: {},
@ -172,6 +173,11 @@ function reduceMetamask (state, action) {
}, },
}) })
case actions.TOGGLE_ACCOUNT_MENU:
return extend(metamaskState, {
isAccountMenuOpen: !metamaskState.isAccountMenuOpen,
})
default: default:
return metamaskState return metamaskState