Add multi message capability to Qr view for market info

4 files changed, 27 insertions, 6 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index b6b5e684b..61f900df9 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -692,13 +692,14 @@ function shapeShiftSubview (network) {
   }
 }
 
-function coinShiftRquest (data) {
+function coinShiftRquest (data, marketData) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     shapeShiftRequest('shift', { method: 'POST', data}, (response) => {
       if (response.error) return dispatch(actions.showWarning(response.error))
-      var message = `Deposit your ${response.depositType} to the address bellow:`
-      dispatch(actions.getQr(response.deposit, '125x125', message))
+      var message = `
+        Deposit your ${response.depositType} to the address bellow:`
+      dispatch(actions.getQr(response.deposit, '125x125', [message].concat(marketData)))
     })
   }
 }
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 765322239..1c744b234 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -29,7 +29,7 @@ QrCodeView.prototype.render = function () {
       alignItems: 'center',
     },
   }, [
-    h('h3', Qr.message),
+    Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('h3', Qr.message),
     h('#qr-container.flex-column', {
       key: 'qr',
       style: {
@@ -48,3 +48,9 @@ QrCodeView.prototype.render = function () {
     ]),
   ])
 }
+
+QrCodeView.prototype.renderMultiMessage = function () {
+  var Qr = this.props.Qr
+  var multiMessage = Qr.message.map((message) => h('.qr-message', message))
+  return multiMessage
+}
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 52bacf798..48d220693 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -194,6 +194,7 @@ ShapeshiftForm.prototype.renderMain = function () {
 }
 
 ShapeshiftForm.prototype.shift = function () {
+  var props = this.props
   var withdrawal = this.props.buyView.buyAddress
   var returnAddress = document.getElementById('fromCoinAddress').value
   var pair = this.props.buyView.formView.marketinfo.pair
@@ -202,9 +203,12 @@ ShapeshiftForm.prototype.shift = function () {
     'pair': pair,
     'returnAddress': returnAddress,
   }
-
+  var message = [
+    `Deposit Limit: ${props.buyView.formView.marketinfo.limit}`,
+    `Deposit Minimum:${props.buyView.formView.marketinfo.minimum}`,
+  ]
   if (isValidAddress(withdrawal)) {
-    this.props.dispatch(actions.coinShiftRquest(data))
+    this.props.dispatch(actions.coinShiftRquest(data, message))
   }
 }
 
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 3b385ad85..1278e95c9 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -582,3 +582,13 @@ input.large-input {
   font-family: "Montserrat Light";
   margin-left: 5px;
 }
+
+.qr-message {
+  font-size: 12px;
+  color: #F7861C;
+}
+
+div.message-container > div:first-child {
+  font-size: 15px;
+  color: #4D4D4D;
+}