copay/views/send.html

<div class="send" ng-controller="SendController" ng-init="init()"> 

    <div class="row">
      <div class="large-12 medium-12 small-12 columns">
        <h1 class="hide-for-large-up">{{$root.title}}</h1>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
          <div class="panel">
            <p class="text-warning size-16"
            ng-show="error">
            <i class="fi-alert"></i> 
            {{error|translate}}
            </p>
            <p class="text-success size-16"
            ng-show="success">
            <i class="fi-check"></i> 
            {{success|translate}}
            </p>

            <div class="row collapse">
              <label for="address" class="left">
                <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>
              </label>
              <span translate class="has-error right size-12" ng-show="sendForm.address.$invalid && address">
                <span class="icon-input"><i class="fi-x"></i></span>
                Not valid
              </span>
              <small class="icon-input right" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
            </div>

            <div class="input">
              <input type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant || isPayUri"
              placeholder="{{'Bitcoin address'|translate}}" ng-model="address" valid-address required>
              <i class="fi-address-book"></i>
              <div ng-hide="showScanner || disableScanner">
                <a class="postfix button black" ng-click="openScanner()"><i class="fi-camera size-24"></i></a>
              </div>
              <div ng-show="showScanner">
                <a translate class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x size-18"></i></a>
              </div>
            </div>

            <div id="scanner" 
              class="row" 
              ng-if="showScanner"
              ng-include="'views/includes/scanner.html'">
            </div>


            <div class="row">
              <div class="large-6 medium-6 columns">
                <div class="row collapse">
                  <label for="amount" class="small-7 columns m5b"><span translate>Amount</span>
                    <small translate ng-hide="!sendForm.amount.$pristine && amount">required</small>
                  </label>
                  <span translate class="has-error right size-12" ng-show="sendForm.amount.$invalid &&
                    !sendForm.amount.$pristine && (notValidAmount || amount)">
                    <span class="icon-input"><i class="fi-x"></i></span>
                    Not valid
                  </span>
                  <small class="icon-input right" ng-show="!sendForm.amount.$invalid &&
                    !sendForm.amount.$pristine"><i class="fi-check"></i></small>
                  
                  
                  <div class="small-9 columns">
                    <div class="input">
                      <input type="number" id="amount"
                      ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0) || isPayUri"
                      name="amount" placeholder="{{'Amount'|translate}}" ng-model="amount"
                      ng-minlength="0.00000001" ng-maxlength="10000000000" valid-amount required
                      autocomplete="off">
                      <i class="icon-bitcoin"></i>
                    </div>
                    <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">
                    <div class="input">
                      <input type="number" id="alternative"
                      ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0) ||
                      isPayUri"
                      name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative" requiredautocomplete="off">
                      <i class="icon-usd"></i>
                    </div>
                  </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="fetchingURL">
                <h3>
                  <i class="fi-bitcoin-circle icon-rotate spinner"></i> 
                  Fetching payment 
                </h3>
                <p> From {{fetchingURL}}
              </div>
    
              <div class="large-12 columns" ng-show="!!$root.merchant || isPayUri">
                <h3 ng-show="!isPayUri">This is a payment protocol transaction</h3>
                <div class="send-note">
                  <p>
                  <span ng-show="isPayUri">Payment to: </span>
                  <b>{{$root.merchant.pr.pd.memo || address}}</b>
                  </p>

                  <p>
                  <i>{{amount}} {{$root.wallet.settings.unitName}}</i>
                  <span class="text-gray" ng-if="isRateAvailable">
                    {{ alternative }} {{ alternativeIsoCode }}
                  </span>
                  <span class="text-gray" >
                    (<span translate>Including fee of</span>
                    {{defaultFee}}
                    {{$root.wallet.settings.unitName}})
                  </span>
                  <p ng-show="!!$root.merchant">
                  Expires {{$root.merchant.expiration | amTimeAgo }} 
                  [{{$root.merchant.domain}}]
                  <span ng-show="!!$root.merchant.pr.ca"><i class="fi-lock"></i> {{$root.merchant.pr.ca}}</span>
                  <span ng-show="!$root.merchant.pr.ca" style="color:red;weight:bold;"><i class="fi-unlock"></i> Untrusted</span>
                  </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>
                <div class="input">
                  <textarea id="comment" ng-disabled="loading"
                  name="comment" placeholder="{{($root.wallet.isShared() ? 'Leave a private message to your copayers' : 'Add a private comment to identify the transaction')}}" ng-model="commentText" ng-maxlength="100"></textarea>
                  <i class="icon-compose"></i>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="large-6 medium-6 small-6 columns text-left">
                <a ng-click="cancelSend(sendForm)" class="button warning m0" ng-show="!!$root.merchant || isPayUri">
                  Cancel
                </a>
              </div>
              <div class="large-6 medium-6 small-6 columns text-right">
                <button type="submit" class="button primary m0" ng-disabled="sendForm.$invalid || loading">
                  Send
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div><!--  end of row -->
   
    <div class="row m20b" ng-show="$root.wallet.balanceInfo.alternativeConversionRate > 0">
      <div class="large-12 columns size-12">
        <i class="fi-bitcoin-circle"></i> 
        1 BTC = {{$root.wallet.balanceInfo.alternativeConversionRate}} {{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">Enable</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}}</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">
              <a ng-click="toggleAddressBookEntry(addr)" title="{{ info.hidden ? 'Enable' : 'Disable'}} address">
                <i class="fi-checkbox" 
                  ng-class="{'text-success':!info.hidden, 'text-gray':info.hidden}"></i>
              </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>