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

This commit is contained in:
Sebastiaan Pasma 2018-07-31 17:21:56 +02:00
commit 42d77903e1
No known key found for this signature in database
GPG key ID: 9A2B0C8B95A1D26F
9 changed files with 143 additions and 129 deletions

View file

@ -3116,6 +3116,10 @@ msgstr ""
msgid "Start ShapeShift" msgid "Start ShapeShift"
msgstr "" 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/buyAmazon.html:61
#: www/views/buyMercadoLibre.html:60 #: www/views/buyMercadoLibre.html:60
#: www/views/modals/wallet-balance.html:23 #: www/views/modals/wallet-balance.html:23

View file

@ -20,21 +20,6 @@ angular.module('copayApp.controllers').controller('shapeshiftController', functi
$scope.singleToWallet = $scope.toWallets.length === 1; $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) { $scope.$on("$ionicView.beforeEnter", function(event, data) {
walletsBtc = profileService.getWallets({coin: 'btc'}); walletsBtc = profileService.getWallets({coin: 'btc'});
walletsBch = profileService.getWallets({coin: 'bch'}); walletsBch = profileService.getWallets({coin: 'bch'});
@ -42,22 +27,12 @@ angular.module('copayApp.controllers').controller('shapeshiftController', functi
return w.status.balance.availableAmount > 0; 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.singleFromWallet = $scope.fromWallets.length === 1;
// $scope.singleToWallet = $scope.toWallets.length == 1;
$scope.fromWalletSelectorTitle = 'From'; $scope.fromWalletSelectorTitle = 'From';
$scope.toWalletSelectorTitle = 'To'; $scope.toWalletSelectorTitle = 'To';
$scope.showFromWallets = false; $scope.showFromWallets = false;
$scope.showToWallets = false; $scope.showToWallets = false;
$scope.walletsWithFunds = profileService.getWallets({onlyComplete: true, hasFunds: true}); $scope.walletsWithFunds = profileService.getWallets({onlyComplete: true, hasFunds: true});
console.log($scope.walletsWithFunds);
$scope.wallets = profileService.getWallets({onlyComplete: true}); $scope.wallets = profileService.getWallets({onlyComplete: true});
$scope.hasWallets = !lodash.isEmpty($scope.wallets); $scope.hasWallets = !lodash.isEmpty($scope.wallets);
}); });
@ -89,12 +64,10 @@ angular.module('copayApp.controllers').controller('shapeshiftController', functi
$scope.shapeshift = function() { $scope.shapeshift = function() {
var params = { var params = {
thirdParty: { thirdParty: JSON.stringify({id: 'shapeshift'})
id: 'shapeshift'
}
}; };
$state.go('tabs.home').then(function() { $state.go('tabs.home').then(function() {
$state.transitionTo('tabs.send', params); $state.transitionTo('tabs.send.origin', params);
}); });
} }
}); });

View file

@ -1,16 +1,16 @@
'use strict'; '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) { $scope.$on("$ionicView.beforeEnter", function(event, data) {
var config = configService.getSync().wallet.settings; var config = configService.getSync().wallet.settings;
$scope.sendFlowTitle = "";
$scope.sendFlowTitle = "";
if ($state.current.name === 'tabs.send.wallet-to-wallet') { if ($state.current.name === 'tabs.send.wallet-to-wallet') {
$scope.sendFlowTitle = gettextCatalog.getString('Wallet to Wallet Transfer'); $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.coin = false; // Wallets to show (for destination screen or contacts)
$scope.type = data.stateParams && data.stateParams['fromWalletId'] ? 'destination' : 'origin'; // origin || destination $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 if ($scope.params.amount) { // There is an amount, so presume that it a payment request
$scope.sendFlowTitle = gettextCatalog.getString('Payment request'); $scope.sendFlowTitle = gettextCatalog.getString('Payment request');
$scope.specificAmount = $scope.specificAlternativeAmount = ''; $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; $scope.isPaymentRequest = true;
} }
if ($scope.params.thirdParty) { if ($scope.params.thirdParty) {
// Third Party Service $scope.thirdParty = JSON.parse($scope.params.thirdParty); // Parse stringified JSON-object
if ($scope.params.thirdParty.id === 'shapeshift') {
}
} }
}); });
@ -48,6 +45,19 @@ angular.module('copayApp.controllers').controller('walletSelectorController', fu
$scope.headerTitle = gettextCatalog.getString('Choose a wallet to send to'); $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 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'}); $scope.walletsBch = profileService.getWallets({coin: 'bch', hasFunds: $scope.type==='origin'});
} }
@ -57,6 +67,9 @@ angular.module('copayApp.controllers').controller('walletSelectorController', fu
}); });
function getNextStep() { 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 if (!$scope.params.toWalletId && !$scope.params.toAddress) { // If we have no toAddress or fromWallet
return 'tabs.send.destination'; return 'tabs.send.destination';
} else if (!$scope.params.amount) { // If we have no amount } else if (!$scope.params.amount) { // If we have no amount

View file

@ -300,7 +300,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
views: { views: {
'tab-send@tabs': { 'tab-send@tabs': {
controller: 'walletSelectorController', 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: { views: {
'tab-send@tabs': { 'tab-send@tabs': {
controller: 'walletSelectorController', 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: { views: {
'tab-send@tabs': { 'tab-send@tabs': {
controller: 'walletSelectorController', 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 */ /* Shapeshift */
.state('tabs.shapeshift', { .state('tabs.shapeshift', {
url: '/shapeshift', url: '/shapeshift/:fromWalletId/:toWalletId',
views: { views: {
'tab-home@tabs': { 'tab-home@tabs': {
controller: 'shapeshiftController', controller: 'shapeshiftController',

View file

@ -8,7 +8,7 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
$rootScope.$broadcast('incomingDataMenu.showMenu', data); $rootScope.$broadcast('incomingDataMenu.showMenu', data);
}; };
root.redir = function(data, shapeshiftData) { root.redir = function(data, serviceId, serviceData) {
var originalAddress = null; var originalAddress = null;
var noPrefixInAddress = 0; var noPrefixInAddress = 0;
@ -75,7 +75,7 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
return true; return true;
} }
function goSend(addr, amount, message, coin, shapeshiftData) { function goSend(addr, amount, message, coin, serviceId, serviceData) {
$state.go('tabs.send', {}, { $state.go('tabs.send', {}, {
'reload': true, 'reload': true,
'notify': $state.current.name == 'tabs.send' ? false : 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, displayAddress: originalAddress ? originalAddress : addr,
noPrefix: noPrefixInAddress noPrefix: noPrefixInAddress
}; };
if (shapeshiftData) { if (serviceId) {
params['fromWalletId'] = shapeshiftData.fromWalletId; if (!params['thirdParty']) {
params['minShapeshiftAmount'] = shapeshiftData.minAmount; params['thirdParty'] = [];
params['maxShapeshiftAmount'] = shapeshiftData.maxAmount; }
params['shapeshiftOrderId'] = shapeshiftData.orderId; 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); $state.transitionTo('tabs.send.amount', params);
} else { } else {
$state.transitionTo('tabs.send.origin', params); $state.transitionTo('tabs.send.origin', params);
@ -148,12 +155,12 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
if (parsed.r) { if (parsed.r) {
payproService.getPayProDetails(parsed.r, coin, function(err, details) { payproService.getPayProDetails(parsed.r, coin, function(err, details) {
if (err) { 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 popupService.showAlert(gettextCatalog.getString('Error'), err);
} else handlePayPro(details, coin); } else handlePayPro(details, coin);
}); });
} else { } else {
goSend(addr, amount, message, coin, shapeshiftData); goSend(addr, amount, message, coin, serviceId, serviceData);
} }
return true; return true;
// Cash URI // Cash URI
@ -171,14 +178,14 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
payproService.getPayProDetails(parsed.r, coin, function(err, details) { payproService.getPayProDetails(parsed.r, coin, function(err, details) {
if (err) { if (err) {
if (addr && amount) if (addr && amount)
goSend(addr, amount, message, coin, shapeshiftData); goSend(addr, amount, message, coin, serviceId, serviceData);
else else
popupService.showAlert(gettextCatalog.getString('Error'), err); popupService.showAlert(gettextCatalog.getString('Error'), err);
} }
handlePayPro(details, coin); handlePayPro(details, coin);
}); });
} else { } else {
goSend(addr, amount, message, coin, shapeshiftData); goSend(addr, amount, message, coin, serviceId, serviceData);
} }
return true; return true;
@ -214,14 +221,14 @@ angular.module('copayApp.services').factory('incomingData', function($log, $stat
payproService.getPayProDetails(parsed.r, coin, function(err, details) { payproService.getPayProDetails(parsed.r, coin, function(err, details) {
if (err) { if (err) {
if (addr && amount) if (addr && amount)
goSend(addr, amount, message, coin, shapeshiftData); goSend(addr, amount, message, coin, serviceId, serviceData);
else else
popupService.showAlert(gettextCatalog.getString('Error'), err); popupService.showAlert(gettextCatalog.getString('Error'), err);
} }
handlePayPro(details, coin); handlePayPro(details, coin);
}); });
} else { } else {
goSend(addr, amount, message, coin, shapeshiftData); goSend(addr, amount, message, coin, serviceId, serviceData);
} }
} }
); );

View file

@ -19,6 +19,17 @@
@include absolute-center(); @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() { @mixin empty-case() {
padding-top: 5vh; padding-top: 5vh;
text-align: center; text-align: center;

View file

@ -0,0 +1,3 @@
<div class="send-header-wrapper shapeshift-banner">
<img class="shapeshift-logo" src="img/shapeshiftlogo.svg"/>
</div>

View file

@ -31,83 +31,85 @@
</div> </div>
</div> </div>
</div> </div>
<!--<shapeshift-coin-trader class="ng-hide" ng-show="fromWallets.length > 0 && toWallets.length > 0">--> <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>
<!--<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>--> <shapeshift-coin-trader class="ng-hide" ng-show="fromWallets.length > 0 && toWallets.length > 0">
<!--<span class="tab-home__wallet__multisig-number" ng-if="fromWallet.n > 1">--> <div class="list card">
<!--{{fromWallet.m}}-of-{{fromWallet.n}}--> <div class="item item-heading">
<!--</span>--> <span translate><strong>From</strong></span>
<!--<span class="assertive" ng-if="fromWallet.error">{{fromWallet.error}}</span>--> </div>
<!--&nbsp;--> <div class="item wallet-selector" ng-click="showFromWalletSelector()" ng-if="fromWallet">
<!--</p>--> <a ng-if="fromWallet" class="item item-sub item-icon-left item-big-icon-left item-icon-right">
<!--<i ng-if="!singleFromWallet" class="icon bp-arrow-right"></i>--> <i class="icon big-icon-svg" ng-include="'views/includes/fromWalletIcon.html'"></i>
<!--</a>--> <span>
<!--</div>--> {{fromWallet.name || fromWallet.id}}
</span>
<p>
<span ng-if="!fromWallet.balanceHidden"> {{fromWallet.status.totalBalanceStr}} </span>
<!--<div class="item item-heading">--> <span ng-if="fromWallet.balanceHidden" translate>[Balance Hidden]</span>
<!--<span translate><strong>To</strong></span>--> <span class="tab-home__wallet__multisig-number" ng-if="fromWallet.n > 1">
<!--</div>--> {{fromWallet.m}}-of-{{fromWallet.n}}
<!--<div class="item wallet-selector" ng-click="showToWalletSelector()" ng-if="toWallet">--> </span>
<!--<a ng-if="toWallet" class="item item-sub item-icon-left item-big-icon-left item-icon-right">--> <span class="assertive" ng-if="fromWallet.error">{{fromWallet.error}}</span>
<!--<i class="icon big-icon-svg" ng-include="'views/includes/toWalletIcon.html'"></i>--> &nbsp;
<!--<span>--> </p>
<!--{{toWallet.name || toWallet.id}}--> <i ng-if="!singleFromWallet" class="icon bp-arrow-right"></i>
<!--</span>--> </a>
<!--<p>--> </div>
<!--<span ng-if="!toWallet.balanceHidden"> {{toWallet.status.totalBalanceStr}} </span>-->
<!--<span ng-if="toWallet.balanceHidden" translate>[Balance Hidden]</span>--> <div class="item item-heading">
<!--<span class="tab-home__wallet__multisig-number" ng-if="toWallet.n > 1">--> <span translate><strong>To</strong></span>
<!--{{toWallet.m}}-of-{{toWallet.n}}--> </div>
<!--</span>--> <div class="item wallet-selector" ng-click="showToWalletSelector()" ng-if="toWallet">
<!--<span class="assertive" ng-if="toWallet.error">{{toWallet.error}}</span>--> <a ng-if="toWallet" class="item item-sub item-icon-left item-big-icon-left item-icon-right">
<!--&nbsp;--> <i class="icon big-icon-svg" ng-include="'views/includes/toWalletIcon.html'"></i>
<!--</p>--> <span>
<!--<i ng-if="!singleToWallet" class="icon bp-arrow-right"></i>--> {{toWallet.name || toWallet.id}}
<!--</a>--> </span>
<!--</div>--> <p>
<!--<div class="item item-heading">--> <span ng-if="!toWallet.balanceHidden"> {{toWallet.status.totalBalanceStr}} </span>
<!--Rate: {{rateString}}-->
<!--</div>-->
<!--</div>-->
<!--<shapeshift-coin-selector--> <span ng-if="toWallet.balanceHidden" translate>[Balance Hidden]</span>
<!--coins="coins"--> <span class="tab-home__wallet__multisig-number" ng-if="toWallet.n > 1">
<!--label="'Return Address'"--> {{toWallet.m}}-of-{{toWallet.n}}
<!--get-market-data="getMarketDataIn"--> </span>
<!--market-data="marketData"--> <span class="assertive" ng-if="toWallet.error">{{toWallet.error}}</span>
<!--selected-coin="fromWallet.coin"--> &nbsp;
<!--coin-address="fromWalletAddress"--> </p>
<!--wallet-id="fromWallet.id"--> <i ng-if="!singleToWallet" class="icon bp-arrow-right"></i>
<!--amount="amount"--> </a>
<!--direction="'in'">--> </div>
<!--</shapeshift-coin-selector>--> <div class="item item-heading">
<!--<br/>--> Rate: {{rateString}}
<!--<shapeshift-coin-selector--> </div>
<!--coins="coins"--> </div>
<!--label="'Withdrawal Address'"-->
<!--get-market-data="getMarketDataOut"--> <shapeshift-coin-selector
<!--selected-coin="toWallet.coin"--> coins="coins"
<!--coin-address="toWalletAddress"--> label="'Return Address'"
<!--wallet-id="toWallet.id"--> get-market-data="getMarketDataIn"
<!--direction="'out'">--> market-data="marketData"
<!--</shapeshift-coin-selector>--> selected-coin="fromWallet.coin"
<!--<shapeshift-coin-error ssError="ssError"></shapeshift-coin-error>--> coin-address="fromWalletAddress"
<!--&lt;!&ndash;<shapeshift-coin-deposit-info deposit-status="DepositStatus" deposit-info="depositInfo"></shapeshift-coin-deposit-info>&ndash;&gt;--> wallet-id="fromWallet.id"
<!--<shapeshift-coin-shift-button shift-it="shiftIt" shift-state="ShiftState"></shapeshift-coin-shift-button>--> amount="amount"
<!--</shapeshift-coin-trader>--> 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> </ion-content>
<!--<wallet-selector--> <!--<wallet-selector-->

View file

@ -4,6 +4,7 @@
<ion-nav-back-button ng-click="goBack()"></ion-nav-back-button> <ion-nav-back-button ng-click="goBack()"></ion-nav-back-button>
</ion-nav-bar> </ion-nav-bar>
<ion-content> <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" ng-if="isPaymentRequest">
<div class="header--request__title" translate>Paying</div> <div class="header--request__title" translate>Paying</div>
<div class="header--request__amount" translate>$... USD</div> <div class="header--request__amount" translate>$... USD</div>
@ -14,7 +15,7 @@
{{headerTitle}} {{headerTitle}}
</div> </div>
</div> </div>
<div class="list card"> <div class="list card" ng-if="walletsBch.length > 0">
<div class="item item-icon-right item-heading"> <div class="item item-icon-right item-heading">
<div translate>Bitcoin Cash (BCH)</div> <div translate>Bitcoin Cash (BCH)</div>
<div translate class="subtitle">Instant transactions with low fees</div> <div translate class="subtitle">Instant transactions with low fees</div>
@ -35,7 +36,7 @@
<div> <div>
<a ng-repeat="wallet in walletsBtc track by $index" <a ng-repeat="wallet in walletsBtc track by $index"
class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet" 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> <span ng-include="'views/includes/walletList.html'"></span>
</a> </a>
</div> </div>