mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Move the old UI's AppBar into its own component
This commit is contained in:
Whymarrh Whitby
parent
fa4423bab2
commit
1d6227d718
@ -24,17 +24,13 @@ const ConfigScreen = require('./config')
|
|||||||
const AddTokenScreen = require('./add-token')
|
const AddTokenScreen = require('./add-token')
|
||||||
const Import = require('./accounts/import')
|
const Import = require('./accounts/import')
|
||||||
const InfoScreen = require('./info')
|
const InfoScreen = require('./info')
|
||||||
|
const AppBar = require('./components/app-bar')
|
||||||
const Loading = require('./components/loading')
|
const Loading = require('./components/loading')
|
||||||
const SandwichExpando = require('sandwich-expando')
|
|
||||||
const Dropdown = require('./components/dropdown').Dropdown
|
|
||||||
const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
|
|
||||||
const NetworkIndicator = require('./components/network')
|
|
||||||
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')
|
||||||
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
|
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
|
||||||
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
|
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
|
||||||
const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
|
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(App)
|
module.exports = connect(mapStateToProps)(App)
|
||||||
|
|
||||||
@ -102,12 +98,9 @@ App.prototype.render = function () {
|
|||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
},
|
},
|
||||||
}, [
|
}, [
|
||||||
|
h(AppBar, {
|
||||||
// app bar
|
...props,
|
||||||
this.renderAppBar(),
|
}),
|
||||||
this.renderNetworkDropdown(),
|
|
||||||
this.renderDropdown(),
|
|
||||||
|
|
||||||
this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
|
this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
|
||||||
|
|
||||||
// panel content
|
// panel content
|
||||||
@ -121,299 +114,6 @@ App.prototype.render = function () {
|
|||||||
])
|
])
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
App.prototype.renderAppBar = function () {
|
|
||||||
if (window.METAMASK_UI_TYPE === 'notification') {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = this.props
|
|
||||||
const state = this.state || {}
|
|
||||||
const isNetworkMenuOpen = state.isNetworkMenuOpen || false
|
|
||||||
const {isMascara, isOnboarding} = props
|
|
||||||
|
|
||||||
// Do not render header if user is in mascara onboarding
|
|
||||||
if (isMascara && isOnboarding) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
// Do not render header if user is in mascara buy ether
|
|
||||||
if (isMascara && props.currentView.name === 'buyEth') {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
|
|
||||||
h('.full-width', {
|
|
||||||
height: '38px',
|
|
||||||
}, [
|
|
||||||
|
|
||||||
h('.app-header.flex-row.flex-space-between', {
|
|
||||||
style: {
|
|
||||||
alignItems: 'center',
|
|
||||||
visibility: props.isUnlocked ? 'visible' : 'none',
|
|
||||||
background: props.isUnlocked ? 'white' : 'none',
|
|
||||||
height: '38px',
|
|
||||||
position: 'relative',
|
|
||||||
zIndex: 12,
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
|
|
||||||
h('div.left-menu-section', {
|
|
||||||
style: {
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
|
|
||||||
// mini logo
|
|
||||||
h('img', {
|
|
||||||
height: 24,
|
|
||||||
width: 24,
|
|
||||||
src: './images/icon-128.png',
|
|
||||||
}),
|
|
||||||
|
|
||||||
h(NetworkIndicator, {
|
|
||||||
network: this.props.network,
|
|
||||||
provider: this.props.provider,
|
|
||||||
onClick: (event) => {
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
|
|
||||||
]),
|
|
||||||
|
|
||||||
props.isUnlocked && h('div', {
|
|
||||||
style: {
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
|
|
||||||
props.isUnlocked && h(AccountDropdowns, {
|
|
||||||
style: {},
|
|
||||||
enableAccountsSelector: true,
|
|
||||||
identities: this.props.identities,
|
|
||||||
selected: this.props.selectedAddress,
|
|
||||||
network: this.props.network,
|
|
||||||
keyrings: this.props.keyrings,
|
|
||||||
}, []),
|
|
||||||
|
|
||||||
// hamburger
|
|
||||||
props.isUnlocked && h(SandwichExpando, {
|
|
||||||
className: 'sandwich-expando',
|
|
||||||
width: 16,
|
|
||||||
barHeight: 2,
|
|
||||||
padding: 0,
|
|
||||||
isOpen: state.isMainMenuOpen,
|
|
||||||
color: 'rgb(247,146,30)',
|
|
||||||
onClick: () => {
|
|
||||||
this.setState({
|
|
||||||
isMainMenuOpen: !state.isMainMenuOpen,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]),
|
|
||||||
]),
|
|
||||||
])
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
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(Dropdown, {
|
|
||||||
useCssTransition: true,
|
|
||||||
isOpen,
|
|
||||||
onClickOutside: (event) => {
|
|
||||||
const { classList } = event.target
|
|
||||||
const isNotToggleElement = [
|
|
||||||
classList.contains('menu-icon'),
|
|
||||||
classList.contains('network-name'),
|
|
||||||
classList.contains('network-indicator'),
|
|
||||||
].filter(bool => bool).length === 0
|
|
||||||
// classes from three constituent nodes of the toggle element
|
|
||||||
|
|
||||||
if (isNotToggleElement) {
|
|
||||||
this.setState({ isNetworkMenuOpen: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
zIndex: 11,
|
|
||||||
style: {
|
|
||||||
position: 'absolute',
|
|
||||||
left: '2px',
|
|
||||||
top: '36px',
|
|
||||||
},
|
|
||||||
innerStyle: {
|
|
||||||
padding: '2px 16px 2px 0px',
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'main',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setProviderType('mainnet')),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('.menu-icon.diamond'),
|
|
||||||
'Main Ethereum Network',
|
|
||||||
providerType === 'mainnet' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'ropsten',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setProviderType('ropsten')),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('.menu-icon.red-dot'),
|
|
||||||
'Ropsten Test Network',
|
|
||||||
providerType === 'ropsten' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'kovan',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setProviderType('kovan')),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('.menu-icon.hollow-diamond'),
|
|
||||||
'Kovan Test Network',
|
|
||||||
providerType === 'kovan' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'rinkeby',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('.menu-icon.golden-square'),
|
|
||||||
'Rinkeby Test Network',
|
|
||||||
providerType === 'rinkeby' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: 'default',
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => props.dispatch(actions.setProviderType('localhost')),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
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(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
|
||||||
onClick: () => this.props.dispatch(actions.showConfigPage()),
|
|
||||||
style: {
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
|
||||||
'Custom RPC',
|
|
||||||
activeNetwork === 'custom' ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
),
|
|
||||||
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
App.prototype.renderDropdown = function () {
|
|
||||||
const state = this.state || {}
|
|
||||||
const isOpen = state.isMainMenuOpen
|
|
||||||
|
|
||||||
return h(Dropdown, {
|
|
||||||
useCssTransition: true,
|
|
||||||
isOpen: isOpen,
|
|
||||||
zIndex: 11,
|
|
||||||
onClickOutside: (event) => {
|
|
||||||
const classList = event.target.classList
|
|
||||||
const parentClassList = event.target.parentElement.classList
|
|
||||||
|
|
||||||
const isToggleElement = classList.contains('sandwich-expando') ||
|
|
||||||
parentClassList.contains('sandwich-expando')
|
|
||||||
|
|
||||||
if (isOpen && !isToggleElement) {
|
|
||||||
this.setState({ isMainMenuOpen: false })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
position: 'absolute',
|
|
||||||
right: '2px',
|
|
||||||
top: '38px',
|
|
||||||
},
|
|
||||||
innerStyle: {},
|
|
||||||
}, [
|
|
||||||
h(DropdownMenuItem, {
|
|
||||||
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
|
|
||||||
onClick: () => { this.props.dispatch(actions.showConfigPage()) },
|
|
||||||
}, 'Settings'),
|
|
||||||
|
|
||||||
h(DropdownMenuItem, {
|
|
||||||
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
|
|
||||||
onClick: () => { this.props.dispatch(actions.lockMetamask()) },
|
|
||||||
}, 'Log Out'),
|
|
||||||
|
|
||||||
h(DropdownMenuItem, {
|
|
||||||
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
|
|
||||||
onClick: () => { this.props.dispatch(actions.showInfoPage()) },
|
|
||||||
}, 'Info/Help'),
|
|
||||||
|
|
||||||
h(DropdownMenuItem, {
|
|
||||||
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
|
|
||||||
onClick: () => {
|
|
||||||
this.props.dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
|
|
||||||
},
|
|
||||||
}, 'Try Beta!'),
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) {
|
App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) {
|
||||||
const { isMascara } = this.props
|
const { isMascara } = this.props
|
||||||
|
|
||||||
@ -425,25 +125,6 @@ App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork,
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
App.prototype.renderBackButton = function (style, justArrow = false) {
|
|
||||||
var props = this.props
|
|
||||||
return (
|
|
||||||
h('.flex-row', {
|
|
||||||
key: 'leftArrow',
|
|
||||||
style: style,
|
|
||||||
onClick: () => props.dispatch(actions.goBackToInitView()),
|
|
||||||
}, [
|
|
||||||
h('i.fa.fa-arrow-left.cursor-pointer'),
|
|
||||||
justArrow ? null : h('div.cursor-pointer', {
|
|
||||||
style: {
|
|
||||||
marginLeft: '3px',
|
|
||||||
},
|
|
||||||
onClick: () => props.dispatch(actions.goBackToInitView()),
|
|
||||||
}, 'BACK'),
|
|
||||||
])
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
App.prototype.renderPrimary = function () {
|
App.prototype.renderPrimary = function () {
|
||||||
log.debug('rendering primary')
|
log.debug('rendering primary')
|
||||||
var props = this.props
|
var props = this.props
|
||||||
@ -623,41 +304,6 @@ App.prototype.toggleMetamaskActive = function () {
|
|||||||
this.props.dispatch(actions.lockMetamask(false))
|
this.props.dispatch(actions.lockMetamask(false))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
App.prototype.renderCustomOption = function (provider) {
|
|
||||||
const { rpcTarget, type } = provider
|
|
||||||
const props = this.props
|
|
||||||
|
|
||||||
if (type !== 'rpc') return null
|
|
||||||
|
|
||||||
// Concatenate long URLs
|
|
||||||
let label = rpcTarget
|
|
||||||
if (rpcTarget.length > 31) {
|
|
||||||
label = label.substr(0, 34) + '...'
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (rpcTarget) {
|
|
||||||
|
|
||||||
case 'http://localhost:8545':
|
|
||||||
return null
|
|
||||||
|
|
||||||
default:
|
|
||||||
return h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: rpcTarget,
|
|
||||||
onClick: () => props.dispatch(actions.setRpcTarget(rpcTarget)),
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
|
||||||
label,
|
|
||||||
h('.check', '✓'),
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
App.prototype.getNetworkName = function () {
|
App.prototype.getNetworkName = function () {
|
||||||
const { provider } = this.props
|
const { provider } = this.props
|
||||||
const providerName = provider.type
|
const providerName = provider.type
|
||||||
@ -678,28 +324,3 @@ App.prototype.getNetworkName = function () {
|
|||||||
|
|
||||||
return name
|
return name
|
||||||
}
|
}
|
||||||
|
|
||||||
App.prototype.renderCommonRpc = function (rpcList, provider) {
|
|
||||||
const props = this.props
|
|
||||||
const rpcTarget = provider.rpcTarget
|
|
||||||
|
|
||||||
return rpcList.map((rpc) => {
|
|
||||||
if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
|
|
||||||
return null
|
|
||||||
} else {
|
|
||||||
return h(
|
|
||||||
DropdownMenuItem,
|
|
||||||
{
|
|
||||||
key: `common${rpc}`,
|
|
||||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
|
||||||
onClick: () => props.dispatch(actions.setRpcTarget(rpc)),
|
|
||||||
},
|
|
||||||
[
|
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
|
||||||
rpc,
|
|
||||||
rpcTarget === rpc ? h('.check', '✓') : null,
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|||||||
385
old-ui/app/components/app-bar.js
Normal file
385
old-ui/app/components/app-bar.js
Normal file
@ -0,0 +1,385 @@
|
|||||||
|
const PropTypes = require('prop-types')
|
||||||
|
const {Component} = require('react')
|
||||||
|
const h = require('react-hyperscript')
|
||||||
|
const actions = require('../../../ui/app/actions')
|
||||||
|
const SandwichExpando = require('sandwich-expando')
|
||||||
|
const {Dropdown} = require('./dropdown')
|
||||||
|
const {DropdownMenuItem} = require('./dropdown')
|
||||||
|
const NetworkIndicator = require('./network')
|
||||||
|
const {AccountDropdowns} = require('./account-dropdowns')
|
||||||
|
|
||||||
|
const LOCALHOST_RPC_URL = 'http://localhost:8545'
|
||||||
|
|
||||||
|
module.exports = class AppBar extends Component {
|
||||||
|
static defaultProps = {
|
||||||
|
selectedAddress: undefined,
|
||||||
|
}
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
frequentRpcList: PropTypes.array.isRequired,
|
||||||
|
isMascara: PropTypes.bool.isRequired,
|
||||||
|
isOnboarding: PropTypes.bool.isRequired,
|
||||||
|
identities: PropTypes.any.isRequired,
|
||||||
|
selectedAddress: PropTypes.string,
|
||||||
|
isUnlocked: PropTypes.bool.isRequired,
|
||||||
|
network: PropTypes.any.isRequired,
|
||||||
|
keyrings: PropTypes.any.isRequired,
|
||||||
|
provider: PropTypes.any.isRequired,
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
isNetworkMenuOpen: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
renderAppBar () {
|
||||||
|
if (window.METAMASK_UI_TYPE === 'notification') {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = this.props
|
||||||
|
const {isMascara, isOnboarding} = props
|
||||||
|
|
||||||
|
// Do not render header if user is in mascara onboarding
|
||||||
|
if (isMascara && isOnboarding) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// Do not render header if user is in mascara buy ether
|
||||||
|
if (isMascara && props.currentView.name === 'buyEth') {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
h('div.app-bar', [
|
||||||
|
this.renderAppBarAppHeader(),
|
||||||
|
])
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
renderAppBarAppHeader () {
|
||||||
|
const {
|
||||||
|
identities,
|
||||||
|
selectedAddress,
|
||||||
|
isUnlocked,
|
||||||
|
network,
|
||||||
|
keyrings,
|
||||||
|
provider,
|
||||||
|
} = this.props
|
||||||
|
const {
|
||||||
|
isNetworkMenuOpen,
|
||||||
|
isMainMenuOpen,
|
||||||
|
} = this.state
|
||||||
|
|
||||||
|
return (
|
||||||
|
h('.full-width', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '38px',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h('.app-header.flex-row.flex-space-between', {
|
||||||
|
style: {
|
||||||
|
alignItems: 'center',
|
||||||
|
visibility: isUnlocked ? 'visible' : 'none',
|
||||||
|
background: isUnlocked ? 'white' : 'none',
|
||||||
|
height: '38px',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 12,
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h('div.left-menu-section', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
// mini logo
|
||||||
|
h('img', {
|
||||||
|
height: 24,
|
||||||
|
width: 24,
|
||||||
|
src: './images/icon-128.png',
|
||||||
|
}),
|
||||||
|
h(NetworkIndicator, {
|
||||||
|
network: network,
|
||||||
|
provider: provider,
|
||||||
|
onClick: (event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]),
|
||||||
|
isUnlocked && h('div', {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h(AccountDropdowns, {
|
||||||
|
style: {},
|
||||||
|
enableAccountsSelector: true,
|
||||||
|
identities: identities,
|
||||||
|
selected: selectedAddress,
|
||||||
|
network,
|
||||||
|
keyrings,
|
||||||
|
}, []),
|
||||||
|
h(SandwichExpando, {
|
||||||
|
className: 'sandwich-expando',
|
||||||
|
width: 16,
|
||||||
|
barHeight: 2,
|
||||||
|
padding: 0,
|
||||||
|
isOpen: isMainMenuOpen,
|
||||||
|
color: 'rgb(247,146,30)',
|
||||||
|
onClick: () => {
|
||||||
|
this.setState({
|
||||||
|
isMainMenuOpen: !isMainMenuOpen,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
])
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
renderNetworkDropdown () {
|
||||||
|
const {
|
||||||
|
dispatch,
|
||||||
|
frequentRpcList: rpcList,
|
||||||
|
provider,
|
||||||
|
} = this.props
|
||||||
|
const {
|
||||||
|
type: providerType,
|
||||||
|
rpcTarget: activeNetwork,
|
||||||
|
} = provider
|
||||||
|
const isOpen = this.state.isNetworkMenuOpen
|
||||||
|
|
||||||
|
return h(Dropdown, {
|
||||||
|
useCssTransition: true,
|
||||||
|
isOpen,
|
||||||
|
onClickOutside: (event) => {
|
||||||
|
const { classList } = event.target
|
||||||
|
const isNotToggleElement = [
|
||||||
|
classList.contains('menu-icon'),
|
||||||
|
classList.contains('network-name'),
|
||||||
|
classList.contains('network-indicator'),
|
||||||
|
].filter(bool => bool).length === 0
|
||||||
|
// classes from three constituent nodes of the toggle element
|
||||||
|
|
||||||
|
if (isNotToggleElement) {
|
||||||
|
this.setState({ isNetworkMenuOpen: false })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
zIndex: 11,
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
left: '2px',
|
||||||
|
top: '36px',
|
||||||
|
},
|
||||||
|
innerStyle: {
|
||||||
|
padding: '2px 16px 2px 0px',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
key: 'main',
|
||||||
|
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
||||||
|
onClick: () => dispatch(actions.setProviderType('mainnet')),
|
||||||
|
style: {
|
||||||
|
fontSize: '18px',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h('.menu-icon.diamond'),
|
||||||
|
'Main Ethereum Network',
|
||||||
|
providerType === 'mainnet'
|
||||||
|
? h('.check', '✓')
|
||||||
|
: null,
|
||||||
|
]),
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
key: 'ropsten',
|
||||||
|
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
||||||
|
onClick: () => dispatch(actions.setProviderType('ropsten')),
|
||||||
|
style: {
|
||||||
|
fontSize: '18px',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h('.menu-icon.red-dot'),
|
||||||
|
'Ropsten Test Network',
|
||||||
|
providerType === 'ropsten'
|
||||||
|
? h('.check', '✓')
|
||||||
|
: null,
|
||||||
|
]),
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
key: 'kovan',
|
||||||
|
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
||||||
|
onClick: () => dispatch(actions.setProviderType('kovan')),
|
||||||
|
style: {
|
||||||
|
fontSize: '18px',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h('.menu-icon.hollow-diamond'),
|
||||||
|
'Kovan Test Network',
|
||||||
|
providerType === 'kovan'
|
||||||
|
? h('.check', '✓')
|
||||||
|
: null,
|
||||||
|
]),
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
key: 'rinkeby',
|
||||||
|
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
||||||
|
onClick: () => dispatch(actions.setProviderType('rinkeby')),
|
||||||
|
style: {
|
||||||
|
fontSize: '18px',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h('.menu-icon.golden-square'),
|
||||||
|
'Rinkeby Test Network',
|
||||||
|
providerType === 'rinkeby'
|
||||||
|
? h('.check', '✓')
|
||||||
|
: null,
|
||||||
|
]),
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
key: 'default',
|
||||||
|
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
||||||
|
onClick: () => dispatch(actions.setProviderType('localhost')),
|
||||||
|
style: {
|
||||||
|
fontSize: '18px',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
||||||
|
'Localhost 8545',
|
||||||
|
activeNetwork === LOCALHOST_RPC_URL
|
||||||
|
? h('.check', '✓')
|
||||||
|
: null,
|
||||||
|
]),
|
||||||
|
|
||||||
|
this.renderCustomOption(provider),
|
||||||
|
this.renderCommonRpc(rpcList, provider),
|
||||||
|
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
|
||||||
|
onClick: () => dispatch(actions.showConfigPage()),
|
||||||
|
style: {
|
||||||
|
fontSize: '18px',
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
||||||
|
'Custom RPC',
|
||||||
|
activeNetwork === 'custom'
|
||||||
|
? h('.check', '✓')
|
||||||
|
: null,
|
||||||
|
]),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCustomOption ({ rpcTarget, type }) {
|
||||||
|
const {dispatch} = this.props
|
||||||
|
|
||||||
|
if (type !== 'rpc') {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
// Concatenate long URLs
|
||||||
|
let label = rpcTarget
|
||||||
|
if (rpcTarget.length > 31) {
|
||||||
|
label = label.substr(0, 34) + '...'
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (rpcTarget) {
|
||||||
|
case LOCALHOST_RPC_URL:
|
||||||
|
return null
|
||||||
|
default:
|
||||||
|
return h(DropdownMenuItem, {
|
||||||
|
key: rpcTarget,
|
||||||
|
onClick: () => dispatch(actions.setRpcTarget(rpcTarget)),
|
||||||
|
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
||||||
|
}, [
|
||||||
|
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
||||||
|
label,
|
||||||
|
h('.check', '✓'),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCommonRpc (rpcList, {rpcTarget}) {
|
||||||
|
const {dispatch} = this.props
|
||||||
|
|
||||||
|
return rpcList.map((rpc) => {
|
||||||
|
if ((rpc === LOCALHOST_RPC_URL) || (rpc === rpcTarget)) {
|
||||||
|
return null
|
||||||
|
} else {
|
||||||
|
return h(DropdownMenuItem, {
|
||||||
|
key: `common${rpc}`,
|
||||||
|
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
||||||
|
onClick: () => dispatch(actions.setRpcTarget(rpc)),
|
||||||
|
}, [
|
||||||
|
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
||||||
|
rpc,
|
||||||
|
rpcTarget === rpc
|
||||||
|
? h('.check', '✓')
|
||||||
|
: null,
|
||||||
|
])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
renderDropdown () {
|
||||||
|
const {dispatch} = this.props
|
||||||
|
const isOpen = this.state.isMainMenuOpen
|
||||||
|
|
||||||
|
return h(Dropdown, {
|
||||||
|
useCssTransition: true,
|
||||||
|
isOpen: isOpen,
|
||||||
|
zIndex: 11,
|
||||||
|
onClickOutside: (event) => {
|
||||||
|
const classList = event.target.classList
|
||||||
|
const parentClassList = event.target.parentElement.classList
|
||||||
|
|
||||||
|
const isToggleElement = classList.contains('sandwich-expando') ||
|
||||||
|
parentClassList.contains('sandwich-expando')
|
||||||
|
|
||||||
|
if (isOpen && !isToggleElement) {
|
||||||
|
this.setState({ isMainMenuOpen: false })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
right: '2px',
|
||||||
|
top: '38px',
|
||||||
|
},
|
||||||
|
innerStyle: {},
|
||||||
|
}, [
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
|
||||||
|
onClick: () => { dispatch(actions.showConfigPage()) },
|
||||||
|
}, 'Settings'),
|
||||||
|
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
|
||||||
|
onClick: () => { dispatch(actions.lockMetamask()) },
|
||||||
|
}, 'Log Out'),
|
||||||
|
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
|
||||||
|
onClick: () => { dispatch(actions.showInfoPage()) },
|
||||||
|
}, 'Info/Help'),
|
||||||
|
|
||||||
|
h(DropdownMenuItem, {
|
||||||
|
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
|
||||||
|
onClick: () => {
|
||||||
|
dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
|
||||||
|
},
|
||||||
|
}, 'Try Beta!'),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return h('div.full-width', [
|
||||||
|
this.renderAppBar(),
|
||||||
|
this.renderNetworkDropdown(),
|
||||||
|
this.renderDropdown(),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -720,7 +720,11 @@ div.message-container > div:first-child {
|
|||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
//Notification Modal
|
.app-bar {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.notification-modal-wrapper {
|
.notification-modal-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user