copay/www/views/bitpayCard.html

<ion-view id="bitpayCard">
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>BitPay Visa<sup>&reg;</sup> Card</ion-nav-title>
    <ion-nav-buttons side="secondary">
      <button class="button no-border" ui-sref="tabs.bitpayCard.preferences">
        <i class="icon ion-ios-settings"></i>
      </button>
    </ion-nav-buttons>
  </ion-nav-bar>

  <ion-content>

    <div class="box-notification warning m0" ng-show="network == 'testnet'">
      Sandbox version. Only for testing purpose
    </div>

    <div class="oh pr" ng-show="!error">
      <div class="amount">
        <div ng-if="bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
          <div class="amount__balance">${{bitpayCard.bitpayCardCurrentBalance}}</div>
          <a class="button button-primary button-small m5t size-14"
            style="padding: 0.5em 1em;"
            ui-sref="tabs.bitpayCard.amount({'cardId': cardId, 'toName': 'BitPay Card'})">
            <i class="icon ion-plus m10r" style="vertical-align: baseline;"></i>
            {{'Add Funds'|translate}}
          </a>
        </div>
        <div ng-if="!bitpayCard.bitpayCardCurrentBalance" class="m10t">
          <strong class="size-36">...</strong>
        </div>
      </div>
      <div class="wallet-details-wallet-info">
        <img style="height:0.6em"  ng-show="loadingHistory" src="img/icon-sync-white.svg">
      </div>
    </div>

    <div ng-show="error" class="text-center m10t assertive">
      {{error}}
    </div>

    <div
      class="text-center padding get-started"
      ng-show="bitpayCard.getStarted">
      <i class="icon ion-ios-arrow-thin-up get-started__arrow"></i>
      <h1>Get started</h1>
      <div class="get-started__text">
        Your BitPay Card is ready. Add funds to your card to start using your card at stores and ATMs worldwide.
      </div>
    </div>

    <div class="list" ng-show="!bitpayCard.getStarted">
      <label class="item item-input item-select">
        <div class="input-label" translate>
          Activity
        </div>
        <select ng-model="dateRange.value" ng-change="bitpayCard.update()">
          <option value="last30Days" selected translate>Recent</option>
          <option value="lastMonth" translate>Last Month</option>
          <option value="all" translate>All</option>
        </select>
      </label>
      <div ng-if="bitpayCard.bitpayCardTransactionHistory[0]"
        ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
        class="item row">
        <div class="col col-10 text-center">
          <div class="tu size-12">{{tx.timestamp | amDateFormat:'MMM'}}</div>
          <div class="text-light">{{tx.timestamp | amDateFormat:'DD'}}</div>
        </div>
        <div class="col col-10">
          <img class="m15t" ng-src="img/mcc-icons/{{tx.icon}}.svg" width="24">
        </div>

        <div class="col col-50">
          <div class="size-12 text-bold">
            {{tx.merchant.name}}
          </div>
          <div class="size-12 text-gray">
            <span ng-show="tx.merchant.city && tx.merchant.state">{{tx.merchant.city}}, {{tx.merchant.state}}</span>
            <span ng-class="{'m5l':tx.merchant.city && tx.merchant.state}">
              {{tx.timestamp | amDateFormat:'h:mm A'}}
            </span>
          </div>
        </div>
        <!--
        <div class="col size-12">
          {{tx.desc}}
        </div>
        <div class="col col-10 text-center p10t">
          <img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
          <img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
        </div>
        -->
        <div class="col text-right">
          <div ng-class="{
               'balanced': tx.price.toString().indexOf('-') == -1 && !tx.pending,
               'stable': tx.price.toString().indexOf('-') == -1 && tx.pending}">
            <span ng-show="tx.price.toString().indexOf('-') == -1 && !tx.pending">+ </span>
            {{tx.price | currency:'$':2 }}
          </div>
          <time class="size-12 text-gray" ng-if="!tx.pending">{{tx.runningBalance | currency:'$':2}}</time>
          <span class="size-12 text-gray text-italic" ng-if="tx.pending" class="tu" translate>Pending</span>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>