copay/views/transactions.html

<div class="transactions" data-ng-controller="TransactionsController">
  <div ng-show='$root.wallet.isReady()'>
    <h1 ng-show="wallet.isShared()"> Transaction proposals <small>({{txs.length}})</small></h1>
    <div class="large-12" ng-show="wallet.isShared()">
      <ul class="inline-list">
        <li> <a class="text-gray size-12" ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating" ng-class="{'active' : onlyPending}"> [ Pending ] </a> </li>
        <li> <a class="text-gray size-12" ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating" ng-class="{'active' : !onlyPending}"> [ All ] </a> </li>
      </ul>
      <div class="last-transactions" ng-repeat="tx in txs | paged">
        <div class="last-transactions-header">
          <div class="hide-for-small-only large-1 medium-1 columns">
            <a class="text-black" ng-show="tx.comment">
              <i class="fi-comment-quotes size-24" Popover-animation="true" popover="{{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}" popover-title="{{tx.comment}}" popover-placement="right" popover-trigger="mouseenter"></i>
            </a>
            <a class="disable" ng-show="!tx.comment">
              <i class="fi-comment-quotes size-24 text-gray"></i>
            </a>
          </div>
          <div class="show-for-small-only small-12 columns m10b" ng-show="tx.comment">
            <p class="size-14 label" >
              {{tx.comment}} - 
              {{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
            </p>
          </div>
          <div class="large-8 medium-8 small-8 columns">
            <div ng-repeat="out in tx.outs">
              <div class="large-3 medium-3 small-3 columns">
                <p class="size-14 hide-for-small-only">{{out.value | noFractionNumber}} {{$root.unitName}}</p>
                <p class="size-12 show-for-small-only">{{out.value | noFractionNumber}} {{$root.unitName}}</p>
              </div>
              <div class="large-1 medium-1 small-2 columns fi-arrow-right"> </div>
              <div class="large-8 medium-8 small-7 columns ellipsis">
                <contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
              </div>
            </div>
          </div>
          <div class="large-3 medium-3 small-4 columns text-right">
            <p class="size-12">{{tx.createdTs | amCalendar}}</p>
          </div>
        </div>

        <div class="last-transactions-content">
          <div class="box-copayer" ng-repeat="c in tx.actionList">
            <a href="#!/transactions" class="has-tip">
              <img class="copayer-ico br100" src="./img/satoshi.gif" alt="{{c.cId}}">
            </a>
            <div class="box-status">
              <a ng-if="c.actions.create" tooltip-popup-delay="1000" tooltip="Created {{c.actions.create | amTimeAgo}}">
                  <i class="fi-crown icon-status icon-active"></i>
              </a>
              <a ng-if="!c.actions.create"><i class="fi-crown icon-status"></i></a>

              <a ng-if="c.actions.seen" tooltip-popup-delay="1000" tooltip="Seen {{c.actions.seen | amTimeAgo}}">
                  <i class="fi-eye icon-status icon-active"></i>
              </a>
              <a ng-if="!c.actions.seen"><i class="fi-eye icon-status"></i></a>

              <a ng-if="c.actions.rejected" tooltip-popup-delay="1000" tooltip="Rejected {{c.actions.rejected | amTimeAgo}}">
                  <i class="fi-x icon-status icon-active-x"></i>
              </a>

              <a ng-if="c.actions.sign" tooltip-popup-delay="1000" tooltip="Signed {{c.actions.sign | amTimeAgo}}">
                  <i class="fi-check icon-status icon-active-check"></i>
              </a>

              <a ng-if="!c.actions.sign && !c.actions.rejected" href="#!/transactions" class="icon-status">
                  <i class="fi-loop icon-rotate"></i>
              </a>
            </div>

            <div class="text-center">
              <p class="size-12 text-gray ellipsis">
                {{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
              </p>
            </div>
          </div>
        </div>

        <div class="last-transactions-footer">
          <div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs">
            <div ng-show="!tx.signedByUs && !tx.rejectedByUs  && !tx.finallyRejected && tx.missingSignatures">
              <div class="hide-for-small-only">
                <button class="primary m15r"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
                  <i class="fi-check"></i> Sign
                </button>
                <button class="warning" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
                  <i class="fi-x" ></i> Reject
                </button>
              </div>
              <div class="show-for-small-only row m10b">
                <button class="primary small-5 columns"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
                  <i class="fi-check"></i> Sign
                </button>
                <button class="warning small-5 columns" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
                  <i class="fi-x" ></i> Reject
                </button>
              </div>
            </div>
            <div ng-show="!tx.missingSignatures && !tx.sentTs">
              <button class="primary"  ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
                Broadcast Transaction
              </button>
            </div>
          </div>

          <div class="large-7 medium-5 small-12 columns text-right">
            <div ng-show="tx.finallyRejected" class="has-error m10b">
              Transaction finally rejected
            </div>
            <div ng-show="!tx.missingSignatures && tx.sentTs">
              <div class="is-valid m10b">
                <strong>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
              </div>
              <div class="ellipsis small">
                Transaction ID:
                <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="_blank">
                  {{tx.sentTxid}}
                </a>
              </div>
            </div>
            <p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
            One signature missing
            </p>
            <p class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
            {{tx.missingSignatures}} signatures missing</p>
            <div class="ellipsis small text-gray">
              <strong>Fee:</strong> {{tx.fee|noFractionNumber}} {{$root.unitName}}
              <strong>Proposal ID:</strong> {{tx.ntxid}}
            </div>
          </div>
        </div>
      </div>
      <p ng-show="onlyPending && txs.length == 0">No pending transactions proposals.</p>
      <p ng-show="!onlyPending && txs.length == 0">No transactions proposals yet.</p>
      <pagination ng-show="!onlyPending && txs.length > txpItemsPerPage" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small primary"></pagination>
    </div>

    <h1 ng-class="{'line-dashed': wallet.isShared()}">
      Last transactions 
      <small ng-hide="wallet.isShared() || !loading">
        <i class="fi-bitcoin-circle icon-rotate spinner"></i>
      </small>   
    </h1>

    <div class="large-12">
      <div class="m10b size-12" ng-hide="wallet.totalCopayers == 1">
        <a class="text-gray active" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-hide="lastShowed && !loading">[ Show ]</a>
        <a class="text-gray" ng-click="toogleLast()" ng-disabled="loading" loading="Loading" ng-show="lastShowed && !loading">[ Hide ]</a>
      </div>

      <div class="btransactions" ng-if="lastShowed">
        <div ng-if="!blockchain_txs[0].txid && !loading">
          No transactions yet.
        </div>
        <div class="last-transactions" ng-repeat="btx in blockchain_txs | orderBy: 'time':true">
          <div class="last-transactions-header">
            <div class="large-8 medium-7 small-3 columns ellipsis">
              <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="_blank">
                {{btx.txid}} 
              </a> 
              <span class="btn-copy" clip-copy="btx.txid"></span>
            </div>
            <div class="large-4 medium-5 small-9 columns text-right">
              <div data-ng-show="btx.firstSeenTs">
                first seen at
                <time>{{btx.firstSeenTs * 1000 | amCalendar}}</time>
              </div>
              <div data-ng-show="btx.time && !btx.firstSeenTs">
                mined at
                <time>{{btx.time * 1000 | amCalendar}}</time>
              </div>
            </div>
          </div>
          <div class="last-transactions-content">
            <div class="large-5 medium-5 small-5 columns">
              <div ng-repeat="vin in btx.vinSimple">
                <small class="right m5t">{{vin.value| noFractionNumber}} {{$root.unitName}}</small>
                <p class="ellipsis text-gray size-12">
                <contact address="{{vin.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
                </p>
              </div>
            </div>
            <div class="large-1 medium-1 small-1 columns text-center">
              <i class="fi-arrow-right"></i>
            </div>
            <div class="large-6 medium-6 small-6 columns">
              <div ng-repeat="vout in btx.voutSimple">
                <small class="right m5t">{{vout.value| noFractionNumber}} {{$root.unitName}}</small>
                <p class="ellipsis text-gray size-12">
                <contact address="{{vout.addr}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
                </p>
              </div>
            </div>
          </div>
          <div class="last-transactions-footer">
            <div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees | noFractionNumber}} {{$root.unitName}}</div>
            <div class="large-4 medium-4 small-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
            <div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut| noFractionNumber}} {{$root.unitName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>