aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDan Finlay <dan@danfinlay.com>2016-06-04 08:09:18 +0800
committerDan Finlay <dan@danfinlay.com>2016-06-04 08:09:18 +0800
commit5560ebba264d0ff5254562c700f86b2546afac4d (patch)
tree9949bc0179c8c14af7f0135400d60f70aac79995
parentb3520ee0ef9e36e8b62e10ae1547c18623234783 (diff)
downloadtangerine-wallet-browser-5560ebba264d0ff5254562c700f86b2546afac4d.tar
tangerine-wallet-browser-5560ebba264d0ff5254562c700f86b2546afac4d.tar.gz
tangerine-wallet-browser-5560ebba264d0ff5254562c700f86b2546afac4d.tar.bz2
tangerine-wallet-browser-5560ebba264d0ff5254562c700f86b2546afac4d.tar.lz
tangerine-wallet-browser-5560ebba264d0ff5254562c700f86b2546afac4d.tar.xz
tangerine-wallet-browser-5560ebba264d0ff5254562c700f86b2546afac4d.tar.zst
tangerine-wallet-browser-5560ebba264d0ff5254562c700f86b2546afac4d.zip
Clicking network status indicator reveals provider menu
-rw-r--r--ui/app/app.js62
-rw-r--r--ui/app/components/network.js3
-rw-r--r--ui/app/css/lib.css4
3 files changed, 67 insertions, 2 deletions
diff --git a/ui/app/app.js b/ui/app/app.js
index 7d5d2108a..56981e6fc 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -71,6 +71,7 @@ App.prototype.render = function() {
// app bar
this.renderAppBar(),
+ this.renderNetworkDropdown(),
this.renderDropdown(),
// panel content
@@ -111,7 +112,14 @@ App.prototype.renderAppBar = function(){
},
}, state.isUnlocked && [
- h(NetworkIndicator, {network: this.props.network}),
+ h(NetworkIndicator, {
+ network: this.props.network,
+ onClick:(event) => {
+ event.preventDefault()
+ event.stopPropagation()
+ this.setState({ isNetworkMenuOpen: true })
+ }
+ }),
// metamask name
h('h1', 'MetaMask'),
@@ -133,6 +141,58 @@ App.prototype.renderAppBar = function(){
)
}
+App.prototype.renderNetworkDropdown = function() {
+ const props = this.props
+ const state = this.state || {}
+ const isOpen = state.isNetworkMenuOpen
+
+ const checked = h('i.fa.fa-check.fa-lg', { ariaHidden: true })
+
+ return h(MenuDroppo, {
+ isOpen,
+ onClickOutside: (event) => {
+ event.preventDefault()
+ event.stopPropagation()
+ this.setState({ isNetworkMenuOpen: !isOpen })
+ },
+ style: {
+ position: 'fixed',
+ left: 0,
+ zIndex: 0,
+ },
+ innerStyle: {
+ background: 'white',
+ boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
+ },
+ }, [ // DROP MENU ITEMS
+ h('style', `
+ .drop-menu-item:hover { background:rgb(235, 235, 235); }
+ .drop-menu-item i { margin: 11px; }
+ `),
+
+ h(DropMenuItem, {
+ label: 'Main Ethereum Network',
+ closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
+ action:() => state.dispatch(actions.setProviderType('mainnet')),
+ icon: h('img.menu-icon', { src: '/images/ethereum-network.jpg' }),
+ }),
+
+ h(DropMenuItem, {
+ label: 'Morden Test Network',
+ closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
+ action:() => state.dispatch(actions.setProviderType('testnet')),
+ icon: h('img.menu-icon', { src: '/images/morden-test-network.jpg' }),
+ }),
+
+ h(DropMenuItem, {
+ label: 'Localhost 8545',
+ closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
+ action:() => state.dispatch(actions.setRpcTarget('http://localhost:8545')),
+ icon: h('img.menu-icon', { src: '/images/unknown-private-network.jpg' }),
+ }),
+ ])
+}
+
App.prototype.renderDropdown = function() {
const props = this.props
return h(MenuDroppo, {
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 37046fd30..e73ecb3f4 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -39,6 +39,7 @@ Network.prototype.render = function() {
h('#network_component.flex-center', {
style: { marginRight: '-16px' },
title: hoverText,
- },[ h('img',{src: imagePath + iconName + ".jpg", width: '25px'}) ])
+ onClick:(event) => this.props.onClick(event),
+ },[ h('img.menu-icon',{src: imagePath + iconName + ".jpg"}) ])
)
}
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 865d8060c..855ed94d8 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -199,3 +199,7 @@ hr.horizontal-line {
display: flex;
align-items: center;
}
+
+img.menu-icon {
+ width: 25px;
+}