1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Hook up new dropdown components

This commit is contained in:
sdtsui 2017-07-18 05:26:31 -07:00
parent b9dfb3cd1e
commit f329c232a2
7 changed files with 153 additions and 180 deletions

View File

@ -13,7 +13,6 @@ function EditableLabel () {
EditableLabel.prototype.render = function () { EditableLabel.prototype.render = function () {
const props = this.props const props = this.props
const state = this.state const state = this.state
console.log("editing:", state.isEditingLabel);
if (state && state.isEditingLabel) { if (state && state.isEditingLabel) {
return h('div.editable-label', [ return h('div.editable-label', [
@ -31,8 +30,6 @@ EditableLabel.prototype.render = function () {
} else { } else {
return h('div.name-label', { return h('div.name-label', {
onClick: (event) => { onClick: (event) => {
debugger;
console.log("event", event.target);
this.setState({ isEditingLabel: true }) this.setState({ isEditingLabel: true })
}, },
}, this.props.children) }, this.props.children)

View File

@ -39,7 +39,6 @@ Network.prototype.render = function () {
}), }),
h('i.fa.fa-sort-desc'), h('i.fa.fa-sort-desc'),
]) ])
} else if (providerName === 'mainnet') { } else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network' hoverText = 'Main Ethereum Network'
iconName = 'ethereum-network' iconName = 'ethereum-network'

View File

@ -3,23 +3,18 @@ const extend = require('xtend')
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const connect = require('react-redux').connect const connect = require('react-redux').connect
const CopyButton = require('./components/copyButton')
const AccountInfoLink = require('./components/account-info-link')
const actions = require('./actions') const actions = require('./actions')
const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
const valuesFor = require('./util').valuesFor const valuesFor = require('./util').valuesFor
const Identicon = require('./components/identicon') const Identicon = require('./components/identicon')
const EthBalance = require('./components/eth-balance') const EthBalance = require('./components/eth-balance')
const TransactionList = require('./components/transaction-list') const TransactionList = require('./components/transaction-list')
const ExportAccountView = require('./components/account-export') const ExportAccountView = require('./components/account-export')
const ethUtil = require('ethereumjs-util') const ethUtil = require('ethereumjs-util')
const EditableLabel = require('./components/editable-label') const EditableLabel = require('./components/editable-label')
const Tooltip = require('./components/tooltip')
const TabBar = require('./components/tab-bar') const TabBar = require('./components/tab-bar')
const TokenList = require('./components/token-list') const TokenList = require('./components/token-list')
const AccountOptionsMenus = require('./components/account-options-menus').AccountOptionsMenus; const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
console.log("AOM",AccountOptionsMenus);
module.exports = connect(mapStateToProps)(AccountDetailScreen) module.exports = connect(mapStateToProps)(AccountDetailScreen)
@ -53,8 +48,6 @@ AccountDetailScreen.prototype.render = function () {
var identity = props.identities[selected] var identity = props.identities[selected]
var account = props.accounts[selected] var account = props.accounts[selected]
const { network, conversionRate, currentCurrency } = props const { network, conversionRate, currentCurrency } = props
console.log("identity:", identity);
console.log("result:", identity && identity.name);
return ( return (
@ -103,10 +96,41 @@ AccountDetailScreen.prototype.render = function () {
// What is shown when not editing + edit text: // What is shown when not editing + edit text:
h('label.editing-label', [h('.edit-text', 'edit')]), h('label.editing-label', [h('.edit-text', 'edit')]),
h('h2.font-medium.color-forest', {name: 'edit'}, [ h(
identity && identity.name, 'div',
h(AccountOptionsMenus, { style: { marginLeft: '35%' }}, []), {
]), style: {
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
},
},
[
h(
'h2.font-medium.color-forest',
{
name: 'edit',
style: {
},
},
[
identity && identity.name,
]
),
h(
AccountDropdowns,
{
style: {
marginRight: '8px',
marginLeft: 'auto',
},
selected,
network,
identities: props.identities,
},
),
]
),
]), ]),
h('.flex-row', { h('.flex-row', {
style: { style: {
@ -132,56 +156,6 @@ AccountDetailScreen.prototype.render = function () {
color: '#AEAEAE', color: '#AEAEAE',
}, },
}, checksumAddress), }, checksumAddress),
// copy and export
h('.flex-row', {
style: {
justifyContent: 'flex-end',
},
}, [
h(AccountInfoLink, { selected, network }),
h(CopyButton, {
value: checksumAddress,
}),
h(Tooltip, {
title: 'QR Code',
}, [
h('i.fa.fa-qrcode.pointer.pop-hover', {
onClick: () => props.dispatch(actions.showQrView(selected, identity ? identity.name : '')),
style: {
fontSize: '18px',
position: 'relative',
color: 'rgb(247, 134, 28)',
top: '5px',
marginLeft: '3px',
marginRight: '3px',
},
}),
]),
h(Tooltip, {
title: 'Export Private Key',
}, [
h('div', {
style: {
display: 'flex',
alignItems: 'center',
},
}, [
h('img.cursor-pointer.color-orange', {
src: 'images/key-32.png',
onClick: () => this.requestAccountExport(selected),
style: {
height: '19px',
},
}),
]),
]),
]),
]), ]),
// account ballence // account ballence
@ -313,7 +287,3 @@ AccountDetailScreen.prototype.transactionList = function () {
}, },
}) })
} }
AccountDetailScreen.prototype.requestAccountExport = function () {
this.props.dispatch(actions.requestExportAccount())
}

View File

@ -10,7 +10,6 @@ const NewKeyChainScreen = require('./new-keychain')
// unlock // unlock
const UnlockScreen = require('./unlock') const UnlockScreen = require('./unlock')
// accounts // accounts
const AccountsScreen = require('./accounts')
const AccountDetailScreen = require('./account-detail') const AccountDetailScreen = require('./account-detail')
const SendTransactionScreen = require('./send') const SendTransactionScreen = require('./send')
const ConfirmTxScreen = require('./conf-tx') const ConfirmTxScreen = require('./conf-tx')
@ -24,11 +23,9 @@ const Import = require('./accounts/import')
const InfoScreen = require('./info') const InfoScreen = require('./info')
const Loading = require('./components/loading') const Loading = require('./components/loading')
const SandwichExpando = require('sandwich-expando') const SandwichExpando = require('sandwich-expando')
const MenuDroppo = require('menu-droppo') const Dropdown = require('./components/dropdown').Dropdown
const DropMenuItem = require('./components/drop-menu-item') const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
import { Dropdown, DropdownMenuItem } from './components/dropdown';
const NetworkIndicator = require('./components/network') const NetworkIndicator = require('./components/network')
const Tooltip = require('./components/tooltip')
const BuyView = require('./components/buy-button-subview') const BuyView = require('./components/buy-button-subview')
const QrView = require('./components/qr-code') const QrView = require('./components/qr-code')
const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
@ -126,7 +123,7 @@ App.prototype.renderAppBar = function () {
alignItems: 'center', alignItems: 'center',
visibility: props.isUnlocked ? 'visible' : 'none', visibility: props.isUnlocked ? 'visible' : 'none',
background: props.isUnlocked ? 'white' : 'none', background: props.isUnlocked ? 'white' : 'none',
height: '36px', height: '38px',
position: 'relative', position: 'relative',
zIndex: 12, zIndex: 12,
}, },
@ -174,21 +171,6 @@ App.prototype.renderAppBar = function () {
}, },
}, [ }, [
// small accounts nav
props.isUnlocked && h(Tooltip, { title: 'Switch Accounts' }, [
h('img.cursor-pointer.color-orange', {
src: 'images/switch_acc.svg',
style: {
width: '23.5px',
marginRight: '8px',
},
onClick: (event) => {
event.stopPropagation()
this.props.dispatch(actions.showAccountsPage())
},
}),
]),
// hamburger // hamburger
props.isUnlocked && h(SandwichExpando, { props.isUnlocked && h(SandwichExpando, {
width: 16, width: 16,
@ -210,11 +192,12 @@ App.prototype.renderAppBar = function () {
App.prototype.renderNetworkDropdown = function () { App.prototype.renderNetworkDropdown = function () {
const props = this.props const props = this.props
const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
const rpcList = props.frequentRpcList const rpcList = props.frequentRpcList
const state = this.state || {} const state = this.state || {}
const isOpen = state.isNetworkMenuOpen const isOpen = state.isNetworkMenuOpen
return h(MenuDroppo, { return h(Dropdown, {
isOpen, isOpen,
onClickOutside: (event) => { onClickOutside: (event) => {
this.setState({ isNetworkMenuOpen: !isOpen }) this.setState({ isNetworkMenuOpen: !isOpen })
@ -222,73 +205,90 @@ App.prototype.renderNetworkDropdown = function () {
zIndex: 11, zIndex: 11,
style: { style: {
position: 'absolute', position: 'absolute',
left: 0, left: '2px',
top: '36px', top: '36px',
}, },
innerStyle: { innerStyle: {},
background: 'white', }, [
boxShadow: '1px 1px 2px rgba(0,0,0,0.1)', h(
}, DropdownMenuItem,
}, [ // DROP MENU ITEMS {
h('style', ` closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
.drop-menu-item:hover { background:rgb(235, 235, 235); } onClick: () => props.dispatch(actions.setProviderType('mainnet')),
.drop-menu-item i { margin: 11px; } },
`), [
h('.menu-icon.diamond'),
'Main Ethereum Network',
providerType === 'mainnet' ? h('.check', '✓') : null,
]
),
h(DropMenuItem, { h(
label: 'Main Ethereum Network', DropdownMenuItem,
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), {
action: () => props.dispatch(actions.setProviderType('mainnet')), closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
icon: h('.menu-icon.diamond'), onClick: () => props.dispatch(actions.setProviderType('ropsten')),
activeNetworkRender: props.network, },
provider: props.provider, [
}), h('.menu-icon.red-dot'),
'Ropsten Test Network',
providerType === 'ropsten' ? h('.check', '✓') : null,
]),
h(DropMenuItem, { h(
label: 'Ropsten Test Network', DropdownMenuItem,
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), {
action: () => props.dispatch(actions.setProviderType('ropsten')), closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
icon: h('.menu-icon.red-dot'), onClick: () => props.dispatch(actions.setProviderType('kovan')),
activeNetworkRender: props.network, },
provider: props.provider, [
}), h('.menu-icon.hollow-diamond'),
'Kovan Test Network',
providerType === 'kovan' ? h('.check', '✓') : null,
]
),
h(DropMenuItem, { h(
label: 'Kovan Test Network', DropdownMenuItem,
closeMenu: () => this.setState({ isNetworkMenuOpen: false}), {
action: () => props.dispatch(actions.setProviderType('kovan')), closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
icon: h('.menu-icon.hollow-diamond'), onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
activeNetworkRender: props.network, },
provider: props.provider, [
}), h('.menu-icon.golden-square'),
'Rinkeby Test Network',
providerType === 'rinkeby' ? h('.check', '✓') : null,
]
),
h(DropMenuItem, { h(
label: 'Rinkeby Test Network', DropdownMenuItem,
closeMenu: () => this.setState({ isNetworkMenuOpen: false}), {
action: () => props.dispatch(actions.setProviderType('rinkeby')), closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
icon: h('.menu-icon.golden-square'), onClick: () => props.dispatch(actions.setDefaultRpcTarget(rpcList)),
activeNetworkRender: props.network, },
provider: props.provider, [
}), h('i.fa.fa-question-circle.fa-lg.menu-icon'),
'Localhost 8545',
h(DropMenuItem, { activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
label: 'Localhost 8545', ]
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), ),
action: () => props.dispatch(actions.setDefaultRpcTarget(rpcList)),
icon: h('i.fa.fa-question-circle.fa-lg'),
activeNetworkRender: props.provider.rpcTarget,
}),
this.renderCustomOption(props.provider), this.renderCustomOption(props.provider),
this.renderCommonRpc(rpcList, props.provider), this.renderCommonRpc(rpcList, props.provider),
h(DropMenuItem, { h(
label: 'Custom RPC', DropdownMenuItem,
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), {
action: () => this.props.dispatch(actions.showConfigPage()), closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
icon: h('i.fa.fa-question-circle.fa-lg'), onClick: () => this.props.dispatch(actions.showConfigPage()),
}), },
[
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
'Custom RPC',
activeNetwork === 'custom' ? h('.check', '✓') : null,
]
),
]) ])
} }
@ -304,29 +304,29 @@ App.prototype.renderDropdown = function () {
}, },
style: { style: {
position: 'absolute', position: 'absolute',
right: 0, right: '2px',
top: '36px', top: '38px',
}, },
innerStyle: {}, innerStyle: {},
}, [ // DROP MENU ITEMS }, [
h(DropdownMenuItem, { h(DropdownMenuItem, {
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
onClick: () => this.props.dispatch(actions.showConfigPage()), onClick: () => { this.props.dispatch(actions.showConfigPage()) },
}, 'Settings'), }, 'Settings'),
h(DropdownMenuItem, { h(DropdownMenuItem, {
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
onClick: () => this.props.dispatch(actions.showImportPage()), onClick: () => { this.props.dispatch(actions.showImportPage()) },
}, 'Import Account'), }, 'Import Account'),
h(DropdownMenuItem, { h(DropdownMenuItem, {
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
onClick: () => this.props.dispatch(actions.lockMetamask()), onClick: () => { this.props.dispatch(actions.lockMetamask()) },
}, 'Lock'), }, 'Lock'),
h(DropdownMenuItem, { h(DropdownMenuItem, {
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
onClick: () => this.props.dispatch(actions.showInfoPage()), onClick: () => { this.props.dispatch(actions.showInfoPage()) },
}, 'Info/Help'), }, 'Info/Help'),
]) ])
} }
@ -413,10 +413,6 @@ App.prototype.renderPrimary = function () {
// show current view // show current view
switch (props.currentView.name) { switch (props.currentView.name) {
case 'accounts':
log.debug('rendering accounts screen')
return h(AccountsScreen, {key: 'accounts'})
case 'accountDetail': case 'accountDetail':
log.debug('rendering account detail screen') log.debug('rendering account detail screen')
return h(AccountDetailScreen, {key: 'account-detail'}) return h(AccountDetailScreen, {key: 'account-detail'})
@ -519,13 +515,18 @@ App.prototype.renderCustomOption = function (provider) {
return null return null
default: default:
return h(DropMenuItem, { return h(
label, DropdownMenuItem,
key: rpcTarget, {
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), key: rpcTarget,
icon: h('i.fa.fa-question-circle.fa-lg'), closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
activeNetworkRender: 'custom', },
}) [
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
label,
h('.check', '✓'),
]
)
} }
} }
@ -558,14 +559,19 @@ App.prototype.renderCommonRpc = function (rpcList, provider) {
if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) { if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
return null return null
} else { } else {
return h(DropMenuItem, { return h(
label: rpc, DropdownMenuItem,
key: rpc, {
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), key: rpc,
action: () => props.dispatch(actions.setRpcTarget(rpc)), closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
icon: h('i.fa.fa-question-circle.fa-lg'), action: () => props.dispatch(actions.setRpcTarget(rpc)),
activeNetworkRender: rpc, },
}) [
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
rpc,
h('.check', '✓'),
]
)
} }
}) })
} }

View File

@ -200,7 +200,7 @@ AccountDropdowns.propTypes = {
selected: PropTypes.string, selected: PropTypes.string,
} }
const mapDispatchToProps = (dispatch, ownProps) => { const mapDispatchToProps = (dispatch) => {
return { return {
actions: { actions: {
showConfigPage: () => dispatch(actions.showConfigPage()), showConfigPage: () => dispatch(actions.showConfigPage()),

View File

@ -30,15 +30,17 @@ EditableLabel.prototype.render = function () {
} else { } else {
return h('div.name-label', { return h('div.name-label', {
onClick: (event) => { onClick: (event) => {
if (event.target.getAttribute('name') === 'edit') { const nameAttribute = event.target.getAttribute('name')
// checks for class to handle smaller CTA above the account name
const classAttribute = event.target.getAttribute('class')
if (nameAttribute === 'edit' || classAttribute === 'edit-text') {
this.setState({ isEditingLabel: true }) this.setState({ isEditingLabel: true })
} }
}, },
}, this.props.children) }, this.props.children)
} }
} }
// class = edit-text
// name = edit
EditableLabel.prototype.saveIfEnter = function (event) { EditableLabel.prototype.saveIfEnter = function (event) {
if (event.key === 'Enter') { if (event.key === 'Enter') {
this.saveText() this.saveText()

View File

@ -39,7 +39,6 @@ Network.prototype.render = function () {
}), }),
h('i.fa.fa-sort-desc'), h('i.fa.fa-sort-desc'),
]) ])
} else if (providerName === 'mainnet') { } else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network' hoverText = 'Main Ethereum Network'
iconName = 'ethereum-network' iconName = 'ethereum-network'