Merge pull request #1835 from MetaMask/NewUI
Begin UI Refactor with Responsiveness & New Menusfeature/default_network_editable
kumavis
7 years ago
committed by
GitHub
commit
57abc58d62
@ -0,0 +1,12 @@ |
|||||||
|
<!doctype html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> |
||||||
|
<title>MetaMask Plugin</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="app-content"></div> |
||||||
|
<script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -1,23 +1,19 @@ |
|||||||
var fs = require('fs') |
const fs = require('fs') |
||||||
var path = require('path') |
const path = require('path') |
||||||
var browserify = require('browserify') |
const browserify = require('browserify') |
||||||
var tests = fs.readdirSync(path.join(__dirname, 'lib')) |
const tests = fs.readdirSync(path.join(__dirname, 'lib')) |
||||||
var bundlePath = path.join(__dirname, 'bundle.js') |
const bundlePath = path.join(__dirname, 'bundle.js') |
||||||
|
|
||||||
var b = browserify() |
const b = browserify() |
||||||
|
|
||||||
// Remove old bundle
|
const writeStream = fs.createWriteStream(bundlePath) |
||||||
try { |
|
||||||
fs.unlinkSync(bundlePath) |
|
||||||
|
|
||||||
var writeStream = fs.createWriteStream(bundlePath) |
tests.forEach(function (fileName) { |
||||||
|
b.add(path.join(__dirname, 'lib', fileName)) |
||||||
tests.forEach(function (fileName) { |
}) |
||||||
b.add(path.join(__dirname, 'lib', fileName)) |
|
||||||
}) |
|
||||||
|
|
||||||
b.bundle().pipe(writeStream) |
|
||||||
} catch (e) { |
|
||||||
console.error('Integration build failure', e) |
|
||||||
} |
|
||||||
|
|
||||||
|
b.bundle() |
||||||
|
.pipe(writeStream) |
||||||
|
.on('error', (err) => { |
||||||
|
throw err |
||||||
|
}) |
||||||
|
|||||||
@ -0,0 +1,115 @@ |
|||||||
|
var assert = require('assert'); |
||||||
|
|
||||||
|
const additions = require('react-testutils-additions'); |
||||||
|
const h = require('react-hyperscript'); |
||||||
|
const ReactTestUtils = require('react-addons-test-utils'); |
||||||
|
const sinon = require('sinon'); |
||||||
|
const path = require('path'); |
||||||
|
const Dropdown = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdown.js')).Dropdown; |
||||||
|
const DropdownMenuItem = require(path.join(__dirname, '..', '..', '..', '..', 'ui', 'app', 'components', 'dropdown.js')).DropdownMenuItem; |
||||||
|
|
||||||
|
describe('Dropdown components', function () { |
||||||
|
let onClickOutside; |
||||||
|
let closeMenu; |
||||||
|
let onClick; |
||||||
|
|
||||||
|
let dropdownComponentProps; |
||||||
|
const renderer = ReactTestUtils.createRenderer() |
||||||
|
beforeEach(function () { |
||||||
|
onClickOutside = sinon.spy(); |
||||||
|
closeMenu = sinon.spy(); |
||||||
|
onClick = sinon.spy(); |
||||||
|
|
||||||
|
dropdownComponentProps = { |
||||||
|
isOpen: true, |
||||||
|
zIndex: 11, |
||||||
|
onClickOutside, |
||||||
|
style: { |
||||||
|
position: 'absolute', |
||||||
|
right: 0, |
||||||
|
top: '36px', |
||||||
|
}, |
||||||
|
innerStyle: {}, |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
it('can render two items', function () { |
||||||
|
const dropdownComponent = h( |
||||||
|
Dropdown, |
||||||
|
dropdownComponentProps, |
||||||
|
[ |
||||||
|
h('style', ` |
||||||
|
.drop-menu-item:hover { background:rgb(235, 235, 235); } |
||||||
|
.drop-menu-item i { margin: 11px; } |
||||||
|
`),
|
||||||
|
h(DropdownMenuItem, { |
||||||
|
closeMenu, |
||||||
|
onClick, |
||||||
|
}, 'Item 1'), |
||||||
|
h(DropdownMenuItem, { |
||||||
|
closeMenu, |
||||||
|
onClick, |
||||||
|
}, 'Item 2'), |
||||||
|
] |
||||||
|
) |
||||||
|
|
||||||
|
const component = additions.renderIntoDocument(dropdownComponent); |
||||||
|
renderer.render(dropdownComponent); |
||||||
|
const items = additions.find(component, 'li'); |
||||||
|
assert.equal(items.length, 2); |
||||||
|
}); |
||||||
|
|
||||||
|
it('closes when item clicked', function() { |
||||||
|
const dropdownComponent = h( |
||||||
|
Dropdown, |
||||||
|
dropdownComponentProps, |
||||||
|
[ |
||||||
|
h('style', ` |
||||||
|
.drop-menu-item:hover { background:rgb(235, 235, 235); } |
||||||
|
.drop-menu-item i { margin: 11px; } |
||||||
|
`),
|
||||||
|
h(DropdownMenuItem, { |
||||||
|
closeMenu, |
||||||
|
onClick, |
||||||
|
}, 'Item 1'), |
||||||
|
h(DropdownMenuItem, { |
||||||
|
closeMenu, |
||||||
|
onClick, |
||||||
|
}, 'Item 2'), |
||||||
|
] |
||||||
|
) |
||||||
|
const component = additions.renderIntoDocument(dropdownComponent); |
||||||
|
renderer.render(dropdownComponent); |
||||||
|
const items = additions.find(component, 'li'); |
||||||
|
const node = items[0]; |
||||||
|
ReactTestUtils.Simulate.click(node); |
||||||
|
assert.equal(closeMenu.calledOnce, true); |
||||||
|
}); |
||||||
|
|
||||||
|
it('invokes click handler when item clicked', function() { |
||||||
|
const dropdownComponent = h( |
||||||
|
Dropdown, |
||||||
|
dropdownComponentProps, |
||||||
|
[ |
||||||
|
h('style', ` |
||||||
|
.drop-menu-item:hover { background:rgb(235, 235, 235); } |
||||||
|
.drop-menu-item i { margin: 11px; } |
||||||
|
`),
|
||||||
|
h(DropdownMenuItem, { |
||||||
|
closeMenu, |
||||||
|
onClick, |
||||||
|
}, 'Item 1'), |
||||||
|
h(DropdownMenuItem, { |
||||||
|
closeMenu, |
||||||
|
onClick, |
||||||
|
}, 'Item 2'), |
||||||
|
] |
||||||
|
) |
||||||
|
const component = additions.renderIntoDocument(dropdownComponent); |
||||||
|
renderer.render(dropdownComponent); |
||||||
|
const items = additions.find(component, 'li'); |
||||||
|
const node = items[0]; |
||||||
|
ReactTestUtils.Simulate.click(node); |
||||||
|
assert.equal(onClick.calledOnce, true); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -1,91 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const ethUtil = require('ethereumjs-util') |
|
||||||
|
|
||||||
const EthBalance = require('../components/eth-balance') |
|
||||||
const CopyButton = require('../components/copyButton') |
|
||||||
const Identicon = require('../components/identicon') |
|
||||||
|
|
||||||
module.exports = AccountListItem |
|
||||||
|
|
||||||
inherits(AccountListItem, Component) |
|
||||||
function AccountListItem () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
AccountListItem.prototype.render = function () { |
|
||||||
const { identity, selectedAddress, accounts, onShowDetail, |
|
||||||
conversionRate, currentCurrency } = this.props |
|
||||||
|
|
||||||
const checksumAddress = identity && identity.address && ethUtil.toChecksumAddress(identity.address) |
|
||||||
const isSelected = selectedAddress === identity.address |
|
||||||
const account = accounts[identity.address] |
|
||||||
const selectedClass = isSelected ? '.selected' : '' |
|
||||||
|
|
||||||
return ( |
|
||||||
h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, { |
|
||||||
key: `account-panel-${identity.address}`, |
|
||||||
onClick: (event) => onShowDetail(identity.address, event), |
|
||||||
}, [ |
|
||||||
|
|
||||||
h('.identicon-wrapper.flex-column.flex-center.select-none', [ |
|
||||||
this.pendingOrNot(), |
|
||||||
this.indicateIfLoose(), |
|
||||||
h(Identicon, { |
|
||||||
address: identity.address, |
|
||||||
imageify: true, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
// account address, balance
|
|
||||||
h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', { |
|
||||||
style: { |
|
||||||
width: '200px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('span', identity.name), |
|
||||||
h('span.font-small', { |
|
||||||
style: { |
|
||||||
overflow: 'hidden', |
|
||||||
textOverflow: 'ellipsis', |
|
||||||
}, |
|
||||||
}, checksumAddress), |
|
||||||
h(EthBalance, { |
|
||||||
value: account && account.balance, |
|
||||||
currentCurrency, |
|
||||||
conversionRate, |
|
||||||
style: { |
|
||||||
lineHeight: '7px', |
|
||||||
marginTop: '10px', |
|
||||||
}, |
|
||||||
}), |
|
||||||
]), |
|
||||||
|
|
||||||
// copy button
|
|
||||||
h('.identity-copy.flex-column', { |
|
||||||
style: { |
|
||||||
margin: '0 20px', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h(CopyButton, { |
|
||||||
value: checksumAddress, |
|
||||||
}), |
|
||||||
]), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
AccountListItem.prototype.indicateIfLoose = function () { |
|
||||||
try { // Sometimes keyrings aren't loaded yet:
|
|
||||||
const type = this.props.keyring.type |
|
||||||
const isLoose = type !== 'HD Key Tree' |
|
||||||
return isLoose ? h('.keyring-label', 'LOOSE') : null |
|
||||||
} catch (e) { return } |
|
||||||
} |
|
||||||
|
|
||||||
AccountListItem.prototype.pendingOrNot = function () { |
|
||||||
const pending = this.props.pending |
|
||||||
if (pending.length === 0) return null |
|
||||||
return h('.pending-dot', pending.length) |
|
||||||
} |
|
||||||
@ -1,164 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const actions = require('../actions') |
|
||||||
const valuesFor = require('../util').valuesFor |
|
||||||
const findDOMNode = require('react-dom').findDOMNode |
|
||||||
const AccountListItem = require('./account-list-item') |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(AccountsScreen) |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
const pendingTxs = valuesFor(state.metamask.unapprovedTxs) |
|
||||||
.filter(txMeta => txMeta.metamaskNetworkId === state.metamask.network) |
|
||||||
const pendingMsgs = valuesFor(state.metamask.unapprovedMsgs) |
|
||||||
const pending = pendingTxs.concat(pendingMsgs) |
|
||||||
|
|
||||||
return { |
|
||||||
accounts: state.metamask.accounts, |
|
||||||
identities: state.metamask.identities, |
|
||||||
unapprovedTxs: state.metamask.unapprovedTxs, |
|
||||||
selectedAddress: state.metamask.selectedAddress, |
|
||||||
scrollToBottom: state.appState.scrollToBottom, |
|
||||||
pending, |
|
||||||
keyrings: state.metamask.keyrings, |
|
||||||
conversionRate: state.metamask.conversionRate, |
|
||||||
currentCurrency: state.metamask.currentCurrency, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(AccountsScreen, Component) |
|
||||||
function AccountsScreen () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
AccountsScreen.prototype.render = function () { |
|
||||||
const props = this.props |
|
||||||
const { keyrings, conversionRate, currentCurrency } = props |
|
||||||
const identityList = valuesFor(props.identities) |
|
||||||
const unapprovedTxList = valuesFor(props.unapprovedTxs) |
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
h('.accounts-section.flex-grow', [ |
|
||||||
|
|
||||||
// subtitle and nav
|
|
||||||
h('.section-title.flex-center', [ |
|
||||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { |
|
||||||
onClick: this.goHome.bind(this), |
|
||||||
}), |
|
||||||
h('h2.page-subtitle', 'Select Account'), |
|
||||||
]), |
|
||||||
|
|
||||||
h('hr.horizontal-line'), |
|
||||||
|
|
||||||
// identity selection
|
|
||||||
h('section.identity-section', { |
|
||||||
style: { |
|
||||||
height: '418px', |
|
||||||
overflowY: 'auto', |
|
||||||
overflowX: 'hidden', |
|
||||||
}, |
|
||||||
}, |
|
||||||
[ |
|
||||||
identityList.map((identity) => { |
|
||||||
const pending = this.props.pending.filter((txOrMsg) => { |
|
||||||
if ('txParams' in txOrMsg) { |
|
||||||
return txOrMsg.txParams.from === identity.address |
|
||||||
} else if ('msgParams' in txOrMsg) { |
|
||||||
return txOrMsg.msgParams.from === identity.address |
|
||||||
} else { |
|
||||||
return false |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
const simpleAddress = identity.address.substring(2).toLowerCase() |
|
||||||
const keyring = keyrings.find((kr) => { |
|
||||||
return kr.accounts.includes(simpleAddress) || |
|
||||||
kr.accounts.includes(identity.address) |
|
||||||
}) |
|
||||||
|
|
||||||
return h(AccountListItem, { |
|
||||||
key: `acct-panel-${identity.address}`, |
|
||||||
identity, |
|
||||||
selectedAddress: this.props.selectedAddress, |
|
||||||
conversionRate, |
|
||||||
currentCurrency, |
|
||||||
accounts: this.props.accounts, |
|
||||||
onShowDetail: this.onShowDetail.bind(this), |
|
||||||
pending, |
|
||||||
keyring, |
|
||||||
}) |
|
||||||
}), |
|
||||||
|
|
||||||
h('hr.horizontal-line'), |
|
||||||
h('div.footer.hover-white.pointer', { |
|
||||||
key: 'reveal-account-bar', |
|
||||||
onClick: () => { |
|
||||||
this.addNewAccount() |
|
||||||
}, |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
height: '40px', |
|
||||||
padding: '10px', |
|
||||||
justifyContent: 'center', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-plus.fa-lg', {key: ''}), |
|
||||||
]), |
|
||||||
h('hr.horizontal-line'), |
|
||||||
]), |
|
||||||
|
|
||||||
unapprovedTxList.length ? ( |
|
||||||
|
|
||||||
h('.unconftx-link.flex-row.flex-center', { |
|
||||||
onClick: this.navigateToConfTx.bind(this), |
|
||||||
}, [ |
|
||||||
h('span', 'Unconfirmed Txs'), |
|
||||||
h('i.fa.fa-arrow-right.fa-lg'), |
|
||||||
]) |
|
||||||
|
|
||||||
) : ( |
|
||||||
null |
|
||||||
), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
// If a new account was revealed, scroll to the bottom
|
|
||||||
AccountsScreen.prototype.componentDidUpdate = function () { |
|
||||||
const scrollToBottom = this.props.scrollToBottom |
|
||||||
|
|
||||||
if (scrollToBottom) { |
|
||||||
var container = findDOMNode(this) |
|
||||||
var scrollable = container.querySelector('.identity-section') |
|
||||||
scrollable.scrollTop = scrollable.scrollHeight |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
AccountsScreen.prototype.navigateToConfTx = function () { |
|
||||||
event.stopPropagation() |
|
||||||
this.props.dispatch(actions.showConfTxPage()) |
|
||||||
} |
|
||||||
|
|
||||||
AccountsScreen.prototype.onShowDetail = function (address, event) { |
|
||||||
event.stopPropagation() |
|
||||||
this.props.dispatch(actions.showAccountDetail(address)) |
|
||||||
} |
|
||||||
|
|
||||||
AccountsScreen.prototype.addNewAccount = function () { |
|
||||||
this.props.dispatch(actions.addNewAccount(0)) |
|
||||||
} |
|
||||||
|
|
||||||
/* An optional view proposed in this design: |
|
||||||
* https://consensys.quip.com/zZVrAysM5znY
|
|
||||||
AccountsScreen.prototype.addNewAccount = function () { |
|
||||||
this.props.dispatch(actions.navigateToNewAccountScreen()) |
|
||||||
} |
|
||||||
*/ |
|
||||||
|
|
||||||
AccountsScreen.prototype.goHome = function () { |
|
||||||
this.props.dispatch(actions.goHome()) |
|
||||||
} |
|
||||||
@ -0,0 +1,289 @@ |
|||||||
|
const Component = require('react').Component |
||||||
|
const PropTypes = require('react').PropTypes |
||||||
|
const h = require('react-hyperscript') |
||||||
|
const actions = require('../actions') |
||||||
|
const genAccountLink = require('../../lib/account-link.js') |
||||||
|
const connect = require('react-redux').connect |
||||||
|
const Dropdown = require('./dropdown').Dropdown |
||||||
|
const DropdownMenuItem = require('./dropdown').DropdownMenuItem |
||||||
|
const Identicon = require('./identicon') |
||||||
|
const ethUtil = require('ethereumjs-util') |
||||||
|
const copyToClipboard = require('copy-to-clipboard') |
||||||
|
|
||||||
|
class AccountDropdowns extends Component { |
||||||
|
constructor (props) { |
||||||
|
super(props) |
||||||
|
this.state = { |
||||||
|
accountSelectorActive: false, |
||||||
|
optionsMenuActive: false, |
||||||
|
} |
||||||
|
this.accountSelectorToggleClassName = 'accounts-selector' |
||||||
|
this.optionsMenuToggleClassName = 'fa-ellipsis-h' |
||||||
|
} |
||||||
|
|
||||||
|
renderAccounts () { |
||||||
|
const { identities, selected } = this.props |
||||||
|
|
||||||
|
return Object.keys(identities).map((key, index) => { |
||||||
|
const identity = identities[key] |
||||||
|
const isSelected = identity.address === selected |
||||||
|
|
||||||
|
return h( |
||||||
|
DropdownMenuItem, |
||||||
|
{ |
||||||
|
closeMenu: () => {}, |
||||||
|
onClick: () => { |
||||||
|
this.props.actions.showAccountDetail(identity.address) |
||||||
|
}, |
||||||
|
style: { |
||||||
|
marginTop: index === 0 ? '5px' : '', |
||||||
|
fontSize: '24px', |
||||||
|
}, |
||||||
|
}, |
||||||
|
[ |
||||||
|
h( |
||||||
|
Identicon, |
||||||
|
{ |
||||||
|
address: identity.address, |
||||||
|
diameter: 32, |
||||||
|
style: { |
||||||
|
marginLeft: '10px', |
||||||
|
}, |
||||||
|
}, |
||||||
|
), |
||||||
|
h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, identity.name || ''), |
||||||
|
h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null), |
||||||
|
] |
||||||
|
) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
renderAccountSelector () { |
||||||
|
const { actions } = this.props |
||||||
|
const { accountSelectorActive } = this.state |
||||||
|
|
||||||
|
return h( |
||||||
|
Dropdown, |
||||||
|
{ |
||||||
|
useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
|
||||||
|
style: { |
||||||
|
marginLeft: '-238px', |
||||||
|
marginTop: '38px', |
||||||
|
minWidth: '180px', |
||||||
|
overflowY: 'auto', |
||||||
|
maxHeight: '300px', |
||||||
|
width: '300px', |
||||||
|
}, |
||||||
|
innerStyle: { |
||||||
|
padding: '8px 25px', |
||||||
|
}, |
||||||
|
isOpen: accountSelectorActive, |
||||||
|
onClickOutside: (event) => { |
||||||
|
const { classList } = event.target |
||||||
|
const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName) |
||||||
|
if (accountSelectorActive && isNotToggleElement) { |
||||||
|
this.setState({ accountSelectorActive: false }) |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
[ |
||||||
|
...this.renderAccounts(), |
||||||
|
h( |
||||||
|
DropdownMenuItem, |
||||||
|
{ |
||||||
|
closeMenu: () => {}, |
||||||
|
onClick: () => actions.addNewAccount(), |
||||||
|
}, |
||||||
|
[ |
||||||
|
h( |
||||||
|
Identicon, |
||||||
|
{ |
||||||
|
style: { |
||||||
|
marginLeft: '10px', |
||||||
|
}, |
||||||
|
diameter: 32, |
||||||
|
}, |
||||||
|
), |
||||||
|
h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'), |
||||||
|
], |
||||||
|
), |
||||||
|
h( |
||||||
|
DropdownMenuItem, |
||||||
|
{ |
||||||
|
closeMenu: () => {}, |
||||||
|
onClick: () => actions.showImportPage(), |
||||||
|
}, |
||||||
|
[ |
||||||
|
h( |
||||||
|
Identicon, |
||||||
|
{ |
||||||
|
style: { |
||||||
|
marginLeft: '10px', |
||||||
|
}, |
||||||
|
diameter: 32, |
||||||
|
}, |
||||||
|
), |
||||||
|
h('span', { |
||||||
|
style: { |
||||||
|
marginLeft: '20px', |
||||||
|
fontSize: '24px', |
||||||
|
marginBottom: '5px', |
||||||
|
}, |
||||||
|
}, 'Import Account'), |
||||||
|
] |
||||||
|
), |
||||||
|
] |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderAccountOptions () { |
||||||
|
const { actions } = this.props |
||||||
|
const { optionsMenuActive } = this.state |
||||||
|
|
||||||
|
return h( |
||||||
|
Dropdown, |
||||||
|
{ |
||||||
|
style: { |
||||||
|
marginLeft: '-215px', |
||||||
|
minWidth: '180px', |
||||||
|
}, |
||||||
|
isOpen: optionsMenuActive, |
||||||
|
onClickOutside: () => { |
||||||
|
const { classList } = event.target |
||||||
|
const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName) |
||||||
|
if (optionsMenuActive && isNotToggleElement) { |
||||||
|
this.setState({ optionsMenuActive: false }) |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
[ |
||||||
|
h( |
||||||
|
DropdownMenuItem, |
||||||
|
{ |
||||||
|
closeMenu: () => {}, |
||||||
|
onClick: () => { |
||||||
|
const { selected, network } = this.props |
||||||
|
const url = genAccountLink(selected, network) |
||||||
|
global.platform.openWindow({ url }) |
||||||
|
}, |
||||||
|
}, |
||||||
|
'View account on Etherscan', |
||||||
|
), |
||||||
|
h( |
||||||
|
DropdownMenuItem, |
||||||
|
{ |
||||||
|
closeMenu: () => {}, |
||||||
|
onClick: () => { |
||||||
|
const { selected, identities } = this.props |
||||||
|
var identity = identities[selected] |
||||||
|
actions.showQrView(selected, identity ? identity.name : '') |
||||||
|
}, |
||||||
|
}, |
||||||
|
'Show QR Code', |
||||||
|
), |
||||||
|
h( |
||||||
|
DropdownMenuItem, |
||||||
|
{ |
||||||
|
closeMenu: () => {}, |
||||||
|
onClick: () => { |
||||||
|
const { selected } = this.props |
||||||
|
const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) |
||||||
|
copyToClipboard(checkSumAddress) |
||||||
|
}, |
||||||
|
}, |
||||||
|
'Copy Address to clipboard', |
||||||
|
), |
||||||
|
h( |
||||||
|
DropdownMenuItem, |
||||||
|
{ |
||||||
|
closeMenu: () => {}, |
||||||
|
onClick: () => { |
||||||
|
actions.requestAccountExport() |
||||||
|
}, |
||||||
|
}, |
||||||
|
'Export Private Key', |
||||||
|
), |
||||||
|
] |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { style, enableAccountsSelector, enableAccountOptions } = this.props |
||||||
|
const { optionsMenuActive, accountSelectorActive } = this.state |
||||||
|
|
||||||
|
return h( |
||||||
|
'span', |
||||||
|
{ |
||||||
|
style: style, |
||||||
|
}, |
||||||
|
[ |
||||||
|
enableAccountsSelector && h( |
||||||
|
// 'i.fa.fa-angle-down',
|
||||||
|
'div.cursor-pointer.color-orange.accounts-selector', |
||||||
|
{ |
||||||
|
style: { |
||||||
|
// fontSize: '1.8em',
|
||||||
|
background: 'url(images/switch_acc.svg) white center center no-repeat', |
||||||
|
height: '25px', |
||||||
|
width: '25px', |
||||||
|
transform: 'scale(0.75)', |
||||||
|
marginRight: '3px', |
||||||
|
}, |
||||||
|
onClick: (event) => { |
||||||
|
event.stopPropagation() |
||||||
|
this.setState({ |
||||||
|
accountSelectorActive: !accountSelectorActive, |
||||||
|
optionsMenuActive: false, |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
this.renderAccountSelector(), |
||||||
|
), |
||||||
|
enableAccountOptions && h( |
||||||
|
'i.fa.fa-ellipsis-h', |
||||||
|
{ |
||||||
|
style: { |
||||||
|
marginRight: '0.5em', |
||||||
|
fontSize: '1.8em', |
||||||
|
}, |
||||||
|
onClick: (event) => { |
||||||
|
event.stopPropagation() |
||||||
|
this.setState({ |
||||||
|
accountSelectorActive: false, |
||||||
|
optionsMenuActive: !optionsMenuActive, |
||||||
|
}) |
||||||
|
}, |
||||||
|
}, |
||||||
|
this.renderAccountOptions() |
||||||
|
), |
||||||
|
] |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
AccountDropdowns.defaultProps = { |
||||||
|
enableAccountsSelector: false, |
||||||
|
enableAccountOptions: false, |
||||||
|
} |
||||||
|
|
||||||
|
AccountDropdowns.propTypes = { |
||||||
|
identities: PropTypes.objectOf(PropTypes.object), |
||||||
|
selected: PropTypes.string, |
||||||
|
} |
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch) => { |
||||||
|
return { |
||||||
|
actions: { |
||||||
|
showConfigPage: () => dispatch(actions.showConfigPage()), |
||||||
|
requestAccountExport: () => dispatch(actions.requestExportAccount()), |
||||||
|
showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), |
||||||
|
addNewAccount: () => dispatch(actions.addNewAccount()), |
||||||
|
showImportPage: () => dispatch(actions.showImportPage()), |
||||||
|
showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)), |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns), |
||||||
|
} |
||||||
@ -1,41 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
const Tooltip = require('./tooltip') |
|
||||||
const genAccountLink = require('../../lib/account-link') |
|
||||||
|
|
||||||
module.exports = AccountInfoLink |
|
||||||
|
|
||||||
inherits(AccountInfoLink, Component) |
|
||||||
function AccountInfoLink () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
AccountInfoLink.prototype.render = function () { |
|
||||||
const { selected, network } = this.props |
|
||||||
const title = 'View account on Etherscan' |
|
||||||
const url = genAccountLink(selected, network) |
|
||||||
|
|
||||||
if (!url) { |
|
||||||
return null |
|
||||||
} |
|
||||||
|
|
||||||
return h('.account-info-link', { |
|
||||||
style: { |
|
||||||
display: 'flex', |
|
||||||
alignItems: 'center', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h(Tooltip, { |
|
||||||
title, |
|
||||||
}, [ |
|
||||||
h('i.fa.fa-info-circle.cursor-pointer.color-orange', { |
|
||||||
style: { |
|
||||||
margin: '5px', |
|
||||||
}, |
|
||||||
onClick () { global.platform.openWindow({ url }) }, |
|
||||||
}), |
|
||||||
]), |
|
||||||
]) |
|
||||||
} |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
const Component = require('react').Component |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const inherits = require('util').inherits |
|
||||||
|
|
||||||
module.exports = DropMenuItem |
|
||||||
|
|
||||||
inherits(DropMenuItem, Component) |
|
||||||
function DropMenuItem () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
DropMenuItem.prototype.render = function () { |
|
||||||
return h('li.drop-menu-item', { |
|
||||||
onClick: () => { |
|
||||||
this.props.closeMenu() |
|
||||||
this.props.action() |
|
||||||
}, |
|
||||||
style: { |
|
||||||
listStyle: 'none', |
|
||||||
padding: '6px 16px 6px 5px', |
|
||||||
fontFamily: 'Montserrat Regular', |
|
||||||
color: 'rgb(125, 128, 130)', |
|
||||||
cursor: 'pointer', |
|
||||||
display: 'flex', |
|
||||||
justifyContent: 'flex-start', |
|
||||||
}, |
|
||||||
}, [ |
|
||||||
this.props.icon, |
|
||||||
this.props.label, |
|
||||||
this.activeNetworkRender(), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
DropMenuItem.prototype.activeNetworkRender = function () { |
|
||||||
const activeNetwork = this.props.activeNetworkRender |
|
||||||
const { provider } = this.props |
|
||||||
const providerType = provider ? provider.type : null |
|
||||||
if (activeNetwork === undefined) return |
|
||||||
|
|
||||||
switch (this.props.label) { |
|
||||||
case 'Main Ethereum Network': |
|
||||||
if (providerType === 'mainnet') return h('.check', '✓') |
|
||||||
break |
|
||||||
case 'Ropsten Test Network': |
|
||||||
if (providerType === 'ropsten') return h('.check', '✓') |
|
||||||
break |
|
||||||
case 'Kovan Test Network': |
|
||||||
if (providerType === 'kovan') return h('.check', '✓') |
|
||||||
break |
|
||||||
case 'Rinkeby Test Network': |
|
||||||
if (providerType === 'rinkeby') return h('.check', '✓') |
|
||||||
break |
|
||||||
case 'Localhost 8545': |
|
||||||
if (activeNetwork === 'http://localhost:8545') return h('.check', '✓') |
|
||||||
break |
|
||||||
default: |
|
||||||
if (activeNetwork === 'custom') return h('.check', '✓') |
|
||||||
} |
|
||||||
} |
|
||||||
@ -0,0 +1,94 @@ |
|||||||
|
const Component = require('react').Component |
||||||
|
const PropTypes = require('react').PropTypes |
||||||
|
const h = require('react-hyperscript') |
||||||
|
const MenuDroppo = require('./menu-droppo') |
||||||
|
const extend = require('xtend') |
||||||
|
|
||||||
|
const noop = () => {} |
||||||
|
|
||||||
|
class Dropdown extends Component { |
||||||
|
render () { |
||||||
|
const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props |
||||||
|
|
||||||
|
const innerStyleDefaults = extend({ |
||||||
|
borderRadius: '4px', |
||||||
|
padding: '8px 16px', |
||||||
|
background: 'rgba(0, 0, 0, 0.8)', |
||||||
|
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', |
||||||
|
}, innerStyle) |
||||||
|
|
||||||
|
return h( |
||||||
|
MenuDroppo, |
||||||
|
{ |
||||||
|
useCssTransition, |
||||||
|
isOpen, |
||||||
|
zIndex: 11, |
||||||
|
onClickOutside, |
||||||
|
style, |
||||||
|
innerStyle: innerStyleDefaults, |
||||||
|
}, |
||||||
|
[ |
||||||
|
h( |
||||||
|
'style', |
||||||
|
` |
||||||
|
li.dropdown-menu-item:hover { color:rgb(225, 225, 225); } |
||||||
|
li.dropdown-menu-item { color: rgb(185, 185, 185); } |
||||||
|
` |
||||||
|
), |
||||||
|
...children, |
||||||
|
] |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
Dropdown.defaultProps = { |
||||||
|
isOpen: false, |
||||||
|
onClick: noop, |
||||||
|
useCssTransition: false, |
||||||
|
} |
||||||
|
|
||||||
|
Dropdown.propTypes = { |
||||||
|
isOpen: PropTypes.bool.isRequired, |
||||||
|
onClick: PropTypes.func.isRequired, |
||||||
|
children: PropTypes.node, |
||||||
|
style: PropTypes.object.isRequired, |
||||||
|
} |
||||||
|
|
||||||
|
class DropdownMenuItem extends Component { |
||||||
|
render () { |
||||||
|
const { onClick, closeMenu, children, style } = this.props |
||||||
|
|
||||||
|
return h( |
||||||
|
'li.dropdown-menu-item', |
||||||
|
{ |
||||||
|
onClick: () => { |
||||||
|
onClick() |
||||||
|
closeMenu() |
||||||
|
}, |
||||||
|
style: Object.assign({ |
||||||
|
listStyle: 'none', |
||||||
|
padding: '8px 0px 8px 0px', |
||||||
|
fontSize: '18px', |
||||||
|
fontStyle: 'normal', |
||||||
|
fontFamily: 'Montserrat Regular', |
||||||
|
cursor: 'pointer', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'flex-start', |
||||||
|
alignItems: 'center', |
||||||
|
}, style), |
||||||
|
}, |
||||||
|
children |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
DropdownMenuItem.propTypes = { |
||||||
|
closeMenu: PropTypes.func.isRequired, |
||||||
|
onClick: PropTypes.func.isRequired, |
||||||
|
children: PropTypes.node, |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
Dropdown, |
||||||
|
DropdownMenuItem, |
||||||
|
} |
||||||
@ -0,0 +1,130 @@ |
|||||||
|
const Component = require('react').Component |
||||||
|
const h = require('react-hyperscript') |
||||||
|
const inherits = require('util').inherits |
||||||
|
const findDOMNode = require('react-dom').findDOMNode |
||||||
|
const ReactCSSTransitionGroup = require('react-addons-css-transition-group') |
||||||
|
|
||||||
|
module.exports = MenuDroppoComponent |
||||||
|
|
||||||
|
|
||||||
|
inherits(MenuDroppoComponent, Component) |
||||||
|
function MenuDroppoComponent () { |
||||||
|
Component.call(this) |
||||||
|
} |
||||||
|
|
||||||
|
MenuDroppoComponent.prototype.render = function () { |
||||||
|
const speed = this.props.speed || '300ms' |
||||||
|
const useCssTransition = this.props.useCssTransition |
||||||
|
const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0 |
||||||
|
|
||||||
|
this.manageListeners() |
||||||
|
|
||||||
|
let style = this.props.style || {} |
||||||
|
if (!('position' in style)) { |
||||||
|
style.position = 'fixed' |
||||||
|
} |
||||||
|
style.zIndex = zIndex |
||||||
|
|
||||||
|
return ( |
||||||
|
h('.menu-droppo-container', { |
||||||
|
style, |
||||||
|
}, [ |
||||||
|
h('style', ` |
||||||
|
.menu-droppo-enter { |
||||||
|
transition: transform ${speed} ease-in-out; |
||||||
|
transform: translateY(-200%); |
||||||
|
} |
||||||
|
|
||||||
|
.menu-droppo-enter.menu-droppo-enter-active { |
||||||
|
transition: transform ${speed} ease-in-out; |
||||||
|
transform: translateY(0%); |
||||||
|
} |
||||||
|
|
||||||
|
.menu-droppo-leave { |
||||||
|
transition: transform ${speed} ease-in-out; |
||||||
|
transform: translateY(0%); |
||||||
|
} |
||||||
|
|
||||||
|
.menu-droppo-leave.menu-droppo-leave-active { |
||||||
|
transition: transform ${speed} ease-in-out; |
||||||
|
transform: translateY(-200%); |
||||||
|
} |
||||||
|
`),
|
||||||
|
|
||||||
|
useCssTransition |
||||||
|
? h(ReactCSSTransitionGroup, { |
||||||
|
className: 'css-transition-group', |
||||||
|
transitionName: 'menu-droppo', |
||||||
|
transitionEnterTimeout: parseInt(speed), |
||||||
|
transitionLeaveTimeout: parseInt(speed), |
||||||
|
}, this.renderPrimary()) |
||||||
|
: this.renderPrimary(), |
||||||
|
]) |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
MenuDroppoComponent.prototype.renderPrimary = function () { |
||||||
|
const isOpen = this.props.isOpen |
||||||
|
if (!isOpen) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
const innerStyle = this.props.innerStyle || {} |
||||||
|
|
||||||
|
return ( |
||||||
|
h('.menu-droppo', { |
||||||
|
key: 'menu-droppo-drawer', |
||||||
|
style: innerStyle, |
||||||
|
}, |
||||||
|
[ this.props.children ]) |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
MenuDroppoComponent.prototype.manageListeners = function () { |
||||||
|
const isOpen = this.props.isOpen |
||||||
|
const onClickOutside = this.props.onClickOutside |
||||||
|
|
||||||
|
if (isOpen) { |
||||||
|
this.outsideClickHandler = onClickOutside |
||||||
|
} else if (isOpen) { |
||||||
|
this.outsideClickHandler = null |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
MenuDroppoComponent.prototype.componentDidMount = function () { |
||||||
|
if (this && document.body) { |
||||||
|
this.globalClickHandler = this.globalClickOccurred.bind(this) |
||||||
|
document.body.addEventListener('click', this.globalClickHandler) |
||||||
|
var container = findDOMNode(this) |
||||||
|
this.container = container |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
MenuDroppoComponent.prototype.componentWillUnmount = function () { |
||||||
|
if (this && document.body) { |
||||||
|
document.body.removeEventListener('click', this.globalClickHandler) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
MenuDroppoComponent.prototype.globalClickOccurred = function (event) { |
||||||
|
const target = event.target |
||||||
|
const container = findDOMNode(this) |
||||||
|
|
||||||
|
if (target !== container && |
||||||
|
!isDescendant(this.container, event.target) && |
||||||
|
this.outsideClickHandler) { |
||||||
|
this.outsideClickHandler(event) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function isDescendant (parent, child) { |
||||||
|
var node = child.parentNode |
||||||
|
while (node !== null) { |
||||||
|
if (node === parent) { |
||||||
|
return true |
||||||
|
} |
||||||
|
node = node.parentNode |
||||||
|
} |
||||||
|
|
||||||
|
return false |
||||||
|
} |
||||||
Loading…
Reference in new issue