Merge pull request #5893 from MetaMask/loading-network-screen

Loading network screen

8 files changed, 268 insertions, 31 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/loading-network-screen/index.js b/ui/app/components/loading-network-screen/index.js
new file mode 100644
index 000000000..726b4b530
--- /dev/null
+++ b/ui/app/components/loading-network-screen/index.js
@@ -0,0 +1 @@
+export { default } from './loading-network-screen.container'
diff --git a/ui/app/components/loading-network-screen/loading-network-screen.component.js b/ui/app/components/loading-network-screen/loading-network-screen.component.js
new file mode 100644
index 000000000..bf1c141e0
--- /dev/null
+++ b/ui/app/components/loading-network-screen/loading-network-screen.component.js
@@ -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">&#128542;</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>
+    )
+  }
+}
diff --git a/ui/app/components/loading-network-screen/loading-network-screen.container.js b/ui/app/components/loading-network-screen/loading-network-screen.container.js
new file mode 100644
index 000000000..d0623e574
--- /dev/null
+++ b/ui/app/components/loading-network-screen/loading-network-screen.container.js
@@ -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)
diff --git a/ui/app/components/modals/loading-network-error/index.js b/ui/app/components/modals/loading-network-error/index.js
new file mode 100644
index 000000000..b3737458a
--- /dev/null
+++ b/ui/app/components/modals/loading-network-error/index.js
@@ -0,0 +1 @@
+export { default } from './loading-network-error.container'
diff --git a/ui/app/components/modals/loading-network-error/loading-network-error.component.js b/ui/app/components/modals/loading-network-error/loading-network-error.component.js
new file mode 100644
index 000000000..44f71e4b2
--- /dev/null
+++ b/ui/app/components/modals/loading-network-error/loading-network-error.component.js
@@ -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
diff --git a/ui/app/components/modals/loading-network-error/loading-network-error.container.js b/ui/app/components/modals/loading-network-error/loading-network-error.container.js
new file mode 100644
index 000000000..3fcba20aa
--- /dev/null
+++ b/ui/app/components/modals/loading-network-error/loading-network-error.container.js
@@ -0,0 +1,4 @@
+import LoadingNetworkError from './loading-network-error.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+export default withModalProps(LoadingNetworkError)
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 611aadb7b..e18404f42 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -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)',