Wallet/www/views/modals/tx-details.html

<ion-modal-view ng-controller="txDetailsController" ng-init="init()" id="tx-details">
  <ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color': color}">
    <button class="button button-clear" ng-click="cancel()">
      {{'Close' | translate}}
    </button>
    <div class="title">
      {{title}}
    </div>
  </ion-header-bar>

  <ion-content>
    <div class="header-modal text-center" ng-init="showRate = false">
      <div ng-show="btx.action != 'invalid'">

        <i class="icon big-icon-svg">
          <img src="img/icon-wallet.svg" ng-style="{'background-color': color}" class="bg"/>
        </i>

        <div class="size-36 m20t" copy-to-clipboard="btx.amountStr">
          {{btx.amountStr}}
        </div>

        <div class="m10t" style="height:20px;" ng-click="showRate =! showRate">
          <span ng-show="!showRate && alternativeAmountStr">
            {{alternativeAmountStr}}
          </span>
          <span ng-show="showRate && alternativeAmountStr">
            {{rateStr}} ({{rateDate | amDateFormat:'MM/DD/YYYY HH:mm a'}})
          </span>
        </div>
      </div>

      <div ng-show="btx.action == 'sent'">
        <div>
          <span translate>Sent from</span>
          <strong ng-style="{'color': color}">{{wallet.credentials.walletName}}</strong>
        </div>
        <i class="icon ion-ios-arrow-thin-down size-24"></i>
      </div>

      <div ng-show="btx.action == 'received'">
        <div class="padding-vertical">
          <i class="icon ion-ios-arrow-thin-up size-24"></i>
        </div>
        <span translate>Received Funds</span>
      </div>

      <div ng-show="btx.action == 'moved'">
        <span translate>Moved Funds</span>
      </div>

      <div ng-show="btx.action == 'invalid'">
        -
      </div>
    </div>

    <div class="list">
      <div class="item item-icon-left" ng-show="btx.action == 'sent'">
        <i class="icon icon-svg"><img src="img/icon-bitcoin-symbol.svg"></i>
        <div ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" copy-to-clipboard="btx.addressTo">
          <span ng-if="btx.merchant">
            <span ng-show="btx.merchant.pr.ca"><i class="fi-lock color-greeni"></i> {{btx.merchant.domain}}</span>
            <span ng-show="!btx.merchant.pr.ca"><i class="fi-unlock color-yellowi"></i> {{btx.merchant.domain}}</span>
          </span>
          <span ng-if="!btx.merchant">
            <span ng-show="btx.labelTo">{{btx.labelTo}}</span>
            <contact ng-show="!btx.labelTo" address="{{btx.addressTo}}"></contact>
          </span>
        </div>
      </div>

      <div class="item item-icon-left"
        ng-click="openExternalLink('https://' + (getShortNetworkName() == 'test' ? 'test-' : '') + 'insight.bitpay.com/tx/' + btx.txid, true, 'View Transaction on Insight', 'Would you like to view this transaction on the Insight blockchain explorer?
', 'Open Insight', 'Go back')">
        <i class="icon ion-ios-upload-outline"></i>
        <span class="text-gray" translate>View transaction on the blockchain</span>
      </div>

      <div class="item">
        <div ng-if="btx.action == 'received' || btx.action == 'moved'">
          {{'Date'|translate}}
          <span class="item-note">
            <time>{{ btx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
          </span>
        </div>
        <div ng-if="btx.action == 'sent'">
          {{'Created by'|translate}} <strong>{{btx.creatorName}}</strong>
          <span class="item-note">
            <time>{{ btx.createdOn * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
          </span>
        </div>
      </div>

      <div class="item" ng-if="btx.action != 'received' && btx.feeStr" copy-to-clipboard="btx.feeStr">
        {{'Fee'|translate}}: {{btx.feeStr}}
        <span class="item-note">
          <span class="text-warning" ng-show="!btx.confirmations || btx.confirmations == 0" translate>
            Unconfirmed
          </span>
          <span class="label gray radius" ng-show="btx.confirmations>0 && !btx.safeConfirmed">
            {{btx.confirmations}}
          </span>
          <span class="label gray radius" ng-show="btx.safeConfirmed">
            {{btx.safeConfirmed}}
          </span>
          <span ng-show="btx.confirmations && btx.confirmations > 0" translate>Confirmations</span>
        </span>
      </div>

      <div class="item" ng-if="btx.message && btx.action != 'received'" copy-to-clipboard="btx.message">
        {{'Description'|translate}}
        <span class="item-note">
          {{btx.message}}
        </span>
      </div>

      <div ng-if="btx.merchant" class="item" copy-to-clipboard="btx.merchant.pr.pd.memo">
        {{'Merchant message'|translate}}
        <span class="item-note">
          {{btx.merchant.pr.pd.memo}}
        </span>
      </div>

      <div ng-show="btx.hasMultiplesOutputs" class="item" ng-click="showMultiplesOutputs = !showMultiplesOutputs">
        {{'Recipients'|translate}}
        <span class="item-note">
          {{btx.recipientCount}}
          <i ng-show="showMultiplesOutputs" class="icon-arrow-up3 size-24"></i>
          <i ng-show="!showMultiplesOutputs" class="icon-arrow-down3 size-24"></i>
        </span>
      </div>

      <div class="item" ng-show="btx.hasMultiplesOutputs && showMultiplesOutputs"
        ng-repeat="output in btx.outputs"
        ng-include="'views/includes/output.html'">
      </div>

      <div ng-if="btx.action == 'invalid'" class="item">
        <span class="right" translate>
          This transaction has become invalid; possibly due to a double spend attempt.
        </span>
      </div>

      <div class="item" ng-click="showCommentPopup()">
        {{'Memo'|translate}}
        <span class="item-note" translate ng-if="!btx.note">
          <i class="icon ion-ios-plus-empty"></i>
        </span>
        <span class="item-note" ng-if="btx.note && btx.note.body">
          {{btx.note.body}}
          <div>
            <span translate>Edited by</span> {{btx.note.editedByName}},
            <time>{{btx.note.editedOn * 1000 | amTimeAgo}}</time>
          </div>
        </span>
      </div>

      <div ng-if="actionList[0]">
        <div class="item item-divider" translate>Timeline</div>
        <div class="item" ng-class="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" ng-repeat="a in actionList track by $index">
          <div class="row">
            <div class="col col-10">
              <span id="timeline-icon">{{$index + 1}}</span>
            </div>
            <div class="col">
              <div>{{a.description}}</div>
              <div>
                <span>{{a.by}}</span>
                <span class="item-note">
                  <time>{{ a.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ion-content>
</ion-modal-view>