mirror of https://github.com/BTCPrivate/copay.git
Initial implementation for balance modal.
This commit is contained in:
Andy Phillipson
parent
43836a4743
commit
4d3ff6c2f0
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
@import "tab-scan";
|
||||
@import "tab-send";
|
||||
@import "tab-settings";
|
||||
@import "walletBalance";
|
||||
@import "walletDetails";
|
||||
@import "advancedSettings";
|
||||
@import "bitpayCard";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" id="svg602" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="400px" height="500px" viewBox="0 0 400 500" enable-background="new 0 0 400 500" xml:space="preserve">
|
||||
<g id="XMLID_1_">
|
||||
<g>
|
||||
<path fill="#9B9BAB" d="M383,353l12,3c-8.49,45.05-18.39,92.31-22,138L3.77,495.91l0.55-14.26l190.41-226.54L6.41,20.35L6,5h356
|
||||
l10,121h-13c-0.99-12.58-3.73-25.02-7.67-37C328.26,18.92,245.31,33,187,33l-90.96,0.36l156.25,195.32L79,438h170
|
||||
c30.3,0,64.83,2.32,91-16.04C363.87,405.21,371.82,378.23,383,353z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 859 B |
|
|
@ -0,0 +1,91 @@
|
|||
<ion-modal-view id="wallet-balance" ng-controller="walletBalanceController" ng-init="init()">
|
||||
<ion-header-bar align-title="center" class="bar-royal">
|
||||
<button class="button button-clear" ng-click="close()">
|
||||
Close
|
||||
</button>
|
||||
<div class="title" translate>
|
||||
Balance
|
||||
</div>
|
||||
</ion-header-bar>
|
||||
|
||||
<ion-content>
|
||||
<div class="wallet-balance__heading" translate>All of your bitcoin wallet balance may not be available for immediate spending.</div>
|
||||
|
||||
<div class="wallet-balance__list list">
|
||||
|
||||
<div class="wallet-balance__description" translate>Total is the total amount of bitcoin stored in this wallet. It is the sum of Available, Confirming, and Locked balances.</div>
|
||||
<div class="wallet-balance__item item">
|
||||
<img class="wallet-balance__icon" src="img/icon-sigma.svg" height="18"\>
|
||||
<div class="wallet-balance__content no-border">
|
||||
<div class="wallet-balance__title">Total</div>
|
||||
<span class="item-note text-right wallet-balance__amount">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--available">
|
||||
{{status.totalBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
<span class="wallet-balance__amount--alternative ng-binding">
|
||||
{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wallet-balance__description" translate>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.</div>
|
||||
<div class="wallet-balance__item item">
|
||||
<i class="wallet-balance__icon icon ion-ios-checkmark-outline"></i>
|
||||
<div class="wallet-balance__content no-border">
|
||||
<div class="wallet-balance__title">Available</div>
|
||||
<span class="item-note text-right wallet-balance__amount">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--available">
|
||||
{{status.spendableBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
<span class="wallet-balance__amount--alternative ng-binding">
|
||||
{{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wallet-balance__description" translate>Confirming is the amount of bitcoin stored in this wallet with fewer than 3 block chain confirmations.</div>
|
||||
<div class="wallet-balance__item item">
|
||||
<i class="wallet-balance__icon icon ion-more"></i>
|
||||
<div class="wallet-balance__content no-border">
|
||||
<div class="wallet-balance__title">Confirming</div>
|
||||
<span class="item-note text-right wallet-balance__amount">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--available">
|
||||
{{status.pendingBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
<span class="wallet-balance__amount--alternative ng-binding">
|
||||
{{status.pendingBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wallet-balance__description" translate>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.</div>
|
||||
<div class="wallet-balance__item item">
|
||||
<i class="wallet-balance__icon icon ion-ios-locked-outline"></i>
|
||||
<div class="wallet-balance__content no-border">
|
||||
<div class="wallet-balance__title">Locked</div>
|
||||
<span class="item-note text-right wallet-balance__amount">
|
||||
<span class="wallet-balance__amount wallet-balance__amount--available">
|
||||
{{status.lockedBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
<span class="wallet-balance__amount--alternative ng-binding">
|
||||
{{status.lockedBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
</ion-modal-view>
|
||||
|
|
@ -46,22 +46,16 @@
|
|||
on-hold="hideToggle()"
|
||||
ng-style="{'transform': amountScale}"
|
||||
class="amount__balance"
|
||||
>
|
||||
<strong ng-if="!status.pendingAmount" class="size-36">{{status.totalBalanceStr}}</strong>
|
||||
ng-class="{amount__top: status.totalBalanceSat == status.spendableAmount}">
|
||||
<strong class="size-36">{{status.totalBalanceStr}}</strong>
|
||||
<div
|
||||
ng-if="!status.pendingAmount"
|
||||
class="size-14 amount-alternative"
|
||||
ng-if="status.totalBalanceAlternative"
|
||||
ng-style="{opacity: altAmountOpacity}"
|
||||
>
|
||||
{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</div>
|
||||
<div class="size-20" ng-if="status.pendingAmount">
|
||||
<div style="margin-bottom:.5rem"><span translate>Available</span>: {{status.totalBalanceStr}}</div>
|
||||
<div><span translate>Confirming</span>: {{status.pendingAmountStr}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-style="{'transform': amountScale}"
|
||||
class="amount__balance"
|
||||
ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && wallet.balanceHidden"
|
||||
|
|
@ -71,6 +65,18 @@
|
|||
Tap and hold to show
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="!wallet.balanceHidden && (status.totalBalanceSat != status.spendableAmount)" ng-style="{'opacity': altAmountOpacity, 'transform': amountScale}">
|
||||
<button class="button button-standard button-primary amount__button-balance size-14" ng-click="openBalanceModal()">
|
||||
<i class="icon ion-ios-checkmark-outline"></i>
|
||||
<strong>
|
||||
{{status.spendableBalanceStr}}
|
||||
</strong>
|
||||
|
||||
<span>
|
||||
{{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="updatingStatus" class="amount__updating">
|
||||
<div class="size-36">
|
||||
|
|
@ -78,7 +84,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wallet-details-wallet-info" ng-style="{opacity: altAmountOpacity}">
|
||||
<span ng-include="'views/includes/walletInfo.html'"></span>
|
||||
</div>
|
||||
|
|
@ -113,16 +118,6 @@
|
|||
<span class="size-12 db m10b" translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
|
||||
<a class="button button-outline button-light button-small" ng-click='recreate()' translate>Recreate</a>
|
||||
</div>
|
||||
|
||||
<div ng-click='updateAll(true)' ng-show="!updateStatusError && !wallet.balanceHidden" on-hold="hideToggle()">
|
||||
<strong ng-if="!status.pendingAmount" class="size-36">{{status.totalBalanceStr}}</strong>
|
||||
<div ng-if="!status.pendingAmount" class="size-14 amount-alternative" ng-if="status.totalBalanceAlternative">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</div>
|
||||
<div class="size-20" ng-if="status.pendingAmount">
|
||||
<div style="margin-bottom:.5rem"><span translate>Available</span>: {{status.totalBalanceStr}}</div>
|
||||
<div><span translate>Confirming</span>: {{status.pendingAmountStr}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="!updateStatusError && wallet.balanceHidden" on-hold="hideToggle()">
|
||||
<strong class="size-24" translate>[Balance Hidden]</strong>
|
||||
<div class="size-14" translate>
|
||||
|
|
|
|||
Loading…
Reference in New Issue