Fix wallet details. Adds date separator. Swipe to updateAll

src/pages/home/home.scss

@@ -36,7 +36,4 @@ page-home {
   .error {
     color: color($colors, danger);
   }
-  .has-refresher > .scroll-content {
-    border-top: 0;
-  }
 }

src/pages/receive/receive.html

@@ -8,8 +8,8 @@
 </ion-header>
 
 <ion-content>
-  <div *ngIf="wallet && wallet.isComplete() && wallet.needsBackup" (click)="goToBackup()" class="backup">
+  <div *ngIf="wallet && wallet.isComplete() && wallet.needsBackup" (click)="goToBackup()" class="box-notification no-margin warn">
-    <ion-icon name="alert"></ion-icon>
+    <ion-icon name="warning"></ion-icon>
     <span translate>Wallet not backed up</span>
     <ion-icon name="arrow-forward"></ion-icon>
   </div>

src/pages/wallet-details/wallet-details.html

@@ -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>
+  </div>
-  </ion-card>
 
-  <ion-list no-lines *ngIf="wallet.needsBackup">
+  <div *ngIf="wallet.needsBackup" class="box-notification no-margin warn">
-    <button ion-item (click)="openBackup()">
+    <a (click)="openBackup()">
-      <ion-icon name="warning" item-start></ion-icon>
+      <ion-icon name="warning"></ion-icon>
       {{'Wallet not backed up'|translate}}
-    </button>
+      <ion-icon name="arrow-forward"></ion-icon>
-  </ion-list>
+    </a>
+  </div>
 
-  <ion-list no-lines *ngIf="lowUtxosWarning">
+  <div *ngIf="lowUtxosWarning" class="box-notification no-margin warn">
-    <button ion-item (click)="openAddresses()">
+    <a (click)="openAddresses()">
-      <ion-icon name="warning" item-start></ion-icon>
+      <ion-icon name="alert"></ion-icon>
       {{'Spending this balance will need significant Bitcoin network fees'|translate}}
-    </button>
+      <ion-icon name="arrow-forward"></ion-icon>
-  </ion-list>
+    </a>
+  </div>
 
-  <ion-card *ngIf="wallet && wallet.isComplete() && !walletNotRegistered && txps && txps[0]">
+  <ion-list *ngIf="wallet && wallet.isComplete() && !walletNotRegistered && txps && txps[0]">
-    <div *ngIf="wallet.incorrectDerivation">
+    <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-item-divider>
-    <ion-card-header>
+    <ion-list-header>
       <span *ngIf="requiresMultipleSignatures" translate>Proposals</span>
       <span *ngIf="!requiresMultipleSignatures" translate>Unsent transactions</span>
-    </ion-card-header>
+    </ion-list-header>
-    <ion-list>
+    <page-txp *ngFor="let txp of txps" [tx]="txp" [addressbook]="addressbook"></page-txp>
-      <page-txp *ngFor="let txp of txps" [tx]="txp" [addressbook]="addressbook"></page-txp>
+    <ion-item-divider *ngIf="wallet.status && wallet.status.lockedBalanceSat">
-      <ion-item *ngIf="wallet.status && wallet.status.lockedBalanceSat" left>
+      <strong translate>Total Locked Balance</strong>
-        <h2 translate>Total Locked Balance</h2>
+      <div>
-        <p>
+        {{wallet.status.lockedBalanceStr}}
-          <b>{{wallet.status.lockedBalanceStr}}</b>
+        <span>({{wallet.status.lockedBalanceAlternative}} {{wallet.status.alternativeIsoCode}})</span>
-          <span> {{wallet.status.lockedBalanceAlternative}} {{wallet.status.alternativeIsoCode}} </span>
+      </div>
-        </p>
+    </ion-item-divider>
-      </ion-item>
+  </ion-list>
-    </ion-list>
-  </ion-card>
 
   <!-- Transactions -->
 
-  <ion-card *ngIf="showNoTransactionsYetMsg && !updateStatusError">
+  <div class="middle-message" *ngIf="showNoTransactionsYetMsg && !updateStatusError">
-    <ion-card-content>
+    {{'No transactions yet' | translate}}
-      {{'No transactions yet' | translate}}
+  </div>
-    </ion-card-content>
-  </ion-card>
 
-  <ion-card *ngIf="txHistory && !txHistory[0] && updateTxHistoryError">
+  <div class="middle-message" *ngIf="txHistory && !txHistory[0] && updateTxHistoryError">
-    <ion-card-content>
+    {{'Could not update transaction history' | translate}}
-      {{'Could not update transaction history' | translate}}
+  </div>
-    </ion-card-content>
-  </ion-card>
 
-  <ion-card *ngIf="updatingTxHistory && updatingTxHistoryProgress>5">
+  <div class="middle-message" *ngIf="updatingTxHistory && updatingTxHistoryProgress>5">
-    <ion-card-content>
+    <span translate>Updating transaction history. Please stand by.</span>
-      <span translate>Updating transaction history. Please stand by.</span>
+    <br>
-      <br>
+    <span translate>{{updatingTxHistoryProgress}} transactions downloaded</span>
-      <span translate>{{updatingTxHistoryProgress}} transactions downloaded</span>
+  </div>
-    </ion-card-content>
-  </ion-card>
 
-  <ion-card *ngIf="history && history[0]" class="tx-history">
+  <ion-list *ngIf="history && history[0]" class="tx-history">
-    <ion-list>
+    <div *ngFor="let tx of history; trackBy: trackByFn; let i = index">
-      <button ion-item *ngFor="let tx of history" (click)="goToTxDetails(tx)">
+
+      <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>
+    </div>
-  </ion-card>
+  </ion-list>
 
   <ion-infinite-scroll (ionInfinite)="loadHistory($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>

src/pages/wallet-details/wallet-details.scss

@@ -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);
       }

src/pages/wallet-details/wallet-details.ts

@@ -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;
+  };
+
 }

src/providers/on-going-process/on-going-process.ts

@@ -74,6 +74,7 @@ export class OnGoingProcessProvider {
       return;
     }
     this.loading = this.loadingCtrl.create({
+      spinner: 'hide',
       content: showName
     });
     this.loading.present();

src/theme/global.scss

@@ -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;
+  cursor: pointer;
-  border: 1px solid;
+  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: color($colors, grey);
-    background-color: #f8f8f8;
-    color: #444;
   }
-  &.warning {
+  &.warn {
-    border-color: #e6b500;
+    background-color: color($colors, warning);
-    background-color: #ffc900;
-    color: #fff;
     &.warning-red{
-      border-color: #EB475A;
       background-color: color($global-colors, warning);
     }
   }
   &.error {
-    background-color: #ef473a;
+    background-color: color($colors, danger);
-    border-color: #e42112;
-    color: #fff;
   }
 }