Third Party Service integration (Shapeshift) (CSS + translations + wallet selector + routes)

2018-07-31 17:21:56 +02:00 · 2018-07-31 17:21:56 +02:00 · 42d77903e1
commit 42d77903e1
parent 281b969fc3
9 changed files with 143 additions and 129 deletions
--- a/i18n/po/template.pot
+++ b/i18n/po/template.pot
@ -3116,6 +3116,10 @@ msgstr ""
 msgid "Start ShapeShift"
 msgstr ""

+#: www/views/shapeshift.html:34
+msgid "This service is provided by the third-party ShapeShift, who will charge a small fee for the service. The fee will be shown before you start the transaction."
+msgstr ""
+
 #: www/views/buyAmazon.html:61
 #: www/views/buyMercadoLibre.html:60
 #: www/views/modals/wallet-balance.html:23
--- a/src/js/controllers/shapeshift.js
+++ b/src/js/controllers/shapeshift.js
@ -20,21 +20,6 @@ angular.module('copayApp.controllers').controller('shapeshiftController', functi
    $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'});
@ -42,22 +27,12 @@ angular.module('copayApp.controllers').controller('shapeshiftController', functi
      return w.status.balance.availableAmount > 0;
    });

-    if ($scope.fromWallets.length === 0) {
-      // return
-    // } else {
-    //   $scope.onFromWalletSelect($scope.fromWallets[0]);
-    }
-
-    // $scope.onToWalletSelect($scope.toWallets[0]);
-
    $scope.singleFromWallet = $scope.fromWallets.length === 1;
-    // $scope.singleToWallet = $scope.toWallets.length == 1;
    $scope.fromWalletSelectorTitle = 'From';
    $scope.toWalletSelectorTitle = 'To';
    $scope.showFromWallets = false;
    $scope.showToWallets = false;
    $scope.walletsWithFunds = profileService.getWallets({onlyComplete: true, hasFunds: true});
-    console.log($scope.walletsWithFunds);
    $scope.wallets = profileService.getWallets({onlyComplete: true});
    $scope.hasWallets = !lodash.isEmpty($scope.wallets);
  });
@ -89,12 +64,10 @@ angular.module('copayApp.controllers').controller('shapeshiftController', functi

  $scope.shapeshift = function() {
    var params = {
-      thirdParty: {
-        id: 'shapeshift'
-      }
+      thirdParty: JSON.stringify({id: 'shapeshift'})
    };
    $state.go('tabs.home').then(function() {
-      $state.transitionTo('tabs.send', params);
+      $state.transitionTo('tabs.send.origin', params);
    });
  }
 });
--- a/src/js/controllers/walletSelectorController.js
+++ b/src/js/controllers/walletSelectorController.js
@ -1,16 +1,16 @@
 'use strict';

-angular.module('copayApp.controllers').controller('walletSelectorController', function($scope, $rootScope, $state, $stateParams, $log, $ionicHistory, configService, gettextCatalog, profileService) {
+angular.module('copayApp.controllers').controller('walletSelectorController', function($scope, $rootScope, $state, $log, $ionicHistory, configService, gettextCatalog, profileService) {

  $scope.$on("$ionicView.beforeEnter", function(event, data) {
    var config = configService.getSync().wallet.settings;
-    $scope.sendFlowTitle = "";

+    $scope.sendFlowTitle = "";
    if ($state.current.name === 'tabs.send.wallet-to-wallet') {
      $scope.sendFlowTitle = gettextCatalog.getString('Wallet to Wallet Transfer');
    }

-    $scope.params = $stateParams;
+    $scope.params = $state.params;
    $scope.coin = false; // Wallets to show (for destination screen or contacts)
    $scope.type = data.stateParams && data.stateParams['fromWalletId'] ? 'destination' : 'origin'; // origin || destination

@ -21,14 +21,11 @@ angular.module('copayApp.controllers').controller('walletSelectorController', fu
    if ($scope.params.amount) { // There is an amount, so presume that it a payment request
      $scope.sendFlowTitle = gettextCatalog.getString('Payment request');
      $scope.specificAmount = $scope.specificAlternativeAmount = '';
-      $scope.requestAmount = (($stateParams.amount) * (1 / config.unitToSatoshi)).toFixed(config.unitDecimals);
+      $scope.requestAmount = (($state.params.amount) * (1 / config.unitToSatoshi)).toFixed(config.unitDecimals);
      $scope.isPaymentRequest = true;
    }
    if ($scope.params.thirdParty) {
-      // Third Party Service
-      if ($scope.params.thirdParty.id === 'shapeshift') {
-
-      }
+      $scope.thirdParty = JSON.parse($scope.params.thirdParty); // Parse stringified JSON-object
    }
  });

@ -48,6 +45,19 @@ angular.module('copayApp.controllers').controller('walletSelectorController', fu
      $scope.headerTitle = gettextCatalog.getString('Choose a wallet to send to');
    }

+    if ($scope.thirdParty) {
+
+      // Third party services specific logic
+
+      if ($scope.thirdParty.id === 'shapeshift' && $scope.type === 'destination') { // Shapeshift wants to know the
+        if ($scope.coin === 'bch') {
+          $scope.coin = 'btc';
+        } else {
+          $scope.coin = 'bch';
+        }
+      }
+    }
+
    if (!$scope.coin || $scope.coin === 'bch') { // if no specific coin is set or coin is set to bch
      $scope.walletsBch = profileService.getWallets({coin: 'bch', hasFunds: $scope.type==='origin'});
    }
@ -57,6 +67,9 @@ angular.module('copayApp.controllers').controller('walletSelectorController', fu
  });

  function getNextStep() {
+    if ($scope.thirdParty) {
+      $scope.params.thirdParty = JSON.stringify($scope.thirdParty)  // re-stringify JSON-object
+    }
    if (!$scope.params.toWalletId && !$scope.params.toAddress) { // If we have no toAddress or fromWallet
      return 'tabs.send.destination';
    } else if (!$scope.params.amount) { // If we have no amount
--- a/src/js/routes.js
+++ b/src/js/routes.js
@ -300,7 +300,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
        views: {
          'tab-send@tabs': {
            controller: 'walletSelectorController',
-            templateUrl: 'views/wallet-origin-destination.html'
+            templateUrl: 'views/walletSelector.html'
          }
        }
      })
@ -309,7 +309,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
        views: {
          'tab-send@tabs': {
            controller: 'walletSelectorController',
-            templateUrl: 'views/wallet-origin-destination.html',
+            templateUrl: 'views/walletSelector.html',
          }
        }
      })
@ -318,7 +318,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
        views: {
          'tab-send@tabs': {
            controller: 'walletSelectorController',
-            templateUrl: 'views/wallet-origin-destination.html',
+            templateUrl: 'views/walletSelector.html',
          }
        }
      })
@ -995,7 +995,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr

      /* Shapeshift */
      .state('tabs.shapeshift', {
-        url: '/shapeshift',
+        url: '/shapeshift/:fromWalletId/:toWalletId',
        views: {
          'tab-home@tabs': {
            controller: 'shapeshiftController',
--- a/src/js/services/incomingData.js
+++ b/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, shapeshiftData) {
+  root.redir = function(data, serviceId, serviceData) {
    var originalAddress = null;
    var noPrefixInAddress = 0;
    
@ -75,7 +75,7 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
      return true;
    }

-    function goSend(addr, amount, message, coin, shapeshiftData) {
+    function goSend(addr, amount, message, coin, serviceId, serviceData) {
      $state.go('tabs.send', {}, {
        'reload': true,
        'notify': $state.current.name == 'tabs.send' ? false : true
@ -97,11 +97,18 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
            displayAddress: originalAddress ? originalAddress : addr,
            noPrefix: noPrefixInAddress
          };
-          if (shapeshiftData) {
-            params['fromWalletId'] = shapeshiftData.fromWalletId;
-            params['minShapeshiftAmount'] = shapeshiftData.minAmount;
-            params['maxShapeshiftAmount'] = shapeshiftData.maxAmount;
-            params['shapeshiftOrderId'] = shapeshiftData.orderId;
+          if (serviceId) {
+            if (!params['thirdParty']) {
+              params['thirdParty'] = [];
+            }
+            params['thirdParty']['id'] = serviceId;
+          }
+
+          if (serviceData) {
+            params['thirdParty']['data'] = serviceData;
+            // params['thirdParty']['minShapeshiftAmount'] = serviceData.minAmount;
+            // params['thirdParty']['maxShapeshiftAmount'] = serviceData.maxAmount;
+            // params['thirdParty']['shapeshiftOrderId'] = serviceData.orderId;
            $state.transitionTo('tabs.send.amount', params);
          } else {
            $state.transitionTo('tabs.send.origin', params);
@ -148,12 +155,12 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
        if (parsed.r) {
          payproService.getPayProDetails(parsed.r, coin, function(err, details) {
            if (err) {
-              if (addr && amount) goSend(addr, amount, message, coin, shapeshiftData);
+              if (addr && amount) goSend(addr, amount, message, coin, serviceId, serviceData);
              else popupService.showAlert(gettextCatalog.getString('Error'), err);
            } else handlePayPro(details, coin);
          });
        } else {
-          goSend(addr, amount, message, coin, shapeshiftData);
+          goSend(addr, amount, message, coin, serviceId, serviceData);
        }
        return true;
    // Cash URI
@ -171,14 +178,14 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
          payproService.getPayProDetails(parsed.r, coin, function(err, details) {
            if (err) {
              if (addr && amount)
-                goSend(addr, amount, message, coin, shapeshiftData);
+                goSend(addr, amount, message, coin, serviceId, serviceData);
              else
                popupService.showAlert(gettextCatalog.getString('Error'), err);
            }
            handlePayPro(details, coin);
          });
        } else {
-          goSend(addr, amount, message, coin, shapeshiftData);
+          goSend(addr, amount, message, coin, serviceId, serviceData);
        }
        return true;

@ -214,14 +221,14 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
              payproService.getPayProDetails(parsed.r, coin, function(err, details) {
                if (err) {
                  if (addr && amount)
-                    goSend(addr, amount, message, coin, shapeshiftData);
+                    goSend(addr, amount, message, coin, serviceId, serviceData);
                  else
                    popupService.showAlert(gettextCatalog.getString('Error'), err);
                }
                handlePayPro(details, coin);
              });
            } else {
-              goSend(addr, amount, message, coin, shapeshiftData);
+              goSend(addr, amount, message, coin, serviceId, serviceData);
            }
          }
        );
--- a/src/sass/mixins/layout.scss
+++ b/src/sass/mixins/layout.scss
@ -19,6 +19,17 @@
  @include absolute-center();
 }

+.third-party-notice {
+  font-size: 12px;
+  margin: 0px 14px;
+  font-weight: 600;
+  color: #6F6F70;
+
+  @media (min-width: 768px) {
+    text-align: center;
+  }
+}
+
@mixin empty-case() {
  padding-top: 5vh;
  text-align: center;
--- a/www/views/header-thirdparty.html
+++ b/www/views/header-thirdparty.html
@ -0,0 +1,3 @@
+<div class="send-header-wrapper shapeshift-banner">
+  <img class="shapeshift-logo" src="img/shapeshiftlogo.svg"/>
+</div>
--- a/www/views/shapeshift.html
+++ b/www/views/shapeshift.html
@ -31,83 +31,85 @@
        </div>
      </div>
    </div>
-    <!--<shapeshift-coin-trader class="ng-hide" ng-show="fromWallets.length > 0 && toWallets.length > 0">-->
-      <!--<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>-->
+    <div class="third-party-notice" translate>This service is provided by the third-party ShapeShift, who will charge a small fee for the service. The fee will be shown before you start the transaction.</div>

-              <!--<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>-->
+    <shapeshift-coin-trader class="ng-hide" ng-show="fromWallets.length > 0 && toWallets.length > 0">
+      <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>

-        <!--<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="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>

-              <!--<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>-->
+        <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>

-    <!--<shapeshift-coin-selector-->
-      <!--coins="coins"-->
-      <!--label="'Return Address'"-->
-      <!--get-market-data="getMarketDataIn"-->
-      <!--market-data="marketData"-->
-      <!--selected-coin="fromWallet.coin"-->
-      <!--coin-address="fromWalletAddress"-->
-      <!--wallet-id="fromWallet.id"-->
-      <!--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"-->
-    <!--wallet-id="toWallet.id"-->
-    <!--direction="'out'">-->
-  <!--</shapeshift-coin-selector>-->
-  <!--<shapeshift-coin-error ssError="ssError"></shapeshift-coin-error>-->
-  <!--&lt;!&ndash;<shapeshift-coin-deposit-info deposit-status="DepositStatus" deposit-info="depositInfo"></shapeshift-coin-deposit-info>&ndash;&gt;-->
-  <!--<shapeshift-coin-shift-button shift-it="shiftIt" shift-state="ShiftState"></shapeshift-coin-shift-button>-->
-<!--</shapeshift-coin-trader>-->
+              <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"
+      wallet-id="fromWallet.id"
+      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"
+    wallet-id="toWallet.id"
+    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-->
--- a/www/views/wallet-origin-destination.html
+++ b/www/views/wallet-origin-destination.html
@ -4,6 +4,7 @@
    <ion-nav-back-button ng-click="goBack()"></ion-nav-back-button>
  </ion-nav-bar>
  <ion-content>
+    <div ng-if="thirdParty && thirdParty.id === 'shapeshift'" ng-include="'views/header-thirdparty.html'"></div>
    <div class="header--request" ng-if="isPaymentRequest">
      <div class="header--request__title" translate>Paying</div>
      <div class="header--request__amount" translate>$... USD</div>
@ -14,7 +15,7 @@
        {{headerTitle}}
      </div>
    </div>
-    <div class="list card">
+    <div class="list card" ng-if="walletsBch.length > 0">
      <div class="item item-icon-right item-heading">
        <div translate>Bitcoin Cash (BCH)</div>
        <div translate class="subtitle">Instant transactions with low fees</div>
@ -35,7 +36,7 @@
      <div>
        <a ng-repeat="wallet in walletsBtc track by $index"
           class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet"
-           ng-click="openWallet(wallet)">
+           ng-click="useWallet(wallet)">
          <span ng-include="'views/includes/walletList.html'"></span>
        </a>
      </div>