mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Merge pull request #370 from MetaMask/networkIndication
Network indication
This commit is contained in:
commit
4433618e95
@ -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.
|
||||||
|
|
||||||
|
@ -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',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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', ' ✓')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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'),
|
||||||
|
])
|
||||||
}
|
}
|
||||||
})(),
|
})(),
|
||||||
])
|
])
|
||||||
|
@ -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
|
||||||
*/
|
*/
|
||||||
|
Loading…
Reference in New Issue
Block a user