aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--CHANGELOG.md2
-rw-r--r--ui/app/app.js13
-rw-r--r--ui/app/components/drop-menu-item.js20
-rw-r--r--ui/app/components/network.js40
-rw-r--r--ui/app/css/index.css17
5 files changed, 82 insertions, 10 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 509449375..36e186245 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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.
diff --git a/ui/app/app.js b/ui/app/app.js
index 525681166..938caffd9 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -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',
})
}
}
diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js
index 5531ebf9f..69294c94d 100644
--- a/ui/app/components/drop-menu-item.js
+++ b/ui/app/components/drop-menu-item.js
@@ -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', ' ✓')
+ }
+}
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 9f7287371..032e71699 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -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'),
+ ])
}
})(),
])
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index d46c859ad..fc10e56b6 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -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
*/