mirror of https://github.com/BTCPrivate/copay.git
Fix wallet details. Adds date separator. Swipe to updateAll
This commit is contained in:
parent
b2c0c9b1d5
commit
b065f370d4
|
@ -36,7 +36,4 @@ page-home {
|
|||
.error {
|
||||
color: color($colors, danger);
|
||||
}
|
||||
.has-refresher > .scroll-content {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,8 +8,8 @@
|
|||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div *ngIf="wallet && wallet.isComplete() && wallet.needsBackup" (click)="goToBackup()" class="backup">
|
||||
<ion-icon name="alert"></ion-icon>
|
||||
<div *ngIf="wallet && wallet.isComplete() && wallet.needsBackup" (click)="goToBackup()" class="box-notification no-margin warn">
|
||||
<ion-icon name="warning"></ion-icon>
|
||||
<span translate>Wallet not backed up</span>
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</div>
|
||||
|
@ -57,4 +57,4 @@
|
|||
<div>{{wallet.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-footer>
|
||||
</ion-footer>
|
||||
|
|
|
@ -5,10 +5,14 @@
|
|||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-card class="balance-card" [ngStyle]="{'background': wallet.color}">
|
||||
<ion-card-content>
|
||||
|
||||
<ion-refresher (ionRefresh)="doRefresh($event)">
|
||||
<ion-refresher-content></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<div class="balance-card" [ngStyle]="{'background': wallet.color}">
|
||||
<div class="balance-header">
|
||||
<div (tap)="updateAll(true)" (longPress)="toggleBalance()">
|
||||
<div (longPress)="toggleBalance()">
|
||||
<div *ngIf="!updateStatusError && !wallet.balanceHidden && !wallet.scanning && wallet.status">
|
||||
<div class="balance-str">{{wallet.status.totalBalanceStr}}</div>
|
||||
<div class="balance-alt-str" *ngIf="wallet.network != 'testnet'">
|
||||
|
@ -64,70 +68,74 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</div>
|
||||
|
||||
<ion-list no-lines *ngIf="wallet.needsBackup">
|
||||
<button ion-item (click)="openBackup()">
|
||||
<ion-icon name="warning" item-start></ion-icon>
|
||||
<div *ngIf="wallet.needsBackup" class="box-notification no-margin warn">
|
||||
<a (click)="openBackup()">
|
||||
<ion-icon name="warning"></ion-icon>
|
||||
{{'Wallet not backed up'|translate}}
|
||||
</button>
|
||||
</ion-list>
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ion-list no-lines *ngIf="lowUtxosWarning">
|
||||
<button ion-item (click)="openAddresses()">
|
||||
<ion-icon name="warning" item-start></ion-icon>
|
||||
<div *ngIf="lowUtxosWarning" class="box-notification no-margin warn">
|
||||
<a (click)="openAddresses()">
|
||||
<ion-icon name="alert"></ion-icon>
|
||||
{{'Spending this balance will need significant Bitcoin network fees'|translate}}
|
||||
</button>
|
||||
</ion-list>
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ion-card *ngIf="wallet && wallet.isComplete() && !walletNotRegistered && txps && txps[0]">
|
||||
<div *ngIf="wallet.incorrectDerivation">
|
||||
<ion-list *ngIf="wallet && wallet.isComplete() && !walletNotRegistered && txps && txps[0]">
|
||||
<ion-item-divider *ngIf="wallet.incorrectDerivation">
|
||||
<span translate>
|
||||
WARNING: Key derivation is not working on this device/wallet. Actions cannot be performed on this wallet.
|
||||
</span>
|
||||
</div>
|
||||
<ion-card-header>
|
||||
</ion-item-divider>
|
||||
<ion-list-header>
|
||||
<span *ngIf="requiresMultipleSignatures" translate>Proposals</span>
|
||||
<span *ngIf="!requiresMultipleSignatures" translate>Unsent transactions</span>
|
||||
</ion-card-header>
|
||||
<ion-list>
|
||||
<page-txp *ngFor="let txp of txps" [tx]="txp" [addressbook]="addressbook"></page-txp>
|
||||
<ion-item *ngIf="wallet.status && wallet.status.lockedBalanceSat" left>
|
||||
<h2 translate>Total Locked Balance</h2>
|
||||
<p>
|
||||
<b>{{wallet.status.lockedBalanceStr}}</b>
|
||||
<span> {{wallet.status.lockedBalanceAlternative}} {{wallet.status.alternativeIsoCode}} </span>
|
||||
</p>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card>
|
||||
</ion-list-header>
|
||||
<page-txp *ngFor="let txp of txps" [tx]="txp" [addressbook]="addressbook"></page-txp>
|
||||
<ion-item-divider *ngIf="wallet.status && wallet.status.lockedBalanceSat">
|
||||
<strong translate>Total Locked Balance</strong>
|
||||
<div>
|
||||
{{wallet.status.lockedBalanceStr}}
|
||||
<span>({{wallet.status.lockedBalanceAlternative}} {{wallet.status.alternativeIsoCode}})</span>
|
||||
</div>
|
||||
</ion-item-divider>
|
||||
</ion-list>
|
||||
|
||||
<!-- Transactions -->
|
||||
|
||||
<ion-card *ngIf="showNoTransactionsYetMsg && !updateStatusError">
|
||||
<ion-card-content>
|
||||
{{'No transactions yet' | translate}}
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<div class="middle-message" *ngIf="showNoTransactionsYetMsg && !updateStatusError">
|
||||
{{'No transactions yet' | translate}}
|
||||
</div>
|
||||
|
||||
<ion-card *ngIf="txHistory && !txHistory[0] && updateTxHistoryError">
|
||||
<ion-card-content>
|
||||
{{'Could not update transaction history' | translate}}
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<div class="middle-message" *ngIf="txHistory && !txHistory[0] && updateTxHistoryError">
|
||||
{{'Could not update transaction history' | translate}}
|
||||
</div>
|
||||
|
||||
<ion-card *ngIf="updatingTxHistory && updatingTxHistoryProgress>5">
|
||||
<ion-card-content>
|
||||
<span translate>Updating transaction history. Please stand by.</span>
|
||||
<br>
|
||||
<span translate>{{updatingTxHistoryProgress}} transactions downloaded</span>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<div class="middle-message" *ngIf="updatingTxHistory && updatingTxHistoryProgress>5">
|
||||
<span translate>Updating transaction history. Please stand by.</span>
|
||||
<br>
|
||||
<span translate>{{updatingTxHistoryProgress}} transactions downloaded</span>
|
||||
</div>
|
||||
|
||||
<ion-card *ngIf="history && history[0]" class="tx-history">
|
||||
<ion-list>
|
||||
<button ion-item *ngFor="let tx of history" (click)="goToTxDetails(tx)">
|
||||
<ion-list *ngIf="history && history[0]" class="tx-history">
|
||||
<div *ngFor="let tx of history; trackBy: trackByFn; let i = index">
|
||||
|
||||
<span *ngIf="isFirstInGroup(i)">
|
||||
<ion-item-divider *ngIf="isDateInCurrentMonth(getDate(tx.time))">
|
||||
<span translate>Recent</span>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-divider *ngIf="!isDateInCurrentMonth(getDate(tx.time))">
|
||||
{{getDate(tx.time) | amDateFormat:'MMMM'}}
|
||||
</ion-item-divider>
|
||||
</span>
|
||||
|
||||
<button ion-item (click)="goToTxDetails(tx)">
|
||||
<ion-icon item-start>
|
||||
<div *ngIf="tx.confirmations == 0">
|
||||
<img src="assets/img/tx-action/icon-confirming.svg" width="40">
|
||||
|
@ -143,11 +151,14 @@
|
|||
<div class="action" *ngIf="tx.confirmations > 0">{{tx.action}}</div>
|
||||
<div class="detail">
|
||||
<div class="amount">{{tx.amount | satToUnit: wallet.coin}}</div>
|
||||
<div class="date">{{tx.time * 1000 | amTimeAgo}}</div>
|
||||
<div class="date">
|
||||
<span *ngIf="tx.time && createdWithinPastDay(tx.time * 1000)">{{tx.time * 1000 | amTimeAgo}}</span>
|
||||
<span *ngIf="tx.time && !createdWithinPastDay(tx.time * 1000)">{{tx.time * 1000 | amDateFormat:'MMM D, YYYY'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</ion-list>
|
||||
</ion-card>
|
||||
</div>
|
||||
</ion-list>
|
||||
|
||||
<ion-infinite-scroll (ionInfinite)="loadHistory($event)">
|
||||
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
page-wallet-details {
|
||||
.card.balance-card {
|
||||
.balance-card {
|
||||
background: color($colors, primary);
|
||||
}
|
||||
.balance-header {
|
||||
|
@ -59,10 +59,19 @@ page-wallet-details {
|
|||
}
|
||||
}
|
||||
|
||||
.middle-message {
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wallet-info {
|
||||
font-weight: 500;
|
||||
color: color($colors, light);
|
||||
height: 25px;
|
||||
height: 35px;
|
||||
img {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
|
@ -103,6 +112,7 @@ page-wallet-details {
|
|||
float: right;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 5px 5px 0 0;
|
||||
&.spinner-crescent circle {
|
||||
stroke: color($colors, light);
|
||||
}
|
||||
|
|
|
@ -7,6 +7,7 @@ import { WalletProvider } from '../../providers/wallet/wallet';
|
|||
import { ProfileProvider } from '../../providers/profile/profile';
|
||||
import { AddressBookProvider } from '../../providers/address-book/address-book';
|
||||
import { BwcErrorProvider } from '../../providers/bwc-error/bwc-error';
|
||||
import { TimeProvider } from '../../providers/time/time';
|
||||
|
||||
//pages
|
||||
import { TxDetailsPage } from '../../pages/tx-details/tx-details';
|
||||
|
@ -46,7 +47,8 @@ export class WalletDetailsPage {
|
|||
private addressbookProvider: AddressBookProvider,
|
||||
private bwcError: BwcErrorProvider,
|
||||
private events: Events,
|
||||
private logger: Logger
|
||||
private logger: Logger,
|
||||
private timeProvider: TimeProvider
|
||||
) {
|
||||
let clearCache = this.navParams.data.clearCache;
|
||||
this.wallet = this.profileProvider.getWallet(this.navParams.data.walletId);
|
||||
|
@ -215,4 +217,45 @@ export class WalletDetailsPage {
|
|||
this.navCtrl.push(WalletAddressesPage, { walletId: this.wallet.credentials.walletId });
|
||||
}
|
||||
|
||||
public doRefresh(refresher) {
|
||||
this.updateAll(true);
|
||||
setTimeout(() => {
|
||||
refresher.complete();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
public getDate(txCreated) {
|
||||
let date = new Date(txCreated * 1000);
|
||||
return date;
|
||||
};
|
||||
|
||||
public trackByFn(index, tx) {
|
||||
return index;
|
||||
};
|
||||
|
||||
public isFirstInGroup(index) {
|
||||
if (index === 0) {
|
||||
return true;
|
||||
}
|
||||
let curTx = this.history[index];
|
||||
let prevTx = this.history[index - 1];
|
||||
return !this.createdDuringSameMonth(curTx, prevTx);
|
||||
};
|
||||
|
||||
private createdDuringSameMonth(curTx, prevTx) {
|
||||
return this.timeProvider.withinSameMonth(curTx.time * 1000, prevTx.time * 1000);
|
||||
};
|
||||
|
||||
public isDateInCurrentMonth(date) {
|
||||
return this.timeProvider.isDateInCurrentMonth(date);
|
||||
};
|
||||
|
||||
public createdWithinPastDay(time) {
|
||||
return this.timeProvider.withinPastDay(time);
|
||||
};
|
||||
|
||||
public isUnconfirmed(tx) {
|
||||
return !tx.confirmations || tx.confirmations === 0;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
@ -74,6 +74,7 @@ export class OnGoingProcessProvider {
|
|||
return;
|
||||
}
|
||||
this.loading = this.loadingCtrl.create({
|
||||
spinner: 'hide',
|
||||
content: showName
|
||||
});
|
||||
this.loading.present();
|
||||
|
|
|
@ -32,6 +32,11 @@ $global-colors: (
|
|||
height: 70px;
|
||||
}
|
||||
|
||||
// Hide border when refresh
|
||||
.has-refresher > .scroll-content {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
// This style prevents the names of the tabs from disappear
|
||||
.tabbar .tab-button .tab-button-text {
|
||||
display: block;
|
||||
|
@ -84,30 +89,34 @@ $global-colors: (
|
|||
}
|
||||
|
||||
.box-notification {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
padding: 10px 0;
|
||||
border: none;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
color: color($colors, light);
|
||||
a {
|
||||
color: #fff;
|
||||
display: block;
|
||||
color: color($colors, light);
|
||||
}
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin: 0 5px;
|
||||
}
|
||||
&.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
&.notice {
|
||||
border-color: #b2b2b2;
|
||||
background-color: #f8f8f8;
|
||||
color: #444;
|
||||
background-color: color($colors, grey);
|
||||
}
|
||||
&.warning {
|
||||
border-color: #e6b500;
|
||||
background-color: #ffc900;
|
||||
color: #fff;
|
||||
&.warn {
|
||||
background-color: color($colors, warning);
|
||||
&.warning-red{
|
||||
border-color: #EB475A;
|
||||
background-color: color($global-colors, warning);
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
background-color: #ef473a;
|
||||
border-color: #e42112;
|
||||
color: #fff;
|
||||
background-color: color($colors, danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue