anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #191 from gabrielbazan7/feat/receive

Browse source 
effects on views if the user has not yet backed up a wallet
This commit is contained in:
Gustavo Maximiliano Cortez 2016-09-27 10:00:19 -03:00 • committed by GitHub
commit 3ffd4ce731
21 changed files with 293 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

0
public/img/onboarding-backup-warning.svg → public/img/backup-warning.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Before After
Before After

0
public/img/onboarding-no-screenshot.svg → public/img/no-screenshot.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After

12
public/views/backup.html
View file

@ -1,10 +1,10 @@
<ion-view id="wallet-backup-phrase" title="{{viewTitle}}">
<ion-view id="wallet-backup-phrase">
<ion-nav-bar class="bar-royal">
<ion-nav-buttons side="primary">
<button class="button button-back button-clear" ng-click="backupGoBack()">
<i class="icon ion-ios-arrow-thin-left"></i>
</button>
</ion-nav-buttons>
<ion-nav-title>
{{viewTitle}}
</ion-nav-title>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content>
<div class="ng-hide" ng-show="deleted">

6
public/views/onboarding/backupWarning.html → public/views/backupWarning.html
View file

@ -1,7 +1,7 @@
<ion-view id="onboarding-backup-warning" class="onboarding" ng-controller="backupWarningController">
<ion-view id="backup-warning" class="onboarding" ng-controller="backupWarningController">
<ion-nav-bar class="bar-royal">
<ion-nav-buttons side="primary">
<button class="button button-back button-clear" href ui-sref="onboarding.backupRequest({walletId: walletId})">
<button class="button button-back button-clear" ng-click="goBack()">
<i class="icon ion-ios-arrow-thin-left"></i>
</button>
</ion-nav-buttons>
@ -18,7 +18,7 @@
</p>
</div>
<div class="row">
<img src="img/onboarding-backup-warning.svg" class="col col-60 warning-image">
<img src="img/backup-warning.svg" class="col col-60 warning-image">
</div>
<div class="row text-center">
<p class="col col-60">

27
public/views/includes/backupNeededPopup.html Normal file
View file

@ -0,0 +1,27 @@
<div id="backup-needed-modal" class="popup-modal">
<div class="popup-modal-header popup-modal-header-warning">
<div class="popup-modal-header-img-warning popup-modal-header-img"></div>
</div>
<div class="popup-modal-content popup-modal-content-warning">
<div class="text-center">
<h5 translate>Backup Needed</h5>
<p translate>Now is a good time to backup your wallet. If this device is lost, it is impossible to access your funds without a backup.</p>
<div class="row">
<div class="col">
<button
class="button button-clear expand"
ng-click="close()"
translate>Not now
</button>
</div>
<div class="col">
<button
class="button button-clear expand"
ng-click="doBackup()"
translate>Backup wallet now
</button>
</div>
</div>
</div>
</div>
</div>

2
public/views/includes/screenshotWarningModal.html
View file

@ -1,5 +1,5 @@
<div id="screenshot-warning-modal" class="popup-modal">
<div class="popup-modal-header">
<div class="popup-modal-header-success">
<div class="popup-modal-header-img"></div>
</div>
<div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">

4
public/views/includes/wallets.html
View file

@ -8,10 +8,6 @@
<span class="item-note m10l" ng-show="wallet.n > 1 && wallet.isComplete()">
{{wallet.m}}-of-{{wallet.n}}
</span>
<span class="badge badge-assertive" ng-show="!wallet.isComplete()" translate>
Incomplete
</span>
<!-- <i ng-show="wallet.needsBackup" class="icon ion-android-warning assertive"></i> -->
</div>
</div>
</ion-slide-page>

2
public/views/onboarding/backupRequest.html
View file

@ -19,7 +19,7 @@
<div class="cta-buttons">
<div class="row">
<button class="button button-block button-positive col-75 col" href
ui-sref="onboarding.backupWarning({walletId: walletId})" translate>Backup wallet</button>
ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
</div>
<div class="row">
<button class="button button-block button-transparent col-75 col" ng-click="openPopup()" translate>I'll backup my wallet later</button>

2
public/views/preferences.html
View file

@ -40,7 +40,7 @@
<div class="item item-divider" translate>
Security
</div>
<a class="item item-icon-right" ui-sref="tabs.preferences.backup" ng-hide="wallet.isPrivKeyExternal()">
<a class="item item-icon-right" ui-sref="tabs.preferences.backupWarning({from: 'tabs.preferences'})" ng-hide="wallet.isPrivKeyExternal()">
<span translate>Backup</span>
<i class="icon nav-item-arrow-right"></i>
</a>

79
public/views/tab-receive.html
View file

@ -8,42 +8,67 @@
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<article id="address">
<div class="row">
<div class="m15t text-center col center-block" copy-to-clipboard="addr">
<qrcode ng-if="addr" size="220" data="bitcoin:{{addr}}"></qrcode>
<div ng-if="!addr" style="height:220px; width:220px; margin:auto; background: white; padding-top: 20%;">
...
<div id="address">
<article class="text-center" ng-if="!wallet.isComplete()">
<div class="incomplete">
<div class="title">
<span translate>Incomplete wallet</span>
</div>
<div ng-if="wallet.needsBackup" class="assertive m10t" translate>
Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
<div class="subtitle">
<span translate>All signing devices must be added to this multisig wallet before bitcoin addresses can be created.</span>
</div>
<div>
<button class="button button-block button-positive" ng-click="goCopayers()" translate>Open wallet</button>
</div>
</div>
</div>
<div class="row">
<div class="col" ng-show="isCordova && addr">
<div class="item item-icon-left" ng-click="shareAddress(addr)">
<i class="icon ion-ios-upload-outline"></i>
<span translate>Share</span>
<div class="row border-top">
<div class="col col-90 center-block bit-address text-center">
<div class="item item-icon-left">
<i class="icon ion-social-bitcoin-outline"></i>
<span class="bit-address-gen-address" ng-if="!generatingAddress" translate>address not yet available</span>
</div>
</div>
</div>
<div class="col" ng-class="{'center-block col-50': !isCordova || !addr}">
<div class="item item-icon-left" ng-click="setAddress(true)">
<i class="icon ion-ios-loop"></i>
<span translate>Next Address</span>
</article>
<article ng-if="wallet.isComplete()">
<div class="row backup" ng-show="!wallet.showBackupNeededModal" ng-click="goToBackupFlow()">
<div class="m15t text-center col center-block">
<i class="icon ion-alert"></i><span translate>Wallet not backed up</span><i class="icon ion-ios-arrow-thin-right"></i>
</div>
</div>
</div>
<div class="row border-top">
<div class="col col-90 center-block bit-address text-center">
<div class="item item-icon-left">
<i class="icon ion-social-bitcoin-outline"></i>
<span ng-if="generatingAddress">...</span>
<span class="bit-address-gen-address" ng-if="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
<div class="row qr">
<div class="m15t text-center col center-block" copy-to-clipboard="addr">
<qrcode ng-if="addr" size="220" data="bitcoin:{{addr}}"></qrcode>
<div ng-if="!addr" style="height:220px; width:220px; margin:auto; background: white; padding-top: 20%;">
...
</div>
</div>
</div>
</div>
</article>
<div class="row">
<div class="col" ng-show="isCordova && addr">
<div class="item item-icon-left" ng-click="shareAddress(addr)">
<i class="icon ion-ios-upload-outline"></i>
<span translate>Share</span>
</div>
</div>
<div class="col" ng-class="{'center-block col-50': !isCordova || !addr}">
<div class="item item-icon-left" ng-click="setAddress(true)">
<i class="icon ion-ios-loop"></i>
<span translate>Next Address</span>
</div>
</div>
</div>
<div class="row border-top">
<div class="col col-90 center-block bit-address text-center">
<div class="item item-icon-left">
<i class="icon ion-social-bitcoin-outline"></i>
<span ng-if="generatingAddress">...</span>
<span class="bit-address-gen-address" ng-if="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
</div>
</div>
</div>
</article>
</div>
<article id="wallets">
<div class="list card padding text-center" ng-if="!wallets[0]">
<span translate>No Wallet</span>

33
src/js/controllers/backup.js
View file

@ -49,15 +49,6 @@ angular.module('copayApp.controllers').controller('backupController',
}, 10);
};
$scope.goBack = function() {
if ($scope.step == 1) {
if ($stateParams.fromOnboarding) $state.go('onboarding.backupRequest');
else $state.go('wallet.preferences');
} else {
$scope.goToStep($scope.step - 1);
}
};
var backupError = function(err) {
ongoingProcess.set('validatingWords', false);
$log.debug('Failed to verify backup: ', err);
@ -93,13 +84,15 @@ angular.module('copayApp.controllers').controller('backupController',
$scope.closeBackupResultModal = function() {
$scope.confirmBackupModal.hide();
$scope.confirmBackupModal.remove();
if ($stateParams.fromOnboarding) {
$state.go('onboarding.disclaimer');
} else {
$ionicHistory.removeBackView();
$state.go('tabs.home');
}
profileService.isDisclaimerAccepted(function(val) {
if (val) {
$ionicHistory.removeBackView();
$state.go('tabs.home');
}
else $state.go('onboarding.disclaimer');
});
};
var confirm = function(cb) {
@ -193,16 +186,6 @@ angular.module('copayApp.controllers').controller('backupController',
$scope.selectComplete = false;
};
$scope.backupGoBack = function() {
if ($stateParams.fromOnboarding) $state.go('onboarding.backupWarning', {
walletId: $stateParams.walletId,
fromOnboarding: true
});
else $state.go('tabs.preferences', {
walletId: $stateParams.walletId
});
};
$scope.$on("$ionicView.enter", function(event, data) {
$scope.deleted = isDeletedSeed();
if ($scope.deleted) {

33
src/js/controllers/onboarding/backupWarning.js
View file

@ -5,20 +5,31 @@ angular.module('copayApp.controllers').controller('backupWarningController', fun
$scope.walletId = $stateParams.walletId;
$scope.openPopup = function() {
$ionicModal.fromTemplateUrl('views/includes/screenshotWarningModal.html', {
scope: $scope,
backdropClickToClose: false,
hardwareBackButtonClose: false
}).then(function(modal) {
$scope.warningModal = modal;
$scope.warningModal.show();
});
scope: $scope,
backdropClickToClose: false,
hardwareBackButtonClose: false
}).then(function(modal) {
$scope.warningModal = modal;
$scope.warningModal.show();
});
$scope.close = function() {
$scope.warningModal.hide();
$state.go('onboarding.backup', {
walletId: $stateParams.walletId,
fromOnboarding: true
});
if ($stateParams.from == 'onboarding.backupRequest')
$state.go('onboarding.backup', {
walletId: $stateParams.walletId
});
else
$state.go($stateParams.from + '.backup', {
walletId: $stateParams.walletId
});
};
}
$scope.goBack = function() {
$state.go($stateParams.from, {
walletId: $stateParams.walletId
});
};
});

73
src/js/controllers/tab-receive.js
View file

@ -1,6 +1,6 @@
'use strict';
angular.module('copayApp.controllers').controller('tabReceiveController', function($scope, $timeout, $log, $ionicModal, storageService, platformInfo, walletService, profileService, configService, lodash, gettextCatalog, popupService) {
angular.module('copayApp.controllers').controller('tabReceiveController', function($scope, $timeout, $log, $ionicModal, $state, $ionicHistory, storageService, platformInfo, walletService, profileService, configService, lodash, gettextCatalog, popupService) {
$scope.isCordova = platformInfo.isCordova;
$scope.isNW = platformInfo.isNW;
@ -29,34 +29,75 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
};
$scope.setAddress = function(forceNew) {
if ($scope.generatingAddress) return;
if ($scope.generatingAddress || !$scope.wallet.isComplete()) return;
$scope.addr = null;
$scope.generatingAddress = true;
$timeout(function() {
walletService.getAddress($scope.wallet, forceNew, function(err, addr) {
$scope.generatingAddress = false;
if (err) popupService.showAlert(gettextCatalog.getString('Error'), err);
$scope.addr = addr;
$scope.$apply();
});
}, 1);
walletService.getAddress($scope.wallet, forceNew, function(err, addr) {
$scope.generatingAddress = false;
if (err) popupService.showAlert(gettextCatalog.getString('Error'), err);
$scope.addr = addr;
});
};
$scope.$on("$ionicView.beforeEnter", function(event, data) {
if (!$scope.isCordova) $scope.checkTips();
$scope.wallets = profileService.getWallets({
onlyComplete: true
});
$scope.wallets = profileService.getWallets();
$scope.$on('Wallet/Changed', function(event, wallet) {
if (!wallet) {
$log.debug('No wallet provided');
return;
}
$scope.wallet = wallet;
$log.debug('Wallet changed: ' + wallet.name);
$scope.setAddress();
$timeout(function() {
$scope.wallet = wallet;
$log.debug('Wallet changed: ' + wallet.name);
$scope.setAddress();
if ($scope.wallet.showBackupNeededModal) $scope.openBackupNeededModal();
$scope.$apply();
});
});
});
$scope.goCopayers = function() {
$ionicHistory.removeBackView();
$ionicHistory.nextViewOptions({
disableAnimate: true
});
$state.go('tabs.home');
$timeout(function() {
$state.transitionTo('tabs.copayers', {
walletId: $scope.wallet.credentials.walletId
});
}, 100);
};
$scope.openBackupNeededModal = function() {
$ionicModal.fromTemplateUrl('views/includes/backupNeededPopup.html', {
scope: $scope,
backdropClickToClose: false,
hardwareBackButtonClose: false
}).then(function(modal) {
$scope.BackupNeededModal = modal;
$scope.BackupNeededModal.show();
});
};
$scope.close = function() {
$scope.BackupNeededModal.hide();
$scope.BackupNeededModal.remove();
profileService.setBackupNeededModalFlag($scope.wallet.credentials.walletId);
};
$scope.doBackup = function() {
$scope.close();
$scope.goToBackupFlow();
};
$scope.goToBackupFlow = function() {
$state.go('tabs.receive.backupWarning', {
from: 'tabs.receive',
walletId: $scope.wallet.credentials.walletId
});
}
});

42
src/js/routes.js
View file

@ -236,7 +236,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
*
*/
.state('tabs.send.amount', {
.state('tabs.send.amount', {
url: '/amount/:isWallet/:toAddress/:toName/:toEmail',
views: {
'tab-send@tabs': {
@ -432,6 +432,14 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
}
}
})
.state('tabs.preferences.backupWarning', {
url: '/backupWarning/:from',
views: {
'tab-settings@tabs': {
templateUrl: 'views/backupWarning.html'
}
}
})
.state('tabs.preferences.backup', {
url: '/backup',
views: {
@ -551,7 +559,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
/*
*
*TO DO
* Copayers
*
*/
@ -565,6 +573,30 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
}
})
/*
*
* Back flow from receive
*
*/
.state('tabs.receive.backupWarning', {
url: '/backupWarning/:from/:walletId',
views: {
'tab-receive@tabs': {
templateUrl: 'views/backupWarning.html'
}
}
})
.state('tabs.receive.backup', {
url: '/backup/:walletId',
views: {
'tab-receive@tabs': {
controller: 'backupController',
templateUrl: 'views/backup.html'
}
}
})
/*
*
* Onboarding
@ -617,15 +649,15 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
}
})
.state('onboarding.backupWarning', {
url: '/backupWarning/:walletId',
url: '/backupWarning/:from/:walletId',
views: {
'onboarding': {
templateUrl: 'views/onboarding/backupWarning.html'
templateUrl: 'views/backupWarning.html'
}
}
})
.state('onboarding.backup', {
url: '/backup/:walletId/:fromOnboarding',
url: '/backup/:walletId',
views: {
'onboarding': {
templateUrl: 'views/backup.html',

20
src/js/services/profileService.js
View file

@ -38,6 +38,22 @@ angular.module('copayApp.services')
});
}
root.setBackupNeededModalFlag = function(walletId) {
storageService.setBackupNeededModalFlag(walletId, true, function(err) {
if (err) $log.error(err);
$log.debug('Backup warning modal flag stored');
root.wallet[walletId].showBackupNeededModal = false;
});
};
function _showBackupNeededModal(wallet, cb) {
storageService.getBackupNeededModalFlag(wallet.credentials.walletId, function(err, val) {
if (err) $log.error(err);
if (val) return cb(false);
return cb(true);
});
};
root.setBackupFlag = function(walletId) {
storageService.setBackupFlag(walletId, function(err) {
if (err) $log.error(err);
@ -101,6 +117,10 @@ angular.module('copayApp.services')
wallet.balanceHidden = val;
});
_showBackupNeededModal(wallet, function(val) {
wallet.showBackupNeededModal = val;
});
wallet.removeAllListeners();
wallet.on('report', function(n) {

8
src/js/services/storageService.js
View file

@ -365,6 +365,14 @@ angular.module('copayApp.services')
storage.get('receiveTips', cb);
};
root.setBackupNeededModalFlag = function(walletId, val, cb) {
storage.set('showBackupNeededModal-' + walletId, val, cb);
};
root.getBackupNeededModalFlag = function(walletId, cb) {
storage.get('showBackupNeededModal-' + walletId, cb);
};
root.setAmazonGiftCards = function(network, gcs, cb) {
storage.set('amazonGiftCards-' + network, gcs, cb);
};

8
src/sass/views/onboarding/onboard-backup-warning.scss → src/sass/views/backup-warning.scss
View file

@ -1,4 +1,4 @@
#onboarding-backup-warning{
#backup-warning{
.warning{
margin:4rem auto 1rem;
height: 11rem;
@ -21,7 +21,7 @@
}
@media (max-width: 400px){
#onboarding-backup-warning{
#backup-warning{
.warning{
margin: 2rem auto 1rem;
height: 8rem;
@ -45,10 +45,10 @@
}
}
@media (max-height: 540px){
#onboarding-backup-warning{
#backup-warning{
.cta-buttons{
float:left;
position: relative;
}
}
}
}

20
src/sass/views/includes/modals/modals.scss
View file

@ -9,7 +9,12 @@
transform: translate(-50%, -50%);
border-radius: .25rem;
&-header {
background: rgb(1, 209, 162);
&-success {
background: rgb(1, 209, 162);
}
&-warning {
background: orange;
}
padding: 1rem;
border-radius: .25rem .25rem 0 0;
min-height: 120px;
@ -26,6 +31,12 @@
background-size: contain;
margin-top: .3rem;
}
&-img-warning {
background-image: url('../img/onboarding-success.svg');
height: 6rem;
background-size: contain;
margin-top: .3rem;
}
}
&-content {
padding: .5rem .8rem;
@ -42,11 +53,16 @@
font-weight: 200;
}
}
&-content-success{
&-content-success {
button{
color:rgb(23, 174, 140) !important;
}
}
&-content-warning {
button{
color: orange !important;
}
}
}
.modal-backdrop.active {

4
src/sass/views/includes/modals/screenshot-warning-model.scss
View file

@ -1,7 +1,7 @@
#screenshot-warning-modal{
.popup-modal-header{
&-img{
background-image: url('../img/onboarding-no-screenshot.svg');
background-image: url('../img/no-screenshot.svg');
}
}
}
}

4
src/sass/views/onboarding/onboarding.scss
View file

@ -101,7 +101,7 @@
max-width: 600px !important;
}
button{
max-width: 400px !important;
max-width: 400px !important;
}
}
}
@ -112,6 +112,6 @@
@import "onboard-tour";
@import "onboard-collect-email";
@import "onboard-backup-request";
@import "onboard-backup-warning";
@import "../backup-warning";
@import "onboard-disclaimer";
@import "onboard-push-notifications";

24
src/sass/views/tab-receive.scss
View file

@ -9,6 +9,20 @@
}
#address {
background: #fff;
.incomplete {
padding: 50px;
.title {
padding: 20px;
font-size: 25px;
color: #444;
}
.subtitle {
padding: 20px;
color: #444;
}
.button {
}
}
.item {
border: none;
font-size: .8rem;
@ -29,6 +43,16 @@
}
&-gen-address {}
}
.qr {
padding: 30px;
}
.backup {
background-color: orange;
color: #fff;
i {
padding: 10px;
}
}
}
#wallets {
position: relative;