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

<div 
   ng-controller="txController as txc"
   class="txModal"
   ng-swipe-disable-mouse
   ng-swipe-right="txc.cancel()">

  <nav class="tab-bar" ng-style="{'background-color':txc.color}">
    <section class="left-small">
      <a fast-click callback-fn="txc.cancel()">
        <i class="icon-arrow-left3 icon-back"></i>
        <span class="text-back" translate>Back</span>
      </a>
    </section>
    <section class="middle tab-bar-section">
      <h1 class="title ellipsis" translate>
        Transaction
      </h1>
    </section>
  </nav>

  <div class="txModal-content">
    <div class="header-modal text-center" ng-init="txc.getAlternativeAmount(index.showTx)">
      <div ng-show="index.showTx.action != 'invalid'">
        <div ng-show="index.showTx.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="index.showTx.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="index.showTx.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="txc.copyToClipboard(index.showTx.amountStr)">
          <span ng-if="index.showTx.action == 'received'">+</span>
          <span ng-if="index.showTx.action == 'sent'">-</span>
          <span class="enable_text_select">{{index.showTx.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="index.showTx.action == 'invalid'">
        -
      </div> 
    </div>

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

    <ul class="no-bullet size-14 m0"> 

      <li ng-if="!index.showTx.hasMultiplesOutputs && index.showTx.addressTo && index.showTx.addressTo != 'N/A'" class="line-b p10 oh"
        ng-click="txc.copyToClipboard(index.showTx.addressTo)">
      <span class="text-gray" translate>To</span>
      <span class="right">
        <span ng-if="index.showTx.merchant">
          <span ng-show="index.showTx.merchant.pr.ca"><i class="fi-lock color-greeni"></i> {{index.showTx.merchant.domain}}</span>
          <span ng-show="!index.showTx.merchant.pr.ca"><i class="fi-unlock color-yellowi"></i> {{index.showTx.merchant.domain}}</span>
        </span>
        <span ng-if="!index.showTx.merchant">
          <span ng-show="index.showTx.labelTo">{{index.showTx.labelTo}}</span>
          <contact ng-show="!index.showTx.labelTo" class="enable_text_select" address="{{index.showTx.addressTo}}"></contact>
        </span>
      </span>
      </li> 

      <li ng-show="index.showTx.hasMultiplesOutputs" class="line-b p10 oh" 
        ng-click="showMultiplesOutputs = !showMultiplesOutputs">
        <span class="text-gray" translate>Recipients</span>
        <span class="right">{{index.showTx.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="index.showTx.hasMultiplesOutputs && showMultiplesOutputs"
        ng-repeat="output in index.showTx.outputs"
        ng-include="'views/includes/output.html'">
      </div>
      
      <li ng-if="index.showTx.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 ng-if="index.showTx.time" class="line-b p10 oh">
      <span class="text-gray" translate>Date</span>
      <span class="right enable_text_select">
        <time>{{ index.showTx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
        <time>({{ index.showTx.time * 1000 | amTimeAgo}})</time>
      </span>
      </li>
      <li class="line-b p10" ng-show="index.showTx.action != 'received'"
        ng-click="txc.copyToClipboard(index.showTx.feeStr)">
        <span class="text-gray" translate>Fee</span>
        <span class="right enable_text_select">{{index.showTx.feeStr}}</span>
      </li>
      <li class="line-b p10 oh" ng-if="index.showTx.message && index.showTx.action != 'received'"
        ng-click="txc.copyToClipboard(index.showTx.message)">
        <span class="text-gray" translate>Note</span>
        <span class="right enable_text_select">{{index.showTx.message}}</span>
      </li>
      <li ng-if="index.showTx.merchant" class="line-b p10 oh"
        ng-click="txc.copyToClipboard(index.showTx.merchant.pr.pd.memo)">
      <span class="text-gray" translate>Merchant message</span>
      <span class="right enable_text_select">
        {{index.showTx.merchant.pr.pd.memo}}
      </span>
      </li>
      <li ng-if="index.showTx.time" class="line-b p10 oh">
      <span class="text-gray" translate>Confirmations</span>
      <span class="right" >
        <span class="text-warning" ng-show="!index.showTx.confirmations || index.showTx.confirmations == 0" translate>
          Unconfirmed
        </span>
        <span class="label gray radius" ng-show="index.showTx.confirmations>0 && !index.showTx.safeConfirmed">
          {{index.showTx.confirmations}}
        </span>
        <span class="label gray radius" ng-show="index.showTx.safeConfirmed">
          {{index.showTx.safeConfirmed}}
        </span>
   
      </span>
      </li>
    </ul>

    <div ng-if="index.showTx.actions[0] && txc.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 index.showTx.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 == txc.copayerId">({{'Me'|translate}})</span>
        </li>
      </ul>
    </div>

    <div ng-show="index.showTx.txid" class="tx-details-blockchain">
      <div class="text-center m20t">
        <button class="button outline round dark-gray tiny" ng-click="$root.openExternalLink('https://' +
          (txc.getShortNetworkName() == 'test' ? 'test-' : '') + 'insight.bitpay.com/tx/' + index.showTx.txid)">
          <span class="text-gray" translate>See it on the blockchain</span>
        </button>
      </div>
    </div>

    <div class="extra-margin-bottom"></div>
  </div>
</div>