Merge pull request #3977 from MetaMask/i-3913-big-number

Fix BigNumber exception in confirm-send-ether

app/_locales/en/messages.json

@@ -908,5 +908,8 @@
   },
   "youSign": {
     "message": "You are signing"
+  },
+  "generatingTransaction": {
+    "message": "Generating transaction"
   }
 }

ui/app/app.js

@@ -146,8 +146,6 @@ class App extends Component {
           loadingMessage: loadMessage,
         }),
 
-        // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
-
         // content
         this.renderRoutes(),
       ])
@@ -311,17 +309,6 @@ class App extends Component {
     )
   }
 
-  renderLoadingIndicator ({ isLoading, isLoadingNetwork, loadMessage }) {
-    const { isMascara } = this.props
-
-    return isMascara
-      ? null
-      : h(Loading, {
-        isLoading: isLoading || isLoadingNetwork,
-        loadingMessage: loadMessage,
-      })
-  }
-
   toggleMetamaskActive () {
     if (!this.props.isUnlocked) {
       // currently inactive: redirect to password box

ui/app/components/loading.js

@@ -1,6 +1,7 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
 const PropTypes = require('prop-types')
+const classnames = require('classnames')
 
 class LoadingIndicator extends Component {
   renderMessage () {
@@ -10,14 +11,16 @@ class LoadingIndicator extends Component {
 
   render () {
     return (
-      h('.full-flex-height.loading-overlay', {}, [
+      h('.loading-overlay', {
-        h('img', {
+        className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }),
-          src: 'images/loading.svg',
+      }, [
-        }),
+        h('.flex-center.flex-column', [
+          h('img', {
+            src: 'images/loading.svg',
+          }),
 
-        h('br'),
+          this.renderMessage(),
-
+        ]),
-        this.renderMessage(),
       ])
     )
   }
@@ -25,6 +28,7 @@ class LoadingIndicator extends Component {
 
 LoadingIndicator.propTypes = {
   loadingMessage: PropTypes.string,
+  fullScreen: PropTypes.bool,
 }
 
 module.exports = LoadingIndicator

ui/app/components/pending-tx/index.js

@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const clone = require('clone')
 const abi = require('human-standard-token-abi')
 const abiDecoder = require('abi-decoder')
@@ -11,6 +12,7 @@ const util = require('../../util')
 const ConfirmSendEther = require('./confirm-send-ether')
 const ConfirmSendToken = require('./confirm-send-token')
 const ConfirmDeployContract = require('./confirm-deploy-contract')
+const Loading = require('../loading')
 
 const TX_TYPES = {
   DEPLOY_CONTRACT: 'deploy_contract',
@@ -53,10 +55,24 @@ function PendingTx () {
   }
 }
 
-PendingTx.prototype.componentWillMount = async function () {
+PendingTx.prototype.componentDidMount = function () {
+  this.setTokenData()
+}
+
+PendingTx.prototype.componentDidUpdate = function (prevProps, prevState) {
+  if (prevState.isFetching) {
+    this.setTokenData()
+  }
+}
+
+PendingTx.prototype.setTokenData = async function () {
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
+  if (txMeta.loadingDefaults) {
+    return
+  }
+
   if (!txParams.to) {
     return this.setState({
       transactionType: TX_TYPES.DEPLOY_CONTRACT,
@@ -125,7 +141,10 @@ PendingTx.prototype.render = function () {
   const { sendTransaction } = this.props
 
   if (isFetching) {
-    return h('noscript')
+    return h(Loading, {
+      fullScreen: true,
+      loadingMessage: this.context.t('generatingTransaction'),
+    })
   }
 
   switch (transactionType) {
@@ -150,6 +169,12 @@ PendingTx.prototype.render = function () {
         sendTransaction,
       })
     default:
-      return h('noscript')
+      return h(Loading, {
+        fullScreen: true,
+      })
   }
 }
+
+PendingTx.contextTypes = {
+  t: PropTypes.func,
+}

ui/app/css/itcss/components/loading-overlay.scss

@@ -1,13 +1,14 @@
 .loading-overlay {
-  left: 0px;
+  left: 0;
   z-index: 50;
   position: absolute;
   flex-direction: column;
   display: flex;
   justify-content: center;
   align-items: center;
+  flex: 1 1 auto;
   width: 100%;
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, .8);
 
   @media screen and (max-width: 575px) {
     margin-top: 56px;
@@ -18,4 +19,11 @@
     margin-top: 75px;
     height: calc(100% - 75px);
   }
+
+  &--full-screen {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    margin-top: 0;
+  }
 }