Show loading indication when selecting ShapeShift

4 files changed, 14 insertions, 11 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f1acb1d15..14b96ce70 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,9 @@
 # Changelog
 
 ## Current Master
+
 - Show "Buy Ether" button and warning on tx confirmation when sender balance is insufficient
+- Show loading indication when selecting ShapeShift as purchasing method.
 
 ## 2.12.1 2016-09-14
 
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/loading.js b/ui/app/components/loading.js
index b060abebc..ae735894f 100644
--- a/ui/app/loading.js
+++ b/ui/app/components/loading.js
@@ -1,18 +1,12 @@
 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)
+module.exports = LoadingIndicator
+
 function LoadingIndicator () {
   Component.call(this)
 }