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

Merge pull request 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 ## 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. - Add copy transaction hash button to completed transaction list items.
- Unify wording for transaction approve/reject options on notifications and the extension. - Unify wording for transaction approve/reject options on notifications and the extension.

View File

@ -140,7 +140,7 @@ App.prototype.renderAppBar = function () {
h('h1', { h('h1', {
style: { style: {
position: 'relative', position: 'relative',
left: '3px', left: '9px',
}, },
}, 'MetaMask'), }, 'MetaMask'),
@ -216,6 +216,7 @@ App.prototype.renderNetworkDropdown = function () {
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
action: () => props.dispatch(actions.setProviderType('mainnet')), action: () => props.dispatch(actions.setProviderType('mainnet')),
icon: h('.menu-icon.diamond'), icon: h('.menu-icon.diamond'),
activeNetworkRender: props.network,
}), }),
h(DropMenuItem, { h(DropMenuItem, {
@ -223,6 +224,7 @@ App.prototype.renderNetworkDropdown = function () {
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
action: () => props.dispatch(actions.setProviderType('testnet')), action: () => props.dispatch(actions.setProviderType('testnet')),
icon: h('.menu-icon.red-dot'), icon: h('.menu-icon.red-dot'),
activeNetworkRender: props.network,
}), }),
h(DropMenuItem, { h(DropMenuItem, {
@ -230,6 +232,7 @@ App.prototype.renderNetworkDropdown = function () {
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
action: () => props.dispatch(actions.setRpcTarget('http://localhost:8545')), action: () => props.dispatch(actions.setRpcTarget('http://localhost:8545')),
icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
activeNetworkRender: props.provider.rpcTarget,
}), }),
this.renderCustomOption(props.provider.rpcTarget), this.renderCustomOption(props.provider.rpcTarget),
]) ])
@ -369,12 +372,20 @@ App.prototype.renderCustomOption = function (rpcTarget) {
action: () => this.props.dispatch(actions.showConfigPage()), action: () => this.props.dispatch(actions.showConfigPage()),
icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), 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: default:
return h(DropMenuItem, { return h(DropMenuItem, {
label: `${rpcTarget}`, label: `${rpcTarget}`,
closeMenu: () => this.setState({ isNetworkMenuOpen: false }), closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), 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.icon,
this.props.label, 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 () { (function () {
switch (iconName) { switch (iconName) {
case 'ethereum-network': 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': 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: default:
return h('i.fa.fa-question-circle.fa-lg', { return h('.network-indicator', [
ariaHidden: true, h('i.fa.fa-question-circle.fa-lg', {
style: { ariaHidden: true,
margin: '10px', style: {
color: 'rgb(125, 128, 130)', 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; 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 app sections
*/ */