Add spinner and dropdown arrow to network indicator on custom network loading.

feature/default_network_editable
Dan Miller 6 years ago
parent 970bdebb86
commit 47501a6f7a
  1. 18
      ui/app/components/dropdowns/components/network-dropdown-icon.js
  2. 42
      ui/app/components/network.js

@ -16,9 +16,25 @@ NetworkDropdownIcon.prototype.render = function () {
isSelected, isSelected,
innerBorder = 'none', innerBorder = 'none',
diameter = '12', diameter = '12',
loading,
} = this.props } = this.props
return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {}, return loading
? h('span.pointer.network-indicator', {
style: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
},
}, [
h('img', {
style: {
width: '27px',
},
src: 'images/loading.svg',
}),
])
: h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
h('div', { h('div', {
style: { style: {
background: backgroundColor, background: backgroundColor,

@ -32,24 +32,7 @@ Network.prototype.render = function () {
} }
let iconName, hoverText let iconName, hoverText
if (networkNumber === 'loading') { if (providerName === 'mainnet') {
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') {
hoverText = context.t('mainnet') hoverText = context.t('mainnet')
iconName = 'ethereum-network' iconName = 'ethereum-network'
} else if (providerName === 'ropsten') { } else if (providerName === 'ropsten') {
@ -92,6 +75,7 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2', nonSelectBackgroundColor: '#15afb2',
loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('mainnet')), h('.network-name', context.t('mainnet')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@ -101,6 +85,7 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#e91550', // $crimson backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50', nonSelectBackgroundColor: '#ec2c50',
loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('ropsten')), h('.network-name', context.t('ropsten')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@ -110,6 +95,7 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#690496', // $purple backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3', nonSelectBackgroundColor: '#b039f3',
loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('kovan')), h('.network-name', context.t('kovan')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
@ -119,13 +105,31 @@ Network.prototype.render = function () {
h(NetworkDropdownIcon, { h(NetworkDropdownIcon, {
backgroundColor: '#ebb33f', // $tulip-tree backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e', nonSelectBackgroundColor: '#ecb23e',
loading: networkNumber === 'loading',
}), }),
h('.network-name', context.t('rinkeby')), h('.network-name', context.t('rinkeby')),
h('i.fa.fa-chevron-down.fa-lg.network-caret'), h('i.fa.fa-chevron-down.fa-lg.network-caret'),
]) ])
default: default:
return h('.network-indicator', [ 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: { style: {
margin: '10px', margin: '10px',
color: 'rgb(125, 128, 130)', color: 'rgb(125, 128, 130)',

Loading…
Cancel
Save