From 4d3ff6c2f0dadca7ef1e18b2d8a9ba9cfe0a8a7c Mon Sep 17 00:00:00 2001 From: Andy Phillipson Date: Fri, 9 Dec 2016 16:42:11 -0500 Subject: [PATCH] Initial implementation for balance modal. --- src/js/controllers/modals/walletBalance.js | 24 ++++++ src/js/controllers/walletDetails.js | 17 +++- src/js/services/walletService.js | 17 ++-- src/sass/views/views.scss | 1 + src/sass/views/walletBalance.scss | 94 ++++++++++++++++++++++ src/sass/views/walletDetails.scss | 15 +++- www/img/icon-sigma.svg | 15 ++++ www/views/modals/wallet-balance.html | 91 +++++++++++++++++++++ www/views/walletDetails.html | 33 ++++---- 9 files changed, 273 insertions(+), 34 deletions(-) create mode 100644 src/js/controllers/modals/walletBalance.js create mode 100644 src/sass/views/walletBalance.scss create mode 100644 www/img/icon-sigma.svg create mode 100644 www/views/modals/wallet-balance.html diff --git a/src/js/controllers/modals/walletBalance.js b/src/js/controllers/modals/walletBalance.js new file mode 100644 index 000000000..55fdef7f6 --- /dev/null +++ b/src/js/controllers/modals/walletBalance.js @@ -0,0 +1,24 @@ +'use strict'; + +angular.module('copayApp.controllers').controller('walletBalanceController', function($scope, $timeout, $ionicHistory, gettextCatalog, configService, feeService, ongoingProcess, popupService) { + + ongoingProcess.set('gettingFeeLevels', true); + feeService.getFeeLevels(function(err, levels) { + ongoingProcess.set('gettingFeeLevels', false); + if (err) { + popupService.showAlert(gettextCatalog.getString('Error'), err); + return; + } + $scope.feeLevels = levels; + $scope.$apply(); + }); + + $scope.close = function() { + $scope.walletBalanceModal.hide(); + }; + + $scope.$on("$ionicView.enter", function(event, data) { + $scope.feeOpts = feeService.feeOpts; + $scope.currentFeeLevel = feeService.getCurrentFeeLevel(); + }); +}); diff --git a/src/js/controllers/walletDetails.js b/src/js/controllers/walletDetails.js index d7d90ea83..aa905eed1 100644 --- a/src/js/controllers/walletDetails.js +++ b/src/js/controllers/walletDetails.js @@ -107,6 +107,15 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun }); }; + $scope.openBalanceModal = function() { + $ionicModal.fromTemplateUrl('views/modals/wallet-balance.html', { + scope: $scope + }).then(function(modal) { + $scope.walletBalanceModal = modal; + $scope.walletBalanceModal.show(); + }); + }; + $scope.recreate = function() { walletService.recreate($scope.wallet, function(err) { if (err) return; @@ -252,16 +261,16 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun return; } prevPos = pos; - var amountHeight = 180 - pos; + var amountHeight = 210 - pos; if (amountHeight < 80) { amountHeight = 80; } var contentMargin = amountHeight; - if (contentMargin > 180) { - contentMargin = 180; + if (contentMargin > 210) { + contentMargin = 210; } - var amountScale = (amountHeight / 180); + var amountScale = (amountHeight / 210); if (amountScale < 0.5) { amountScale = 0.5; } diff --git a/src/js/services/walletService.js b/src/js/services/walletService.js index d7c7519f9..a03dd3873 100644 --- a/src/js/services/walletService.js +++ b/src/js/services/walletService.js @@ -166,13 +166,15 @@ angular.module('copayApp.services').factory('walletService', function($log, $tim cache.lockedBalanceSat = balance.lockedAmount; cache.availableBalanceSat = balance.availableAmount; cache.totalBytesToSendMax = balance.totalBytesToSendMax; - cache.pendingAmount = null; + cache.pendingAmount = 0; + cache.spendableAmount = balance.totalAmount - balance.lockedAmount; } else { cache.totalBalanceSat = balance.totalConfirmedAmount; cache.lockedBalanceSat = balance.lockedConfirmedAmount; cache.availableBalanceSat = balance.availableConfirmedAmount; cache.totalBytesToSendMax = balance.totalBytesToSendConfirmedMax; cache.pendingAmount = balance.totalAmount - balance.totalConfirmedAmount; + cache.spendableAmount = balance.totalConfirmedAmount - balance.lockedAmount; } // Selected unit @@ -184,13 +186,8 @@ angular.module('copayApp.services').factory('walletService', function($log, $tim cache.totalBalanceStr = txFormatService.formatAmount(cache.totalBalanceSat) + ' ' + cache.unitName; cache.lockedBalanceStr = txFormatService.formatAmount(cache.lockedBalanceSat) + ' ' + cache.unitName; cache.availableBalanceStr = txFormatService.formatAmount(cache.availableBalanceSat) + ' ' + cache.unitName; - cache.pendingBalanceStr = txFormatService.formatAmount(cache.totalBalanceSat + (cache.pendingAmount === null ? 0 : cache.pendingAmount)) + ' ' + cache.unitName; - - if (cache.pendingAmount !== null && cache.pendingAmount !== 0) { - cache.pendingAmountStr = txFormatService.formatAmount(cache.pendingAmount) + ' ' + cache.unitName; - } else { - cache.pendingAmountStr = null; - } + cache.spendableBalanceStr = txFormatService.formatAmount(cache.spendableAmount) + ' ' + cache.unitName; + cache.pendingBalanceStr = txFormatService.formatAmount(cache.pendingAmount) + ' ' + cache.unitName; cache.alternativeName = config.settings.alternativeName; cache.alternativeIsoCode = config.settings.alternativeIsoCode; @@ -209,11 +206,15 @@ angular.module('copayApp.services').factory('walletService', function($log, $tim rateService.whenAvailable(function() { var totalBalanceAlternative = rateService.toFiat(cache.totalBalanceSat, cache.alternativeIsoCode); + var pendingBalanceAlternative = rateService.toFiat(cache.pendingAmount, cache.alternativeIsoCode); var lockedBalanceAlternative = rateService.toFiat(cache.lockedBalanceSat, cache.alternativeIsoCode); + var spendableBalanceAlternative = rateService.toFiat(cache.spendableAmount, cache.alternativeIsoCode); var alternativeConversionRate = rateService.toFiat(100000000, cache.alternativeIsoCode); cache.totalBalanceAlternative = $filter('formatFiatAmount')(totalBalanceAlternative); + cache.pendingBalanceAlternative = $filter('formatFiatAmount')(pendingBalanceAlternative); cache.lockedBalanceAlternative = $filter('formatFiatAmount')(lockedBalanceAlternative); + cache.spendableBalanceAlternative = $filter('formatFiatAmount')(spendableBalanceAlternative); cache.alternativeConversionRate = $filter('formatFiatAmount')(alternativeConversionRate); cache.alternativeBalanceAvailable = true; diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss index 1e88f8af0..8e241aba7 100644 --- a/src/sass/views/views.scss +++ b/src/sass/views/views.scss @@ -9,6 +9,7 @@ @import "tab-scan"; @import "tab-send"; @import "tab-settings"; +@import "walletBalance"; @import "walletDetails"; @import "advancedSettings"; @import "bitpayCard"; diff --git a/src/sass/views/walletBalance.scss b/src/sass/views/walletBalance.scss new file mode 100644 index 000000000..f9502c750 --- /dev/null +++ b/src/sass/views/walletBalance.scss @@ -0,0 +1,94 @@ +.wallet-balance { + + &__amount { + + font-size: 16px; + + &--available { + color: $mid-gray; + font-weight: bold; + } + + &--confirming { + color: #09C286; + } + + &--locked { + color: $dark-gray; + } + + } + + &__title { + flex-grow: 1; + color: $dark-gray; + overflow: hidden; + } + + &__icon { + float: left; + margin-right: 1rem; + color: $light-gray; + font-size: 24px; + } + + &__list { + background: #f5f5f5; + } + + .item { + display: flex; + align-items: center; + background: #fff; + padding-left: 1rem; + } + + &__item { + display: flex; + align-items: center; + background: #fff; + padding: 0; + margin: 0; + border: 0; + padding-left: 1rem; + } + + &__content { + display: flex; + align-items: center; + flex-grow: 1; + padding: 0.6rem 0; + padding-right: 1rem; + border-bottom: 1px solid rgb(245, 245, 245); + overflow: hidden; + + &.no-border { + border: 0; + } + } + + &__amount { + white-space: nowrap; + } + + &__heading { + font-size: 17px; + color: #445; + margin: 1rem 1rem 0 1rem; + } + + &__description { + font-size: 15px; + color: #667; + margin: 1rem; + } + +} + +#wallet-balance { + + ion-content { + background: #F5F5F5; + } + +} diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss index f6220c524..83a980538 100644 --- a/src/sass/views/walletDetails.scss +++ b/src/sass/views/walletDetails.scss @@ -168,9 +168,9 @@ width: 100%; text-align: center; color: #fff; - height: 180px; + height: 210px; padding-top: 40px; - display: flex; + display: block; align-items: center; justify-content: center; @@ -195,6 +195,15 @@ strong { line-height: 100%; } + + &__top { + margin-top: 45px; + } + + &__button-balance { + background-color: transparent; + border: 1px solid rgba(255,255,255,0.25); + } } .item.item-footer { font-weight: lighter; @@ -214,7 +223,7 @@ position: absolute; top: inherit; left: 10px; - bottom: 15px; + bottom: 5px; font-size: 20px; color: #fff; } diff --git a/www/img/icon-sigma.svg b/www/img/icon-sigma.svg new file mode 100644 index 000000000..0baf24a13 --- /dev/null +++ b/www/img/icon-sigma.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/www/views/modals/wallet-balance.html b/www/views/modals/wallet-balance.html new file mode 100644 index 000000000..04633ef3c --- /dev/null +++ b/www/views/modals/wallet-balance.html @@ -0,0 +1,91 @@ + + + +
+ Balance +
+ + + +
All of your bitcoin wallet balance may not be available for immediate spending.
+ +
+ +
Total is the total amount of bitcoin stored in this wallet. It is the sum of Available, Confirming, and Locked balances.
+
+ +
+
Total
+ + + {{status.totalBalanceStr}} + +
+ + {{status.totalBalanceAlternative}} {{status.alternativeIsoCode}} + +
+ +
+
+ +
Available is the immediatley spendable amount of bitcoin stored in this wallet. It is the Total less Confirming and Locked balances. If you have enabled Use Unconfirmed Funds setting then the Available amount is the Total less Locked balance.
+
+ +
+
Available
+ + + {{status.spendableBalanceStr}} + +
+ + {{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}} + +
+ +
+
+ +
Confirming is the amount of bitcoin stored in this wallet with fewer than 3 block chain confirmations.
+
+ +
+
Confirming
+ + + {{status.pendingBalanceStr}} + +
+ + {{status.pendingBalanceAlternative}} {{status.alternativeIsoCode}} + +
+ +
+
+ +
Locked is the amount of bitcoin stored in this wallet that is allocated as inputs to pending transaction proposals. This amount is determined using unspent transaction outputs associated with the wallet and may be more than the actual amounts associated with your pending transaction proposals.
+
+ +
+
Locked
+ + + {{status.lockedBalanceStr}} + +
+ + {{status.lockedBalanceAlternative}} {{status.alternativeIsoCode}} + +
+ +
+
+ +
+ + + diff --git a/www/views/walletDetails.html b/www/views/walletDetails.html index feed55b79..dd66b7d0c 100644 --- a/www/views/walletDetails.html +++ b/www/views/walletDetails.html @@ -46,22 +46,16 @@ on-hold="hideToggle()" ng-style="{'transform': amountScale}" class="amount__balance" - > - {{status.totalBalanceStr}} + ng-class="{amount__top: status.totalBalanceSat == status.spendableAmount}"> + {{status.totalBalanceStr}}
{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
-
-
Available: {{status.totalBalanceStr}}
-
Confirming: {{status.pendingAmountStr}}
-
-
+
+ +
@@ -78,7 +84,6 @@
-
@@ -113,16 +118,6 @@ This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information. Recreate - -
- {{status.totalBalanceStr}} -
{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
-
-
Available: {{status.totalBalanceStr}}
-
Confirming: {{status.pendingAmountStr}}
-
-
-
[Balance Hidden]