copay/views/send.html

<div class="send" data-ng-controller="SendController" data-ng-init="loadTxs()">
  <div ng-show='$root.wallet.isReady()'>

    <h1 ng-show="txs.length != 0">Send Proposals</h1>
    <div class="last-transactions" ng-repeat="tx in txs | paged">
      <div ng-include="'views/includes/transaction.html'"></div>
    </div>
    <div ng-show="txs.length != 0" class="large-12 line-dashed" style="padding: 0;"></div>

    <h1>{{title}}</h1>
    <div class="large-6 columns">
      <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
        <div class="row">
          <div class="large-12 columns">
            <div class="row collapse">
              <label for="address">To address
                <small ng-hide="!sendForm.address.$pristine || address">required</small>
                <small class="is-valid" ng-show="!sendForm.address.$invalid && address">valid!</small>
                <small class="has-error" ng-show="sendForm.address.$invalid && address">
                  not valid</small>
              </label>
              <div class="small-10 columns">
                <input type="text" id="address" name="address" ng-disabled="loading"
                placeholder="Send to" ng-model="address" ng-change="onChanged()" valid-address required>
                <small class="icon-input" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
                <small class="icon-input" ng-show="sendForm.address.$invalid && address"><i class="fi-x"></i></small>
              </div>
              <div class="small-2 columns" ng-hide="showScanner">
                <a class="postfix button black" ng-click="openScanner()"><i class="fi-camera"></i></a>
              </div>
              <div class="small-2 columns" ng-show="showScanner">
                <a class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
              </div>
            </div>
            <div id="scanner" class="row" ng-if="showScanner">
              <div class="text-centered">
                <canvas id="qr-canvas" width="200" height="150"></canvas>
                <div ng-show="isMobile">
                  <div id="file-input-wrapper" class="btn btn-primary">
                    <span class="pull-left text-centered">
                      <i class="glyphicon glyphicon-refresh icon-rotate"></i>
                      Get QR code
                    </span>
                    <input id="qrcode-camera" type="file" capture="camera" accept="image/*">
                  </div>
                </div>
                <div ng-hide="isMobile">
                  <video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="large-6 medium-6 columns">
            <div class="row collapse">
              <label for="amount">Amount
                <small ng-hide="!sendForm.amount.$pristine">required</small>
                <small class="is-valid" ng-show="!sendForm.amount.$invalid && !sendForm.amount.$pristine">Valid</small>
                <small class="has-error" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine && !notEnoughAmount">
                  Not valid
                </small>
                <small ng-show="notEnoughAmount" class="has-error">Insufficient funds</small>
              </label>
              <div class="small-9 columns">
                <input type="number" id="amount"
                ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0) || $root.merchantError"
                name="amount" placeholder="Amount" ng-model="amount"
                min="0.00005400" max="10000000000" enough-amount required
                autocomplete="off"
                >
                <small class="icon-input" ng-show="!sendForm.amount.$invalid && amount"><i class="fi-check"></i></small>
                <small class="icon-input" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine && !notEnoughAmount"><i class="fi-x"></i></small>
                <a class="small input-note" title="Send all funds"
                  ng-show="$root.availableBalance > 0 && (!$root.merchant || +$root.merchant.total === 0)"
                  ng-click="topAmount(sendForm)">
                  Use all funds ({{getAvailableAmount()}} {{$root.unitName}})
                </a>
              </div>
              <div class="small-3 columns">
                <span class="postfix">{{$root.unitName}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="row" ng-show="wallet.isShared()">
          <div class="large-12 columns">
            <div class="row collapse">
              <label for="comment">Note
                <small ng-hide="!sendForm.comment.$pristine">optional</small>
                <small class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
              </label>
              <div class="large-12 columns">
                <textarea id="comment" ng-disabled="loading"
                  name="comment" placeholder="Leave a private message to your copayers" ng-model="commentText" ng-maxlength="100"></textarea>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="large-5 medium-3 small-4 columns">
            <button type="submit" class="button primary expand text-center" ng-disabled="sendForm.$invalid || loading" loading="Sending">
              Send
            </button>
          </div>
        </div>
      </form>
    </div>

    <div class="large-6 columns show-for-large-up">
      <div class="send-note">
        <h6>Send to</h6>
        <p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}">
        {{address}}&nbsp;
        </p>
        <h6>Total amount for this transaction:</h6>
        <p class="text-gray" ng-class="{'hidden': sendForm.amount.$invalid || !amount > 0}">
        <b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.unitName}}
        <small>
          {{ ((amount + defaultFee) * unitToBtc)|noFractionNumber:8}} BTC <br/>
          Including fee of {{defaultFee|noFractionNumber}} {{$root.unitName}}
        </small>
        </p>
        <div ng-show="wallet.isShared()">
          <h6>Note</h6>
          <p ng-class="{'hidden': !commentText}">{{commentText}}</p>
        </div>
        <div ng-show="!!$root.merchant">
          <h6>Merchant Data:</h6>
          <p class="text-gray">
            Note: This is a payment protocol transaction.
          </p>
          <h6>Server Says:</h6>
          <p class="text-gray">
            {{$root.merchant.pr.pd.memo}}
          </p>
          <h6>Certificate:</h6>
          <p class="text-gray">
            <span ng-show="!!$root.merchant.pr.ca">{{$root.merchant.pr.ca}}</span>
            <span ng-show="!$root.merchant.pr.ca" style="color:red;weight:bold;">Untrusted</span>
          </p>
          <h6>Payment Expiration:</h6>
          <p class="text-gray">
            {{$root.merchant.expiration}}
          </p>
        </div>
      </div>
    </div>

    <div class="large-12 columns line-dashed">
      <h2>Address Book</h2>
      <p class="text-gray" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
      <table class="large-12 medium-12 small-12" ng-show="showAddressBook()">
        <thead>
          <tr>
            <th>Label</th>
            <th>Address</th>
            <th>Creator</th>
            <th>Date</th>
            <th>&nbsp;</th>
          </tr>
        </thead>
        <tbody>
        <tr
          ng-repeat="(addr, info) in $root.wallet.addressBook"
          ng-class="{'addressbook-disabled': info.hidden}">
          <td><a ng-click="copyAddress(addr)" title="Copy address">{{info.label}}</a></td>
          <td class="ellipsis">{{addr}} <span class="btn-copy" clip-copy="addr"></span></td>
          <td>{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
          <td><time>{{info.createdTs | amCalendar}}</time></td>
          <td width="5"><a ng-click="toggleAddressBookEntry(addr)">{{info.hidden ?
              'Enable' : 'Disable'}}</a></td>
        </tr>
        </tbody>
      </table>
      <button class="button tiny primary text-center" ng-click="openAddressBookModal()">Add New Entry</button>
    </div>
  </div>
</div>