mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Merge pull request #5893 from MetaMask/loading-network-screen
Loading network screen
This commit is contained in:
commit
c5861c88a5
@ -242,6 +242,9 @@
|
||||
"connecting": {
|
||||
"message": "Connecting..."
|
||||
},
|
||||
"connectingTo": {
|
||||
"message": "Connecting to $1"
|
||||
},
|
||||
"connectingToKovan": {
|
||||
"message": "Connecting to Kovan Test Network"
|
||||
},
|
||||
@ -1198,6 +1201,9 @@
|
||||
"sigRequested": {
|
||||
"message": "Signature Requested"
|
||||
},
|
||||
"somethingWentWrong": {
|
||||
"message": "Oops! Something went wrong."
|
||||
},
|
||||
"spaceBetween": {
|
||||
"message": "there can only be a space between words"
|
||||
},
|
||||
@ -1216,6 +1222,9 @@
|
||||
"speedUpTransaction": {
|
||||
"message": "Speed up this transaction"
|
||||
},
|
||||
"switchNetworks": {
|
||||
"message": "Switch Networks"
|
||||
},
|
||||
"status": {
|
||||
"message": "Status"
|
||||
},
|
||||
|
@ -1079,8 +1079,10 @@ describe('Actions', () => {
|
||||
|
||||
describe('#setProviderType', () => {
|
||||
let setProviderTypeSpy
|
||||
let store
|
||||
|
||||
beforeEach(() => {
|
||||
store = mockStore({ metamask: { provider: {} } })
|
||||
setProviderTypeSpy = sinon.stub(background, 'setProviderType')
|
||||
})
|
||||
|
||||
@ -1089,13 +1091,11 @@ describe('Actions', () => {
|
||||
})
|
||||
|
||||
it('', () => {
|
||||
const store = mockStore()
|
||||
store.dispatch(actions.setProviderType())
|
||||
assert(setProviderTypeSpy.calledOnce)
|
||||
})
|
||||
|
||||
it('', () => {
|
||||
const store = mockStore()
|
||||
const expectedActions = [
|
||||
{ type: 'DISPLAY_WARNING', value: 'Had a problem changing networks!' },
|
||||
]
|
||||
|
@ -226,6 +226,7 @@ var actions = {
|
||||
SET_RPC_TARGET: 'SET_RPC_TARGET',
|
||||
SET_DEFAULT_RPC_TARGET: 'SET_DEFAULT_RPC_TARGET',
|
||||
SET_PROVIDER_TYPE: 'SET_PROVIDER_TYPE',
|
||||
SET_PREVIOUS_PROVIDER: 'SET_PREVIOUS_PROVIDER',
|
||||
showConfigPage,
|
||||
SHOW_ADD_TOKEN_PAGE: 'SHOW_ADD_TOKEN_PAGE',
|
||||
SHOW_ADD_SUGGESTED_TOKEN_PAGE: 'SHOW_ADD_SUGGESTED_TOKEN_PAGE',
|
||||
@ -1866,13 +1867,15 @@ function createSpeedUpTransaction (txId, customGasPrice) {
|
||||
//
|
||||
|
||||
function setProviderType (type) {
|
||||
return (dispatch) => {
|
||||
return (dispatch, getState) => {
|
||||
const { type: currentProviderType } = getState().metamask.provider
|
||||
log.debug(`background.setProviderType`, type)
|
||||
background.setProviderType(type, (err, result) => {
|
||||
if (err) {
|
||||
log.error(err)
|
||||
return dispatch(actions.displayWarning('Had a problem changing networks!'))
|
||||
}
|
||||
dispatch(setPreviousProvider(currentProviderType))
|
||||
dispatch(actions.updateProviderType(type))
|
||||
dispatch(actions.setSelectedToken())
|
||||
})
|
||||
@ -1887,6 +1890,13 @@ function updateProviderType (type) {
|
||||
}
|
||||
}
|
||||
|
||||
function setPreviousProvider (type) {
|
||||
return {
|
||||
type: actions.SET_PREVIOUS_PROVIDER,
|
||||
value: type,
|
||||
}
|
||||
}
|
||||
|
||||
function setRpcTarget (newRpc, chainId, ticker = 'ETH', nickname = '') {
|
||||
return (dispatch) => {
|
||||
log.debug(`background.setRpcTarget: ${newRpc} ${chainId} ${ticker} ${nickname}`)
|
||||
|
@ -7,7 +7,7 @@ const h = require('react-hyperscript')
|
||||
const actions = require('./actions')
|
||||
const classnames = require('classnames')
|
||||
const log = require('loglevel')
|
||||
const { getMetaMaskAccounts } = require('./selectors')
|
||||
const { getMetaMaskAccounts, getNetworkIdentifier } = require('./selectors')
|
||||
|
||||
// init
|
||||
const InitializeScreen = require('../../mascara/src/app/first-time').default
|
||||
@ -32,6 +32,7 @@ const CreateAccountPage = require('./components/pages/create-account')
|
||||
const NoticeScreen = require('./components/pages/notice')
|
||||
|
||||
const Loading = require('./components/loading-screen')
|
||||
const LoadingNetwork = require('./components/loading-network-screen').default
|
||||
const NetworkDropdown = require('./components/dropdowns/network-dropdown')
|
||||
const AccountMenu = require('./components/account-menu')
|
||||
|
||||
@ -169,9 +170,10 @@ class App extends Component {
|
||||
h(AccountMenu),
|
||||
|
||||
h('div.main-container-wrapper', [
|
||||
(isLoading || isLoadingNetwork) && h(Loading, {
|
||||
isLoading && h(Loading, {
|
||||
loadingMessage: loadMessage,
|
||||
}),
|
||||
!isLoading && isLoadingNetwork && h(LoadingNetwork),
|
||||
|
||||
// content
|
||||
this.renderRoutes(),
|
||||
@ -196,7 +198,7 @@ class App extends Component {
|
||||
if (loadingMessage) {
|
||||
return loadingMessage
|
||||
}
|
||||
const { provider } = this.props
|
||||
const { provider, providerId } = this.props
|
||||
const providerName = provider.type
|
||||
|
||||
let name
|
||||
@ -210,7 +212,7 @@ class App extends Component {
|
||||
} else if (providerName === 'rinkeby') {
|
||||
name = this.context.t('connectingToRinkeby')
|
||||
} else {
|
||||
name = this.context.t('connectingToUnknown')
|
||||
name = this.context.t('connectingTo', [providerId])
|
||||
}
|
||||
|
||||
return name
|
||||
@ -279,6 +281,7 @@ App.propTypes = {
|
||||
isMouseUser: PropTypes.bool,
|
||||
setMouseUserState: PropTypes.func,
|
||||
t: PropTypes.func,
|
||||
providerId: PropTypes.string,
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
@ -348,6 +351,7 @@ function mapStateToProps (state) {
|
||||
isRevealingSeedWords: state.metamask.isRevealingSeedWords,
|
||||
Qr: state.appState.Qr,
|
||||
welcomeScreenSeen: state.metamask.welcomeScreenSeen,
|
||||
providerId: getNetworkIdentifier(state),
|
||||
|
||||
// state needed to get account dropdown temporarily rendering from app bar
|
||||
identities,
|
||||
|
@ -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`,
|
||||
},
|
||||
})
|
||||
)
|
||||
}
|
||||
|
1
ui/app/components/loading-network-screen/index.js
Normal file
1
ui/app/components/loading-network-screen/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './loading-network-screen.container'
|
@ -0,0 +1,138 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Spinner from '../spinner'
|
||||
import Button from '../button'
|
||||
|
||||
export default class LoadingNetworkScreen extends PureComponent {
|
||||
state = {
|
||||
showErrorScreen: false,
|
||||
}
|
||||
|
||||
static contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
loadingMessage: PropTypes.string,
|
||||
cancelTime: PropTypes.number,
|
||||
provider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
providerId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
showNetworkDropdown: PropTypes.func,
|
||||
setProviderArgs: PropTypes.array,
|
||||
lastSelectedProvider: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
setProviderType: PropTypes.func,
|
||||
isLoadingNetwork: PropTypes.bool,
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
|
||||
}
|
||||
|
||||
getConnectingLabel = function (loadingMessage) {
|
||||
if (loadingMessage) {
|
||||
return loadingMessage
|
||||
}
|
||||
const { provider, providerId } = this.props
|
||||
const providerName = provider.type
|
||||
|
||||
let name
|
||||
|
||||
if (providerName === 'mainnet') {
|
||||
name = this.context.t('connectingToMainnet')
|
||||
} else if (providerName === 'ropsten') {
|
||||
name = this.context.t('connectingToRopsten')
|
||||
} else if (providerName === 'kovan') {
|
||||
name = this.context.t('connectingToKovan')
|
||||
} else if (providerName === 'rinkeby') {
|
||||
name = this.context.t('connectingToRinkeby')
|
||||
} else {
|
||||
name = this.context.t('connectingTo', [providerId])
|
||||
}
|
||||
|
||||
return name
|
||||
}
|
||||
|
||||
renderMessage = () => {
|
||||
return <span>{ this.getConnectingLabel(this.props.loadingMessage) }</span>
|
||||
}
|
||||
|
||||
renderLoadingScreenContent = () => {
|
||||
return <div className="loading-overlay__screen-content">
|
||||
<Spinner color="#F7C06C" />
|
||||
{this.renderMessage()}
|
||||
</div>
|
||||
}
|
||||
|
||||
renderErrorScreenContent = () => {
|
||||
const { showNetworkDropdown, setProviderArgs, setProviderType } = this.props
|
||||
|
||||
return <div className="loading-overlay__error-screen">
|
||||
<span className="loading-overlay__emoji">😞</span>
|
||||
<span>{ this.context.t('somethingWentWrong') }</span>
|
||||
<div className="loading-overlay__error-buttons">
|
||||
<Button
|
||||
type="default"
|
||||
onClick={() => {
|
||||
window.clearTimeout(this.cancelCallTimeout)
|
||||
showNetworkDropdown()
|
||||
}}
|
||||
>
|
||||
{ this.context.t('switchNetworks') }
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
this.setState({ showErrorScreen: false })
|
||||
setProviderType(...setProviderArgs)
|
||||
window.clearTimeout(this.cancelCallTimeout)
|
||||
this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
|
||||
}}
|
||||
>
|
||||
{ this.context.t('tryAgain') }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
cancelCall = () => {
|
||||
const { isLoadingNetwork } = this.props
|
||||
|
||||
if (isLoadingNetwork) {
|
||||
this.setState({ showErrorScreen: true })
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate = (prevProps) => {
|
||||
const { provider } = this.props
|
||||
const { provider: prevProvider } = prevProps
|
||||
if (provider.type !== prevProvider.type) {
|
||||
window.clearTimeout(this.cancelCallTimeout)
|
||||
this.setState({ showErrorScreen: false })
|
||||
this.cancelCallTimeout = setTimeout(this.cancelCall, this.props.cancelTime || 15000)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount = () => {
|
||||
window.clearTimeout(this.cancelCallTimeout)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { lastSelectedProvider, setProviderType } = this.props
|
||||
|
||||
return (
|
||||
<div className="loading-overlay">
|
||||
<div
|
||||
className="page-container__header-close"
|
||||
onClick={() => setProviderType(lastSelectedProvider || 'ropsten')}
|
||||
/>
|
||||
<div className="loading-overlay__container">
|
||||
{ this.state.showErrorScreen
|
||||
? this.renderErrorScreenContent()
|
||||
: this.renderLoadingScreenContent()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
@ -0,0 +1,41 @@
|
||||
import { connect } from 'react-redux'
|
||||
import LoadingNetworkScreen from './loading-network-screen.component'
|
||||
import actions from '../../actions'
|
||||
import { getNetworkIdentifier } from '../../selectors'
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const {
|
||||
loadingMessage,
|
||||
currentView,
|
||||
} = state.appState
|
||||
const {
|
||||
provider,
|
||||
lastSelectedProvider,
|
||||
network,
|
||||
} = state.metamask
|
||||
const { rpcTarget, chainId, ticker, nickname, type } = provider
|
||||
|
||||
const setProviderArgs = type === 'rpc'
|
||||
? [rpcTarget, chainId, ticker, nickname]
|
||||
: [provider.type]
|
||||
|
||||
return {
|
||||
isLoadingNetwork: network === 'loading' && currentView.name !== 'config',
|
||||
loadingMessage,
|
||||
lastSelectedProvider,
|
||||
setProviderArgs,
|
||||
provider,
|
||||
providerId: getNetworkIdentifier(state),
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
setProviderType: (type) => {
|
||||
dispatch(actions.setProviderType(type))
|
||||
},
|
||||
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(LoadingNetworkScreen)
|
1
ui/app/components/modals/loading-network-error/index.js
Normal file
1
ui/app/components/modals/loading-network-error/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './loading-network-error.container'
|
@ -0,0 +1,29 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Modal, { ModalContent } from '../../modal'
|
||||
|
||||
const LoadingNetworkError = (props, context) => {
|
||||
const { t } = context
|
||||
const { hideModal } = props
|
||||
|
||||
return (
|
||||
<Modal
|
||||
onSubmit={() => hideModal()}
|
||||
submitText={t('tryAgain')}
|
||||
>
|
||||
<ModalContent
|
||||
description={'Oops! Something went wrong.'}
|
||||
/>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
LoadingNetworkError.contextTypes = {
|
||||
t: PropTypes.func,
|
||||
}
|
||||
|
||||
LoadingNetworkError.propTypes = {
|
||||
hideModal: PropTypes.func,
|
||||
}
|
||||
|
||||
export default LoadingNetworkError
|
@ -0,0 +1,4 @@
|
||||
import LoadingNetworkError from './loading-network-error.component'
|
||||
import withModalProps from '../../../higher-order-components/with-modal-props'
|
||||
|
||||
export default withModalProps(LoadingNetworkError)
|
@ -23,33 +23,19 @@ Network.prototype.render = function () {
|
||||
const props = this.props
|
||||
const context = this.context
|
||||
const networkNumber = props.network
|
||||
let providerName, providerNick
|
||||
let providerName, providerNick, providerUrl
|
||||
try {
|
||||
providerName = props.provider.type
|
||||
providerNick = props.provider.nickname || ''
|
||||
providerUrl = props.provider.rpcTarget
|
||||
} catch (e) {
|
||||
providerName = null
|
||||
}
|
||||
let iconName, hoverText
|
||||
const providerId = providerNick || providerName || providerUrl || null
|
||||
let iconName
|
||||
let 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') {
|
||||
@ -65,8 +51,8 @@ Network.prototype.render = function () {
|
||||
hoverText = context.t('rinkeby')
|
||||
iconName = 'rinkeby-test-network'
|
||||
} else {
|
||||
hoverText = context.t('unknownNetwork')
|
||||
iconName = 'unknown-private-network'
|
||||
hoverText = providerId
|
||||
iconName = 'private-network'
|
||||
}
|
||||
|
||||
return (
|
||||
@ -92,6 +78,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 +88,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 +98,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 +108,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)',
|
||||
|
@ -11,6 +11,12 @@
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, .8);
|
||||
|
||||
&__screen-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__container {
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
@ -26,6 +32,27 @@
|
||||
font-size: 20px;
|
||||
color: $manatee;
|
||||
}
|
||||
|
||||
&__error-screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 160px;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
&__error-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__emoji {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
|
@ -76,6 +76,7 @@ function reduceApp (state, action) {
|
||||
trezor: `m/44'/60'/0'/0`,
|
||||
ledger: `m/44'/60'/0'/0/0`,
|
||||
},
|
||||
lastSelectedProvider: null,
|
||||
}, state.appState)
|
||||
|
||||
switch (action.type) {
|
||||
@ -748,6 +749,14 @@ function reduceApp (state, action) {
|
||||
networkNonce: action.value,
|
||||
})
|
||||
|
||||
case actions.SET_PREVIOUS_PROVIDER:
|
||||
if (action.value === 'loading') {
|
||||
return appState
|
||||
}
|
||||
return extend(appState, {
|
||||
lastSelectedProvider: action.value,
|
||||
})
|
||||
|
||||
default:
|
||||
return appState
|
||||
}
|
||||
|
@ -36,10 +36,17 @@ const selectors = {
|
||||
preferencesSelector,
|
||||
getMetaMaskAccounts,
|
||||
getCurrentEthBalance,
|
||||
getNetworkIdentifier,
|
||||
}
|
||||
|
||||
module.exports = selectors
|
||||
|
||||
function getNetworkIdentifier (state) {
|
||||
const { metamask: { provider: { type, nickname, rpcTarget } } } = state
|
||||
|
||||
return nickname || rpcTarget || type
|
||||
}
|
||||
|
||||
function getSelectedAddress (state) {
|
||||
const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0]
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user