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

<ion-modal-view ng-controller="txpDetailsController">
  <nav class="tab-bar" ng-style="{'background-color':color}">
    <section class="left-small">
      <a ng-click="cancel()" class="p10">
        <span class="text-close" translate>Close</span>
      </a>
    </section>

    <section class="middle tab-bar-section">
      <h1 class="title ellipsis" translate>Payment Proposal</h1>
    </section>
  </nav>

  <div class="onGoingProcess" ng-show="loading">
    <div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
      <ion-spinner class="spinner-stable" icon="lines"></ion-spinner>
      <span translate>{{loading}}</span>
    </div>
  </div>

  <ion-content ng-style="{'background-color': '#F6F7F9'}">
    <div class="modal-content fix-modals-touch" ng-init="updateCopayerList()">
      <div class="payment-proposal-head" ng-style="{'background-color':color}">
        <div class="size-36">{{tx.amountStr}}</div>
        <div class="size-14 text-light" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
        <i class="db fi-arrow-down size-24 m10v"></i>
        <span class="payment-proposal-to" ng-click="copyToClipboard(tx.toAddress)">
          <i class="fi-bitcoin left"></i>
          <contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b size-14" address="{{tx.toAddress}}"></contact>
          <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>
        </span>
      </div>

      <div class="oh">
        <div class="box-notification" ng-show="error">
          <span class="text-warning size-14" translate>{{error}}</span>
        </div>

        <div class="row" ng-if="tx.removed">
          <div class="column m20t text-center text-warning size-12" translate>
            The payment was removed by creator
          </div>
        </div>

        <div class="row p20t white" ng-if="tx.pendingForUs">
          <div class="large-6 medium-6 small-6 columns" ng-show="isShared">
            <button class="button outline round dark-gray expand" ng-click="reject(tx)" ng-disabled="loading">
              <i class="fi-x"></i>
              <span translate>Reject</span>
            </button>
          </div>
          <div class="large-6 medium-6 small-6 columns text-right" ng-show="canSign">
            <button class="button primary round expand" ng-click="sign(tx)" ng-style="{'background-color':color}" ng-disabled="loading || paymentExpired">
              <i class="fi-check"></i>
              <span translate>Accept</span>
            </button>
          </div>
        </div>

        <div class="text-center text-gray size-12 m20t" ng-show="tx.status != 'pending'">
          <div ng-show="tx.status=='accepted' && !tx.isGlidera">
            <div class="m10b" translate>Payment accepted, but not yet broadcasted</div>

            <button class="primary round m0" ng-style="{'background-color':color}" ng-click="broadcast(tx)" ng-disabled="loading">
              <i class="fi-upload-cloud"></i>
              <span translate>Broadcast Payment</span>
            </button>
          </div>
          <div ng-show="tx.status=='accepted' && tx.isGlidera" >
            <div class="m10h" translate>Payment accepted. It will be broadcasted by Glidera. In case there is a problem, it can be deleted 6 hours after it was created.</div>
          </div>
          <div class="text-success" ng-show="tx.status == 'broadcasted'" translate>Payment Sent</div>
          <div class="text-warning" ng-show="tx.status=='rejected'" translate>Payment Rejected</div>
        </div>
      </div>

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

      <ul class="no-bullet size-14 m0">
        <li class="line-b p10 oh" ng-show="tx.message">
          <span class="text-gray" translate>Description</span>
          <span class="right">{{tx.message}}</span>
        </li>

        <li ng-show="tx.hasMultiplesOutputs" class="line-b p10 oh" ng-click="showMultiplesOutputs = !showMultiplesOutputs">
          <span class="text-gray" translate>Recipients</span>
          <span class="right">{{tx.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="tx.hasMultiplesOutputs && showMultiplesOutputs"
          ng-repeat="output in tx.outputs" ng-include="'views/includes/output.html'">
        </div>

        <li class="line-b p10">
          <span class="text-gray" translate>Fee</span>
          <span class="right">{{tx.feeStr}}</span>
        </li>

        <li class="line-b p10">
          <span class="text-gray" translate>Time</span>
          <span class="right">
            <time>{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
          </span>
        </li>

        <li class="line-b p10 oh">
          <span class="text-gray" translate>Created by</span>
          <span class="right">{{tx.creatorName}}</span>
        </li>
      </ul>

      <div class="p10 text-center size-12" ng-show="!currentSpendUnconfirmed && tx.hasUnconfirmedInputs">
        <span class="text-warning" translate>Warning: this transaction has unconfirmed inputs</span>
      </div>

      <div ng-if="tx.paypro">
        <h4 class="title m0" translate>Payment details</h4>
        <ul class="no-bullet size-14 m0">
          <li class="line-b p10">
            <span class="text-gray" translate>To</span>
            <span class="right">
              <span>
                <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.paypro.domain}}</span>
                <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.paypro.domain}}</span>
              </span>
              <contact address="{{tx.toAddress}}" ng-hide="tx.merchant"></contact>
            </span>
          </li>
          <li class="line-b p10" ng-if="paymentExpired">
            <span class="text-gray" translate>Expired</span>
            <span class="right text-alert">
              <time>{{tx.paypro.expires * 1000 | amTimeAgo }}</time>
            </span>
          </li>
          <li class="line-b p10" ng-if="!paymentExpired">
            <span class="text-gray" translate>Expires</span>
            <span class="right">
              <time>{{expires}}</time>
            </span>
          </li>
          <li class="line-b p10">
            <span class="text-gray">Merchant Message</span>
            <span class="db">{{tx.paypro.pr.pd.memo}}</span>
          </li>
        </ul>
      </div>

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

      <div class="columns text-center m20t" ng-if="tx.canBeRemoved || (tx.status == 'accepted' && !tx.broadcastedOn)">
        <div class="text-gray size-12 m20b" ng-show="!tx.isGlidera && isShared" translate>
          * A payment proposal can be deleted if 1) you are the creator, and no other copayer has signed, or 2) 24 hours have passed since the proposal was created.
        </div>
        <button class="tiny round outline dark-gray warning" ng-click="remove(tx)" ng-disabled="loading">
          <i class="fi-trash size-14 m5r"></i>
          <span translate>Delete Payment Proposal</span>
        </button>
      </div>
    </div>
  </ion-content>
</ion-modal-view>