Merge pull request #677 from MetaMask/i675-LoadingBuy

Show loading indication when selecting ShapeShift

6 files changed, 18 insertions, 17 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f72c83d1..d77308838 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - Add a link to the transaction in history that goes to https://metamask.github.io/eth-tx-viz
 too help visualize transactions and to where they are going.
 - 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)
 }
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 58b7942c3..2bb384b94 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -128,7 +128,6 @@ ShapeshiftForm.prototype.renderMain = function () {
     this.props.isSubLoading ? this.renderLoading() : null,
     h('.flex-column', {
       style: {
-        width: '235px',
         alignItems: 'flex-start',
       },
     }, [
@@ -270,17 +269,17 @@ ShapeshiftForm.prototype.renderInfo = function () {
 
   return h('span', {
     style: {
-      marginTop: '15px',
+      marginTop: '10px',
       marginBottom: '15px',
     },
   }, [
     h('h3.flex-row.text-transform-uppercase', {
       style: {
-        color: '#AEAEAE',
+        color: '#868686',
         paddingTop: '4px',
         justifyContent: 'space-around',
         textAlign: 'center',
-        fontSize: '14px',
+        fontSize: '17px',
       },
     }, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`),
     h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]),
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 8543960fe..975a5289b 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -555,8 +555,8 @@ input.large-input {
 .marketinfo{
   font-family: 'Montserrat light';
   color: #AEAEAE;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: 15px;
+  line-height: 17px;
 }
 
 #fromCoin::-webkit-calendar-picker-indicator {