copay/views/send.html

237 lines
11 KiB
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-12 columns">
<div class="panel">
<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>
<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 class="pr">
<input class="columns" type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant"
placeholder="{{'Bitcoin address'|translate}}" ng-model="address" ng-change="onChanged()" valid-address required auto-focus>
<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>
<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" class="small-7 columns m5b"><span translate>Amount</span>
<small translate ng-hide="!sendForm.amount.$pristine">required</small>
</label>
<span translate class="has-error right size-12" ng-show="(sendForm.amount.$invalid || notValidAmount) && !sendForm.amount.$pristine">
<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="pr">
<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">
<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>
<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="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">
<h3>This is a payment protocol transaction</h3>
<div class="send-note">
<p>
<b>{{$root.merchant.pr.pd.memo}}</b>
</p>
<p>
<i>{{amount + defaultFee |noFractionNumber}} {{$root.wallet.settings.unitName}}</i>
<span class="text-gray" ng-if="isRateAvailable">
{{ rateService.toFiat((amount + defaultFee) * unitToSatoshi, alternativeIsoCode) | noFractionNumber: 2 }} {{ alternativeIsoCode }}
</span>
<span class="text-gray" >
(<span translate>Including fee of</span>
{{defaultFee|noFractionNumber}}
{{$root.wallet.settings.unitName}})
</span>
<p>
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>
</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-6 medium-6 small-6 columns text-left">
<a ng-click="cancelSend(sendForm)" class="button warning m0" ng-show="!!$root.merchant">
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>
</form>
</div>
</div>
</div><!-- end of row -->
<div class="row m20b" ng-show="$root.alternativeConversionRate > 0">
<div class="large-12 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">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}} <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">
<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>
</div>