anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Shapeshift refactor / Empty case / CSS

Browse source
This commit is contained in:
Sebastiaan Pasma 2018-07-31 15:03:20 +02:00
commit 281b969fc3
No known key found for this signature in database
GPG key ID: 9A2B0C8B95A1D26F
9 changed files with 230 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

4
i18n/po/template.pot
View file

@ -3112,6 +3112,10 @@ msgstr ""
msgid "Top up {{amountStr}} to debit card ({{cardLastNumber}})"
msgstr ""
#: www/views/shapeshift.html:30
msgid "Start ShapeShift"
msgstr ""
#: www/views/buyAmazon.html:61
#: www/views/buyMercadoLibre.html:60
#: www/views/modals/wallet-balance.html:23

100
src/js/controllers/shapeshift.js
View file

@ -1,10 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('shapeshiftController', function($scope, $interval, profileService, walletService, popupService, lodash, $ionicNavBarDelegate) {
var vm = this;
//vm.buyBitcion = buyBitcoin;
angular.module('copayApp.controllers').controller('shapeshiftController', function($scope, $state, $interval, profileService, walletService, popupService, lodash, $ionicNavBarDelegate) {
var walletsBtc = [];
var walletsBch = [];
@ -19,59 +15,51 @@ angular.module('copayApp.controllers').controller('shapeshiftController', functi
}
function showToWallets() {
$scope.toWallets = $scope.fromWallet.coin == 'btc' ? walletsBch : walletsBtc;
$scope.toWallets = $scope.fromWallet.coin === 'btc' ? walletsBch : walletsBtc;
$scope.onToWalletSelect($scope.toWallets[0]);
$scope.singleToWallet = $scope.toWallets.length == 1;
$scope.singleToWallet = $scope.toWallets.length === 1;
}
function buyBitcoin() {
console.log('buyBitcoin()');
}
$scope.buyBitcoin = buyBitcoin;
$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.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) {
console.log('beforeEnter()');
walletsBtc = profileService.getWallets({coin: 'btc'});
walletsBch = profileService.getWallets({coin: 'bch'});
$scope.fromWallets = lodash.filter(walletsBtc.concat(walletsBch), function(w) {
return w.status.balance.availableAmount > 0;
});
console.log('Checking wallets.');
if ($scope.fromWallets.length == 0) {
// Need to go to new origin screen here, with parameters
var params = {
thirdParty: {
id: 'shapeshift'
}
};
console.log('Asking for transition');
$state.transitionTo('tabs.send', params);
return
if ($scope.fromWallets.length === 0) {
// return
// } else {
// $scope.onFromWalletSelect($scope.fromWallets[0]);
}
$scope.onFromWalletSelect($scope.fromWallets[0]);
$scope.onToWalletSelect($scope.toWallets[0]);
$scope.singleFromWallet = $scope.fromWallets.length == 1;
$scope.singleToWallet = $scope.toWallets.length == 1;
// $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);
});
$scope.$on("$ionicView.enter", function(event, data) {
@ -80,9 +68,33 @@ angular.module('copayApp.controllers').controller('shapeshiftController', functi
$scope.showFromWalletSelector = function() {
$scope.showFromWallets = true;
}
};
$scope.showToWalletSelector = function() {
$scope.showToWallets = true;
};
// This could probably be enhanced refactoring the routes abstract states
$scope.createWallet = function() {
$state.go('tabs.home').then(function() {
$state.go('tabs.add.create-personal');
});
};
$scope.buyBitcoin = function() {
$state.go('tabs.home').then(function() {
$state.go('tabs.buyandsell');
});
};
$scope.shapeshift = function() {
var params = {
thirdParty: {
id: 'shapeshift'
}
};
$state.go('tabs.home').then(function() {
$state.transitionTo('tabs.send', params);
});
}
});

2
src/js/controllers/sendFlowController.js → src/js/controllers/walletSelectorController.js
View file

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('sendFlowController', function($scope, $rootScope, $state, $stateParams, $log, $ionicHistory, configService, gettextCatalog, profileService) {
angular.module('copayApp.controllers').controller('walletSelectorController', function($scope, $rootScope, $state, $stateParams, $log, $ionicHistory, configService, gettextCatalog, profileService) {
$scope.$on("$ionicView.beforeEnter", function(event, data) {
var config = configService.getSync().wallet.settings;

6
src/js/routes.js
View file

@ -299,7 +299,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
url: '/wallet-to-wallet',
views: {
'tab-send@tabs': {
controller: 'sendFlowController',
controller: 'walletSelectorController',
templateUrl: 'views/wallet-origin-destination.html'
}
}
@ -308,7 +308,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
url: '/origin/:thirdParty/:amount/:toAddress/:toWalletId/:coin',
views: {
'tab-send@tabs': {
controller: 'sendFlowController',
controller: 'walletSelectorController',
templateUrl: 'views/wallet-origin-destination.html',
}
}
@ -317,7 +317,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
url: '/destination/:thirdParty/:amount/:fromWalletId',
views: {
'tab-send@tabs': {
controller: 'sendFlowController',
controller: 'walletSelectorController',
templateUrl: 'views/wallet-origin-destination.html',
}
}

39
src/sass/mixins/layout.scss
View file

@ -18,3 +18,42 @@
.absolute-center{
@include absolute-center();
}
@mixin empty-case() {
padding-top: 5vh;
text-align: center;
.item {
border-style: none;
}
& > .title {
font-size: 20px;
color: $v-dark-gray;
margin: 20px 10px;
}
& > .subtitle {
font-size: 1rem;
line-height: 1.5em;
font-weight: 300;
color: #6F6F70;
margin: 20px 1em 2.5em;
}
.big-icon-svg {
.bg.green {
padding: 0 10px;
box-shadow: none;
}
}
.buttons {
margin-top: 18px;
.button {
font-weight: bold;
font-size: 19px;
}
}
.button-first-contact img {
height: 19px;
width: 19px;
margin-right: 6px;
vertical-align: sub;
}
}

14
src/sass/views/shapeshift.scss Normal file
View file

@ -0,0 +1,14 @@
#shapeshift {
.empty-case {
@include empty-case();
}
.button-shapeshift {
@extend %button-standard;
@include button-style(#243F5D, #FFF, #606060, #FFF, #FFF);
@include button-clear(#FFF);
@include button-outline(#C1C1C1);
border: 0px;
@include button-shadow();
}
}

37
src/sass/views/tab-send.scss
View file

@ -133,42 +133,7 @@
padding-left: 30px;
}
.sendTip {
padding-top: 5vh;
text-align: center;
.item {
border-style: none;
}
& > .title {
font-size: 20px;
color: $v-dark-gray;
margin: 20px 10px;
}
& > .subtitle {
font-size: 1rem;
line-height: 1.5em;
font-weight: 300;
color: #6F6F70;
margin: 20px 1em 2.5em;
}
.big-icon-svg {
.bg.green {
padding: 0 10px;
box-shadow: none;
}
}
.buttons {
margin-top: 18px;
.button {
font-weight: bold;
font-size: 19px;
}
}
.button-first-contact img {
height: 19px;
width: 19px;
margin-right: 6px;
vertical-align: sub;
}
@include empty-case();
}
.item-heading {
line-height: 16px;

1
src/sass/views/views.scss
View file

@ -14,6 +14,7 @@
@import "walletBalance";
@import "walletDetails";
@import "advancedSettings";
@import "shapeshift";
@import "bitpayCard";
@import "bitpayCardIntro";
@import "buyandsell";

206
www/views/shapeshift.html
View file

@ -1,4 +1,4 @@
<ion-view class="settings" show-tabs>
<ion-view id="shapeshift" class="settings" show-tabs>
<ion-nav-bar class="bar-royal">
<ion-nav-title>
{{'Shapeshift'|translate}}
@ -10,107 +10,121 @@
<div class="send-header-wrapper shapeshift-banner">
<img class="shapeshift-logo" src="img/shapeshiftlogo.svg"/>
</div>
<div class="list card ng-hide" ng-show="fromWallets.length == 0 || toWallets.length == 0">
<div class="item item-heading">
<span translate>No available wallets to convert between.</span>
<button ui-sref="tabs.buyandsell">Buy Bitcoin Now</button>
<button ui-sref="tabs.receive">Show my address</button>
<div class="list card empty-case">
<div class="title" translate>
Your Bitcoin wallet is empty
</div>
<div class="subtitle">
<div ng-show="!walletsWithFunds.length">
<p translate>Before exchanging your BTC to BCH, you will need to add funds to your wallet.</p>
<p translate>You can receive Bitcoin from any wallet or service.</p>
</div>
<div ng-show="walletsWithFunds.length">
<p translate>Using Shapeshift will allow you to exchange your BTC for BCH.</p>
<p translate>The process is fast and you will receive the exchanged amount in your wallet.</p>
</div>
<div ng-show="!hasWallets" translate>To get started, you'll need to create a bitcoin wallet and get some bitcoin.</div>
<div class="padding buttons">
<button class="button button-standard button-green" ng-click="buyBitcoin()" ng-show="!walletsWithFunds.length" translate>Buy Bitcoin now</button>
<button class="button button-standard button-green" ng-click="createWallet()" ng-show="!hasWallets" translate>Create bitcoin wallet</button>
<button class="button button-standard button-shapeshift" ng-click="shapeshift()" ng-show="walletsWithFunds.length" translate>Start ShapeShift</button>
</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>
<!--<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>-->
<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="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>
<!--<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>
<!--<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>
<!--<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>-->
</ion-content>
<wallet-selector
wallet-selector-title="fromWalletSelectorTitle"
wallet-selector-wallets="fromWallets"
wallet-selector-selected-wallet="fromWallet"
wallet-selector-show="showFromWallets"
wallet-selector-on-select="onFromWalletSelect"
wallet-selector-always-display-bitcoin-core="true">
</wallet-selector>
<!--<wallet-selector-->
<!--wallet-selector-title="fromWalletSelectorTitle"-->
<!--wallet-selector-wallets="fromWallets"-->
<!--wallet-selector-selected-wallet="fromWallet"-->
<!--wallet-selector-show="showFromWallets"-->
<!--wallet-selector-on-select="onFromWalletSelect"-->
<!--wallet-selector-always-display-bitcoin-core="true">-->
<!--</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-always-display-bitcoin-core="true">
</wallet-selector>
</ion-view>
<!--<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-always-display-bitcoin-core="true">-->
<!--</wallet-selector>-->
<!--</ion-view>-->