From de7fc781a56fe21c01d8038b01da01fdec90f219 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sat, 14 Apr 2018 00:00:48 -0700 Subject: Fix BigNumber exception in confirm-send-ether --- app/_locales/en/messages.json | 3 +++ ui/app/components/pending-tx/index.js | 28 +++++++++++++++++++++++++--- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index b372326ee..0e7c564a8 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -908,5 +908,8 @@ }, "youSign": { "message": "You are signing" + }, + "estimatingTransaction": { + "message": "Estimating transaction cost…" } } diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index acdd99364..dc496a8d8 100644 --- a/ui/app/components/pending-tx/index.js +++ b/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,9 @@ PendingTx.prototype.render = function () { const { sendTransaction } = this.props if (isFetching) { - return h('noscript') + return h(Loading, { + loadingMessage: this.context.t('estimatingTransaction'), + }) } switch (transactionType) { @@ -150,6 +168,10 @@ PendingTx.prototype.render = function () { sendTransaction, }) default: - return h('noscript') + return h(Loading) } } + +PendingTx.contextTypes = { + t: PropTypes.func, +} -- cgit v1.2.3 From 053044fb6561bb3fe7b87c61bf5d5d2750c46c58 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 18 Apr 2018 00:56:52 -0700 Subject: Fix spinner layout --- app/_locales/en/messages.json | 4 ++-- ui/app/app.js | 13 ------------- ui/app/components/loading.js | 18 +++++++++++------- ui/app/components/pending-tx/index.js | 7 +++++-- ui/app/css/itcss/components/loading-overlay.scss | 12 ++++++++++-- 5 files changed, 28 insertions(+), 26 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 0e7c564a8..3b20ab49a 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -909,7 +909,7 @@ "youSign": { "message": "You are signing" }, - "estimatingTransaction": { - "message": "Estimating transaction cost…" + "generatingTransaction": { + "message": "Generating transaction" } } diff --git a/ui/app/app.js b/ui/app/app.js index 827b4e9ce..e462701fa 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -137,8 +137,6 @@ class App extends Component { loadingMessage: loadMessage, }), - // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), - // content this.renderRoutes(), ]) @@ -302,17 +300,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 diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js index cb6fa51fb..b9afc550f 100644 --- a/ui/app/components/loading.js +++ b/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('img', { - src: 'images/loading.svg', - }), + h('.loading-overlay', { + className: classnames({ 'loading-overlay--full-screen': this.props.fullScreen }), + }, [ + 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 diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index dc496a8d8..6ee83ba7e 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -142,7 +142,8 @@ PendingTx.prototype.render = function () { if (isFetching) { return h(Loading, { - loadingMessage: this.context.t('estimatingTransaction'), + fullScreen: true, + loadingMessage: this.context.t('generatingTransaction'), }) } @@ -168,7 +169,9 @@ PendingTx.prototype.render = function () { sendTransaction, }) default: - return h(Loading) + return h(Loading, { + fullScreen: true, + }) } } diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index 15009c1e6..a92fffec5 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/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; + } } -- cgit v1.2.3