mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #8011 from Gamboster/feat/walletBalance
[v4] Feat: Wallet balance modal page
This commit is contained in:
Gustavo Maximiliano Cortez
GitHub
commit
179bf7e648
|
|
@ -0,0 +1,18 @@
|
|||
<?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.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="33px" height="33px" viewBox="0 0 33 33" enable-background="new 0 0 33 33" xml:space="preserve">
|
||||
<title>Group 2</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Group-2" transform="translate(8.000000, 8.000000)">
|
||||
<g id="Group" transform="translate(8.000000, 7.500000)">
|
||||
<path id="Shape" fill="none" stroke="#7A8C9E" d="M-14.5,1c0-8.733,6.724-15.881,14.94-15.881c5.828,0,10.904,3.491,13.298,8.733"
|
||||
/>
|
||||
<path id="Shape_1_" fill="none" stroke="#7A8C9E" d="M15.5,1c0,8.732-6.73,15.881-14.94,15.881c-5.828,0-10.903-3.49-13.298-8.732
|
||||
"/>
|
||||
<polyline id="Shape_2_" fill="none" stroke="#7A8C9E" points="15.5,-14.881 14.248,-6.06 4.917,-7.258 "/>
|
||||
<polyline id="Shape_3_" fill="none" stroke="#7A8C9E" points="-14.5,16.881 -13.254,8.061 -3.911,9.258 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="14px" height="19px" viewBox="0 0 14 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>lock</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="WALLET-2-of-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="Home-with-funds-Copy-2" sketch:type="MSArtboardGroup" transform="translate(-443.500000, -486.000000)" fill="#7A8C9E">
|
||||
<path d="M456.185388,493.514086 C456.549207,493.514086 456.857852,493.642315 457.111332,493.898778 C457.364812,494.15524 457.491551,494.465376 457.491551,494.829195 L457.491551,503.337148 C457.491551,503.695002 457.364812,504.002156 457.111332,504.258619 C456.857852,504.515081 456.549207,504.643311 456.185388,504.643311 L445.056163,504.643311 C444.692344,504.643311 444.383699,504.515081 444.130219,504.258619 C443.876738,504.002156 443.75,503.695002 443.75,503.337148 L443.75,494.829195 C443.75,494.465376 443.876738,494.15524 444.130219,493.898778 C444.383699,493.642315 444.692344,493.514086 445.056163,493.514086 L446.371272,493.514086 L446.371272,490.90176 C446.371272,489.726804 446.785781,488.723335 447.614811,487.891322 C448.443841,487.05931 449.445819,486.643311 450.620775,486.643311 C451.795732,486.643311 452.79771,487.05931 453.62674,487.891322 C454.45577,488.723335 454.870278,489.726804 454.870278,490.90176 L454.870278,493.514086 L456.185388,493.514086 Z M447.024354,490.90176 L447.024354,493.514086 L454.217197,493.514086 L454.217197,490.90176 C454.217197,489.911695 453.865312,489.064785 453.161531,488.361004 C452.45775,487.657224 451.61084,487.305338 450.620775,487.305338 C449.630711,487.305338 448.783801,487.657224 448.08002,488.361004 C447.376239,489.064785 447.024354,489.911695 447.024354,490.90176 L447.024354,490.90176 Z M456.838469,503.337148 L456.838469,494.829195 C456.838469,494.644304 456.774355,494.489236 456.646123,494.363986 C456.517892,494.238737 456.364315,494.176114 456.185388,494.176114 L445.056163,494.176114 C444.877236,494.176114 444.723659,494.238737 444.595427,494.363986 C444.467196,494.489236 444.403082,494.644304 444.403082,494.829195 L444.403082,503.337148 C444.403082,503.516075 444.467196,503.669652 444.595427,503.797883 C444.723659,503.926114 444.877236,503.990229 445.056163,503.990229 L456.185388,503.990229 C456.364315,503.990229 456.517892,503.926114 456.646123,503.797883 C456.774355,503.669652 456.838469,503.516075 456.838469,503.337148 L456.838469,503.337148 Z M450.620775,497.441521 C450.895131,497.441521 451.127733,497.536948 451.318588,497.727804 C451.509444,497.918659 451.604871,498.151261 451.604871,498.425617 C451.604871,498.634365 451.543738,498.823727 451.421471,498.993708 C451.299204,499.163689 451.142645,499.281481 450.951789,499.347088 L450.951789,500.384861 C450.951789,500.480289 450.918986,500.559314 450.85338,500.621939 C450.787773,500.684563 450.710239,500.715875 450.620775,500.715875 C450.531312,500.715875 450.453778,500.684563 450.388171,500.621939 C450.322564,500.559314 450.289761,500.480289 450.289761,500.384861 L450.289761,499.347088 C450.098906,499.281481 449.942347,499.163689 449.82008,498.993708 C449.697813,498.823727 449.63668,498.634365 449.63668,498.425617 C449.63668,498.151261 449.732106,497.918659 449.922962,497.727804 C450.113818,497.536948 450.34642,497.441521 450.620775,497.441521 L450.620775,497.441521 Z" id="lock" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -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,100 @@
|
|||
<ion-header>
|
||||
<ion-navbar>
|
||||
<ion-title>
|
||||
{{status.wallet.name}}
|
||||
</ion-title>
|
||||
<ion-buttons start>
|
||||
<button (click)="close()" ion-button>
|
||||
{{'Close' | translate}}
|
||||
</button>
|
||||
</ion-buttons>
|
||||
</ion-navbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item text-wrap>{{'All of your bitcoin wallet balance may not be available for immediate spending.' | translate}}</ion-item>
|
||||
<ion-item-divider></ion-item-divider>
|
||||
<ion-item class="balance-container">
|
||||
<div class="title">
|
||||
<img src="assets/img/icon-sigma.svg" />
|
||||
<div translate>Total</div>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<span class="total">
|
||||
{{status.totalBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
<span class="fiat">
|
||||
{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item-divider>
|
||||
<div translate text-wrap>The total amount of bitcoin stored in this wallet.</div>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item class="balance-container">
|
||||
<div class="title">
|
||||
<ion-icon ios="ios-checkmark" md="md-checkmark"></ion-icon>
|
||||
<div translate>Available</div>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<span class="available">
|
||||
{{status.spendableBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
<span class="fiat">
|
||||
{{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item-divider>
|
||||
<div translate text-wrap>The amount of bitcoin immediately spendable from this wallet.</div>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item class="balance-container">
|
||||
<div class="title">
|
||||
<img src="assets/img/icon-confirming-clear.svg" />
|
||||
<div translate>Confirming</div>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<span class="confirming">
|
||||
{{status.pendingBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
<span class="fiat">
|
||||
{{status.pendingBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item-divider>
|
||||
<div translate text-wrap>The amount of bitcoin stored in this wallet with less than 1 blockchain confirmation.</div>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item class="balance-container">
|
||||
<div class="title">
|
||||
<img src="assets/img/icon-lock.svg" />
|
||||
<div translate>Locked</div>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<span class="locked">
|
||||
{{status.lockedBalanceStr}}
|
||||
</span>
|
||||
<div>
|
||||
<span class="fiat">
|
||||
{{status.lockedBalanceAlternative}} {{status.alternativeIsoCode}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item-divider>
|
||||
<div translate text-wrap>The amount of bitcoin stored in this wallet that is allocated as inputs to your pending transaction proposals. The
|
||||
amount is determined using unspent transaction outputs associated with this wallet and may be more than the actual
|
||||
amounts associated with your pending transaction proposals.</div>
|
||||
</ion-item-divider>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
page-wallet-balance {
|
||||
.balance-container {
|
||||
ion-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img, ion-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
.balance {
|
||||
text-align: end;
|
||||
.available {
|
||||
color: color($colors, success);
|
||||
}
|
||||
.confirming, .locked {
|
||||
color: color($colors, warning);
|
||||
}
|
||||
.fiat {
|
||||
color: #bbbbbb;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavParams, ViewController } from 'ionic-angular';
|
||||
import { Logger } from '../../../providers/logger/logger';
|
||||
|
||||
@Component({
|
||||
selector: 'page-wallet-balance',
|
||||
templateUrl: 'wallet-balance.html',
|
||||
})
|
||||
export class WalletBalancePage {
|
||||
|
||||
public status: any;
|
||||
|
||||
constructor(
|
||||
private logger: Logger,
|
||||
private navParams: NavParams,
|
||||
private viewCtrl: ViewController
|
||||
) {
|
||||
this.status = this.navParams.data.status;
|
||||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
this.logger.info('ionViewDidLoad WalletBalancePage');
|
||||
}
|
||||
|
||||
public close(): void {
|
||||
this.viewCtrl.dismiss();
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue