mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Added account options on home screen
This commit is contained in:
Santiago Gonzalez Toral
Dan Finlay
parent
23fa223040
commit
f88373237b
@ -364,6 +364,9 @@
|
||||
"exchangeRate": {
|
||||
"message": "Exchange Rate"
|
||||
},
|
||||
"expandView": {
|
||||
"message": "Expand View"
|
||||
},
|
||||
"exportPrivateKey": {
|
||||
"message": "Export Private Key"
|
||||
},
|
||||
@ -723,6 +726,9 @@
|
||||
"openInTab": {
|
||||
"message": "Open in tab"
|
||||
},
|
||||
"accountOptions": {
|
||||
"message": "Account Options"
|
||||
},
|
||||
"or": {
|
||||
"message": "or",
|
||||
"description": "choice between creating or importing a new account"
|
||||
|
||||
13
app/images/expand.svg
Normal file
13
app/images/expand.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>expand</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Extension-(mobile-form-factor)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="expand" fill="#FFFFFF" fill-rule="nonzero">
|
||||
<path d="M15.4802977,0.0647543729 C15.3777028,0.0227060788 15.2692212,0 15.1590578,0 L10.1134046,0 C9.64920448,0 9.27246238,0.376752715 9.27246238,0.840965882 C9.27246238,1.30602001 9.64920448,1.68193176 10.1134046,1.68193176 L13.1290233,1.68193176 L8.77993963,6.03113791 C8.45113123,6.35995557 8.45113123,6.89228697 8.77993963,7.22026366 C8.94392336,7.38509298 9.15920457,7.46666667 9.37448577,7.46666667 C9.58976698,7.46666667 9.80504818,7.38509298 9.96903191,7.22026366 L14.3181156,2.87105752 L14.3181156,5.88676117 C14.3181156,6.35181531 14.6948577,6.72772705 15.1590578,6.72772705 C15.6232579,6.72772705 16,6.35181531 16,5.88676117 L16,0.840965882 C16,0.731640317 15.9781355,0.623155718 15.9352475,0.519716915 C15.8494713,0.31452124 15.6863286,0.150532893 15.4802977,0.0647543729 Z" id="Fill-1" transform="translate(12.266667, 3.733333) rotate(-360.000000) translate(-12.266667, -3.733333) "></path>
|
||||
<path d="M6.94696439,8.59808771 C6.84436944,8.55603941 6.73588789,8.53333333 6.62572446,8.53333333 L1.58007124,8.53333333 C1.11587115,8.53333333 0.739129042,8.91008605 0.739129042,9.37429922 C0.739129042,9.83935335 1.11587115,10.2152651 1.58007124,10.2152651 L4.59568999,10.2152651 L0.246606301,14.5644712 C-0.0822021004,14.8932889 -0.0822021004,15.4256203 0.246606301,15.753597 C0.410590031,15.9184263 0.625871235,16 0.841152439,16 C1.05643364,16 1.27171485,15.9184263 1.43569858,15.753597 L5.78478226,11.4043909 L5.78478226,14.4200945 C5.78478226,14.8851486 6.16152437,15.2610604 6.62572446,15.2610604 C7.08992456,15.2610604 7.46666667,14.8851486 7.46666667,14.4200945 L7.46666667,9.37429922 C7.46666667,9.26497365 7.44480217,9.15648905 7.40191412,9.05305025 C7.31613801,8.84785457 7.15299522,8.68386623 6.94696439,8.59808771 Z" id="Fill-1-Copy" transform="translate(3.733333, 12.266667) rotate(-180.000000) translate(-3.733333, -12.266667) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
16
app/images/hide.svg
Normal file
16
app/images/hide.svg
Normal file
@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>hide</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Extension-(mobile-form-factor)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="hide" fill="#FFFFFF">
|
||||
<polygon id="Fill-1" points="12.7924541 0.685525644 2.5021101 11.2520394 3.21020258 11.978038 13.4995465 1.41152421"></polygon>
|
||||
<path d="M4.53087507,6.33167913 C4.53087507,4.36419221 6.08507807,2.76945986 8.00132835,2.76945986 C8.40338086,2.76945986 8.78243037,2.85366337 9.14147727,2.98202238 L10.0225923,2.07734807 C9.36950705,1.93153223 8.69641914,1.83808687 8.00132835,1.83808687 C4.64088944,1.83808687 1.68850383,3.6289518 0.000283333333,6.33167913 C0.757382218,7.54338819 1.77751546,8.55691095 2.96667077,9.32295752 L4.73890224,7.50334018 C4.61288579,7.1346931 4.53087507,6.74448171 4.53087507,6.33167913" id="Fill-2"></path>
|
||||
<path d="M13.0194751,3.34029805 L11.2513649,5.16094226 C11.3770883,5.52958934 11.4589083,5.91980074 11.4589083,6.33157644 C11.4589083,8.30009024 9.90831963,9.89482259 7.99652557,9.89482259 C7.59441023,9.89482259 7.21724,9.81061908 6.85803026,9.68123319 L5.97896421,10.5859075 C6.63152857,10.7317233 7.30305122,10.8261956 7.99652557,10.8261956 C11.348152,10.8261956 14.2936719,9.03430378 15.9789642,6.33157644 C15.223626,5.11986738 14.2048672,4.10634463 13.0194751,3.34029805" id="Fill-4"></path>
|
||||
<path d="M8.00102831,8.7499629 C9.30219826,8.7499629 10.3553358,7.66763972 10.3553358,6.33167913 C10.3553358,6.25774434 10.341334,6.18689017 10.3343331,6.11398225 L7.78900062,8.72839858 C7.86000989,8.73455982 7.92901891,8.7499629 8.00102831,8.7499629" id="Fill-7"></path>
|
||||
<path d="M8.00102831,3.9139088 C6.69985837,3.9139088 5.64672082,4.99623198 5.64672082,6.33116569 C5.64672082,6.40612736 5.66072264,6.47698153 5.66772356,6.54886258 L8.213056,3.93547311 C8.14204673,3.92931188 8.07303772,3.9139088 8.00102831,3.9139088" id="Fill-9"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
17
app/images/info.svg
Normal file
17
app/images/info.svg
Normal file
@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>info</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Extension-(mobile-form-factor)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="info" fill="#FFFFFF">
|
||||
<path d="M13.2142857,0.642857143 L13.2142857,0.5 L0.5,0.5 L0.5,13.2142857 L0.642857143,13.2142857 L0.642857143,0.642857143 L13.2142857,0.642857143 Z" id="Combined-Shape" stroke="#FFFFFF"></path>
|
||||
<path d="M3.42857143,3.42857143 L3.42857143,14.8571429 L14.8571429,14.8571429 L14.8571429,3.42857143 L3.42857143,3.42857143 Z M2.28571429,2.28571429 L16,2.28571429 L16,16 L2.28571429,16 L2.28571429,2.28571429 Z" id="Rectangle-18-Copy" fill-rule="nonzero"></path>
|
||||
<g id="Group-44" transform="translate(8.000000, 5.000000)">
|
||||
<rect id="Rectangle-39" x="0" y="3" width="2" height="5" rx="1"></rect>
|
||||
<rect id="Rectangle-39-Copy" x="0" y="0" width="2" height="2" rx="1"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
12
app/images/open-etherscan.svg
Normal file
12
app/images/open-etherscan.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>open-etherscan</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Extension-(mobile-form-factor)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="open-etherscan" fill="#FFFFFF">
|
||||
<path d="M3.00020312,0 C2.44821175,0 2.00021875,0.447993 2.00021875,0.999984375 C2.00021875,1.55197575 2.44821175,1.99996875 3.00020312,1.99996875 L12.5860533,1.99996875 L0.293245418,14.2927767 C-0.0977484727,14.6837706 -0.0977484727,15.3157607 0.293245418,15.7067546 C0.488242371,15.9017515 0.744238371,15.99975 1.00023437,15.99975 C1.25623037,15.99975 1.51222637,15.9017515 1.70722332,15.7067546 L14.0000312,3.41394666 L14.0000312,12.9997969 C14.0000312,13.5517883 14.4480242,13.9997813 15.0000156,13.9997813 C15.552007,13.9997813 16,13.5517883 16,12.9997969 L16,0 L3.00020312,0 Z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -271,6 +271,17 @@ describe('MetaMask', function () {
|
||||
await driver.wait(until.stalenessOf(accountModal))
|
||||
await delay(regularDelayMs)
|
||||
})
|
||||
it('show account details dropdown menu', async () => {
|
||||
|
||||
const {width, height} = await driver.manage().window().getSize()
|
||||
driver.manage().window().setSize(320, 480)
|
||||
await driver.findElement(By.css('div.menu-bar__open-in-browser')).click()
|
||||
const options = await driver.findElements(By.css('div.menu.account-details-dropdown div.menu__item'))
|
||||
assert.equal(options.length, 3) // HD Wallet type does not have to show the Remove Account option
|
||||
await delay(regularDelayMs)
|
||||
driver.manage().window().setSize(width, height)
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
describe('Log out an log back in', () => {
|
||||
|
||||
109
ui/app/components/dropdowns/account-details-dropdown.js
Normal file
109
ui/app/components/dropdowns/account-details-dropdown.js
Normal file
@ -0,0 +1,109 @@
|
||||
const Component = require('react').Component
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
const inherits = require('util').inherits
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('../../actions')
|
||||
const { getSelectedIdentity } = require('../../selectors')
|
||||
const genAccountLink = require('../../../lib/account-link.js')
|
||||
const { Menu, Item, CloseArea } = require('./components/menu')
|
||||
|
||||
AccountDetailsDropdown.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsDropdown)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
return {
|
||||
selectedIdentity: getSelectedIdentity(state),
|
||||
network: state.metamask.network,
|
||||
keyrings: state.metamask.keyrings,
|
||||
}
|
||||
}
|
||||
|
||||
function mapDispatchToProps (dispatch) {
|
||||
return {
|
||||
showAccountDetailModal: () => {
|
||||
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
|
||||
},
|
||||
viewOnEtherscan: (address, network) => {
|
||||
global.platform.openWindow({ url: genAccountLink(address, network) })
|
||||
},
|
||||
showRemoveAccountConfirmationModal: (identity) => {
|
||||
return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
inherits(AccountDetailsDropdown, Component)
|
||||
function AccountDetailsDropdown () {
|
||||
Component.call(this)
|
||||
|
||||
this.onClose = this.onClose.bind(this)
|
||||
}
|
||||
|
||||
AccountDetailsDropdown.prototype.onClose = function (e) {
|
||||
e.stopPropagation()
|
||||
this.props.onClose()
|
||||
}
|
||||
|
||||
AccountDetailsDropdown.prototype.render = function () {
|
||||
const {
|
||||
selectedIdentity,
|
||||
network,
|
||||
keyrings,
|
||||
showAccountDetailModal,
|
||||
viewOnEtherscan,
|
||||
showRemoveAccountConfirmationModal } = this.props
|
||||
|
||||
const { name, address } = selectedIdentity
|
||||
|
||||
const keyring = keyrings.find((kr) => {
|
||||
return kr.accounts.includes(address)
|
||||
})
|
||||
|
||||
const isRemovable = keyring.type !== 'HD Key Tree'
|
||||
|
||||
return h(Menu, { className: 'account-details-dropdown', isShowing: true }, [
|
||||
h(CloseArea, {
|
||||
onClick: this.onClose,
|
||||
}),
|
||||
h(Item, {
|
||||
onClick: (e) => {
|
||||
e.stopPropagation()
|
||||
global.platform.openExtensionInBrowser()
|
||||
this.props.onClose()
|
||||
},
|
||||
text: this.context.t('expandView'),
|
||||
icon: h(`img`, { src: "images/expand.svg", style: { height: '15px' } }),
|
||||
}),
|
||||
h(Item, {
|
||||
onClick: (e) => {
|
||||
e.stopPropagation()
|
||||
showAccountDetailModal()
|
||||
this.props.onClose()
|
||||
},
|
||||
text: this.context.t('accountDetails'),
|
||||
icon: h(`img`, { src: "images/info.svg", style: { height: '15px' } }),
|
||||
}),
|
||||
h(Item, {
|
||||
onClick: (e) => {
|
||||
e.stopPropagation()
|
||||
viewOnEtherscan(address, network)
|
||||
this.props.onClose()
|
||||
},
|
||||
text: this.context.t('viewOnEtherscan'),
|
||||
icon: h(`img`, { src: "images/open-etherscan.svg", style: { height: '15px' } }),
|
||||
}),
|
||||
isRemovable ? h(Item, {
|
||||
onClick: (e) => {
|
||||
e.stopPropagation()
|
||||
showRemoveAccountConfirmationModal(selectedIdentity)
|
||||
this.props.onClose()
|
||||
},
|
||||
text: this.context.t('removeAccount'),
|
||||
icon: h(`img`, { src: "images/hide.svg", style: { height: '15px' } }),
|
||||
}):null,
|
||||
])
|
||||
}
|
||||
@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Tooltip from '../tooltip'
|
||||
import SelectedAccount from '../selected-account'
|
||||
import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'
|
||||
|
||||
export default class MenuBar extends PureComponent {
|
||||
static contextTypes = {
|
||||
@ -15,9 +16,12 @@ export default class MenuBar extends PureComponent {
|
||||
showSidebar: PropTypes.func,
|
||||
}
|
||||
|
||||
state = { accountDetailsMenuOpen: false }
|
||||
|
||||
render () {
|
||||
const { t } = this.context
|
||||
const { isMascara, sidebarOpen, hideSidebar, showSidebar } = this.props
|
||||
const { accountDetailsMenuOpen } = this.state
|
||||
|
||||
return (
|
||||
<div className="menu-bar">
|
||||
@ -34,18 +38,25 @@ export default class MenuBar extends PureComponent {
|
||||
{
|
||||
!isMascara && (
|
||||
<Tooltip
|
||||
title={t('openInTab')}
|
||||
title={t('accountOptions')}
|
||||
position="bottom"
|
||||
>
|
||||
<div
|
||||
className="menu-bar__open-in-browser"
|
||||
onClick={() => global.platform.openExtensionInBrowser()}
|
||||
className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
|
||||
onClick={() => this.setState({ accountDetailsMenuOpen: true })}
|
||||
>
|
||||
<img src="images/popout.svg" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
{
|
||||
accountDetailsMenuOpen && (
|
||||
<AccountDetailsDropdown
|
||||
className="menu-bar__account-details-dropdown"
|
||||
onClose={() => this.setState({ accountDetailsMenuOpen: false })}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
.account-details-dropdown {
|
||||
width: 60%;
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
right: 15px;
|
||||
z-index: 2000;
|
||||
}
|
||||
@ -42,6 +42,8 @@
|
||||
|
||||
@import './request-signature.scss';
|
||||
|
||||
@import './account-details-dropdown.scss';
|
||||
|
||||
@import './account-dropdown-mini.scss';
|
||||
|
||||
@import './editable-label.scss';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user