TONS of work in shapeshift integration

app-template/bitcoincom/css/bitcoin.com.css

@@ -206,3 +206,17 @@ div.onboarding-topic {
 .light-green {
 	color:#26B03C;
 }
+
+.shapeshift-banner {
+	background: url(../img/shapeshiftbg.jpg) center center no-repeat #28394d;
+	padding: 10px;
+	box-shadow: 0px 5px 10px 0px #cccccc;
+	height: 5em;
+}
+
+.shapeshift-logo {
+	display: block;
+	float: left;
+	max-height: 100%;
+	max-width: 100%;
+}

src/js/controllers/amount.js

@@ -1,6 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('amountController', function($scope, $filter, $timeout, $ionicScrollDelegate, $ionicHistory, gettextCatalog, platformInfo, lodash, configService, rateService, $stateParams, $window, $state, $log, txFormatService, ongoingProcess, popupService, bwcError, payproService, profileService, bitcore, amazonService, nodeWebkitService) {
+
   var _id;
   var unitToSatoshi;
   var satToUnit;
@@ -24,6 +25,12 @@ angular.module('copayApp.controllers').controller('amountController', function($
   });
 
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
+
+    if (data.stateParams.minShapeshiftAmount.length > 0 && data.stateParams.maxShapeshiftAmount.length > 0) {
+      $scope.minShapeshiftAmount = parseFloat(data.stateParams.minShapeshiftAmount);
+      $scope.maxShapeshiftAmount = parseFloat(data.stateParams.maxShapeshiftAmount);
+    }
+
     var config = configService.getSync().wallet.settings;
 
     function setAvailableUnits() {
@@ -297,7 +304,11 @@ angular.module('copayApp.controllers').controller('amountController', function($
   function processAmount() {
     var formatedValue = format($scope.amount);
     var result = evaluate(formatedValue);
-    $scope.allowSend = lodash.isNumber(result) && +result > 0;
+    $scope.allowSend = lodash.isNumber(result) && +result > 0 
+        && ((!$scope.minShapeshiftAmount && !$scope.maxShapeshiftAmount)
+            || ($scope.minShapeshiftAmount && $scope.maxShapeshiftAmount
+                && result >= $scope.minShapeshiftAmount && result <= $scope.maxShapeshiftAmount));
+
     if (lodash.isNumber(result)) {
       $scope.globalResult = isExpression($scope.amount) ? '= ' + processResult(result) : '';
 

src/js/controllers/shapeshift.js

@@ -1,3 +1,80 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('shapeshiftController', function($scope, $interval){ });
+angular.module('copayApp.controllers').controller('shapeshiftController', function($scope, $interval, profileService, walletService, popupService) {
+
+  var walletsBtc = [];
+  var walletsBch = [];
+
+  function generateAddress(wallet, cb) {
+    if (!wallet) return;
+    walletService.getAddress(wallet, false, function(err, addr) {
+      if (err) {
+        popupService.showAlert(err);
+      }
+      return cb(addr);
+    });
+  }
+
+  function showToWallets() {
+    $scope.toWallets = $scope.fromWallet.coin == 'btc' ? walletsBch : walletsBtc;
+    $scope.onToWalletSelect($scope.toWallets[0]);
+    $scope.singleToWallet = $scope.toWallets.length == 1;
+  }
+
+  $scope.onFromWalletSelect = function(wallet) {
+    $scope.fromWallet = wallet;
+    showToWallets();
+    generateAddress(wallet, function(addr) {
+      $scope.fromWalletAddress = addr;
+    });
+  };
+
+  $scope.onToWalletSelect = function(wallet) {
+    $scope.toWallet = wallet;
+    generateAddress(wallet, function(addr) {
+      $scope.toWalletAddress = addr;
+    });
+  }
+
+  $scope.$on("$ionicView.beforeEnter", function(event, data) {
+    walletsBtc = profileService.getWallets({coin: 'btc'});
+    walletsBch = profileService.getWallets({coin: 'bch'});
+    $scope.fromWallets = walletsBtc.concat(walletsBch);
+    $scope.toWallets = walletsBch;
+    if ($scope.fromWallets.length == 0 || $scope.toWallets.length == 0) return;
+    $scope.onFromWalletSelect($scope.fromWallets[0]);
+    $scope.onToWalletSelect($scope.toWallets[0]);
+    $scope.singleFromWallet = $scope.fromWallets.length == 1;
+    $scope.singleToWallet = $scope.toWallets.length == 1;
+    $scope.toWalletSelectorTitle = 'To';
+    $scope.showFromWallets = false;
+    $scope.showToWallets = false;
+  });
+
+  $scope.showFromWalletSelector = function() {
+    $scope.showFromWallets = true;
+  }
+
+  $scope.showToWalletSelector = function() {
+    $scope.showToWallets = true;
+  }
+
+  /*var setAddress = function(newAddr) {
+    $scope.addr = null;
+    if (!$scope.wallet || $scope.generatingAddress || !$scope.wallet.isComplete()) return;
+    $scope.generatingAddress = true;
+    walletService.getAddress($scope.wallet, newAddr, function(err, addr) {
+      $scope.generatingAddress = false;
+
+      if (err) {
+        //Error is already formated
+        popupService.showAlert(err);
+      }
+
+      $scope.addr = addr;
+      $timeout(function() {
+        $scope.$apply();
+      }, 10);
+    });
+  };*/
+});

src/js/directives/shapeshiftCoinSelector.js

@@ -22,13 +22,17 @@ angular.module('copayApp.directives').directive('shapeshiftCoinSelector', functi
               coin: scope.selectedCoin
             }
 
-            scope.$watch('coinAddress', function(newVal){
+            scope.$watch('selectedCoin', function(newVal) {
+              scope.getMarketData(newVal);
+            });
+
+            scope.$watch('coinAddress', function(newVal) {
                 if(scope.direction === 'in')
                     coinTraderCtrl.returnAddress(newVal);
                 else if(scope.direction === 'out')
                     coinTraderCtrl.withdrawalAddress(newVal);
             });
-            scope.$watch('amount', function(newVal){
+            scope.$watch('amount', function(newVal) {
                 coinTraderCtrl.amount(newVal)
             });
         },

src/js/directives/shapeshiftCoinTrader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.directives').directive('shapeshiftCoinTrader', function($interval, shapeshiftApiService, profileService) {
+angular.module('copayApp.directives').directive('shapeshiftCoinTrader', function($interval, shapeshiftApiService, profileService, incomingData) {
   return {
     restrict: 'E',
     transclude: true,
@@ -36,6 +36,7 @@ angular.module('copayApp.directives').directive('shapeshiftCoinTrader', function
                 .marketInfo($scope.coinIn, $scope.coinOut)
                 .then(function(marketData){
                     $scope.marketData = marketData;
+                    $scope.rateString = $scope.marketData.rate.toString() + ' ' + coinOut.toUpperCase() + '/' + coinIn.toUpperCase();
             });
         };
 
@@ -50,9 +51,6 @@ angular.module('copayApp.directives').directive('shapeshiftCoinTrader', function
           'BTC': { name: 'Bitcoin', symbol: 'BTC' },
           'BCH': { name: 'Bitcoin Cash', symbol: 'BCH' }
         };
-        $scope.coinIn = $scope.coins['BTC'].symbol;
-        $scope.coinOut = $scope.coins['BCH'].symbol;
-        $scope.getMarketData($scope.coinIn, $scope.coinOut);
 
         function checkForError(data){
             if(data.error) return true;
@@ -60,22 +58,21 @@ angular.module('copayApp.directives').directive('shapeshiftCoinTrader', function
         }
 
         $scope.shiftIt = function(){
-            console.log($scope.coinOut)
             var validate=shapeshiftApiService.ValidateAddress($scope.withdrawalAddress, $scope.coinOut);
             validate.then(function(valid){
-                console.log($scope.withdrawalAddress)
+                //console.log($scope.withdrawalAddress)
-                console.log(valid)
+                //console.log(valid)
                 var tx = ShapeShift();
                 tx.then(function(txData){
                     if(txData['fixedTxData']){
                         txData = txData.fixedTxData;
                         if(checkForError(txData)) return;
-                        console.log(txData)
+                        //console.log(txData)
                         var coinPair=txData.pair.split('_');
                         txData.depositType = coinPair[0].toUpperCase();
                         txData.withdrawalType = coinPair[1].toUpperCase();
                         var coin = $scope.coins[txData.depositType].name.toLowerCase();
-                        console.log(coin)
+                        //console.log(coin)
                         txData.depositQR = coin + ":" + txData.deposit + "?amount=" + txData.depositAmount
                         $scope.txFixedPending = true;
                     } else if(txData['normalTxData']){
@@ -94,7 +91,20 @@ angular.module('copayApp.directives').directive('shapeshiftCoinTrader', function
                         return;
                     }
                     $scope.depositInfo = txData;
-                    console.log($scope.depositInfo)
+                    console.log($scope.marketData);
+                    console.log($scope.depositInfo);
+                    var sendAddress = txData.depositQR;
+                    if (sendAddress && sendAddress.indexOf('bitcoin cash') >= 0)
+                      sendAddress = sendAddress.replace('bitcoin cash', 'bitcoincash');
+
+                    var shapeshiftData = {
+                      minAmount: $scope.marketData.minimum,
+                      maxAmount: $scope.marketData.maxLimit
+                    };
+
+                    if (incomingData.redir(sendAddress, shapeshiftData))
+                      return;
+
                     $scope.ShiftState = 'Cancel';
                     $scope.GetStatus();
                     $scope.txInterval=$interval($scope.GetStatus, 8000);
@@ -119,33 +129,6 @@ angular.module('copayApp.directives').directive('shapeshiftCoinTrader', function
                 }
             });
         }
-
-        $scope.walletsBtc = profileService.getWallets({coin: 'btc'});
-        $scope.walletsBch = profileService.getWallets({coin: 'bch'});
-        $scope.fromWallet = $scope.walletsBtc[0];
-        $scope.toWallet = $scope.walletsBch[0];
-        $scope.fromWalletSelectorTitle = 'From';
-        $scope.toWalletSelectorTitle = 'To';
-        $scope.showFromWallets = false;
-        $scope.showFromWalletSelector = function() {
-          $scope.showFromWallets = true;
-        }
-        $scope.showToWallets = false;
-        $scope.showToWalletSelector = function() {
-          $scope.showToWallets = true;
-        }
-
-        $scope.onFromWalletSelect = function(wallet) {
-          $scope.fromWallet = wallet;
-          //setProtocolHandler();
-          //$scope.setAddress();
-        };
-
-        $scope.onToWalletSelect = function(wallet) {
-          $scope.toWallet = wallet;
-          //setProtocolHandler();
-          //$scope.setAddress();
-        }
     },
     templateUrl: 'views/includes/shapeshift-coin-trader.html'
   }

src/js/routes.js

@@ -287,7 +287,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
        */
 
       .state('tabs.send.amount', {
-        url: '/amount/:recipientType/:toAddress/:toName/:toEmail/:toColor/:coin/:fixedUnit',
+        url: '/amount/:recipientType/:toAddress/:toName/:toEmail/:toColor/:coin/:fixedUnit/:minShapeshiftAmount/:maxShapeshiftAmount',
         views: {
           'tab-send@tabs': {
             controller: 'amountController',

src/js/services/incomingData.js

@@ -8,7 +8,7 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
     $rootScope.$broadcast('incomingDataMenu.showMenu', data);
   };
 
-  root.redir = function(data) {
+  root.redir = function(data, shapeshiftData) {
     $log.debug('Processing incoming data: ' + data);
 
     function sanitizeUri(data) {
@@ -46,7 +46,7 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
       return true;
     }
 
-    function goSend(addr, amount, message, coin) {
+    function goSend(addr, amount, message, coin, shapeshiftData) {
       $state.go('tabs.send', {}, {
         'reload': true,
         'notify': $state.current.name == 'tabs.send' ? false : true
@@ -61,10 +61,12 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
             coin: coin
           });
         } else {
-          $state.transitionTo('tabs.send.amount', {
+          var params = { toAddress: addr, coin: coin };
-            toAddress: addr,
+          if (shapeshiftData) {
-            coin: coin
+            params['minShapeshiftAmount'] = shapeshiftData.minAmount;
-          });
+            params['maxShapeshiftAmount'] = shapeshiftData.maxAmount;
+          }
+          $state.transitionTo('tabs.send.amount', params);
         }
       }, 100);
     }
@@ -97,12 +99,12 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
         if (parsed.r) {
           payproService.getPayProDetails(parsed.r, function(err, details) {
             if (err) {
-              if (addr && amount) goSend(addr, amount, message, coin);
+              if (addr && amount) goSend(addr, amount, message, coin, shapeshiftData);
               else popupService.showAlert(gettextCatalog.getString('Error'), err);
             } else handlePayPro(details);
           });
         } else {
-          goSend(addr, amount, message, coin);
+          goSend(addr, amount, message, coin, shapeshiftData);
         }
         return true;
     // Cash URI
@@ -120,14 +122,14 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
           payproService.getPayProDetails(parsed.r, function(err, details) {
             if (err) {
               if (addr && amount)
-                goSend(addr, amount, message, coin);
+                goSend(addr, amount, message, coin, shapeshiftData);
               else
                 popupService.showAlert(gettextCatalog.getString('Error'), err);
             }
             handlePayPro(details, coin);
           });
         } else {
-          goSend(addr, amount, message, coin);
+          goSend(addr, amount, message, coin, shapeshiftData);
         }
         return true;
 
@@ -163,14 +165,14 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
               payproService.getPayProDetails(parsed.r, function(err, details) {
                 if (err) {
                   if (addr && amount)
-                    goSend(addr, amount, message, coin);
+                    goSend(addr, amount, message, coin, shapeshiftData);
                   else
                     popupService.showAlert(gettextCatalog.getString('Error'), err);
                 }
                 handlePayPro(details, coin);
               });
             } else {
-              goSend(addr, amount, message, coin);
+              goSend(addr, amount, message, coin, shapeshiftData);
             }
           }
         );

www/views/amount.html

@@ -45,6 +45,11 @@
         </div>
       </div>
 
+      <div ng-if="minShapeshiftAmount && maxShapeshiftAmount">
+        Minimum amount: {{minShapeshiftAmount}} <br/>
+        Maximum amount: {{maxShapeshiftAmount}}
+      </div>
+
       <div class="amount">
         <div class="amount__editable" ng-class="{'amount__editable--minimize': smallFont, 'amount__editable--standard': !smallFont, 'amount__editable--placeholder': !amount}">
           <span class="amount__number">{{amount || "0.00" }}</span>

www/views/includes/fromWalletIcon.html

@@ -0,0 +1,2 @@
+<img ng-if="fromWallet.network == 'testnet'" src="img/icon-wallet-testnet.svg" ng-class="{'wallet-background-color-default': !fromWallet.color}" ng-style="{'background-color': fromWallet.color}" class="bg"/>
+<img ng-if="fromWallet.network != 'testnet'" src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !fromWallet.color}" ng-style="{'background-color': fromWallet.color}" class="bg"/>

www/views/includes/shapeshift-coin-selector.html

@@ -1,4 +1,4 @@
-<div>
+<div ng-hide="direction=='in' || direction=='out'">
   <div>
     <select ng-model="selectedCoinModel.coin" ng-change="getMarketData(selectedCoinModel.coin)">
       <option ng-repeat="(k, coin) in coins" value="{{coin.symbol}}">
@@ -12,14 +12,14 @@
           <label>{{ label }}</label>
           <input type="text" ng-model="coinAddress">
         </div>
-        <div ng-show="direction=='out'">
+        <div ng-show="direction=='in'">
           <label>Amount</label>
           <input type="text" ng-model="amount">
         </div>
       </div>
       <div ng-if="direction=='in'">
-        <div>Deposit Limit: {{marketData.limit}}</div>
         <div>Minimum Amount: {{marketData.minimum}}</div>
+        <div>Maximum Amount: {{marketData.limit}}</div>
         <div>MinerFee: {{marketData.minerFee}}</div>
         <div>Rate: {{marketData.rate}}</div>
       </div>

www/views/includes/shapeshift-coin-shift-button.html

@@ -1,5 +1,7 @@
 <div>
     <div>
-        <button type="button" ng-click="shiftIt()">{{ShiftState}}</button>
+        <button type="button" class="button button-standard button-primary" ng-click="shiftIt()">
+          {{ShiftState}}
+        </button>
     </div>
 </div>

www/views/includes/toWalletIcon.html

@@ -0,0 +1,2 @@
+<img ng-if="toWallet.network == 'testnet'" src="img/icon-wallet-testnet.svg" ng-class="{'wallet-background-color-default': !toWallet.color}" ng-style="{'background-color': toWallet.color}" class="bg"/>
+<img ng-if="toWallet.network != 'testnet'" src="img/icon-wallet.svg" ng-class="{'wallet-background-color-default': !toWallet.color}" ng-style="{'background-color': toWallet.color}" class="bg"/>

www/views/shapeshift.html

@@ -0,0 +1,104 @@
+<ion-view class="settings" show-tabs>
+  <ion-nav-bar class="bar-royal">
+    <ion-nav-title>
+      {{'Shapeshift'|translate}}
+    </ion-nav-title>
+    <ion-nav-back-button>
+    </ion-nav-back-button>
+  </ion-nav-bar>
+  <ion-content>
+    <shapeshift-coin-trader>
+        <div class="send-header-wrapper shapeshift-banner">
+          <img class="shapeshift-logo" src="img/shapeshiftlogo.svg"/>
+        </div>
+        <div class="list card">
+          <div class="item item-heading">
+            <span translate><strong>From</strong></span>
+          </div>
+          <div class="item wallet-selector" ng-click="showFromWalletSelector()" ng-if="fromWallet">
+            <a ng-if="fromWallet" class="item item-sub item-icon-left item-big-icon-left item-icon-right">
+              <i class="icon big-icon-svg" ng-include="'views/includes/fromWalletIcon.html'"></i>
+              <span>
+                {{fromWallet.name || fromWallet.id}}
+              </span>
+              <p>
+              <span ng-if="!fromWallet.balanceHidden"> {{fromWallet.status.totalBalanceStr}} </span>
+
+              <span ng-if="fromWallet.balanceHidden" translate>[Balance Hidden]</span>
+              <span class="tab-home__wallet__multisig-number" ng-if="fromWallet.n > 1">
+                {{fromWallet.m}}-of-{{fromWallet.n}}
+              </span>
+              <span class="assertive" ng-if="fromWallet.error">{{fromWallet.error}}</span>
+              &nbsp;
+              </p>
+              <i ng-if="!singleFromWallet" class="icon bp-arrow-right"></i>
+            </a>
+          </div>
+
+          <div class="item item-heading">
+            <span translate><strong>To</strong></span>
+          </div>
+          <div class="item wallet-selector" ng-click="showToWalletSelector()" ng-if="toWallet">
+            <a ng-if="toWallet" class="item item-sub item-icon-left item-big-icon-left item-icon-right">
+              <i class="icon big-icon-svg" ng-include="'views/includes/toWalletIcon.html'"></i>
+              <span>
+                {{toWallet.name || toWallet.id}}
+              </span>
+              <p>
+              <span ng-if="!toWallet.balanceHidden"> {{toWallet.status.totalBalanceStr}} </span>
+
+              <span ng-if="toWallet.balanceHidden" translate>[Balance Hidden]</span>
+              <span class="tab-home__wallet__multisig-number" ng-if="toWallet.n > 1">
+                {{toWallet.m}}-of-{{toWallet.n}}
+              </span>
+              <span class="assertive" ng-if="toWallet.error">{{toWallet.error}}</span>
+              &nbsp;
+              </p>
+              <i ng-if="!singleToWallet" class="icon bp-arrow-right"></i>
+            </a>
+          </div>
+          <div class="item item-heading">
+            Rate: {{rateString}}
+          </div>
+        </div>
+
+        <shapeshift-coin-selector
+                coins="coins"
+                label="'Return Address'"
+                get-market-data="getMarketDataIn"
+                market-data="marketData"
+                selected-coin="fromWallet.coin"
+                coin-address="fromWalletAddress"
+                amount="amount"
+                direction="'in'">
+        </shapeshift-coin-selector>
+        <br/>
+        <shapeshift-coin-selector
+                coins="coins"
+                label="'Withdrawal Address'"
+                get-market-data="getMarketDataOut"
+                selected-coin="toWallet.coin"
+                coin-address="toWalletAddress"
+                direction="'out'">
+        </shapeshift-coin-selector>
+        <shapeshift-coin-error ssError="ssError"></shapeshift-coin-error>
+        <!--<shapeshift-coin-deposit-info deposit-status="DepositStatus" deposit-info="depositInfo"></shapeshift-coin-deposit-info>-->
+        <shapeshift-coin-shift-button shift-it="shiftIt" shift-state="ShiftState"></shapeshift-coin-shift-button>
+    </shapeshift-coin-trader>
+  </ion-content>
+
+  <wallet-selector
+    wallet-selector-wallets="fromWallets"
+    wallet-selector-selected-wallet="fromWallet"
+    wallet-selector-show="showFromWallets"
+    wallet-selector-on-select="onFromWalletSelect">
+  </wallet-selector>
+
+  <wallet-selector
+    wallet-selector-title="toWalletSelectorTitle"
+    wallet-selector-wallets="toWallets"
+    wallet-selector-selected-wallet="toWallet"
+    wallet-selector-show="showToWallets"
+    wallet-selector-on-select="onToWalletSelect">
+  </wallet-selector>
+</ion-view>

www/views/tab-home.html

@@ -97,5 +97,8 @@
     <div class="ng-hide list card" ng-show="walletsBtc[0] && buyAndSellItems.length>0" ng-include="'views/includes/buyAndSellCard.html'"></div>
     <div class="ng-hide list card" ng-show="homeIntegrations.length>0" ng-include="'views/includes/homeIntegrations.html'"></div>
     <div class="ng-hide list card" ng-show="nextStepsItems.length>0 && !isWindowsPhoneApp" ng-include="'views/includes/nextSteps.html'"></div>
+    <div class="list card">
+      <a class="item item-icon-right item-heading" ui-sref="tabs.shapeshift">Shapeshift</a>
+    </div>
   </ion-content>
 </ion-view>