copay-crown

Version:
A Secure Crown Wallet
82 lines (72 loc) • 3.17 kB
HTML
<ion-header no-border>
  <ion-navbar>
    <ion-title>BitPay Visa
      <sup>&reg;</sup> Card ({{lastFourDigits}})</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="balance-card">
    <div class="balance-header">
      <div (tap)="update()" class="balance-str" *ngIf="balance">
        {{balance | currency:currencySymbol:2 }}
      </div>
      <button ion-button small clear color="light" (click)="topUp()" *ngIf="balance" no-low-fee>
        {{'Add Funds'|translate}} &rarr;
      </button>

      <div class="card-info">
        <ion-spinner *ngIf="!balance"></ion-spinner>

        <span class="card-type" *ngIf="currency">
          {{currency}}
        </span>
      </div>

    </div>
  </div>

  <div *ngIf="getStarted" class="initial-message">
    <h1 translate>Get started</h1>
    <div translate>
      Your BitPay Card is ready. Add funds to your card to start using it at stores and ATMs worldwide.
    </div>
  </div>

  <ion-list *ngIf="!getStarted">
    <ion-item-divider>
      <ion-label>
        <span translate>Activity</span>
      </ion-label>
      <ion-select padding-horizontal [(ngModel)]="dateRange.value" (ionChange)="update()">
        <ion-option value="last30Days" selected>Recent</ion-option>
        <ion-option value="lastMonth">Last Month</ion-option>
        <ion-option value="all">All</ion-option>
      </ion-select>
    </ion-item-divider>

    <ion-item-divider *ngIf="bitpayCardTransactionHistoryConfirming && bitpayCardTransactionHistoryConfirming[0]">
      <ion-icon (click)="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-do-you-require-one-blockchain-confirmation-for-bitpay-card-loads')">
        <img src="assets/img/icon-help-support.svg" class="bg" />
      </ion-icon>
      <span translate>Confirming</span>
    </ion-item-divider>
    <ion-list>
      <div *ngFor="let card of bitpayCardTransactionHistoryConfirming">
        <page-card-item [card]="card" [currencySymbol]="currencySymbol"></page-card-item>
      </div>
    </ion-list>

    <ion-item-divider *ngIf="bitpayCardTransactionHistoryPreAuth && bitpayCardTransactionHistoryPreAuth[0]">
      <ion-icon (click)="bitpayCard.openExternalLink('https://help.bitpay.com/bitpay-card/why-was-i-overcharged-on-my-bitpay-card-account-why-is-there-a-hold-on-my-account')">
        <img src="assets/img/icon-help-support.svg" class="bg" />
      </ion-icon>
      <span translate>Pre-Auth Holds</span>
    </ion-item-divider>
    <ion-list>
      <div *ngFor="let card of bitpayCardTransactionHistoryPreAuth">
        <page-card-item [card]="card" [currencySymbol]="currencySymbol"></page-card-item>
      </div>
    </ion-list>

    <ion-item-divider *ngIf="(bitpayCardTransactionHistoryPreAuth && bitpayCardTransactionHistoryPreAuth[0]) || (bitpayCardTransactionHistoryConfirming && bitpayCardTransactionHistoryConfirming[0])">
      <span translate>Completed</span>
    </ion-item-divider>
    <ion-list>
      <div *ngFor="let card of bitpayCardTransactionHistoryCompleted">
        <page-card-item [card]="card" [currencySymbol]="currencySymbol"></page-card-item>
      </div>
    </ion-list>
  </ion-list>
</ion-content>