From 4eef2c57cf9178cdf5b0a882d6fae0dcdcfae89a Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Thu, 15 Sep 2016 20:51:41 -0700
Subject: Show loading indication when selecting ShapeShift

---
 ui/app/app.js                           |  7 +++--
 ui/app/components/buy-button-subview.js |  6 ++++
 ui/app/components/loading.js            | 44 +++++++++++++++++++++++++++++
 ui/app/loading.js                       | 50 ---------------------------------
 4 files changed, 54 insertions(+), 53 deletions(-)
 create mode 100644 ui/app/components/loading.js
 delete mode 100644 ui/app/loading.js

(limited to 'ui/app')

diff --git a/ui/app/app.js b/ui/app/app.js
index 8b1cac03f..d26af4e77 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -21,7 +21,7 @@ const ConfirmTxScreen = require('./conf-tx')
 const ConfigScreen = require('./config')
 const RevealSeedConfirmation = require('./recover-seed/confirmation')
 const InfoScreen = require('./info')
-const LoadingIndicator = require('./loading')
+const LoadingIndicator = require('./components/loading')
 const SandwichExpando = require('sandwich-expando')
 const MenuDroppo = require('menu-droppo')
 const DropMenuItem = require('./components/drop-menu-item')
@@ -38,6 +38,7 @@ function App () { Component.call(this) }
 function mapStateToProps (state) {
   return {
     // state from plugin
+    isLoading: state.appState.isLoading,
     isConfirmed: state.metamask.isConfirmed,
     isEthConfirmed: state.metamask.isEthConfirmed,
     isInitialized: state.metamask.isInitialized,
@@ -57,7 +58,7 @@ function mapStateToProps (state) {
 
 App.prototype.render = function () {
   var props = this.props
-  var transForward = props.transForward
+  const { isLoading, transForward } = props
 
   return (
 
@@ -69,7 +70,7 @@ App.prototype.render = function () {
       },
     }, [
 
-      h(LoadingIndicator),
+      h(LoadingIndicator, { isLoading }),
 
       // app bar
       this.renderAppBar(),
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 7daf41206..b564733b1 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -6,6 +6,7 @@ const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
 const extension = require('../../../app/scripts/lib/extension')
+const Loading = require('./loading')
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
@@ -17,6 +18,7 @@ function mapStateToProps (state) {
     network: state.metamask.network,
     provider: state.metamask.provider,
     context: state.appState.currentView.context,
+    isSubLoading: state.appState.isSubLoading,
   }
 }
 
@@ -28,6 +30,7 @@ function BuyButtonSubview () {
 BuyButtonSubview.prototype.render = function () {
   const props = this.props
   const currentForm = props.buyView.formView
+  const isLoading = props.isSubLoading
 
   return (
     h('.buy-eth-section', [
@@ -47,6 +50,9 @@ BuyButtonSubview.prototype.render = function () {
         }),
         h('h2.page-subtitle', 'Buy Eth'),
       ]),
+
+      h(Loading, { isLoading }),
+
       h('h3.flex-row.text-transform-uppercase', {
         style: {
           background: '#EBEBEB',
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
new file mode 100644
index 000000000..ae735894f
--- /dev/null
+++ b/ui/app/components/loading.js
@@ -0,0 +1,44 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+
+
+inherits(LoadingIndicator, Component)
+module.exports = LoadingIndicator
+
+function LoadingIndicator () {
+  Component.call(this)
+}
+
+LoadingIndicator.prototype.render = function () {
+  var isLoading = this.props.isLoading
+
+  return (
+    h(ReactCSSTransitionGroup, {
+      className: 'css-transition-group',
+      transitionName: 'loader',
+      transitionEnterTimeout: 150,
+      transitionLeaveTimeout: 150,
+    }, [
+
+      isLoading ? h('div', {
+        style: {
+          zIndex: 10,
+          position: 'absolute',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100%',
+          width: '100%',
+          background: 'rgba(255, 255, 255, 0.5)',
+        },
+      }, [
+        h('img', {
+          src: 'images/loading.svg',
+        }),
+      ]) : null,
+    ])
+  )
+}
+
diff --git a/ui/app/loading.js b/ui/app/loading.js
deleted file mode 100644
index b060abebc..000000000
--- a/ui/app/loading.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
-
-module.exports = connect(mapStateToProps)(LoadingIndicator)
-
-function mapStateToProps (state) {
-  return {
-    isLoading: state.appState.isLoading,
-  }
-}
-
-inherits(LoadingIndicator, Component)
-function LoadingIndicator () {
-  Component.call(this)
-}
-
-LoadingIndicator.prototype.render = function () {
-  var isLoading = this.props.isLoading
-
-  return (
-    h(ReactCSSTransitionGroup, {
-      className: 'css-transition-group',
-      transitionName: 'loader',
-      transitionEnterTimeout: 150,
-      transitionLeaveTimeout: 150,
-    }, [
-
-      isLoading ? h('div', {
-        style: {
-          zIndex: 10,
-          position: 'absolute',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100%',
-          width: '100%',
-          background: 'rgba(255, 255, 255, 0.5)',
-        },
-      }, [
-        h('img', {
-          src: 'images/loading.svg',
-        }),
-      ]) : null,
-    ])
-  )
-}
-
-- 
cgit v1.2.3