copay/views/send.html

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

    <h1 translate 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|translate}}</h1>
    <div class="row collapse m0">
    <div class="large-6 columns">
      <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
        <div class="row collapse">
          <div class="large-12 columns">
            <div class="row collapse">
              <label for="address"><span translate>To</span>
                <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" 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>
                      <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>
        </div>

        <div class="row collapse">
          <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 &&
                  !sendForm.amount.$pristine && !notEnoughAmount">not valid
                </small>
                <small translate 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'|translate}}" ng-model="amount"
                min="0.00000001" 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'|translate}}"
                  ng-show="$root.availableBalance > 0 && (!$root.merchant || +$root.merchant.total === 0)"
                  ng-click="topAmount(sendForm)">
                <span translate>Use all funds</span> ({{getAvailableAmount()}} {{$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-5 medium-5 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) || $root.merchantError"
                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 collapse" ng-show="wallet.isShared()">
          <div class="large-12 columns">
            <div class="row collapse">
              <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>
              <div class="large-12 columns">
                <textarea id="comment" ng-disabled="loading"
                  name="comment" placeholder="{{'Leave a private message to your copayers'|translate}}" ng-model="commentText" ng-maxlength="100"></textarea>
              </div>
            </div>
          </div>
        </div>
 
        <div class="row collapse">
          <span ng-if="!$root.alternativeConversionRate">
            <i class="fi-bitcoin-circle icon-rotate spinner"></i>
          </span>
          <span class="left m5t text-gray size-14" ng-if="$root.alternativeConversionRate > 0">1 BTC = {{alternativeConversionRate|noFractionNumber:2}} {{alternativeIsoCode}}
           
          </span>
          <div class="large-5 medium-3 small-6 columns right">
            <button type="submit" class="button primary expand text-center" ng-disabled="sendForm.$invalid || loading">
              Send
            </button>
          </div>
        </div>
      </form>
    </div>
    </div><!--  end of row -->

    <div class="large-6 columns show-for-large-up" ng-show="!!$root.merchant">
      <div class="send-note">
        <h6 translate>Send to</h6>
        <p class="text-gray" ng-class="{'hidden': sendForm.address.$invalid || !address}"
        title="{{$root.merchant.request_url}}">
        {{$root.merchant.domain}}&nbsp;
        </p>
        <h6 translate>Total amount for this transaction:</h6>
        <p class="text-gray" ng-class="{'hidden': sendForm.amount.$invalid || !amount > 0}">
        <b>{{amount + defaultFee |noFractionNumber}}</b> {{$root.wallet.settings.unitName}}
        <small ng-if="isRateAvailable">
          {{ rateService.toFiat((amount + defaultFee) * unitToSatoshi, alternativeIsoCode) | noFractionNumber: 2 }} {{ alternativeIsoCode }}
        <br>
        </small>
        <small>
          <span translate>Including fee of</span> {{defaultFee|noFractionNumber}} {{$root.wallet.settings.unitName}}
        </small>
        </p>
        <div ng-show="wallet.isShared()">
          <h6 translate>Note</h6>
          <p ng-class="{'hidden': !commentText}">{{commentText}}</p>
        </div>
        <div ng-show="!!$root.merchant">
          <h6 translate>Merchant Data:</h6>
          <p class="text-gray">
            Note: This is a payment protocol transaction.
          </p>
          <h6 translate>Server Says:</h6>
          <p class="text-gray">
            {{$root.merchant.pr.pd.memo}}
          </p>
          <h6 translate>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 translate>Payment Expiration:</h6>
          <p class="text-gray">
            {{$root.merchant.expiration}}
          </p>
        </div>
      </div>
    </div>

    <div class="large-12 columns line-dashed">
      <h2 translate>Address Book</h2>
      <p translate class="text-gray m15b" 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 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 text-center" ng-click="openAddressBookModal()">Add</button>
    </div>
  </div>
</div>