copay/public/views/modals/tx-details.html

<ion-modal-view ng-controller="txDetailsController">
  <ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
    <div class="left-small">
      <a ng-click="cancel()" class="p10">
        <span class="text-close" translate>Close</span>
      </a>
    </div>
    <h1 class="title ellipsis" translate>Transaction</h1>
  </ion-header-bar>

  <ion-content ng-style="{'background-color': '#F6F7F9'}">
    <div class="modal-content">
      <div class="header-modal text-center" ng-init="getAlternativeAmount(btx)">
        <div ng-show="btx.action != 'invalid'">
          <div ng-show="btx.action == 'received'">
            <img src="img/icon-receive-history.svg" alt="sync" width="50">
            <p class="m0 text-gray size-14" translate>Received</p>
          </div>
          <div ng-show="btx.action == 'sent'">
            <img src="img/icon-sent-history.svg" alt="sync" width="50">
            <p class="m0 text-gray size-14" translate>Sent</p>
          </div>
          <div ng-show="btx.action == 'moved'">
            <img src="img/icon-moved.svg" alt="sync" width="50">
            <p class="m0 text-gray size-14" translate>Moved</p>
          </div>

          <div class="size-36" ng-click="copyToClipboard(btx.amountStr, $event)">
            <span class="enable_text_select">{{btx.amountStr}}</span>
          </div>
          <div class="alternative-amount" ng-click="showRate=!showRate" ng-init="showRate = false">
            <span class="label gray radius" ng-show="!showRate && alternativeAmountStr">
              {{alternativeAmountStr}}
            </span>
            <span class="size-12" ng-show="showRate && alternativeAmountStr">
              {{rateStr}} ({{rateDate | amDateFormat:'MM/DD/YYYY HH:mm a'}})
            </span>
          </div>
        </div>
        <div ng-show="btx.action == 'invalid'">
          -
        </div>
      </div>

      <h4 class="title m0" translate>Details</h4>

      <ul class="no-bullet size-14 m0">
        <li ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh"
          ng-click="copyToClipboard(btx.addressTo, $event)">
          <span class="text-gray" translate>To</span>
          <span class="right">
            <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" class="enable_text_select" address="{{btx.addressTo}}"></contact>
            </span>
          </span>
        </li>

        <li ng-show="btx.hasMultiplesOutputs" class="line-b p10 oh"
          ng-click="showMultiplesOutputs = !showMultiplesOutputs">
          <span class="text-gray" translate>Recipients</span>
          <span class="right">{{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>
        </li>

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

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

        <li ng-if="btx.time" class="line-b p10 oh">
          <span class="text-gray" translate>Date</span>
          <span class="right enable_text_select">
            <time>{{ btx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
            <time>({{ btx.time * 1000 | amTimeAgo}})</time>
          </span>
        </li>

        <li class="line-b p10" ng-show="btx.action != 'received'"
          ng-click="copyToClipboard(btx.feeStr, $event)">
          <span class="text-gray" translate>Fee</span>
          <span class="right enable_text_select">{{btx.feeStr}}</span>
        </li>

        <li class="line-b p10 oh" ng-if="btx.message && btx.action != 'received'"
          ng-click="copyToClipboard(btx.message, $event)">
          <span class="text-gray" translate>Description</span>
          <span class="right enable_text_select">{{btx.message}}</span>
        </li>

        <li ng-if="btx.merchant" class="line-b p10 oh"
          ng-click="copyToClipboard(btx.merchant.pr.pd.memo, $event)">
          <span class="text-gray" translate>Merchant message</span>
          <span class="right enable_text_select">
            {{btx.merchant.pr.pd.memo}}
          </span>
        </li>

        <li ng-if="btx.time" class="line-b p10 oh">
          <span class="text-gray" translate>Confirmations</span>
          <span class="right" >
            <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>
        </li>

        <li class="p10 oh" ng-show="btx.note && btx.note.body">
          <span class="text-gray" translate>Comment</span>
          <span class="right enable_text_select">{{btx.note.body}}</span><br>
          <span class="right text-italic text-gray size-12">
            <span translate>Edited by</span> <span>{{btx.note.editedByName}}</span>,
            <time>{{btx.note.editedOn * 1000 | amTimeAgo}}</time></span>
          </span>
        </li>
      </ul>

      <div ng-if="btx.actions[0] && isShared">
        <h4 class="title m0" translate>Participants</h4>
        <ul class="no-bullet size-14 m0">
          <li class="line-b p10 text-gray" ng-repeat="c in btx.actions">
            <i class="icon-contact size-24"></i>
            <span class="right">
              <i ng-if="c.type == 'reject'" class="fi-x icon-sign x db"></i>
              <i ng-if="c.type == 'accept'" class="fi-check icon-sign check db"></i>
            </span>
            {{c.copayerName}} <span ng-if="c.copayerId == copayerId">({{'Me'|translate}})</span>
          </li>
        </ul>
      </div>

      <div ng-show="btx.txid" class="tx-details-blockchain">
        <div class="text-center m20t">
          <button class="button outline round dark-gray tiny" ng-click="$root.openExternalLink('https://' +
            (getShortNetworkName() == 'test' ? 'test-' : '') + 'insight.bitpay.com/tx/' + btx.txid)">
            <span class="text-gray" translate>See it on the blockchain</span>
          </button>
          <button class="button outline round dark-gray tiny" ng-click="showCommentPopup()">
            <span class="text-gray" translate ng-show="!btx.note">Add comment</i></span>
            <span class="text-gray" translate ng-show="btx.note">Edit comment</span>
          </button>
        </div>
      </div>
    </div>
  </ion-content>
</ion-modal-view>