Merge pull request #1844 from OpenBazaar/shapeshift

Shapeshift integration with Shifty Button

Author: jjeffryes

imgs/shapeshift_logo.png

@@ -685,6 +685,9 @@
     "OpenAddress": "Open in Local Wallet",
     "CopyAddress": "Copy to Clipboard",
     "RefreshPayment": "Refresh Payment Status",
+    "Refresh": "Refresh",
+    "PayWithAltCoins": "Pay with Altcoins",
+    "AltCoins": "Use Altcoins",
     "summaryMsg1": "Your payment has been sent to %{recipient}",
     "summaryMsg2": "The expected processing time for this order is %{time}",
     "summaryMsg3": "You can check the status of your order on your %{purchasesPageLink}",

js/languages/en-US.json

@@ -29,7 +29,16 @@ <h3 class="custCol-text padding30"><%= polyglot.t('CheckExchanges') %> </h3>
       </div>
       <a class="btn btn-txt btn-wide row10 js-buyWizardPayCopy custCol-secondary  custCol-text"><i class="ion-clipboard"></i> <%= polyglot.t('buyFlow.CopyAddress') %></a>
       <a class="btn btn-txt btn-wide row10 js-buyWizardPayLink custCol-secondary custCol-text"><i class="ion-link"></i> <%= polyglot.t('buyFlow.OpenAddress') %></a>
-      <a class="btn btn-txt btn-wide js-buyWizardPayCheck custCol-secondary custCol-text"><i class="ion-refresh"></i> <%= polyglot.t('buyFlow.RefreshPayment') %></a>
+      <div class="flexRow pad">
+        <div class="flexCol-6">
+          <a class="btn btn-txt btn-wide js-buyWizardPayCheck custCol-secondary custCol-text"><i class="ion-refresh"></i> <%= polyglot.t('buyFlow.RefreshPayment') %></a>
+        </div>
+        <div class="flexCol-6">
+          <a class="btn btn-txt btn-wide js-buyWizardShapeshiftURL custCol-secondary custCol-text ss-button">
+            <img src="imgs/shapeshift_logo.png" height="18px" width="18px" style="position: relative; top: 4px;"> <%= polyglot.t('buyFlow.PayWithAltCoins') %>
+          </a>
+        </div>
+      </div>
       <div class="rowTop10 txt-center note custCol-text">
         <%= polyglot.t('buyFlow.paymentNote') %>
       </div>

js/templates/buyWizard.html

@@ -55,7 +55,17 @@ <h3 class="txt-bright"><%= polyglot.t('CheckExchanges') %> </h3>
              href="bitcoin:<%= ob.buyer_order.order.payment.address %>?amount=<%= ob.buyer_order.order.payment.amount %>&message=<%= ob.vendor_offer.listing.item.title %>">
             <i class="ion-link"></i> <%= polyglot.t('buyFlow.OpenAddress') %>
           </a>
-          <a class="btn btn-txt btn-wide js-transactionPayCheck"><i class="ion-refresh"></i> <%= polyglot.t('buyFlow.RefreshPayment') %></a>
+
+          <div class="flexRow pad">
+            <div class="flexCol-6">
+              <a class="btn btn-txt btn-wide js-transactionPayCheck"><i class="ion-refresh"></i> <%= polyglot.t('buyFlow.Refresh') %></a>
+            </div>
+            <div class="flexCol-6">
+              <a class="btn btn-txt btn-wide js-transactionShapeshiftURL">
+                <img src="imgs/shapeshift_logo.png" height="18px" width="18px" style="position: relative; top: 4px;"> <%= polyglot.t('buyFlow.AltCoins') %>
+              </a>
+            </div>
+          </div>
         </div>
       </div>
     </div>

js/templates/transactionModal.html

@@ -12,7 +12,9 @@ var __ = require('underscore'),
     qr = require('qr-encode'),
     app = require('../App').getApp(),
     clipboard = require('electron').clipboard,
-    templateHelpers = require('../utils/templateHelpers');
+    templateHelpers = require('../utils/templateHelpers'),
+    BrowserWindow = require('electron').remote.BrowserWindow;
+
 
 module.exports = baseModal.extend({
 
@@ -37,6 +39,7 @@ module.exports = baseModal.extend({
     'click .js-buyWizardPurchaseBack': 'backPurchase',
     'click .js-buyWizardPayCopy': 'copyPayAddress',
     'click .js-accordionNext': 'accNext',
+    'click .js-buyWizardShapeshiftURL': 'openShapeshiftURL',
     'click .js-accordionPrev': 'accPrev',
     'click .js-buyWizardCountryWrapper': 'openCountrySelect',
     'click .js-buyWizardPayCheck': 'checkPayment',
@@ -66,6 +69,7 @@ module.exports = baseModal.extend({
     this.model.set('selectedModerator', "");
     this.model.updateAttributes();
     this.cachePayData = "";
+    this.totalBTCPrice = 0;
     this.partialPaymentAmount = 0;
 
     //create the country select list
@@ -574,18 +578,17 @@ module.exports = baseModal.extend({
       throw new Error('Data must be provided to the showPayAddress function');
     }
 
-    var totalBTCPrice = 0,
-        storeName = encodeURI(this.model.get('page').profile.name),
+    var storeName = encodeURI(this.model.get('page').profile.name),
         message = encodeURI(this.model.get('vendor_offer').listing.item.title.substring(0, 20) + " "+data.order_id),
         payHREF = "",
         dataURI;
     this.$el.find('.js-buyWizardSpinner').addClass('hide');
     this.orderID = data.order_id;
-    totalBTCPrice = data.amount - this.partialPaymentAmount;
-    this.$el.find('.js-buyWizardDetailsTotalBTC').text(templateHelpers.intlNumFormat(totalBTCPrice, 8));
+    this.totalBTCPrice = data.amount - this.partialPaymentAmount;
+    this.$el.find('.js-buyWizardDetailsTotalBTC').text(templateHelpers.intlNumFormat(this.totalBTCPrice, 8));
     this.payURL = data.payment_address;
 
-    payHREF = "bitcoin:"+ data.payment_address+"?amount="+totalBTCPrice;
+    payHREF = "bitcoin:"+ data.payment_address+"?amount="+this.totalBTCPrice;
     if (localStorage.getItem('AdditionalPaymentData') != "false") {
       payHREF += "&label="+storeName+"&message="+message;
     }
@@ -595,9 +598,14 @@ module.exports = baseModal.extend({
     dataURI = qr(payHREF, {type: 10, size: 10, level: 'M'});
     this.$el.find('.js-buyWizardPayQRCode').attr('src', dataURI);
     this.$el.find('.js-buyWizardPayPrice').text();
-    this.$el.find('.js-buyWizardPayURL').text(data.payment_address);
+    this.$el.find('.js-buyWizardPayURL').text(this.payURL);
     this.$el.find('.js-buyWizardPayLink').attr('href', payHREF);
-    this.buyDetailsView.lockForm();
+  },
+
+  openShapeshiftURL: function() {
+    var shapeshiftURL = 'https://shapeshift.io/shifty.html?destination='+this.payURL+'&output=BTC&apiKey=24ad734e196c948de4608e00472ab8a4b956a298c52abc20fda74114d6cebcb632714a9c5a0f38f46cef0bc974dfd41c34488432128d65acc099b3892f92d602&amount='+this.totalBTCPrice;
+    var shapeshiftWin = new BrowserWindow({width: 700, height: 500, frame: true});
+    shapeshiftWin.loadURL(shapeshiftURL);
   },
 
   hidePayAddress: function(){

js/views/buyWizardVw.js

@@ -11,7 +11,8 @@ var __ = require('underscore'),
     qr = require('qr-encode'),
     app = require('../App.js').getApp(),
     discussionCl = require('../collections/discussionCl'),
-    clipboard = require('electron').clipboard;
+    clipboard = require('electron').clipboard,
+    BrowserWindow = require('electron').remote.BrowserWindow;
 
 module.exports = baseModal.extend({
 
@@ -56,7 +57,8 @@ module.exports = baseModal.extend({
     //'blur textarea': 'validateInput',
     'click #BuyWizardQRDetailsInput': 'toggleQRDetails',
     'keydown #transactionDiscussionSendText': 'onKeydownDiscussion',
-    'keyup #transactionDiscussionSendText': 'onKeyupDiscussion'
+    'keyup #transactionDiscussionSendText': 'onKeyupDiscussion',
+    'click .js-transactionShapeshiftURL': 'openShapeshiftURL',
   },
 
   initialize: function (options) {
@@ -151,8 +153,8 @@ module.exports = baseModal.extend({
   render: function () {
     var self = this,
         orderPrice = 0,
-        orderPaid = 0,
-        orderDue = 0;
+        orderPaid = 0;
+        this.orderDue = 0;
 
     //make sure data is valid
     if (this.model.get('invalidData')){
@@ -168,7 +170,7 @@ module.exports = baseModal.extend({
     __.each(this.model.get("bitcoin_txs"), function(payment){
       orderPaid += payment.value;
     });
-    orderDue = orderPrice - orderPaid;
+    this.orderDue = orderPrice - orderPaid;
 
     loadTemplate('./js/templates/transactionModal.html', function(loadedTemplate) {
       self.$el.html(loadedTemplate(
@@ -184,7 +186,7 @@ module.exports = baseModal.extend({
           orderID: self.orderID,
           orderPrice: orderPrice,
           orderPaid: orderPaid,
-          orderDue: orderDue
+          orderDue: self.orderDue
         })
       ));
 
@@ -259,7 +261,8 @@ module.exports = baseModal.extend({
     var payHREF,
         dataURI;
     if (this.model.get('buyer_order')){
-      payHREF = "bitcoin:" + this.model.get('buyer_order').order.payment.address + "?amount=" + this.model.get('buyer_order').order.payment.amount;
+      this.payURL = this.model.get('buyer_order').order.payment.address;
+      payHREF = "bitcoin:" + this.payURL + "?amount=" + this.orderDue;
 
       if (localStorage.getItem('AdditionalPaymentData') != "false") {
         payHREF += "&message=" + this.model.get('vendor_offer').listing.item.title.substring(0, 20) + " " + this.orderID;
@@ -819,6 +822,12 @@ module.exports = baseModal.extend({
     targ4.text(app.intlNumFormat(adjustedTotal - updatedVal * adjustedTotal, 8));
   },
 
+  openShapeshiftURL: function() {
+    var shapeshiftURL = 'https://shapeshift.io/shifty.html?destination='+this.payURL+'&output=BTC&apiKey=24ad734e196c948de4608e00472ab8a4b956a298c52abc20fda74114d6cebcb632714a9c5a0f38f46cef0bc974dfd41c34488432128d65acc099b3892f92d602&amount='+this.orderDue;
+    var shapeshiftWin = new BrowserWindow({width: 700, height: 500, frame: true});
+    shapeshiftWin.loadURL(shapeshiftURL);
+  },
+
   closeOrderForm: function(){
     this.setState(this.lastTab);
   },