aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDan Miller <danjm.com@gmail.com>2018-12-05 14:15:45 +0800
committerDan Miller <danjm.com@gmail.com>2018-12-13 01:23:37 +0800
commit47501a6f7ad092f9d941fffac1b3b5cc557c65c3 (patch)
treeb3f2ab7f7914fde1e95ef3372f521dd546e09583
parent970bdebb863388b862c51ff46fb7b83875080746 (diff)
downloadtangerine-wallet-browser-47501a6f7ad092f9d941fffac1b3b5cc557c65c3.tar.gz
tangerine-wallet-browser-47501a6f7ad092f9d941fffac1b3b5cc557c65c3.tar.zst
tangerine-wallet-browser-47501a6f7ad092f9d941fffac1b3b5cc557c65c3.zip
Add spinner and dropdown arrow to network indicator on custom network loading.
-rw-r--r--ui/app/components/dropdowns/components/network-dropdown-icon.js32
-rw-r--r--ui/app/components/network.js42
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)',