fix and enhance create / join / import forms for hardware wallets

This commit is contained in:
Matias Alejo Garcia 2015-09-29 12:45:06 -03:00
commit f2deba10ec
9 changed files with 178 additions and 81 deletions

View file

@ -103,12 +103,12 @@
<div ng-hide="hideAdv" class="row">
<div class="large-12 columns">
<label ng-show="create.isChromeApp() && totalCopayers > 1 " for="hw-ledger" class="oh">
<label ng-show="index.isChromeApp && totalCopayers > 1 " for="hw-ledger" class="oh">
<span translate>Use Ledger hardware wallet</span>
<switch id="hw-ledger" name="hwLedger" ng-model="hwLedger" ng-change="isTestnet=false" class="green right m5t m10b"></switch>
</label>
<label ng-show="1" for="hw-trezor" class="oh">
<label ng-show="!index.isCordova" for="hw-trezor" class="oh">
<span translate>Use TREZOR hardware wallet</span>
<switch id="hw-trezor" name="hwTrezor" ng-model="hwTrezor" class="green right m5t m10b"></switch>
</label>
@ -131,21 +131,21 @@
<switch id="seed" name="setSeed" ng-model="setSeed" class="green right m5t m10b"></switch>
</label>
<label for="createPassphrase" class="line-b oh" ng-show="!setSeed && !hwLedger && !hwTrezor" ><span translate>Seed Passphrase</span> <small translate>Add an optional passphrase to secure the seed</small>
<label for="createPassphrase" class="line-b oh" ng-hide="setSeed || hwLedger || hwTrezor" ><span translate>Add a Seed Passphrase</span> <small translate>Add an optional passphrase to secure the seed</small>
<div class="input">
<input type="text" class="form-control"
name="createPassphrase" ng-model="createPassphrase">
</div>
</label>
<label for="ext-master" class="m10t" ng-show="setSeed && !hwLedger">
<label for="ext-master" class="m10t" ng-show="setSeed">
<span translate>Wallet Seed</span>
<small translate>Enter the seed words (BIP39)</small>
<input id="ext-master"
type="text"
name="privateKey" ng-model="privateKey">
</label>
<label for="passphrase" class="line-b oh" ng-show="setSeed && !hwLedger && !hwTrezor"><span translate>Seed Passphrase</span> <small translate>The seed could require a passphrase to be imported</small>
<label for="passphrase" class="line-b oh" ng-show="setSeed"><span translate>Seed Passphrase</span> <small translate>The seed could require a passphrase to be imported</small>
<div class="input">
<input type="text" class="form-control" name="passphrase" ng-model="passphrase">
</div>

View file

@ -5,7 +5,7 @@
</div>
<div class="content p20v" ng-controller="importController as import" ng-init="type='12'">
<div class="onGoingProcess" ng-show="import.loading && !import.ledger">
<div class="onGoingProcess" ng-show="import.loading && !import.hwWallet">
<div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
<div class="spinner">
<div class="rect1"></div>
@ -17,7 +17,7 @@
<span translate>Importing wallet...</span>
</div>
</div>
<div class="onGoingProcess" ng-show="import.ledger">
<div class="onGoingProcess" ng-show="import.hwWallet">
<div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
<div class="spinner">
<div class="rect1"></div>
@ -26,26 +26,14 @@
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<span translate>Connecting to Ledger Wallet...</span>
<span translate>Connecting to {{import.hwWallet}} Wallet...</span>
</div>
</div>
<div class="create-tab small-only-text-center" ng-hide="create.hideTabs">
<div class="row" ng-show="!index.isChromeApp">
<div class="tab-container small-6 medium-6 large-6">
<a href
ng-class="{'selected': type =='12'}"
ng-click="import.setType('12')" translate>Wallet Seed</a>
</div>
<div class="tab-container small-6 medium-6 large-6">
<a href
ng-class="{'selected': type=='file'}"
ng-click="import.setType('file')" translate>File/Text Backup</a>
</div>
</div>
<div class="row" ng-show="index.isChromeApp">
<div class="row">
<div class="tab-container small-4 medium-4 large-4">
<a href
ng-class="{'selected': type =='12'}"
@ -58,17 +46,12 @@
</div>
<div class="tab-container small-4 medium-4 large-4">
<a href
ng-class="{'selected': type=='ledger'}"
ng-click="import.setType('ledger')" translate>Ledger</a>
ng-class="{'selected': type=='hwWallet'}"
ng-click="import.setType('hwWallet')" translate>Hardware Wallet</a>
</div>
</div>
</div>
<div class="row" ng-show="type == '12' ">
<div class="large-12 columns">
<form name="importForm12" ng-submit="import.importMnemonic(importForm12)" novalidate>
@ -166,14 +149,15 @@
</div>
</div>
<div class="row" ng-show="type == 'ledger'">
<div class="row" ng-show="type == 'hwWallet'">
<div class="large-12 columns">
<form name="importForm3" ng-submit="import.importLedger(importForm3)" novalidate>
<div class="box-notification" ng-show="import.error">
<span class="text-warning size-14">
{{import.error|translate}}
</span>
</div>
<div class="box-notification" ng-show="import.error">
<span class="text-warning size-14">
{{import.error|translate}}
</span>
</div>
<form name="importForm3" ng-submit="import.importLedger(importForm3)" ng-show="index.isChromeApp" novalidate>
<div class="large-12 columns">
<!-- TODO: account
<label class=" oh">
@ -185,7 +169,24 @@
-->
<button translate type="submit" class="button round expand black"
ng-disabled="import.loading || import.ledger">
Import backup
Import from Ledger
</button>
</div>
</form>
<form name="importForm4" ng-submit="import.importTrezor(importForm4)" novalidate>
<div class="large-12 columns">
<!-- TODO: account
<label class=" oh">
<span translate>Ledger Slot</span>
<select class="m10t" ng-model="externalIndex" ng-options="externalIndex as externalIndex for externalIndex in import.externalIndexValues">
</select>
</label>
<div class="oh text-gray line-b size-12 p10b m20b"><span translate>Ledger supports up to 20 Copay wallets simultaneously. Select which slot to import</div>
-->
<button translate type="submit" class="button round expand black"
ng-disabled="import.loading || import.ledger">
Import from TREZOR
</button>
</div>
</form>

View file

@ -6,7 +6,7 @@
<div class="content p20v" ng-controller="joinController as join">
<div class="onGoingProcess" ng-show="join.loading && !join.ledger">
<div class="onGoingProcess" ng-show="join.loading && !join.hwWallet">
<div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
<div class="spinner">
<div class="rect1"></div>
@ -19,7 +19,7 @@
</div>
</div>
<div class="onGoingProcess" ng-show="join.ledger">
<div class="onGoingProcess" ng-show="join.hwWallet">
<div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
<div class="spinner">
<div class="rect1"></div>
@ -28,7 +28,7 @@
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<span translate>Connecting to Ledger Wallet...</span>
<span translate>Connecting to {{join.hwWallet}} Wallet...</span>
</div>
</div>
@ -76,12 +76,17 @@
<i ng-show="join.hideAdv" class="icon-arrow-up4"></i>
</a>
<div ng-show="join.hideAdv" class="row">
<div class="large-12 columns" ng-show="join.isChromeApp()">
<label for="hw-ledger" class="oh">
<span translate>Use Ledger hardware wallet</span>
<switch id="hw-ledger" name="hwLedger" ng-model="hwLedger" class="green right m5t m10b"></switch>
</label>
</div>
<div class="large-12 columns">
<label for="hw-ledger" class="oh" ng-show="index.isChromeApp">
<span translate>Use Ledger hardware wallet</span>
<switch id="hw-ledger" name="hwLedger" ng-model="hwLedger" class="green right m5t m10b"></switch>
</label>
<label ng-show="!index.isCordova" for="hw-trezor" class="oh">
<span translate>Use TREZOR hardware wallet</span>
<switch id="hw-trezor" name="hwTrezor" ng-model="hwTrezor" class="green right m5t m10b"></switch>
</label>
<!-- TODO account
<div class="large-12 columns" ng-hide="!hwLedger">
<label class="oh">
@ -92,32 +97,30 @@
<div class="oh text-gray line-b size-12 p10b m20b"><span translate>Ledger supports up to 20 Copay wallets simultaneously. Select which slot should be used to host this wallet</div>
</div>
-->
<div class="large-12 columns">
<label ng-show="!hwLedger" for="seed" class="oh">
<label ng-show="!hwLedger && !hwTrezor" for="seed" class="oh">
<span translate>Specify your wallet seed</span>
<switch id="seed" name="setSeed" ng-model="setSeed" class="green right m5t m10b"></switch>
</label>
<label for="createPassphrase" class="line-b oh" ng-show="!setSeed && !hwLedger" ><span translate>Seed Passphrase</span> <small translate>Add an optional passphrase to secure the seed</small>
<label for="createPassphrase" class="line-b oh" ng-show="!setSeed && !hwLedger && !hwTrezor" ><span translate>Add a Seed Passphrase</span> <small translate>Add an optional passphrase to secure the seed</small>
<div class="input">
<input type="text" class="form-control"
name="createPassphrase" ng-model="createPassphrase">
</div>
</label>
<label for="ext-master" class="m10t" ng-show="setSeed && !hwLedger">
<label for="ext-master" class="m10t" ng-show="setSeed">
<span translate>Wallet Seed</span>
<small translate>Enter the seed words (BIP39)</small>
<input id="ext-master"
type="text"
name="privateKey" ng-model="privateKey">
</label>
<label for="passphrase" class="line-b oh" ng-show="setSeed && !hwLedger"><span translate>Seed Passphrase</span> <small translate>The seed could require a passphrase to be imported</small>
<div class="input">
<input type="text" class="form-control" name="passphrase" ng-model="passphrase">
</div>
</label>
<label for="passphrase" class="line-b oh" ng-show="setSeed"><span translate>Seed Passphrase</span> <small translate>The seed could require a passphrase to be imported</small>
<div class="input">
<input type="text" class="form-control" name="passphrase" ng-model="passphrase">
</div>
</label>
</div>
</div>

View file

@ -1,7 +1,7 @@
'use strict';
angular.module('copayApp.controllers').controller('createController',
function($scope, $rootScope, $location, $timeout, $log, lodash, go, profileService, configService, isMobile, isCordova, gettext, isChromeApp, ledger, trezor) {
function($scope, $rootScope, $location, $timeout, $log, lodash, go, profileService, configService, isCordova, gettext, ledger, trezor, isMobile) {
var self = this;
var defaults = configService.getDefaults();
@ -42,10 +42,6 @@ angular.module('copayApp.controllers').controller('createController',
updateRCSelect(tc);
};
this.isChromeApp = function() {
return isChromeApp;
};
this.create = function(form) {
if (form && form.$invalid) {
this.error = gettext('Please enter the required fields');

View file

@ -1,12 +1,11 @@
'use strict';
angular.module('copayApp.controllers').controller('importController',
function($scope, $rootScope, $location, $timeout, $log, profileService, notification, go, isMobile, isCordova, sjcl, gettext, lodash, ledger) {
function($scope, $rootScope, $location, $timeout, $log, profileService, notification, go, isMobile, sjcl, gettext, lodash, ledger, trezor) {
var self = this;
this.isSafari = isMobile.Safari();
this.isCordova = isCordova;
var reader = new FileReader();
window.ignoreMobilePause = true;
@ -182,6 +181,44 @@ angular.module('copayApp.controllers').controller('importController',
_importMnemonic(words, opts);
};
this.importTrezor = function(form) {
var self = this;
if (form.$invalid) {
this.error = gettext('There is an error in the form');
$timeout(function() {
$scope.$apply();
});
return;
}
self.hwWallet = 'Trezor';
// TODO account
trezor.getInfoForNewWallet(0, function(err, lopts) {
self.hwWallet = false;
if (err) {
self.error = err;
$scope.$apply();
return;
}
lopts.externalSource = 'trezor';
self.loading = true;
$log.debug('Import opts', lopts);
profileService.importExtendedPublicKey(lopts, function(err, walletId) {
self.loading = false;
if (err) {
self.error = err;
return $timeout(function() {
$scope.$apply();
});
}
$rootScope.$emit('Local/WalletImported', walletId);
notification.success(gettext('Success'), gettext('Your wallet has been imported correctly'));
go.walletHome();
});
}, 100);
};
this.importLedger = function(form) {
var self = this;
if (form.$invalid) {
@ -191,16 +228,15 @@ angular.module('copayApp.controllers').controller('importController',
});
return;
}
self.ledger = true;
self.hwWallet = 'Ledger';
// TODO account
ledger.getInfoForNewWallet(0, function(err, lopts) {
self.ledger = false;
self.hwWallet = false;
if (err) {
self.error = err;
$scope.$apply();
return;
}
lopts.externalIndex = $scope.externalIndex;
lopts.externalSource = 'ledger';
self.loading = true;
$log.debug('Import opts', lopts);

View file

@ -1,14 +1,10 @@
'use strict';
angular.module('copayApp.controllers').controller('joinController',
function($scope, $rootScope, $timeout, go, isMobile, notification, profileService, isCordova, isChromeApp, $modal, gettext, lodash, ledger) {
function($scope, $rootScope, $timeout, go, notification, profileService, isCordova, $modal, gettext, lodash, ledger, trezor) {
var self = this;
this.isChromeApp = function() {
return isChromeApp;
};
this.onQrCodeScanned = function(data) {
$scope.secret = data;
$scope.joinForm.secret.$setViewValue(data);
@ -45,11 +41,13 @@ angular.module('copayApp.controllers').controller('joinController',
return;
}
if (form.hwLedger.$modelValue) {
self.ledger = true;
// TODO account / network
ledger.getInfoForNewWallet(0, opts.networkName, function(err, lopts) {
self.ledger = false;
if (form.hwLedger.$modelValue || form.hwTrezor.$modelValue) {
self.hwWallet = form.hwLedger.$modelValue ? 'Leger' : 'TREZOR';
var src= form.hwLedger.$modelValue ? leger : trezor;
var account = 0;
src.getInfoForNewWallet(account, function(err, lopts) {
self.hwWallet = false;
if (err) {
self.error = err;
$scope.$apply();

View file

@ -25,7 +25,7 @@ angular.module('copayApp.services')
body = gettextCatalog.getString('Copayer already in this wallet');
break;
case 'COPAYER_REGISTERED':
body = gettextCatalog.getString('Wallet already registered');
body = gettextCatalog.getString('Key already associated with an existing wallet');
break;
case 'COPAYER_VOTED':
body = gettextCatalog.getString('Copayer already voted on this spend proposal');

View file

@ -268,6 +268,7 @@ console.log('[profileService.js.239:walletClient:]',walletClient); //TODO
return cb(gettext('Cannot join the same wallet more that once'));
}
} catch (ex) {
$log.debug(ex);
return cb(gettext('Bad wallet invitation'));
}
opts.networkName = walletData.network;
@ -568,7 +569,11 @@ console.log('[profileService.js.239:walletClient:]',walletClient); //TODO
var fc = root.focusedClient;
$log.info('Requesting Trezor to sign the transaction');
trezor.signTx(txp, 0, function(result) {
console.log('[profileService.js.570] xPub:', fc.credentials.xPubKey); //TODO
var xPubKeys = lodash.pluck(fc.credentials.publicKeyRing,'xPubKey');
console.log('[profileService.js.571:xPubKeys:]',xPubKeys); //TODO
trezor.signTx(xPubKeys, txp, 0, function(result) {
$log.debug('Trezor response',result);
if (!result.success)
return cb(result.error || result);

View file

@ -58,8 +58,8 @@ angular.module('copayApp.services')
};
root.signTx = function(txp, account, callback) {
console.log('[trezor.js.66:txp:]', txp); //TODO
root.signTx = function(xPubKeys, txp, account, callback) {
console.log('[trezor.js.66:txp:]', xPubKeys, txp); //TODO
var inputs = [],
outputs = [];
@ -109,7 +109,65 @@ angular.module('copayApp.services')
}
} else {
$log.error('TODO: multisig');
// P2SH Wallet
var inAmount = 0;
var sigs = xPubKeys.map(function(v) {
return '';
});
inputs = lodash.map(txp.inputs, function(i) {
var pathArr = i.path.split('/');
var n = [44 | 0x80000000, 0 | 0x80000000, account | 0x80000000, parseInt(pathArr[1]), parseInt(pathArr[2])];
// var np = [parseInt(pathArr[1]), parseInt(pathArr[2])];
inAmount += i.satoshis;
var pubkeys = lodash(xPubKeys.map(function(v) {
return {
node: v,
address_n: n,
};
})).reverse().value();
console.log('[trezor.js.121:pubkeys:]',pubkeys); //TODO
return {
address_n: n,
prev_index: i.vout,
prev_hash: i.txid,
script_type: 'SPENDMULTISIG',
multisig: {
pubkeys: pubkeys,
signatures: sigs,
m: txp.requiredSignatures,
}
};
});
var change = inAmount - txp.fee - txp.amount;
if (change > 0) {
var pathArr = txp.changeAddress.path.split('/');
var n = [44 | 0x80000000, 0 | 0x80000000, account | 0x80000000, parseInt(pathArr[1]), parseInt(pathArr[2])];
var pubkeys = lodash(xPubKeys.map(function(v) {
return {
node: v,
address_n: n,
};
})).reverse().value();
tmpOutputs.push({
address_n: n,
amount: change,
script_type: 'PAYTOMULTISIG',
multisig: {
pubkeys: pubkeys,
signatures: sigs,
m: txp.requiredSignatures,
}
});
}
}
// Shuffle outputs for improved privacy
@ -118,7 +176,7 @@ angular.module('copayApp.services')
outputs[order] = tmpOutputs.shift();
});
if (tmpOutputs.length)
if (tmpOutputs.length)
return cb("Error creating transaction: tmpOutput order");
} else {
outputs = tmpOutputs;