aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/app.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/app.js')
-rw-r--r--ui/app/app.js79
1 files changed, 69 insertions, 10 deletions
diff --git a/ui/app/app.js b/ui/app/app.js
index 7d5d2108a..446c743a9 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -53,10 +53,9 @@ function mapStateToProps(state) {
}
App.prototype.render = function() {
- // const { selectedReddit, posts, isFetching, lastUpdated } = this.props
- var state = this.props
- var view = state.currentView.name
- var transForward = state.transForward
+ var props = this.props
+ var view = props.currentView.name
+ var transForward = props.transForward
return (
@@ -71,6 +70,7 @@ App.prototype.render = function() {
// app bar
this.renderAppBar(),
+ this.renderNetworkDropdown(),
this.renderDropdown(),
// panel content
@@ -94,7 +94,9 @@ App.prototype.render = function() {
}
App.prototype.renderAppBar = function(){
- var state = this.props
+ const props = this.props
+ const state = this.state || {}
+ const isNetworkMenuOpen = state.isNetworkMenuOpen || false
return (
@@ -103,15 +105,22 @@ App.prototype.renderAppBar = function(){
h('.app-header.flex-row.flex-space-between', {
style: {
alignItems: 'center',
- visibility: state.isUnlocked ? 'visible' : 'none',
- background: state.isUnlocked ? 'white' : 'none',
+ visibility: props.isUnlocked ? 'visible' : 'none',
+ background: props.isUnlocked ? 'white' : 'none',
height: '36px',
position: 'relative',
zIndex: 1,
},
- }, state.isUnlocked && [
+ }, props.isUnlocked && [
- h(NetworkIndicator, {network: this.props.network}),
+ h(NetworkIndicator, {
+ network: this.props.network,
+ onClick:(event) => {
+ event.preventDefault()
+ event.stopPropagation()
+ this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
+ }
+ }),
// metamask name
h('h1', 'MetaMask'),
@@ -120,7 +129,7 @@ App.prototype.renderAppBar = function(){
width: 16,
barHeight: 2,
padding: 0,
- isOpen: state.menuOpen,
+ isOpen: props.menuOpen,
color: 'rgb(247,146,30)',
onClick: (event) => {
event.preventDefault()
@@ -133,6 +142,56 @@ 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) => {
+ 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:() => props.dispatch(actions.setProviderType('mainnet')),
+ icon: h('.menu-icon.ether-icon'),
+ }),
+
+ h(DropMenuItem, {
+ label: 'Morden Test Network',
+ closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
+ action:() => props.dispatch(actions.setProviderType('testnet')),
+ icon: h('.menu-icon.morden-icon'),
+ }),
+
+ h(DropMenuItem, {
+ label: 'Localhost 8545',
+ closeMenu:() => this.setState({ isNetworkMenuOpen: false }),
+ action:() => props.dispatch(actions.setRpcTarget('http://localhost:8545')),
+ icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }),
+ }),
+ ])
+}
+
App.prototype.renderDropdown = function() {
const props = this.props
return h(MenuDroppo, {