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 back-button" ng-show="!error" ui-sref="tabs.bitpayCard.preferences">
        <i class="icon ion-ios-gear-outline"></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="size-36 m20b">${{bitpayCard.bitpayCardCurrentBalance}}</div>
          <a class="button button-primary button-small"
            style="padding-left: 1em; padding-right: 1em;"
            ui-sref="tabs.bitpayCard.amount({'cardId': cardId, 'toName': 'BitPay Card'})" translate>
            Add Funds
          </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="m10t text-center padding ng-hide"
      ng-show="bitpayCard.getStarted">
      <i class="icon ion-ios-arrow-thin-up size-24"></i>
      <h1>Get started</h1>
      <h4>Your BitPay Card is ready. Add funds to your card to start using your card at stores and ATMs worldwide.</h4>
    </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">
          <img class="m5t" ng-src="img/mcc-icons/{{tx.icon}}.svg" width="28">
        </div>

        <div class="col col-50">
          <div class="size-12 text-bold">
            {{tx.merchant.name}}
          </div>
          <div class="size-10">
            <span ng-show="tx.merchant.city && tx.merchant.state">{{tx.merchant.city}}, {{tx.merchant.state}}</span>
            <span ng-show="tx.desc">
              <span ng-show="tx.merchant.city && tx.merchant.state"> - </span>
              {{tx.desc}}
            </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 size-14 text-gray">
          <div ng-show="tx.fee != '0.00'">{{tx.fee | currency:'$':2}}</div>
          <div ng-show="tx.fee == '0.00'"
               ng-class="{
               'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,
               'text-gray': tx.amount.indexOf('-') == -1 && tx.pending}">
            {{tx.amount | currency:'$':2 }}
          </div>
          <time class="size-12" ng-if="!tx.pending">{{tx.timestamp | amTimeAgo}}</time>
          <span class="size-12" ng-if="tx.pending" class="tu" translate>Pending</span>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>