Skip to content
Permalink
Browse files

Merge pull request #10130 from rastajpa/feat/new-user-onboarding

FEAT: improve the flow for new users
  • Loading branch information...
cmgustavo committed Sep 9, 2019
2 parents 2bfb62b + 4c818f9 commit 1ca358f2d2db6e8c6c53ea49f7d685ce7c69a4dc
Binary file not shown.
@@ -1,5 +1,5 @@
<wide-header-page title="{{'Select currency' | translate}}">
<div page-content>
<wide-header-page title="{{title}}">
<div page-content *ngIf="hasKeyId">
<ion-list class="settings-list bp-list">
<button class="list-button" ion-item (click)="goToCreateWallet('btc')">
<ion-icon item-start>
@@ -15,4 +15,39 @@
</button>
</ion-list>
</div>
<div page-content *ngIf="!hasKeyId">
<span class="list-subtitle" translate>Featured Currencies</span>
<ion-list class="settings-list bp-list">
<ion-item class="list-button">
<ion-icon item-start>
<img src="assets/img/currencies/btc.svg" />
</ion-icon>
<ion-label class="item-title">Bitcoin (BTC)</ion-label>
<ion-toggle [(ngModel)]="coinsSelected.btc"></ion-toggle>
</ion-item>
<ion-item class="list-button">
<ion-icon item-start>
<img src="assets/img/currencies/bch.svg" />
</ion-icon>
<ion-label class="item-title">Bitcoin Cash (BCH)</ion-label>
<ion-toggle [(ngModel)]="coinsSelected.bch"></ion-toggle>
</ion-item>
</ion-list>
<button ion-button class="button-standard" [disabled]="!coinsSelected.btc && !coinsSelected.bch" (click)="createWallet()">
{{'Create' | translate}}
</button>

<div class="import-list">
<span class="list-subtitle" translate>Import Wallet</span>
<ion-list class="settings-list bp-list">
<button class="list-button" ion-item (click)="goToImportWallet()">
<ion-icon item-start>
<img src="assets/img/add-wallet/import.svg" />
</ion-icon>
<div class="item-title" translate>Import from backup</div>
<span class="item-subtitle" translate>Recover your wallet using your passphrase</span>
</button>
</ion-list>
</div>
</div>
</wide-header-page>
@@ -17,4 +17,10 @@ page-select-currency {
font-weight: 500;
}
}
.list-subtitle {
padding-left: 20px;
}
.import-list {
margin-top: 32px;
}
}
@@ -1,26 +1,58 @@
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Logger } from '../../../providers/logger/logger';
import { TranslateService } from '@ngx-translate/core';
import { Events, NavController, NavParams } from 'ionic-angular';
import * as _ from 'lodash';

// pages

import { ImportWalletPage } from '../../add/import-wallet/import-wallet';
import { CreateWalletPage } from '../create-wallet/create-wallet';

// providers
import {
BwcErrorProvider,
Logger,
OnGoingProcessProvider,
PopupProvider,
ProfileProvider,
PushNotificationsProvider,
WalletProvider
} from '../../../providers';

@Component({
selector: 'page-select-currency',
templateUrl: 'select-currency.html'
})
export class SelectCurrencyPage {
public title: string;
public coin: string;
public hasKeyId: boolean;
public coinsSelected;

constructor(
private navCtrl: NavController,
private logger: Logger,
private navParam: NavParams
) {}
private navParam: NavParams,
private profileProvider: ProfileProvider,
private onGoingProcessProvider: OnGoingProcessProvider,
private walletProvider: WalletProvider,
private pushNotificationsProvider: PushNotificationsProvider,
private bwcErrorProvider: BwcErrorProvider,
private translate: TranslateService,
private events: Events,
private popupProvider: PopupProvider
) {
this.coinsSelected = {
btc: true,
bch: false
};
}

ionViewDidLoad() {
this.logger.info('Loaded: SelectCurrencyPage');
this.hasKeyId = this.navParam.data.keyId ? true : false;
this.title = this.hasKeyId
? this.translate.instant('Select currency')
: this.translate.instant('Select currencies');
}

public goToCreateWallet(coin: string): void {
@@ -30,4 +62,67 @@ export class SelectCurrencyPage {
keyId: this.navParam.data.keyId
});
}

public goToImportWallet(): void {
this.navCtrl.push(ImportWalletPage);
}

public createWallet(coins: string[]): void {
coins = _.keys(_.pickBy(this.coinsSelected));
const opts = {
coin: coins[0]
};
this.onGoingProcessProvider.set('creatingWallet');
this.createDefaultWallet(false, opts)
.then(wallet => {
if (coins.length === 1) this.endProcess(wallet);
else {
const promises = [];
const keyId = wallet.credentials.keyId;
coins.slice(1).forEach(coin => {
const opts = {
keyId,
coin
};
promises.push(this.createDefaultWallet(true, opts));
});
Promise.all(promises)
.then(wallets =>
wallets.forEach(wallet => {
this.endProcess(wallet);
})
)
.catch(err => this.showError(err));
}
})
.catch(err => this.showError(err));
}

private createDefaultWallet(addingNewWallet, opts) {
return this.profileProvider.createDefaultWallet(addingNewWallet, opts);
}

private showError(err) {
this.onGoingProcessProvider.clear();
if (
err &&
err.message != 'FINGERPRINT_CANCELLED' &&
err.message != 'PASSWORD_CANCELLED'
) {
this.logger.error('Create: could not create wallet', err);
const title = this.translate.instant('Error');
err = this.bwcErrorProvider.msg(err);
this.popupProvider.ionicAlert(title, err);
}
return;
}

private endProcess(wallet) {
this.walletProvider.updateRemotePreferences(wallet);
this.pushNotificationsProvider.updateSubscription(wallet);
this.onGoingProcessProvider.clear();
this.navCtrl.popToRoot().then(() => {
this.events.publish('Local/WalletListChange');
});
}
}
@@ -1,10 +1,7 @@
<action-card>
<div action-card-header>
<img src="assets/img/add-wallet/wallet.svg" />
<img src="assets/img/onboarding-card.png" />
</div>
<div action-card-title translate>Add Wallet</div>
<div action-card-body translate>
Now it's time for you to create a wallet to store your funds into. </div>
<div action-card-button translate (click)="goToAddWalletPage()" tappable>
Get Started
</div>
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

// Pages
import { AddPage } from '../../add/add';
import { SelectCurrencyPage } from '../../add/select-currency/select-currency';

@Component({
selector: 'create-new-wallet',
@@ -12,6 +12,6 @@ export class CreateNewWalletPage {
constructor(private navCtrl: NavController) {}

public goToAddWalletPage() {
this.navCtrl.push(AddPage);
this.navCtrl.push(SelectCurrencyPage);
}
}
@@ -20,6 +20,7 @@ import { PlatformProvider } from '../platform/platform';
import { PopupProvider } from '../popup/popup';
import { ReplaceParametersProvider } from '../replace-parameters/replace-parameters';
import { TxFormatProvider } from '../tx-format/tx-format';
import { WalletOptions } from '../wallet/wallet';

// models
import { Profile } from '../../models/profile/profile.model';
@@ -1348,6 +1349,24 @@ export class ProfileProvider {
});
}

public createDefaultWallet(addingNewWallet: boolean, opts): Promise<any> {
const defaults = this.configProvider.getDefaults();

const defaultOpts: Partial<WalletOptions> = {
keyId: opts.keyId,
name: opts.coin.toUpperCase(),
m: 1,
n: 1,
myName: null,
networkName: 'livenet',
bwsurl: defaults.bws.url,
singleAddress: false,
coin: opts.coin
};

return this.createWallet(addingNewWallet, defaultOpts);
}

public createWallet(addingNewWallet: boolean, opts): Promise<any> {
return this.keyProvider.handleEncryptedWallet(opts.keyId).then(password => {
opts.password = password;

0 comments on commit 1ca358f

Please sign in to comment.
You can’t perform that action at this time.