From 31be7b71a12a829f35c3127656ad2e339bc53334 Mon Sep 17 00:00:00 2001 From: Gabriel Masclef Date: Thu, 9 Nov 2017 15:27:20 -0300 Subject: [PATCH 1/3] Feat: Confirm view --- src/assets/img/icon-bitcoin-small.svg | 16 ++++ src/pages/send/confirm/confirm.html | 101 ++++++++++++++++++++------ src/pages/send/confirm/confirm.scss | 61 ++++++++++++++++ src/pages/send/confirm/confirm.ts | 12 ++- src/theme/overrides.scss | 2 + 5 files changed, 168 insertions(+), 24 deletions(-) create mode 100644 src/assets/img/icon-bitcoin-small.svg diff --git a/src/assets/img/icon-bitcoin-small.svg b/src/assets/img/icon-bitcoin-small.svg new file mode 100644 index 000000000..23477ff69 --- /dev/null +++ b/src/assets/img/icon-bitcoin-small.svg @@ -0,0 +1,16 @@ + + + + Bitcoin_Symbol + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/send/confirm/confirm.html b/src/pages/send/confirm/confirm.html index f4a3287aa..03688c6b9 100644 --- a/src/pages/send/confirm/confirm.html +++ b/src/pages/send/confirm/confirm.html @@ -1,18 +1,14 @@ - {{ 'Confirm' | translate }} - - -
- + Sending Sending maximum amount
@@ -21,34 +17,97 @@
{{tx.alternativeAmountStr || '...'}}
 - -
- To -
-
{{address}}
+ + Payment Expires: + {{remainingTimeStr}} + Expired + + + To +
+ + +
+ + + {{tx.toAddress}} + {{tx.name}} +
+ +
+ + + {{tx.paypro.domain || tx.paypro.toAddress}} + {{tx.name}}
+ +
+ +
+ + + {{tx.toAddress}} + {{tx.name}} +
+
+ +
+ + {{tx.name}} + {{tx.toAddress}} +
- - - From + + + + + + +
+ + {{noWalletMessage}} + +
+ + + Send from - Send from - {{item.name}} +
{{item.name}}
 -
+ + - +
+ +
\ No newline at end of file diff --git a/src/pages/send/confirm/confirm.scss b/src/pages/send/confirm/confirm.scss index f586a4372..ca7373a63 100644 --- a/src/pages/send/confirm/confirm.scss +++ b/src/pages/send/confirm/confirm.scss @@ -1,3 +1,64 @@ page-confirm { + .item-md { + padding: 0rem; + } + ion-label { + padding: 1rem 1rem 1rem 3rem; + } + span.label { + color: color($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($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($colors, light-grey); + } + } + .icon-bitcoin { + margin-right: 1rem; + } + } + } + + .wallet-selector { + ion-item { + cursor: pointer; + } + } } diff --git a/src/pages/send/confirm/confirm.ts b/src/pages/send/confirm/confirm.ts index 8a2b4100a..7159a01d5 100644 --- a/src/pages/send/confirm/confirm.ts +++ b/src/pages/send/confirm/confirm.ts @@ -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) { diff --git a/src/theme/overrides.scss b/src/theme/overrides.scss index 110a864a5..78ccfad18 100644 --- a/src/theme/overrides.scss +++ b/src/theme/overrides.scss @@ -18,5 +18,7 @@ $colors: ( success: #7BC94D, light: #f4f4f4, dark: #222, + light-grey: #9B9B9B, + labels: #6C6C6E, ); From 455b38821f0e9a92c08655268d93c5eb24e2feb7 Mon Sep 17 00:00:00 2001 From: Gabriel Masclef Date: Thu, 9 Nov 2017 16:12:48 -0300 Subject: [PATCH 2/3] Fix: global colors --- src/pages/send/confirm/confirm.scss | 6 +++--- src/theme/global.scss | 5 +++++ src/theme/overrides.scss | 2 -- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/pages/send/confirm/confirm.scss b/src/pages/send/confirm/confirm.scss index ca7373a63..7a7fc2f05 100644 --- a/src/pages/send/confirm/confirm.scss +++ b/src/pages/send/confirm/confirm.scss @@ -6,7 +6,7 @@ page-confirm { padding: 1rem 1rem 1rem 3rem; } span.label { - color: color($colors, labels); + color: color($global-colors, labels); margin-bottom: 0.5rem; } .sending-label { @@ -29,7 +29,7 @@ page-confirm { } .alternative { margin-top: 1rem; - color: color($colors, light-grey); + color: color($global-colors, light-grey); } } @@ -47,7 +47,7 @@ page-confirm { width: 35px !important; background-color: color($colors, primary); &.disabled { - background-color: color($colors, light-grey); + background-color: color($global-colors, light-grey); } } .icon-bitcoin { diff --git a/src/theme/global.scss b/src/theme/global.scss index b9cf04828..cb9ebe429 100644 --- a/src/theme/global.scss +++ b/src/theme/global.scss @@ -2,6 +2,11 @@ // Position // -------------------------------------------------- +$global-colors: ( + light-grey: #9B9B9B, + labels: #6C6C6E, +); + .bottom-absolute { width: 100%; position: absolute; diff --git a/src/theme/overrides.scss b/src/theme/overrides.scss index 78ccfad18..110a864a5 100644 --- a/src/theme/overrides.scss +++ b/src/theme/overrides.scss @@ -18,7 +18,5 @@ $colors: ( success: #7BC94D, light: #f4f4f4, dark: #222, - light-grey: #9B9B9B, - labels: #6C6C6E, ); From 1acb1206b621d2476bc1647b34ff60c07f84111c Mon Sep 17 00:00:00 2001 From: Gabriel Masclef Date: Thu, 9 Nov 2017 16:16:13 -0300 Subject: [PATCH 3/3] loading spinner in ongoing process --- .../on-going-process/on-going-process.ts | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/providers/on-going-process/on-going-process.ts b/src/providers/on-going-process/on-going-process.ts index ccb5d4774..839fba31b 100644 --- a/src/providers/on-going-process/on-going-process.ts +++ b/src/providers/on-going-process/on-going-process.ts @@ -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(); + } } -} +} \ No newline at end of file