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