diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/app/app.js | 12 | ||||
-rw-r--r-- | ui/app/components/drop-menu-item.js | 14 | ||||
-rw-r--r-- | ui/app/components/network.js | 21 | ||||
-rw-r--r-- | ui/app/css/index.css | 1 | ||||
-rw-r--r-- | ui/app/css/lib.css | 5 | ||||
-rw-r--r-- | ui/app/settings.js | 1 |
6 files changed, 45 insertions, 9 deletions
diff --git a/ui/app/app.js b/ui/app/app.js index df5350f67..b8deedc13 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -131,6 +131,7 @@ App.prototype.renderAppBar = function () { h(NetworkIndicator, { network: this.props.network, + provider: this.props.provider, onClick: (event) => { event.preventDefault() event.stopPropagation() @@ -221,6 +222,16 @@ App.prototype.renderNetworkDropdown = function () { action: () => props.dispatch(actions.setProviderType('mainnet')), icon: h('.menu-icon.diamond'), activeNetworkRender: props.network, + provider: props.provider, + }), + + h(DropMenuItem, { + label: 'Ethereum Classic Network', + closeMenu: () => this.setState({ isNetworkMenuOpen: false }), + action: () => props.dispatch(actions.setProviderType('classic')), + icon: h('.menu-icon.hollow-diamond'), + activeNetworkRender: props.network, + provider: props.provider, }), h(DropMenuItem, { @@ -238,6 +249,7 @@ App.prototype.renderNetworkDropdown = function () { icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), activeNetworkRender: props.provider.rpcTarget, }), + this.renderCustomOption(props.provider.rpcTarget), ]) } diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js index f5800f799..8bff3e131 100644 --- a/ui/app/components/drop-menu-item.js +++ b/ui/app/components/drop-menu-item.js @@ -32,20 +32,24 @@ DropMenuItem.prototype.render = function () { } DropMenuItem.prototype.activeNetworkRender = function () { - var activeNetwork = this.props.activeNetworkRender + let activeNetwork = this.props.activeNetworkRender + let { provider } = this.props if (activeNetwork === undefined) return switch (this.props.label) { case 'Main Ethereum Network': - if (activeNetwork === '1') return h('.check', ' ✓') + if (provider.type === 'mainnet') return h('.check', '✓') + break + case 'Ethereum Classic Network': + if (provider.type === 'classic') return h('.check', '✓') break case 'Morden Test Network': - if (activeNetwork === '2') return h('.check', ' ✓') + if (activeNetwork === '2') return h('.check', '✓') break case 'Localhost 8545': - if (activeNetwork === 'http://localhost:8545') return h('.check', ' ✓') + if (activeNetwork === 'http://localhost:8545') return h('.check', '✓') break default: - if (activeNetwork === 'custom') return h('.check', ' ✓') + if (activeNetwork === 'custom') return h('.check', '✓') } } diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 032e71699..22b11aa6c 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -11,11 +11,13 @@ function Network () { } Network.prototype.render = function () { - const state = this.props - const networkNumber = state.network + const props = this.props + const networkNumber = props.network + const providerName = props.provider.type let iconName, hoverText if (networkNumber === 'loading') { + return h('img', { title: 'Attempting to connect to blockchain.', onClick: (event) => this.props.onClick(event), @@ -25,9 +27,13 @@ Network.prototype.render = function () { }, src: 'images/loading.svg', }) - } else if (parseInt(networkNumber) === 1) { + + } else if (providerName === 'mainnet') { hoverText = 'Main Ethereum Network' iconName = 'ethereum-network' + } else if (providerName === 'classic') { + hoverText = 'Ethereum Classic Network' + iconName = 'classic-network' } else if (parseInt(networkNumber) === 2) { hoverText = 'Morden Test Network' iconName = 'morden-test-network' @@ -55,6 +61,15 @@ Network.prototype.render = function () { }}, 'Etherum Main Net'), ]) + case 'classic-network': + return h('.network-indicator', [ + h('.menu-icon.hollow-diamond'), + h('.network-name', { + style: { + color: '#039396', + }}, + 'Etherum Classic'), + ]) case 'morden-test-network': return h('.network-indicator', [ h('.menu-icon.red-dot'), diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 77bf7bf97..612dc9d9a 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -158,6 +158,7 @@ textarea.twelve-word-phrase { } .check { + margin-left: 7px; color: #F7861C; flex: 1 0 auto; display: flex; diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 22b26d4f1..bcd6a4a67 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -178,6 +178,11 @@ hr.horizontal-line { background: #038789; } +.hollow-diamond { + transform: rotate(45deg); + border: 1px solid #038789; +} + .pending-dot { background: red; left: 14px; diff --git a/ui/app/settings.js b/ui/app/settings.js index e56f4ee63..454cc95e0 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -32,7 +32,6 @@ AppSettingsPage.prototype.render = function () { htmlFor: 'settings-rpc-endpoint', }, 'RPC Endpoint:'), h('input', { - // value: '//testrpc.metamask.io', type: 'url', id: 'settings-rpc-endpoint', onKeyPress: this.onKeyPress.bind(this), |