mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #139 from gabrielbazan7/ref/txpdetails
refactor txp details
This commit is contained in:
Gustavo Maximiliano Cortez
GitHub
commit
52abe76ed1
|
|
@ -1,43 +1,35 @@
|
|||
<ion-modal-view ng-controller="txpDetailsController">
|
||||
<ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color':color}">
|
||||
<ion-modal-view id="txp-details" ng-controller="txpDetailsController" ng-init="init()">
|
||||
<ion-header-bar align-title="center" class="bar-royal">
|
||||
<button class="button button-clear" ng-click="close()">
|
||||
Close
|
||||
</button>
|
||||
<div class="title" translate>
|
||||
Payment Proposal
|
||||
</div>
|
||||
<button class="button button-clear" ng-click="reject()" ng-disabled="loading" ng-if="isShared && tx.pendingForUs">
|
||||
Reject
|
||||
</button>
|
||||
</ion-header-bar>
|
||||
|
||||
<ion-content ng-init="updateCopayerList()">
|
||||
<div class="payment-proposal-head" ng-style="{'background-color':color}">
|
||||
<div class="size-36">{{tx.amountStr}}</div>
|
||||
<div class="size-14 text-light" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
|
||||
<i class="icon ion-ios-arrow-thin-down"></i>
|
||||
<span class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
|
||||
<contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b size-14" address="{{tx.toAddress}}"></contact>
|
||||
<span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>
|
||||
</span>
|
||||
<ion-content ng-init="updateCopayerList()" ng-class="{'bottom': tx.pendingForUs && canSign}">
|
||||
<div class="list">
|
||||
<div class="item head">
|
||||
<div class="sending-label">
|
||||
<i class="icon ion-arrow-up-c"></i>
|
||||
<span translate>Sending</span>
|
||||
</div>
|
||||
<div class="amount-label">
|
||||
<div class="amount">{{tx.amountStr}}</div>
|
||||
<div class="alternative" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row" ng-if="tx.removed">
|
||||
<div class="column m20t text-center text-warning size-12" translate>
|
||||
The payment was removed by creator
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-bar" ng-if="tx.pendingForUs">
|
||||
<button class="button button-assertive button-block" ng-click="reject()" ng-disabled="loading" ng-show="isShared">
|
||||
<i class="fi-x"></i>
|
||||
<span translate>Reject</span>
|
||||
</button>
|
||||
<button class="button button-balanced button-block" ng-click="sign()" ng-style="{'background-color':color}" ng-disabled="loading || paymentExpired" ng-show="canSign">
|
||||
<i class="fi-check"></i>
|
||||
<span translate>Accept</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-show="tx.status != 'pending'">
|
||||
<div ng-show="tx.status=='accepted' && !tx.isGlidera">
|
||||
<div class="m10b" translate>Payment accepted, but not yet broadcasted</div>
|
||||
|
|
@ -54,44 +46,55 @@
|
|||
<div class="assertive" ng-show="tx.status=='rejected'" translate>Payment Rejected</div>
|
||||
</div>
|
||||
|
||||
<ul class="list">
|
||||
<div class="item item-divider" translate>Details</div>
|
||||
<li class="item" ng-show="tx.message">
|
||||
<span class="text-gray" translate>Description</span>
|
||||
<span class="right">{{tx.message}}</span>
|
||||
</li>
|
||||
<div class="item" ng-show="!currentSpendUnconfirmed && tx.hasUnconfirmedInputs">
|
||||
<span class="text-warning" translate>Warning: this transaction has unconfirmed inputs</span>
|
||||
</div>
|
||||
|
||||
<li ng-show="tx.hasMultiplesOutputs" class="item" ng-click="showMultiplesOutputs = !showMultiplesOutputs">
|
||||
<div class="info">
|
||||
<div class="item">
|
||||
<span translate>To</span>
|
||||
<span class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
|
||||
<i class="icon ion-social-bitcoin"></i>
|
||||
<contact ng-if="!tx.hasMultiplesOutputs" class="enable_text_select ellipsis" address="{{tx.toAddress}}"></contact>
|
||||
<span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div ng-show="tx.hasMultiplesOutputs" class="item" ng-click="showMultiplesOutputs = !showMultiplesOutputs">
|
||||
<span class="text-gray" translate>Recipients</span>
|
||||
<span class="right">{{tx.recipientCount}}
|
||||
<i ng-show="showMultiplesOutputs" class="icon ion-ios-arrow-up"></i>
|
||||
<i ng-show="!showMultiplesOutputs" class="icon ion-ios-arrow-up"></i>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div class="item" ng-show="tx.hasMultiplesOutputs && showMultiplesOutputs"
|
||||
ng-repeat="output in tx.outputs" ng-include="'views/includes/output.html'">
|
||||
</div>
|
||||
|
||||
<li class="item">
|
||||
<span class="text-gray" translate>Fee</span>
|
||||
<span class="right">{{tx.feeStr}}</span>
|
||||
</li>
|
||||
|
||||
<li class="item">
|
||||
<span class="text-gray" translate>Time</span>
|
||||
<span class="right">
|
||||
<time>{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
|
||||
<div class="item">
|
||||
<span translate>From</span>
|
||||
<span>
|
||||
{{wallet.name}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span translate>Created by</span>
|
||||
<span>
|
||||
{{tx.creatorName}} <time>{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
|
||||
</span>
|
||||
</div>
|
||||
<div class="item" ng-show="tx.message">
|
||||
<span translate>Memo</span>
|
||||
<span>
|
||||
{{tx.message}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span translate>Fee</span>
|
||||
<span>
|
||||
{{tx.feeStr}}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li class="item">
|
||||
<span class="text-gray" translate>Created by</span>
|
||||
<span class="right">{{tx.creatorName}}</span>
|
||||
</li>
|
||||
|
||||
<div class="item" ng-show="!currentSpendUnconfirmed && tx.hasUnconfirmedInputs">
|
||||
<span class="text-warning" translate>Warning: this transaction has unconfirmed inputs</span>
|
||||
</div>
|
||||
|
||||
<div ng-if="tx.paypro">
|
||||
|
|
@ -123,23 +126,28 @@
|
|||
<span class="db">{{tx.paypro.pr.pd.memo}}</span>
|
||||
</li>
|
||||
</div>
|
||||
<div ng-if="actionList[0]">
|
||||
<div class="item item-divider" translate>Timeline</div>
|
||||
|
||||
<div ng-if="tx.actions[0] && !txRejected && !txBroadcasted">
|
||||
<div class="item item-divider">
|
||||
<div class="right size-12 text-gray m10r">
|
||||
{{tx.requiredSignatures}}/{{tx.walletN}}
|
||||
<div class="item" ng-class="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" ng-repeat="a in actionList track by $index">
|
||||
<div class="row">
|
||||
<div class="col col-10">
|
||||
<span id="timeline-icon">{{$index + 1}}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{a.description}}</div>
|
||||
<div>
|
||||
<span>{{a.by}}</span>
|
||||
<span class="item-note">
|
||||
<time>{{ a.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span translate>Participants</span>
|
||||
</div>
|
||||
<li class="item" ng-repeat="ac in tx.actions">
|
||||
<span class="item-note">
|
||||
<i ng-if="ac.type == 'reject'" class="icon ion-ios-close-empty"></i>
|
||||
<i ng-if="ac.type == 'accept'" class="icon ion-ios-checkmark-empty"></i>
|
||||
</span>
|
||||
{{ac.copayerName}} <span ng-if="ac.copayerId == copayerId">({{'Me'|translate}})</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m20t" ng-if="tx.canBeRemoved || (tx.status == 'accepted' && !tx.broadcastedOn)">
|
||||
<div class="size-12 padding" ng-show="!tx.isGlidera && isShared" translate>
|
||||
* A payment proposal can be deleted if 1) you are the creator, and no other copayer has signed, or 2) 24 hours have passed since the proposal was created.
|
||||
|
|
@ -150,4 +158,13 @@
|
|||
</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
<div class="accept-slide" ng-disabled="loading || paymentExpired" ng-if="tx.pendingForUs && canSign && !hideSlider">
|
||||
<ion-slides options="options" slider="data.slider">
|
||||
<ion-slide-page>
|
||||
</ion-slide-page>
|
||||
<ion-slide-page>
|
||||
<div><h1>Slide to accept</h1><i class="icon-arrow-right3 size-24 right"></i></div>
|
||||
</ion-slide-page>
|
||||
</ion-slides>
|
||||
</div>
|
||||
</ion-modal-view>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,75 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copayApp.controllers').controller('txpDetailsController', function($scope, $rootScope, $timeout, $interval, $ionicModal, ongoingProcess, platformInfo, $ionicScrollDelegate, txFormatService, fingerprintService, bwcError, gettextCatalog, lodash, walletService, popupService) {
|
||||
angular.module('copayApp.controllers').controller('txpDetailsController', function($scope, $rootScope, $timeout, $interval, $ionicModal, ongoingProcess, platformInfo, $ionicScrollDelegate, txFormatService, fingerprintService, bwcError, gettextCatalog, lodash, walletService, popupService) {
|
||||
var self = $scope.self;
|
||||
var tx = $scope.tx;
|
||||
var copayers = $scope.copayers;
|
||||
var isGlidera = $scope.isGlidera;
|
||||
var GLIDERA_LOCK_TIME = 6 * 60 * 60;
|
||||
var now = Math.floor(Date.now() / 1000);
|
||||
$scope.loading = null;
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.loading = null;
|
||||
$scope.hideSlider = false;
|
||||
$scope.copayerId = $scope.wallet.credentials.copayerId;
|
||||
$scope.isShared = $scope.wallet.credentials.n > 1;
|
||||
$scope.canSign = $scope.wallet.canSign() || $scope.wallet.isPrivKeyExternal();
|
||||
$scope.color = $scope.wallet.color;
|
||||
$scope.data = {};
|
||||
|
||||
$scope.copayerId = $scope.wallet.credentials.copayerId;
|
||||
$scope.isShared = $scope.wallet.credentials.n > 1;
|
||||
$scope.canSign = $scope.wallet.canSign() || $scope.wallet.isPrivKeyExternal();
|
||||
$scope.color = $scope.wallet.color;
|
||||
initActionList();
|
||||
}
|
||||
|
||||
function initActionList() {
|
||||
$scope.actionList = [];
|
||||
|
||||
if (!$scope.isShared) return;
|
||||
|
||||
var actionDescriptions = {
|
||||
created: gettextCatalog.getString('Proposal Created'),
|
||||
accept: gettextCatalog.getString('Accepted'),
|
||||
reject: gettextCatalog.getString('Rejected'),
|
||||
broadcasted: gettextCatalog.getString('Broadcasted'),
|
||||
};
|
||||
|
||||
$scope.actionList.push({
|
||||
type: 'created',
|
||||
time: tx.createdOn,
|
||||
description: actionDescriptions['created'],
|
||||
by: tx.creatorName
|
||||
});
|
||||
|
||||
lodash.each(tx.actions, function(action) {
|
||||
$scope.actionList.push({
|
||||
type: action.type,
|
||||
time: action.createdOn,
|
||||
description: actionDescriptions[action.type],
|
||||
by: action.copayerName
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$scope.options = {
|
||||
loop: false,
|
||||
effect: 'flip',
|
||||
speed: 500,
|
||||
pagination: false,
|
||||
initialSlide: 1
|
||||
}
|
||||
|
||||
$scope.$on("$ionicSlides.sliderInitialized", function(event, data) {
|
||||
$scope.slider = data.slider;
|
||||
});
|
||||
|
||||
$scope.$on("$ionicSlides.slideChangeStart", function(event, data) {
|
||||
$scope.data.index = data.slider.activeIndex;
|
||||
if ($scope.data.index == 0) {
|
||||
$scope.hideSlider = true;
|
||||
$scope.sign();
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {});
|
||||
|
||||
checkPaypro();
|
||||
|
||||
|
|
@ -33,9 +89,9 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
|
|||
$scope.sign = function() {
|
||||
$scope.loading = true;
|
||||
walletService.publishAndSign($scope.wallet, $scope.tx, function(err, txp) {
|
||||
$scope.$emit('UpdateTx');
|
||||
if (err) return setSendError(err);
|
||||
$scope.close();
|
||||
$scope.$emit('UpdateTx');
|
||||
if (err) return setSendError(err);
|
||||
$scope.close();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -59,6 +59,27 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
|
|||
}
|
||||
|
||||
var setPendingTxps = function(txps) {
|
||||
|
||||
/* Uncomment to test multiple outputs */
|
||||
|
||||
// var txp = {
|
||||
// message: 'test multi-output',
|
||||
// fee: 1000,
|
||||
// createdOn: new Date() / 1000,
|
||||
// outputs: [],
|
||||
// wallet: wallet
|
||||
// };
|
||||
//
|
||||
// function addOutput(n) {
|
||||
// txp.outputs.push({
|
||||
// amount: 600,
|
||||
// toAddress: '2N8bhEwbKtMvR2jqMRcTCQqzHP6zXGToXcK',
|
||||
// message: 'output #' + (Number(n) + 1)
|
||||
// });
|
||||
// };
|
||||
// lodash.times(15, addOutput);
|
||||
// txps.push(txp);
|
||||
|
||||
if (!txps) {
|
||||
$scope.txps = [];
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -15,9 +15,10 @@ angular.module('copayApp.services').factory('txpModalService', function(configSe
|
|||
var scope = $rootScope.$new(true);
|
||||
scope.tx = tx;
|
||||
scope.wallet = tx.wallet;
|
||||
scope.copayers = tx.wallet.copayers;
|
||||
scope.copayers = tx.wallet ? tx.wallet.copayers : null;
|
||||
scope.isGlidera = glideraActive;
|
||||
scope.currentSpendUnconfirmed = config.spendUnconfirmed;
|
||||
// scope.tx.hasMultiplesOutputs = true; // Uncomment to test multiple outputs
|
||||
|
||||
$ionicModal.fromTemplateUrl('views/modals/txp-details.html', {
|
||||
scope: scope
|
||||
|
|
|
|||
|
|
@ -377,27 +377,6 @@ ul.wallet-selection.wallets {
|
|||
color: #4A90E2;
|
||||
}
|
||||
|
||||
.payment-proposal-head {
|
||||
color: #fff;
|
||||
padding: 10px 10px 20px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-proposal-to {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
i {
|
||||
position: inherit;
|
||||
left: 25px;
|
||||
padding-right: 10px;
|
||||
border-right: 1px solid;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
|
|
@ -995,3 +974,4 @@ input[type=number] {
|
|||
@import "views/includes/wallets";
|
||||
@import "views/includes/modals/modals";
|
||||
@import "views/includes/tx-details";
|
||||
@import "views/includes/txp-details";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
#txp-details{
|
||||
.bottom {
|
||||
bottom: 100px;
|
||||
}
|
||||
.head {
|
||||
padding-bottom: 55px;
|
||||
.sending-label{
|
||||
line-height: 70px;
|
||||
font-size: 25px;
|
||||
i {
|
||||
margin-left: 20px;
|
||||
}
|
||||
span {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.amount-label{
|
||||
margin-left: 20px;
|
||||
line-height: 30px;
|
||||
.amount{
|
||||
font-size: 36px;
|
||||
}
|
||||
.alternative{
|
||||
font-size: 18px;
|
||||
font-weight: 200;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info{
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
.payment-proposal-to {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
background-color: #f5f5f5;
|
||||
margin-top: 10px;
|
||||
i {
|
||||
color: grey;
|
||||
position: inherit;
|
||||
left: 25px;
|
||||
vertical-align: super;
|
||||
padding-right: 10px;
|
||||
border-right: 1px solid;
|
||||
border-color: grey;
|
||||
font-size: 20px;
|
||||
}
|
||||
contact {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 3px;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.accept-slide {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue