From 3b5d912bc78624b3d1b1aa6c4307cf6f38cda561 Mon Sep 17 00:00:00 2001 From: Gabriel Masclef Date: Thu, 4 Jan 2018 12:29:49 -0300 Subject: [PATCH 1/4] Feat: wallet selector --- src/app/app.component.ts | 6 +- src/app/app.html | 1 + src/app/app.module.ts | 2 + .../wallet-selector/wallet-selector.html | 82 +++++++++++++++++++ .../wallet-selector/wallet-selector.scss | 63 ++++++++++++++ .../wallet-selector/wallet-selector.ts | 61 ++++++++++++++ .../amazon/buy-amazon/buy-amazon.ts | 26 ++---- .../coinbase/buy-coinbase/buy-coinbase.ts | 26 ++---- .../coinbase/sell-coinbase/sell-coinbase.ts | 26 ++---- .../glidera/buy-glidera/buy-glidera.ts | 27 ++---- .../glidera/sell-glidera/sell-glidera.ts | 32 ++------ .../buy-mercado-libre/buy-mercado-libre.ts | 26 ++---- .../shapeshift-shift/shapeshift-shift.html | 6 +- .../shapeshift-shift/shapeshift-shift.ts | 28 ++----- src/pages/paper-wallet/paper-wallet.ts | 26 ++---- src/pages/receive/receive.html | 6 +- src/pages/receive/receive.scss | 5 -- src/pages/receive/receive.ts | 27 ++---- src/pages/send/confirm/confirm.html | 2 +- src/pages/send/confirm/confirm.ts | 32 ++------ src/providers/profile/profile.ts | 2 +- 21 files changed, 287 insertions(+), 225 deletions(-) create mode 100644 src/pages/includes/wallet-selector/wallet-selector.html create mode 100644 src/pages/includes/wallet-selector/wallet-selector.scss create mode 100644 src/pages/includes/wallet-selector/wallet-selector.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 869d18b20..502b66527 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -28,7 +28,8 @@ import { DisclaimerPage } from '../pages/onboarding/disclaimer/disclaimer'; providers: [TouchIdProvider] }) export class CopayApp { - rootPage: any; + + public rootPage: any; constructor( private platform: Platform, @@ -44,9 +45,8 @@ export class CopayApp { private amazonProvider: AmazonProvider, private bitPayCardProvider: BitPayCardProvider, private mercadoLibreProvider: MercadoLibreProvider, - private shapeshiftProvider: ShapeshiftProvider, + private shapeshiftProvider: ShapeshiftProvider ) { - this.initializeApp(); } diff --git a/src/app/app.html b/src/app/app.html index 7b88c9699..6075dbc1e 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1 +1,2 @@ + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2f0ce9220..755ec2d34 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -87,6 +87,7 @@ import { GravatarPage } from '../pages/includes/gravatar/gravatar'; import { TxpPage } from '../pages/includes/txp/txp'; import { WalletItemPage } from '../pages/includes/wallet-item/wallet-item'; import { WalletActivityPage } from '../pages/includes/wallet-activity/wallet-activity'; +import { WalletSelectorPage } from '../pages/includes/wallet-selector/wallet-selector'; /* Tabs */ import { HomePage } from '../pages/home/home'; @@ -293,6 +294,7 @@ let pages: any = [ WalletDetailsPage, WalletItemPage, WalletActivityPage, + WalletSelectorPage ]; let providers: any = [ diff --git a/src/pages/includes/wallet-selector/wallet-selector.html b/src/pages/includes/wallet-selector/wallet-selector.html new file mode 100644 index 000000000..b34fcca14 --- /dev/null +++ b/src/pages/includes/wallet-selector/wallet-selector.html @@ -0,0 +1,82 @@ +
+
+
+
+ +
{{ title }}
+
+ +
+
+ Bitcoin Wallets + Bitcoin Wallets +
+ + + + +
+ +
+
+ Bitcoin Cash Wallets + Bitcoin Cash Wallets +
+ + + + +
+
\ No newline at end of file diff --git a/src/pages/includes/wallet-selector/wallet-selector.scss b/src/pages/includes/wallet-selector/wallet-selector.scss new file mode 100644 index 000000000..c5822f35b --- /dev/null +++ b/src/pages/includes/wallet-selector/wallet-selector.scss @@ -0,0 +1,63 @@ +wallet-selector { + display: flex; + justify-content: center; + .backdrop { + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(0, 0, 0, 0.5); + } + .wallet-selector { + position: absolute; + bottom: 0; + max-height: 65rem; + min-width: 30rem; + width: calc(50% + 1px); + overflow-y: scroll; + background: white; + padding: 2rem; + box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, 0.3); + .back-button { + display: inline-block; + margin: 1rem 0 2rem 0; + ion-icon { + cursor: pointer; + } + } + .title { + color: color($colors, dark); + font-weight: 700; + height: 3rem; + >img { + width: 22px; + display: inline-block; + vertical-align: middle; + margin-right: 10px; + } + } + .error { + color: color($colors, danger); + } + } + .slider { + /* only transition on transform properties which are hardware accelerated = way better performances */ + -webkit-transition:-webkit-transform .2s ease; + -moz-transition: -moz-transform .2s ease; + -ms-transition: -ms-transform .2s ease; + transition: transform .2s ease; + } + .opened { + /* visible */ + -webkit-transform: translate(0, 0%); + -moz-transform: translate(0, 0%); + -ms-transform: translate(0, 0%); + transform: translate(0, 0%); + } + .closed { + /* completely offscreen */ + -webkit-transform: translate(0, 100%); + -moz-transform: translate(0, 100%); + -ms-transform: translate(0, 100%); + transform: translate(0, 100%); + } +} diff --git a/src/pages/includes/wallet-selector/wallet-selector.ts b/src/pages/includes/wallet-selector/wallet-selector.ts new file mode 100644 index 000000000..2e1cfd3e3 --- /dev/null +++ b/src/pages/includes/wallet-selector/wallet-selector.ts @@ -0,0 +1,61 @@ +import { Component, Input } from '@angular/core'; +import { Events } from 'ionic-angular'; + +@Component({ + selector: 'wallet-selector', + templateUrl: 'wallet-selector.html', +}) +export class WalletSelectorPage { + + public showWalletsSelector: boolean; + public wallets: Array; + public walletsBtc: Array; + public walletsBch: Array; + public showSlideEffect: boolean; + public title: string; + + constructor( + private events: Events + ) { + this.showWalletsSelector = false; + this.showSlideEffect = false; + this.wallets = []; + this.events.subscribe('showWalletsSelectorEvent', (wallets: Array, title?: string) => { + this.title = title ? title : null; + this.showWalletsSelector = true; + setTimeout(() => { + this.showSlideEffect = true; + }, 50); + this.wallets = wallets; + this.separeWallets(); + }); + } + + public selectWallet(wallet: any): void { + this.events.publish('selectWalletEvent', wallet); + this.showSlideEffect = false; + setTimeout(() => { + this.showWalletsSelector = false; + }, 150); + } + + private separeWallets(): void { + this.walletsBtc = []; + this.walletsBch = []; + if (this.wallets.length == 0) return; + for (var i = 0; i <= this.wallets.length; i++) { + if (this.wallets[i]) { + if (this.wallets[i].coin == 'btc') this.walletsBtc.push(this.wallets[i]); + else this.walletsBch.push(this.wallets[i]); + } + } + } + + public backdropDismiss() { + this.showSlideEffect = false; + setTimeout(() => { + this.showWalletsSelector = false; + }, 150); + } + +} diff --git a/src/pages/integrations/amazon/buy-amazon/buy-amazon.ts b/src/pages/integrations/amazon/buy-amazon/buy-amazon.ts index 3dfb30dad..6bc37df03 100644 --- a/src/pages/integrations/amazon/buy-amazon/buy-amazon.ts +++ b/src/pages/integrations/amazon/buy-amazon/buy-amazon.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { NavController, NavParams, ModalController, ActionSheetController } from 'ionic-angular'; +import { NavController, NavParams, ModalController, ActionSheetController, Events } from 'ionic-angular'; import { Logger } from '@nsalaun/ng-logger'; import * as _ from 'lodash'; import * as moment from 'moment'; @@ -55,6 +55,7 @@ export class BuyAmazonPage { private bwcErrorProvider: BwcErrorProvider, private configProvider: ConfigProvider, private emailNotificationsProvider: EmailNotificationsProvider, + private events: Events, private externalLinkProvider: ExternalLinkProvider, private logger: Logger, private modalCtrl: ModalController, @@ -426,26 +427,11 @@ export class BuyAmazonPage { } public showWallets(): void { - let buttons: Array = []; - - _.each(this.wallets, (w: any) => { - let walletButton: Object = { - text: w.credentials.walletName, - cssClass: 'wallet-' + w.network, - icon: 'wallet', - handler: () => { - this.onWalletSelect(w); - } - } - buttons.push(walletButton); + this.events.publish('showWalletsSelectorEvent', this.wallets, 'Buy from'); + this.events.subscribe('selectWalletEvent', (wallet: any) => { + this.onWalletSelect(wallet); + this.events.unsubscribe('selectWalletEvent'); }); - - const actionSheet = this.actionSheetCtrl.create({ - title: 'Buy from', - buttons: buttons - }); - - actionSheet.present(); } } diff --git a/src/pages/integrations/coinbase/buy-coinbase/buy-coinbase.ts b/src/pages/integrations/coinbase/buy-coinbase/buy-coinbase.ts index 07d18cce5..c25060949 100644 --- a/src/pages/integrations/coinbase/buy-coinbase/buy-coinbase.ts +++ b/src/pages/integrations/coinbase/buy-coinbase/buy-coinbase.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { NavController, NavParams, ActionSheetController } from 'ionic-angular'; +import { NavController, NavParams, ActionSheetController, Events } from 'ionic-angular'; import { Logger } from '@nsalaun/ng-logger'; import * as _ from 'lodash'; @@ -44,6 +44,7 @@ export class BuyCoinbasePage { private logger: Logger, private popupProvider: PopupProvider, private navCtrl: NavController, + private events: Events, private externalLinkProvider: ExternalLinkProvider, private onGoingProcessProvider: OnGoingProcessProvider, private navParams: NavParams, @@ -282,26 +283,11 @@ export class BuyCoinbasePage { } public showWallets(): void { - let buttons: Array = []; - - _.each(this.wallets, (w: any) => { - let walletButton: Object = { - text: w.credentials.walletName, - cssClass: 'wallet-' + w.network, - icon: 'wallet', - handler: () => { - this.onWalletSelect(w); - } - } - buttons.push(walletButton); + this.events.publish('showWalletsSelectorEvent', this.wallets, 'Receive in'); + this.events.subscribe('selectWalletEvent', (wallet: any) => { + this.onWalletSelect(wallet); + this.events.unsubscribe('selectWalletEvent'); }); - - const actionSheet = this.actionSheetCtrl.create({ - title: 'Receive in', - buttons: buttons - }); - - actionSheet.present(); } public onWalletSelect(wallet: any) { diff --git a/src/pages/integrations/coinbase/sell-coinbase/sell-coinbase.ts b/src/pages/integrations/coinbase/sell-coinbase/sell-coinbase.ts index 1a271163b..e98f40c2e 100644 --- a/src/pages/integrations/coinbase/sell-coinbase/sell-coinbase.ts +++ b/src/pages/integrations/coinbase/sell-coinbase/sell-coinbase.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { NavController, NavParams, ActionSheetController } from 'ionic-angular'; +import { NavController, NavParams, ActionSheetController, Events } from 'ionic-angular'; import { Logger } from '@nsalaun/ng-logger'; import * as _ from 'lodash'; @@ -45,6 +45,7 @@ export class SellCoinbasePage { private appProvider: AppProvider, private coinbaseProvider: CoinbaseProvider, private configProvider: ConfigProvider, + private events: Events, private logger: Logger, private popupProvider: PopupProvider, private navCtrl: NavController, @@ -356,26 +357,11 @@ export class SellCoinbasePage { } public showWallets(): void { - let buttons: Array = []; - - _.each(this.wallets, (w: any) => { - let walletButton: Object = { - text: w.credentials.walletName, - cssClass: 'wallet-' + w.network, - icon: 'wallet', - handler: () => { - this.onWalletSelect(w); - } - } - buttons.push(walletButton); + this.events.publish('showWalletsSelectorEvent', this.wallets, 'Sell from'); + this.events.subscribe('selectWalletEvent', (wallet: any) => { + this.onWalletSelect(wallet); + this.events.unsubscribe('selectWalletEvent'); }); - - const actionSheet = this.actionSheetCtrl.create({ - title: 'Sell from', - buttons: buttons - }); - - actionSheet.present(); } public onWalletSelect(wallet: any): void { diff --git a/src/pages/integrations/glidera/buy-glidera/buy-glidera.ts b/src/pages/integrations/glidera/buy-glidera/buy-glidera.ts index 85984ba66..1116f2acd 100644 --- a/src/pages/integrations/glidera/buy-glidera/buy-glidera.ts +++ b/src/pages/integrations/glidera/buy-glidera/buy-glidera.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { NavController, NavParams, ActionSheetController } from 'ionic-angular'; +import { NavController, NavParams, ActionSheetController, Events } from 'ionic-angular'; import { Logger } from '@nsalaun/ng-logger'; //providers @@ -35,6 +35,7 @@ export class BuyGlideraPage { constructor( private platformProvider: PlatformProvider, + private events: Events, private logger: Logger, private popupProvider: PopupProvider, private navCtrl: NavController, @@ -190,29 +191,13 @@ export class BuyGlideraPage { } public showWallets(): void { - let buttons: Array = []; - - _.each(this.wallets, (w: any) => { - let walletButton: Object = { - text: w.credentials.walletName, - cssClass: 'wallet-' + w.network, - icon: 'wallet', - handler: () => { - this.onWalletSelect(w); - } - } - buttons.push(walletButton); + this.events.publish('showWalletsSelectorEvent', this.wallets, 'Receive in'); + this.events.subscribe('selectWalletEvent', (wallet: any) => { + this.onWalletSelect(wallet); + this.events.unsubscribe('selectWalletEvent'); }); - - const actionSheet = this.actionSheetCtrl.create({ - title: 'Receive in', - buttons: buttons - }); - - actionSheet.present(); } - public onWalletSelect(wallet): void { this.wallet = wallet; let parsedAmount = this.txFormatProvider.parseAmount( diff --git a/src/pages/integrations/glidera/sell-glidera/sell-glidera.ts b/src/pages/integrations/glidera/sell-glidera/sell-glidera.ts index 457a9b53c..5022d1261 100644 --- a/src/pages/integrations/glidera/sell-glidera/sell-glidera.ts +++ b/src/pages/integrations/glidera/sell-glidera/sell-glidera.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; -import { NavController, NavParams, ActionSheetController } from 'ionic-angular'; +import { NavController, NavParams, ActionSheetController, Events } from 'ionic-angular'; import { Logger } from '@nsalaun/ng-logger'; +import * as _ from 'lodash'; //providers import { PlatformProvider } from '../../../../providers/platform/platform'; @@ -12,8 +13,6 @@ import { TxFormatProvider } from '../../../../providers/tx-format/tx-format'; import { WalletProvider } from '../../../../providers/wallet/wallet'; import { ConfigProvider } from '../../../../providers/config/config'; -import * as _ from 'lodash'; - @Component({ selector: 'page-sell-glidera', templateUrl: 'sell-glidera.html', @@ -46,7 +45,8 @@ export class SellGlideraPage { private txFormatProvider: TxFormatProvider, private actionSheetCtrl: ActionSheetController, private walletProvider: WalletProvider, - private configProvider: ConfigProvider + private configProvider: ConfigProvider, + private events: Events ) { this.coin = 'btc'; this.isCordova = this.platformProvider.isCordova; @@ -276,28 +276,12 @@ export class SellGlideraPage { this.processPaymentInfo(); } - public showWallets(): void { - let buttons: Array = []; - - _.each(this.wallets, (w: any) => { - let walletButton: Object = { - text: w.credentials.walletName, - cssClass: 'wallet-' + w.network, - icon: 'wallet', - handler: () => { - this.onWalletSelect(w); - } - } - buttons.push(walletButton); + this.events.publish('showWalletsSelectorEvent', this.wallets, 'Sell From'); + this.events.subscribe('selectWalletEvent', (wallet: any) => { + this.onWalletSelect(wallet); + this.events.unsubscribe('selectWalletEvent'); }); - - const actionSheet = this.actionSheetCtrl.create({ - title: 'Sell From', - buttons: buttons - }); - - actionSheet.present(); } public goBackHome(): void { diff --git a/src/pages/integrations/mercado-libre/buy-mercado-libre/buy-mercado-libre.ts b/src/pages/integrations/mercado-libre/buy-mercado-libre/buy-mercado-libre.ts index b71a2be29..1a80611e4 100644 --- a/src/pages/integrations/mercado-libre/buy-mercado-libre/buy-mercado-libre.ts +++ b/src/pages/integrations/mercado-libre/buy-mercado-libre/buy-mercado-libre.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { NavController, NavParams, ModalController, ActionSheetController } from 'ionic-angular'; +import { NavController, NavParams, ModalController, ActionSheetController, Events } from 'ionic-angular'; import { Logger } from '@nsalaun/ng-logger'; import * as _ from 'lodash'; import * as moment from 'moment'; @@ -55,6 +55,7 @@ export class BuyMercadoLibrePage { private bwcErrorProvider: BwcErrorProvider, private configProvider: ConfigProvider, private emailNotificationsProvider: EmailNotificationsProvider, + private events: Events, private externalLinkProvider: ExternalLinkProvider, private logger: Logger, private modalCtrl: ModalController, @@ -413,26 +414,11 @@ export class BuyMercadoLibrePage { } public showWallets(): void { - let buttons: Array = []; - - _.each(this.wallets, (w: any) => { - let walletButton: Object = { - text: w.credentials.walletName, - cssClass: 'wallet-' + w.network, - icon: 'wallet', - handler: () => { - this.onWalletSelect(w); - } - } - buttons.push(walletButton); + this.events.publish('showWalletsSelectorEvent', this.wallets, 'Buy from'); + this.events.subscribe('selectWalletEvent', (wallet: any) => { + this.onWalletSelect(wallet); + this.events.unsubscribe('selectWalletEvent'); }); - - const actionSheet = this.actionSheetCtrl.create({ - title: 'Buy from', - buttons: buttons - }); - - actionSheet.present(); } } diff --git a/src/pages/integrations/shapeshift/shapeshift-shift/shapeshift-shift.html b/src/pages/integrations/shapeshift/shapeshift-shift/shapeshift-shift.html index 33e3f50f8..ba10c3ceb 100644 --- a/src/pages/integrations/shapeshift/shapeshift-shift/shapeshift-shift.html +++ b/src/pages/integrations/shapeshift/shapeshift-shift/shapeshift-shift.html @@ -14,7 +14,8 @@