mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #7095 from Gamboster/feat/confirmView
Feat: Confirm view
This commit is contained in:
Gabriel Edgardo Bazán
GitHub
commit
481bc60134
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Bitcoin_Symbol</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.8">
|
||||
<g id="Address-(Bitcoin)" transform="translate(-11.000000, -12.000000)" fill="#5D5D5D">
|
||||
<g id="Items/Bitcoin-Address">
|
||||
<g id="Items/Bitcoin-Address-Copy">
|
||||
<path d="M19.6342548,15.1610219 L20.1628282,12.9767055 L18.8173687,12.6561808 L18.3048127,14.7930121 C17.9484261,14.7099131 17.5880351,14.6268141 17.2316485,14.5555864 L17.7442045,12.4187551 L16.3827276,12.0982304 L15.8541542,14.2825468 C15.5658415,14.2152762 15.2735244,14.163834 14.9852116,14.0965634 L13.1312004,13.6573258 L12.7908312,15.0700087 C12.7908312,15.0700087 13.7959215,15.2876489 13.7598824,15.3074344 C14.3044732,15.4419756 14.4085861,15.7941571 14.3885644,16.0632396 L13.7919172,18.5522523 C13.8279562,18.5680807 13.8760084,18.5680807 13.9280648,18.6036945 C13.8760084,18.5878661 13.8439736,18.5878661 13.7919172,18.5720378 L12.975031,22.0542813 C12.9069572,22.2204793 12.7347704,22.457905 12.3623664,22.374806 C12.3783838,22.3906344 11.3732935,22.1373803 11.3732935,22.1373803 L10.7366028,23.6687761 L12.4905054,24.0723998 C12.8148572,24.1554988 13.1392091,24.2227694 13.4435392,24.3098255 L12.9149658,26.5139274 L14.2604254,26.8344521 L14.7889988,24.6501356 C15.1654071,24.749063 15.5217937,24.8361191 15.8621629,24.9192181 L15.3335895,27.0877061 L16.6790491,27.4082308 L17.2076225,25.2041289 C19.5061158,25.6077526 21.2239794,25.4217691 21.9207352,23.3522085 C22.4813433,21.7020999 21.8686787,20.7603113 20.6433495,20.1390474 C21.5403225,19.9372355 22.1890262,19.3634568 22.3572087,18.1881996 C22.5774476,16.5737048 21.336101,15.7308436 19.6342548,15.1610219 Z M19.3299247,22.4737334 C18.937499,24.123842 16.1144366,23.2651524 15.2094549,23.0475122 L15.9062107,20.1192619 C16.8272098,20.3408592 19.7383678,20.7444829 19.3299247,22.4737334 L19.3299247,22.4737334 Z M19.7023287,18.1881996 C19.3459421,19.6839814 16.9953922,18.9637902 16.2305626,18.7778067 L16.8792663,16.122596 C17.6280786,16.3046223 20.078737,16.625147 19.7023287,18.1881996 L19.7023287,18.1881996 Z" id="Bitcoin_Symbol" transform="translate(16.559574, 19.753231) rotate(-13.000000) translate(-16.559574, -19.753231) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -1,18 +1,14 @@
|
|||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-title>{{ 'Confirm' | translate }}</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item *ngIf="!criticalError">
|
||||
<!--<ion-icon ios="ios-arrow-up" md="md-arrow-up" item-left></ion-icon>-->
|
||||
<div class="sending-label">
|
||||
<img src="assets/img/icon-tx-sent-outline.svg">
|
||||
<img class="sending-img" src="assets/img/icon-tx-sent-outline.svg">
|
||||
<span translate *ngIf="!tx.sendMax">Sending</span>
|
||||
<span translate *ngIf="tx.sendMax">Sending maximum amount</span>
|
||||
</div>
|
||||
|
|
@ -21,34 +17,97 @@
|
|||
<div class="alternative">{{tx.alternativeAmountStr || '...'}}</div>
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item *ngIf="!criticalError">
|
||||
<div [hidden]="!wallet">
|
||||
<span translate>To</span>
|
||||
<div *ngIf="address">
|
||||
<div>{{address}}</div>
|
||||
<ion-item *ngIf="tx.paypro">
|
||||
<span class="label" translate>Payment Expires:</span>
|
||||
<ion-note *ngIf="!paymentExpired" item-end>{{remainingTimeStr}}</ion-note>
|
||||
<ion-note *ngIf="paymentExpired" [ngStyle]="{'color': 'red'}" translate item-end>Expired</ion-note>
|
||||
</ion-item>
|
||||
<ion-item class="container-to" [hidden]="criticalError">
|
||||
<span class="label">To</span>
|
||||
<div class="payment-proposal-to" *ngIf="!recipientType">
|
||||
<img class="icon-bitcoin" src="assets/img/icon-bitcoin-small.svg">
|
||||
|
||||
<div *ngIf="!tx.paypro">
|
||||
<!-- TODO: copy to clipboard -->
|
||||
<!--TODO: <contact *ngIf="tx.toAddress && !tx.name" address="{{tx.toAddress}}"></contact>-->
|
||||
<span *ngIf="!tx.name">{{tx.toAddress}}</span>
|
||||
<span *ngIf="tx.name">{{tx.name}}</span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="tx.paypro" (click)="openPPModal(tx.paypro)">
|
||||
<ion-icon [hidden]="!tx.paypro.verified || !tx.paypro.caTrusted" [ngStyle]="{'color': 'green'}" ios="ios-lock" md="md-lock"></ion-icon>
|
||||
<ion-icon [hidden]="tx.paypro.caTrusted" [ngStyle]="{'color': 'red'}" ios="ios-unlock" md="md-unlock"></ion-icon>
|
||||
<span [hidden]="tx.name">{{tx.paypro.domain || tx.paypro.toAddress}}</span>
|
||||
<span [hidden]="!tx.name">{{tx.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wallet" *ngIf="recipientType == 'wallet'">
|
||||
<img src="assets/img/icon-wallet.svg" class="icon-wallet" [ngClass]="{'wallet-background-color-default': !color}" [ngStyle]="{'background-color': color}"
|
||||
/>
|
||||
<div>
|
||||
<!-- TODO: copy to clipboard -->
|
||||
<!--TODO: <contact ng-if="tx.toAddress && !tx.name" address="{{tx.toAddress}}"></contact>-->
|
||||
<span *ngIf="!tx.name">{{tx.toAddress}}</span>
|
||||
<span *ngIf="tx.name">{{tx.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="recipientType == 'contact'" (click)="toggleAddress()">
|
||||
<!--TODO: <gravatar class="send-gravatar" name="{{tx.name}}" height="30" width="30" email="{{toEmail}}"></gravatar> -->
|
||||
<span *ngIf="tx.name && !showAddress">{{tx.name}}</span>
|
||||
<span *ngIf="tx.name && showAddress">{{tx.toAddress}}</span>
|
||||
</div>
|
||||
</ion-item>
|
||||
<ion-item *ngIf="!criticalError">
|
||||
<a [hidden]="!wallet" (click)="showWalletSelector()">
|
||||
<span translate>From</span>
|
||||
<button class="container-from" ion-item [hidden]="!wallet" (click)="showWalletSelector()">
|
||||
<span class="label" translate>From</span>
|
||||
<div>
|
||||
<div class="wallet" *ngIf="wallet">
|
||||
<img class="icon-wallet" src="assets/img/icon-wallet.svg"/>
|
||||
<div>{{wallet.name}}</div>
|
||||
</div>
|
||||
<div class="wallet" *ngIf="!wallet">
|
||||
<img src="assets/img/icon-wallet.svg"/>
|
||||
<img class="icon-wallet disabled" src="assets/img/icon-wallet.svg"/>
|
||||
<div>...</div>
|
||||
</div>
|
||||
</a>
|
||||
</ion-item>
|
||||
<div *ngIf="walletSelector">
|
||||
<ion-list>
|
||||
<ion-label>Send from</ion-label>
|
||||
<ion-item *ngFor="let item of wallets" (click)="onWalletSelect(item)">
|
||||
{{item.name}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button ion-item class="item item-icon-right" *ngIf="wallet && showFee" (click)="chooseFeeLevel(tx, wallet)">
|
||||
<span class="label">{{'Fee:' | translate}} {{tx.feeLevelName | translate}}</span>
|
||||
<span>{{tx.txp[wallet.id].feeStr || '...'}}</span>
|
||||
<span>
|
||||
<span>{{tx.txp[wallet.id].alternativeFeeStr || '...'}}
|
||||
<span class="fee-rate" *ngIf="tx.txp[wallet.id].feeRatePerStr"> ·
|
||||
<ion-icon ios="ios-alert" md="md-alert" [hidden]="!tx.txp[wallet.id].feeToHigh"></ion-icon>
|
||||
<span class="fee-rate" [ngClass]="{'warn':tx.txp[wallet.id].feeToHigh}" translate> {{tx.txp[wallet.id].feeRatePerStr}} of the sending amount </span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button ion-item *ngIf="wallet" (click)="showDescriptionPopup(tx)">
|
||||
<span class="label" translate>Add Memo</span>
|
||||
<span>{{tx.description}}</span>
|
||||
</button>
|
||||
|
||||
<div [hidden]="!noWalletMessage">
|
||||
<span class="badge badge-energized">
|
||||
<ion-badge>{{noWalletMessage}}</ion-badge>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ion-item class="wallet-selector" *ngIf="walletSelector">
|
||||
<span class="label" translate>Send from</span>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let item of wallets" (click)="onWalletSelect(item)">
|
||||
<div>{{item.name}}</div>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<button ion-button full (click)="approve(tx, wallet, statusChangeHandler)" [disabled]="!wallet">Send</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
<div class="bottom-absolute">
|
||||
<button ion-button full (click)="approve(tx, wallet, statusChangeHandler)" [disabled]="!wallet">Click to send</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
|
@ -1,3 +1,64 @@
|
|||
page-confirm {
|
||||
.item-md {
|
||||
padding: 0rem;
|
||||
}
|
||||
ion-label {
|
||||
padding: 1rem 1rem 1rem 3rem;
|
||||
}
|
||||
span.label {
|
||||
color: color($global-colors, labels);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.sending-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.sending-img {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
span {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
.amount-label {
|
||||
padding-top: 2rem;
|
||||
.amount {
|
||||
font-size: 3.5rem;
|
||||
.unit {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
.alternative {
|
||||
margin-top: 1rem;
|
||||
color: color($global-colors, light-grey);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin row-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.container-to, .container-from {
|
||||
.wallet, .payment-proposal-to {
|
||||
@include row-flex;
|
||||
.icon-wallet {
|
||||
margin-right: 1rem;
|
||||
width: 35px !important;
|
||||
background-color: color($colors, primary);
|
||||
&.disabled {
|
||||
background-color: color($global-colors, light-grey);
|
||||
}
|
||||
}
|
||||
.icon-bitcoin {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wallet-selector {
|
||||
ion-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ export class ConfirmPage {
|
|||
public toAddress: string;
|
||||
public amount: string;
|
||||
public coin: string;
|
||||
public recipientType: string;
|
||||
|
||||
public countDown = null;
|
||||
public CONFIRM_LIMIT_USD: number = 20;
|
||||
|
|
@ -50,6 +51,7 @@ export class ConfirmPage {
|
|||
public paymentExpired: boolean;
|
||||
public remainingTimeStr: string;
|
||||
public sendStatus: string;
|
||||
public showFee: boolean;
|
||||
|
||||
// Config Related values
|
||||
public config: any;
|
||||
|
|
@ -91,6 +93,7 @@ export class ConfirmPage {
|
|||
this.unitDecimals = this.walletConfig.settings.unitDecimals;
|
||||
this.satToUnit = 1 / this.unitToSatoshi;
|
||||
this.configFeeLevel = this.walletConfig.settings.feeLevel ? this.walletConfig.settings.feeLevel : 'normal';
|
||||
this.showFee = false;
|
||||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
|
|
@ -99,6 +102,7 @@ export class ConfirmPage {
|
|||
this.toAddress = this.navParams.data.toAddress;
|
||||
this.amount = this.navParams.data.amount;
|
||||
this.coin = this.navParams.data.coin;
|
||||
this.recipientType = this.navParams.data.recipientType;
|
||||
}
|
||||
|
||||
ionViewDidEnter() {
|
||||
|
|
@ -243,8 +247,6 @@ export class ConfirmPage {
|
|||
/* sets a wallet on the UI, creates a TXPs for that wallet */
|
||||
|
||||
private setWallet(wallet: any, tx: any): void {
|
||||
console.log("&&&& wallet", wallet);
|
||||
console.log("&&&& tx", tx);
|
||||
this.wallet = wallet;
|
||||
|
||||
// If select another wallet
|
||||
|
|
@ -389,7 +391,9 @@ export class ConfirmPage {
|
|||
txp.feeToHigh = per > this.FEE_TOO_HIGH_LIMIT_PER;
|
||||
|
||||
tx.txp[wallet.id] = txp;
|
||||
this.tx = tx;
|
||||
this.logger.debug('Confirm. TX Fully Updated for wallet:' + wallet.id, tx);
|
||||
this.showFee = true;
|
||||
return resolve();
|
||||
}).catch((err: any) => {
|
||||
return reject(err);
|
||||
|
|
@ -485,7 +489,7 @@ export class ConfirmPage {
|
|||
txp.feePerKb = tx.feeRate;
|
||||
} else txp.feeLevel = tx.feeLevel;
|
||||
}
|
||||
txp.feeLevel = 'normal';
|
||||
|
||||
txp.message = tx.description;
|
||||
|
||||
if (tx.paypro) {
|
||||
|
|
@ -513,7 +517,9 @@ export class ConfirmPage {
|
|||
}
|
||||
|
||||
public onWalletSelect(wallet: any): void {
|
||||
this.showFee = false;
|
||||
this.setWallet(wallet, this.tx);
|
||||
this.walletSelector = false;
|
||||
}
|
||||
|
||||
public showDescriptionPopup(tx) {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,27 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { LoadingController } from 'ionic-angular';
|
||||
|
||||
@Injectable()
|
||||
export class OnGoingProcessProvider {
|
||||
|
||||
constructor() {
|
||||
private loading: any;
|
||||
constructor(
|
||||
private loadingCtrl: LoadingController,
|
||||
) {
|
||||
console.log('Hello OnGoingProcessProvider Provider');
|
||||
}
|
||||
|
||||
public set(processName: string, isOn: boolean, customHandler?: any) {
|
||||
console.log('TODO: OnGoingProcessProvider set()...');
|
||||
if (isOn) {
|
||||
this.loading = this.loadingCtrl.create({
|
||||
content: processName
|
||||
});
|
||||
this.loading.present();
|
||||
|
||||
}
|
||||
else {
|
||||
this.loading.dismiss();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,6 +2,11 @@
|
|||
// Position
|
||||
// --------------------------------------------------
|
||||
|
||||
$global-colors: (
|
||||
light-grey: #9B9B9B,
|
||||
labels: #6C6C6E,
|
||||
);
|
||||
|
||||
.bottom-absolute {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in New Issue