mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Merge pull request #370 from MetaMask/networkIndication
Network indication
This commit is contained in:
commit
4433618e95
@ -2,6 +2,8 @@
|
||||
|
||||
## Current Master
|
||||
|
||||
- Added a network indicator mark in dropdown menu
|
||||
- Added network name next to network indicator
|
||||
- Add copy transaction hash button to completed transaction list items.
|
||||
- Unify wording for transaction approve/reject options on notifications and the extension.
|
||||
|
||||
|
@ -140,7 +140,7 @@ App.prototype.renderAppBar = function () {
|
||||
h('h1', {
|
||||
style: {
|
||||
position: 'relative',
|
||||
left: '3px',
|
||||
left: '9px',
|
||||
},
|
||||
}, 'MetaMask'),
|
||||
|
||||
@ -216,6 +216,7 @@ App.prototype.renderNetworkDropdown = function () {
|
||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
||||
action: () => props.dispatch(actions.setProviderType('mainnet')),
|
||||
icon: h('.menu-icon.diamond'),
|
||||
activeNetworkRender: props.network,
|
||||
}),
|
||||
|
||||
h(DropMenuItem, {
|
||||
@ -223,6 +224,7 @@ App.prototype.renderNetworkDropdown = function () {
|
||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
||||
action: () => props.dispatch(actions.setProviderType('testnet')),
|
||||
icon: h('.menu-icon.red-dot'),
|
||||
activeNetworkRender: props.network,
|
||||
}),
|
||||
|
||||
h(DropMenuItem, {
|
||||
@ -230,6 +232,7 @@ App.prototype.renderNetworkDropdown = function () {
|
||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
||||
action: () => props.dispatch(actions.setRpcTarget('http://localhost:8545')),
|
||||
icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
|
||||
activeNetworkRender: props.provider.rpcTarget,
|
||||
}),
|
||||
this.renderCustomOption(props.provider.rpcTarget),
|
||||
])
|
||||
@ -369,12 +372,20 @@ App.prototype.renderCustomOption = function (rpcTarget) {
|
||||
action: () => this.props.dispatch(actions.showConfigPage()),
|
||||
icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
|
||||
})
|
||||
case 'http://localhost:8545':
|
||||
return 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', { ariaHidden: true }),
|
||||
})
|
||||
|
||||
default:
|
||||
return h(DropMenuItem, {
|
||||
label: `${rpcTarget}`,
|
||||
closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
|
||||
icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
|
||||
activeNetworkRender: 'custom',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@ -25,5 +25,25 @@ DropMenuItem.prototype.render = function () {
|
||||
}, [
|
||||
this.props.icon,
|
||||
this.props.label,
|
||||
this.activeNetworkRender(),
|
||||
])
|
||||
}
|
||||
|
||||
DropMenuItem.prototype.activeNetworkRender = function () {
|
||||
var activeNetwork = this.props.activeNetworkRender
|
||||
if (activeNetwork === undefined) return
|
||||
|
||||
switch (this.props.label) {
|
||||
case 'Main Ethereum Network':
|
||||
if (activeNetwork === '1') return h('.check', ' ✓')
|
||||
break
|
||||
case 'Morden Test Network':
|
||||
if (activeNetwork === '2') return h('.check', ' ✓')
|
||||
break
|
||||
case 'Localhost 8545':
|
||||
if (activeNetwork === 'http://localhost:8545') return h('.check', ' ✓')
|
||||
break
|
||||
default:
|
||||
if (activeNetwork === 'custom') return h('.check', ' ✓')
|
||||
}
|
||||
}
|
||||
|
@ -47,17 +47,39 @@ Network.prototype.render = function () {
|
||||
(function () {
|
||||
switch (iconName) {
|
||||
case 'ethereum-network':
|
||||
return h('.menu-icon.diamond')
|
||||
return h('.network-indicator', [
|
||||
h('.menu-icon.diamond'),
|
||||
h('.network-name', {
|
||||
style: {
|
||||
color: '#039396',
|
||||
}},
|
||||
'Etherum Main Net'),
|
||||
])
|
||||
case 'morden-test-network':
|
||||
return h('.menu-icon.red-dot')
|
||||
return h('.network-indicator', [
|
||||
h('.menu-icon.red-dot'),
|
||||
h('.network-name', {
|
||||
style: {
|
||||
color: '#ff6666',
|
||||
}},
|
||||
'Morden Test Net'),
|
||||
])
|
||||
default:
|
||||
return h('i.fa.fa-question-circle.fa-lg', {
|
||||
ariaHidden: true,
|
||||
style: {
|
||||
margin: '10px',
|
||||
color: 'rgb(125, 128, 130)',
|
||||
},
|
||||
})
|
||||
return h('.network-indicator', [
|
||||
h('i.fa.fa-question-circle.fa-lg', {
|
||||
ariaHidden: true,
|
||||
style: {
|
||||
margin: '10px',
|
||||
color: 'rgb(125, 128, 130)',
|
||||
},
|
||||
}),
|
||||
|
||||
h('.network-name', {
|
||||
style: {
|
||||
color: '#AEAEAE',
|
||||
}},
|
||||
'Private Network'),
|
||||
])
|
||||
}
|
||||
})(),
|
||||
])
|
||||
|
@ -141,6 +141,23 @@ textarea.twelve-word-phrase {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.network-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.6em;
|
||||
|
||||
}
|
||||
|
||||
.network-name {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
width: 5.2em;
|
||||
line-height: 9px;
|
||||
}
|
||||
|
||||
.check {
|
||||
color: #F7861C;
|
||||
}
|
||||
/*
|
||||
app sections
|
||||
*/
|
||||
|
Loading…
Reference in New Issue
Block a user