copay/views/send.html

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

    <div class="row" ng-show="$root.txps.length != 0">
      <div class="large-12 columns">
        <h2 translate>Pending Transactions Proposals</h2>
        <div class="last-transactions" 
          ng-repeat="tx in $root.txps | paged" 
          ng-include="'views/includes/transaction.html'"></div>
      </div>
    </div>
    <div ng-show="$root.txps.length != 0" class="line-dashed-h m20b"></div>

    <h1 class="hide-for-large-up">{{$root.title}}</h1>
    <div class="row">
      <div class="large-6 columns">
        <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
          <p class="text-warning size-16"
          ng-show="error">
          <i class="fi-alert"></i> 
          {{error|translate}}
          </p>

          <div class="row collapse">
            <label for="address">
              <span translate>To</span> 
              <i class="fi-info size-12" href="#"
                data-options="disable_for_touch:true"
                tooltip-popup-delay='500'
                tooltip="{{'Enter a valid Bitcoin address. Payment Protocol URLs are also supported'|translate}}"
                tooltip-trigger="mouseenter"
                tooltip-placement="right"></i>
              <small translate ng-hide="!sendForm.address.$pristine || address">required</small>
              <small translate class="is-valid" ng-show="!sendForm.address.$invalid && address">valid!</small>
              <small translate 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 || !!$root.merchant"
              placeholder="{{'Bitcoin address'|translate}}" 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 || disableScanner">
              <a class="postfix button black" ng-click="openScanner()"><i class="fi-camera"></i></a>
            </div>
            <div class="small-2 columns" ng-show="showScanner">
              <a translate class="postfix button warning" ng-click="cancelScanner()">Cancel</a>
            </div>
          </div>
          <div id="scanner" 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>
                    <span translate>Get QR code</span>
                  </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 class="row">
            <div class="large-6 medium-6 columns">
              <div class="row collapse">
                <label for="amount"><span translate>Amount</span>
                  <small translate ng-hide="!sendForm.amount.$pristine">required</small>
                  <small translate class="is-valid"
                    ng-show="!sendForm.amount.$invalid &&
                    !sendForm.amount.$pristine">valid!</small>
                  <small translate class="has-error"
                    ng-show="(sendForm.amount.$invalid || notValidAmount) &&
                    !sendForm.amount.$pristine">not valid
                  </small>
                </label>
                <div class="small-9 columns">
                  <input type="number" id="amount"
                  ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0)"
                  name="amount" placeholder="{{'Amount'|translate}}" ng-model="amount"
                  min="0.00000001" max="10000000000" valid-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 && !notValidAmount"><i class="fi-x"></i></small>
                  <a class="small input-note" title="{{'Send all funds'|translate}}"
                    ng-show="topAmount && (!$root.merchant || +$root.merchant.total === 0)"
                    ng-click="setTopAmount(sendForm)">
                    <span translate>Use all funds</span> {{$root.wallet.settings.unitName}}
                  </a>
                </div>
                <div class="small-3 columns">
                  <span class="postfix">{{$root.wallet.settings.unitName}}</span>
                </div>
              </div>
            </div>
            <div class="large-6 medium-6 columns">
              <div class="row collapse">
                <label for="alternative"><span translate>Amount in</span> {{ alternativeName }} </label>
                <div class="small-9 columns">
                  <input type="number" id="alternative_amount"
                  ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0)"
                  name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative"
                  required
                  autocomplete="off"
                  >
                </div>
                <div class="small-3 columns">
                  <span class="postfix">{{alternativeIsoCode}}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="large-12 columns" ng-show="!!$root.merchant">
              <h3>This is a payment protocol transaction</h3>
              <div class="send-note">
                <p>
                <b translate>Send to</b>: 
                {{$root.merchant.domain}}
                </p>
                <p>
                <b translate>Total amount for this transaction</b>: 
                <i>{{amount + defaultFee |noFractionNumber}} {{$root.wallet.settings.unitName}}</i>
                <small ng-if="isRateAvailable">
                  {{ rateService.toFiat((amount + defaultFee) * unitToSatoshi, alternativeIsoCode) | noFractionNumber: 2 }} {{ alternativeIsoCode }}
                </small>
                <small>
                  (<span translate>Including fee of</span>
                  {{defaultFee|noFractionNumber}}
                  {{$root.wallet.settings.unitName}})
                </small>
                </p>
                <p>
                <b translate>Server Says</b>: 
                {{$root.merchant.pr.pd.memo}}
                </p>
                <p>
                <b translate>Certificate</b>: 
                <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>
                <p>
                <b translate>Payment Expiration</b>: 
                {{$root.merchant.expiration}}
                </p>
              </div>
            </div>
          </div>

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

          <div class="row">
            <div class="large-12 columns text-right">
              <button type="submit" class="button primary m0" ng-disabled="sendForm.$invalid || loading">
                Send
              </button>
            </div>
          </div>
        </form>

      </div>
    </div><!--  end of row -->
    <div class="row m20b" ng-show="$root.alternativeConversionRate > 0">
      <div class="large-6 columns size-12">
        <i class="fi-bitcoin-circle"></i> 
        1 BTC = {{alternativeConversionRate|noFractionNumber:2}} {{alternativeIsoCode}}
      </div>
    </div>

    <div class="line-dashed-h m20b"></div>
    <div class="row">
      <div class="large-12 columns">
        <h2 translate>Address Book</h2>
        <p translate class="text-gray m15b" ng-hide="showAddressBook()">Empty. Create an alias for your addresses</p>
        <table ng-show="showAddressBook()">
          <thead>
            <tr>
              <th translate>Label</th>
              <th translate>Address</th>
              <th ng-class="{'hide-for-small-only' : $root.wallet.isShared()}" ng-show="$root.wallet.isShared()" translate>Creator</th>
              <th class="hide-for-small-only" translate>Date</th>
              <th class="hide-for-small-only">&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="size-12">{{addr}} <span class="btn-copy" clip-copy="addr"></span></td>
            <td ng-show="$root.wallet.isShared()" ng-class="{'hide-for-small-only' : $root.wallet.isShared()}">{{$root.wallet.publicKeyRing.nicknameForCopayer(info.copayerId)}}</td>
            <td class="hide-for-small-only"><time>{{info.createdTs | amCalendar}}</time></td>
            <td class="hide-for-small-only" width="5"><a ng-click="toggleAddressBookEntry(addr)">{{info.hidden ?
                'Enable' : 'Disable'}}</a></td>
          </tr>
          </tbody>
        </table>
        <button translate class="button tiny primary" ng-click="openAddressBookModal()">
          <i class="fi-plus m5r"></i> Add</button>
      </div>
    </div>
  </div>
</div>