1
0
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:
kumavis 2016-06-29 17:14:16 -07:00 committed by GitHub
commit 4433618e95
5 changed files with 82 additions and 10 deletions

View File

@ -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.

View File

@ -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',
})
}
}

View File

@ -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', ' ✓')
}
}

View File

@ -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'),
])
}
})(),
])

View File

@ -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
*/