diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/app/components/dropdowns/components/network-dropdown-icon.js | 32 | ||||
| -rw-r--r-- | ui/app/components/network.js | 42 |
2 files changed, 47 insertions, 27 deletions
diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js index a45da4c10..d4a2c2ff7 100644 --- a/ui/app/components/dropdowns/components/network-dropdown-icon.js +++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js @@ -16,16 +16,32 @@ NetworkDropdownIcon.prototype.render = function () { isSelected, innerBorder = 'none', diameter = '12', + loading, } = this.props - return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {}, - h('div', { + return loading + ? h('span.pointer.network-indicator', { style: { - background: backgroundColor, - border: innerBorder, - height: `${diameter}px`, - width: `${diameter}px`, + display: 'flex', + alignItems: 'center', + flexDirection: 'row', }, - }) - ) + }, [ + h('img', { + style: { + width: '27px', + }, + src: 'images/loading.svg', + }), + ]) + : h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {}, + h('div', { + style: { + background: backgroundColor, + border: innerBorder, + height: `${diameter}px`, + width: `${diameter}px`, + }, + }) + ) } diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 611aadb7b..ce042377d 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -32,24 +32,7 @@ Network.prototype.render = function () { } let iconName, hoverText - if (networkNumber === 'loading') { - return h('span.pointer.network-indicator', { - style: { - display: 'flex', - alignItems: 'center', - flexDirection: 'row', - }, - onClick: (event) => this.props.onClick(event), - }, [ - h('img', { - title: context.t('attemptingConnect'), - style: { - width: '27px', - }, - src: 'images/loading.svg', - }), - ]) - } else if (providerName === 'mainnet') { + if (providerName === 'mainnet') { hoverText = context.t('mainnet') iconName = 'ethereum-network' } else if (providerName === 'ropsten') { @@ -92,6 +75,7 @@ Network.prototype.render = function () { h(NetworkDropdownIcon, { backgroundColor: '#038789', // $blue-lagoon nonSelectBackgroundColor: '#15afb2', + loading: networkNumber === 'loading', }), h('.network-name', context.t('mainnet')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), @@ -101,6 +85,7 @@ Network.prototype.render = function () { h(NetworkDropdownIcon, { backgroundColor: '#e91550', // $crimson nonSelectBackgroundColor: '#ec2c50', + loading: networkNumber === 'loading', }), h('.network-name', context.t('ropsten')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), @@ -110,6 +95,7 @@ Network.prototype.render = function () { h(NetworkDropdownIcon, { backgroundColor: '#690496', // $purple nonSelectBackgroundColor: '#b039f3', + loading: networkNumber === 'loading', }), h('.network-name', context.t('kovan')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), @@ -119,13 +105,31 @@ Network.prototype.render = function () { h(NetworkDropdownIcon, { backgroundColor: '#ebb33f', // $tulip-tree nonSelectBackgroundColor: '#ecb23e', + loading: networkNumber === 'loading', }), h('.network-name', context.t('rinkeby')), h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) default: return h('.network-indicator', [ - h('i.fa.fa-question-circle.fa-lg', { + networkNumber === 'loading' + ? h('span.pointer.network-indicator', { + style: { + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + }, + onClick: (event) => this.props.onClick(event), + }, [ + h('img', { + title: context.t('attemptingConnect'), + style: { + width: '27px', + }, + src: 'images/loading.svg', + }), + ]) + : h('i.fa.fa-question-circle.fa-lg', { style: { margin: '10px', color: 'rgb(125, 128, 130)', |