Merge pull request #3433 from danjm/i3087-shapeshift-split-undefined

Shapeshift form handles 'market info unavailable' errors.

6 files changed, 30 insertions, 5 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fdc7d7155..6ef2f36b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,8 @@
 
 - Allow adding custom tokens to classic ui when balance is 0
 - Allow editing of symbol and decimal info when adding custom token in new-ui
-- NewUI shapeshift form can select all coins (not just BTC)
+- new-ui shapeshift form can select all coins (not just BTC)
+- Classic ui and new-ui shapeshift forms show when coins are not available on shapeshift
 
 ## 4.1.3 2018-2-28
 
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 4f902a6a2..8b1480a79 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -1498,6 +1498,7 @@ function pairUpdate (coin) {
     dispatch(actions.hideWarning())
     shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
       dispatch(actions.hideSubLoadingIndication())
+      if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
       dispatch({
         type: actions.PAIR_UPDATE,
         value: {
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 532d66653..7547dbcf5 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -33,6 +33,9 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
     showAccountDetailModal: () => {
       dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
     },
@@ -119,6 +122,7 @@ DepositEtherModal.prototype.render = function () {
       h('div.deposit-ether-modal__header__close', {
         onClick: () => {
           this.setState({ buyingWithShapeshift: false })
+          this.props.hideWarning()
           this.props.hideModal()
         },
       }),
@@ -179,6 +183,7 @@ DepositEtherModal.prototype.render = function () {
 }
 
 DepositEtherModal.prototype.goToAccountDetailsModal = function () {
+  this.props.hideWarning()
   this.props.hideModal()
   this.props.showAccountDetailModal()
 }
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 97fe38292..8e9e58985 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -79,6 +79,7 @@ const MODALS = {
     contents: [
       h(DepositEtherModal, {}, []),
     ],
+    onHide: (props) => props.hideWarning(),
     mobileModalStyle: {
       width: '100%',
       height: '100%',
@@ -286,6 +287,10 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
+
   }
 }
 
@@ -308,7 +313,12 @@ Modal.prototype.render = function () {
     {
       className: 'modal',
       keyboard: false,
-      onHide: () => { this.onHide() },
+      onHide: () => {
+        if (modal.onHide) {
+          modal.onHide(this.props)
+        }
+        this.onHide()
+      },
       ref: (ref) => {
         this.modalRef = ref
       },
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 648b05049..87eb1588a 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -14,11 +14,13 @@ function mapStateToProps (state) {
     tokenExchangeRates,
     selectedAddress,
   } = state.metamask
+  const { warning } = state.appState
   
   return {
     coinOptions,
     tokenExchangeRates,
     selectedAddress,
+    warning,
   }
 }
 
@@ -163,7 +165,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
 
 
 ShapeshiftForm.prototype.render = function () {
-  const { coinOptions, btnClass } = this.props
+  const { coinOptions, btnClass, warning } = this.props
   const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state
   const coinPair = `${depositCoin}_eth`
   const { tokenExchangeRates } = this.props
@@ -206,7 +208,9 @@ ShapeshiftForm.prototype.render = function () {
 
           ]),
 
-          h('div', {
+          warning && h('div.shapeshift-form__address-input-label', warning),
+
+          !warning && h('div', {
             className: classnames('shapeshift-form__address-input-wrapper', {
               'shapeshift-form__address-input-wrapper--error': errorMessage,
             }),
@@ -227,7 +231,7 @@ ShapeshiftForm.prototype.render = function () {
             h('divshapeshift-form__address-input-error-message', [errorMessage]),
           ]),
 
-          this.renderMarketInfo(),
+          !warning && this.renderMarketInfo(),
 
       ]),
 
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 919e1793b..53e3bff00 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -787,6 +787,10 @@
         width: auto;
         flex: 1;
       }
+
+      @media screen and (max-width: 575px) {
+        width: auto;
+      }
     }
   }