mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #243 from maraoz/optimize/addresses
Optimize address tab, with lazy loading
This commit is contained in:
commit
eb1aaf679c
|
@ -325,3 +325,6 @@ hr { margin: 2.25rem 0;}
|
|||
background: #C0392B;
|
||||
}
|
||||
|
||||
a.loading {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
37
index.html
37
index.html
|
@ -18,11 +18,15 @@
|
|||
<span class="logo"></span>
|
||||
</div>
|
||||
<div class="large-9 medium-9 columns text-center p10t" ng-show="$root.wallet">
|
||||
<div class="large-4 medium-4 columns line-dashed-v">
|
||||
<div class="large-4 columns line-dashed-v">
|
||||
<a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
|
||||
<strong><span>{{$root.getWalletDisplay()}}</span></strong>
|
||||
</a>
|
||||
<a class="button radius small-icon" href="#" title="Signout" ng-click="signout()"><i class="fi-power"></i></a>
|
||||
<a class="button radius small-icon" title="Manual Refresh"
|
||||
ng-disabled="$root.loading"
|
||||
ng-click="refresh()"><i class="fi-refresh"></i></a>
|
||||
<a class="button radius small-icon" title="Signout"
|
||||
ng-click="signout()"><i class="fi-power"></i></a>
|
||||
</div>
|
||||
<div class="large-4 medium-4 columns line-dashed-v">
|
||||
Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
|
||||
|
@ -248,21 +252,34 @@
|
|||
<div class="addresses" data-ng-controller="AddressesController">
|
||||
<div ng-show='$root.wallet.publicKeyRing.isComplete()'>
|
||||
<div class="row">
|
||||
<div class="large-9 columns" ng-if="addrs[0]">
|
||||
<h3>Addresses (available to spend)</h3>
|
||||
<div class="large-9 columns" ng-if="addrInfos[0]">
|
||||
<div class="large-8 columns">
|
||||
<a class="panel db" ng-repeat="addr in addrs" ng-click="selectAddr(addr)">{{addr}}
|
||||
<span ng-if="!isMain[addr]">(change)</span>
|
||||
<span class="right">({{balanceByAddr[addr] || 0}} <i class="fi-bitcoin"></i>)</span></a>
|
||||
<a class="panel db" ng-repeat="addrInfo in addrInfos"
|
||||
ng-click="selectAddr(addrInfo.address.toString())">
|
||||
<span>{{addrInfo.address.toString()}}</span>
|
||||
<span ng-if="addrInfo.isChange">(change)</span>
|
||||
<span class="right">
|
||||
<span ng-if="$root.loading">...</span>
|
||||
<span ng-if="!$root.loading">{{balanceByAddr[addrInfo.address.toString()] || 0}}</span>
|
||||
<i class="fi-bitcoin"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="large-4 columns line-dashed-v text-center">
|
||||
<qrcode size="160" data="{{selectedAddr}}"></qrcode>
|
||||
<p class="m10t" ng-repeat="addr in addrs" ng-if="selectedAddr==addr"> <strong> {{balanceByAddr[addr]}} <i class="fi-bitcoin"></i> </strong> </p>
|
||||
<p class="m10t">
|
||||
<strong>
|
||||
<span ng-if="$root.loading">...</span>
|
||||
<span ng-if="!$root.loading">{{balanceByAddr[selectedAddr] || 0}}</span>
|
||||
<i class="fi-bitcoin"></i>
|
||||
</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns text-center" ng-class="{'large-3' : addrs[0]}">
|
||||
<div class="columns text-center" ng-class="{'large-3' : !!addrInfos[0]}">
|
||||
<p> Create a New <strong> Address </strong> </p>
|
||||
<button class="secondary radius expandi new-address" ng-click="newAddr()" ng-disabled="loading" loading="Creating"> Create </button>
|
||||
<button class="secondary radius expandi new-address" ng-click="newAddr()"
|
||||
ng-disabled="loading" loading="Creating"> Create </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
'use strict';
|
||||
|
||||
|
||||
var copay = require('copay');
|
||||
|
||||
var copayApp = window.copayApp = angular.module('copay',[
|
||||
'ngRoute',
|
||||
'mm.foundation',
|
||||
|
|
|
@ -2,36 +2,21 @@
|
|||
|
||||
angular.module('copay.addresses').controller('AddressesController',
|
||||
function($scope, $rootScope, controllerUtils) {
|
||||
$scope.title = 'Home';
|
||||
$scope.oneAtATime = true;
|
||||
$scope.addrBalance = {};
|
||||
|
||||
var w = $rootScope.wallet;
|
||||
|
||||
var _updateBalance = function () {
|
||||
controllerUtils.setSocketHandlers();
|
||||
w.getBalance(true, function (balance, balanceByAddr, isMain) {
|
||||
if (balanceByAddr && Object.keys(balanceByAddr).length) {
|
||||
$rootScope.balanceByAddr = balanceByAddr;
|
||||
$scope.isMain = isMain;
|
||||
$scope.addrs = Object.keys(balanceByAddr);
|
||||
$scope.selectedAddr = $scope.addrs[0];
|
||||
$scope.loading = false;
|
||||
$rootScope.$digest();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$scope.newAddr = function() {
|
||||
$scope.loading = true;
|
||||
w.generateAddress();
|
||||
_updateBalance();
|
||||
controllerUtils.updateBalance(function() {
|
||||
$scope.loading = false;
|
||||
$rootScope.$digest();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.selectAddr = function(addr) {
|
||||
$scope.selectedAddr = addr;
|
||||
};
|
||||
|
||||
_updateBalance();
|
||||
w.on('refresh', _updateBalance);
|
||||
});
|
||||
|
|
|
@ -40,7 +40,13 @@ angular.module('copay.header').controller('HeaderController',
|
|||
w.disconnect();
|
||||
controllerUtils.logout();
|
||||
}
|
||||
$rootScope.flashMessage = {};
|
||||
$scope.clearFlashMessage();
|
||||
};
|
||||
|
||||
$scope.refresh = function() {
|
||||
controllerUtils.updateBalance(function() {
|
||||
$rootScope.$digest();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.clearFlashMessage = function() {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
'use strict';
|
||||
var copay = require('copay');
|
||||
|
||||
angular.element(document).ready(function() {
|
||||
// Init the app
|
||||
angular.bootstrap(document, ['copay']);
|
||||
|
|
|
@ -143,7 +143,6 @@ PublicKeyRing.prototype.addCopayer = function (newEpk) {
|
|||
return newEpk;
|
||||
};
|
||||
|
||||
|
||||
PublicKeyRing.prototype.getPubKeys = function (index, isChange) {
|
||||
this._checkKeys();
|
||||
|
||||
|
@ -159,6 +158,7 @@ PublicKeyRing.prototype.getPubKeys = function (index, isChange) {
|
|||
this.publicKeysCache[path] = pubKeys.map(function(pk){return pk.toString('hex');});
|
||||
} else {
|
||||
pubKeys = pubKeys.map(function(s){return new Buffer(s,'hex')});
|
||||
//console.log('public keys cache HIT');
|
||||
}
|
||||
|
||||
return pubKeys;
|
||||
|
@ -183,21 +183,12 @@ PublicKeyRing.prototype.getRedeemScript = function (index, isChange) {
|
|||
|
||||
// TODO this could be cached
|
||||
PublicKeyRing.prototype.getAddress = function (index, isChange) {
|
||||
this._checkIndexRange(index, isChange);
|
||||
var script = this.getRedeemScript(index,isChange);
|
||||
return Address.fromScript(script, this.network.name);
|
||||
};
|
||||
|
||||
// TODO this could be cached
|
||||
PublicKeyRing.prototype._addScriptMap = function (map, index, isChange) {
|
||||
this._checkIndexRange(index, isChange);
|
||||
var script = this.getRedeemScript(index,isChange);
|
||||
map[Address.fromScript(script, this.network.name).toString()] = script.getBuffer().toString('hex');
|
||||
};
|
||||
|
||||
// TODO this could be cached
|
||||
PublicKeyRing.prototype.getScriptPubKeyHex = function (index, isChange) {
|
||||
this._checkIndexRange(index, isChange);
|
||||
var addr = this.getAddress(index,isChange);
|
||||
return Script.createP2SH(addr.payload()).getBuffer().toString('hex');
|
||||
};
|
||||
|
@ -218,21 +209,39 @@ PublicKeyRing.prototype.generateAddress = function(isChange) {
|
|||
|
||||
};
|
||||
|
||||
PublicKeyRing.prototype.getAddresses = function(onlyMain) {
|
||||
PublicKeyRing.prototype.getAddresses = function(excludeChange) {
|
||||
return this.getAddressesInfo(excludeChange).map(function(info) {
|
||||
return info.address;
|
||||
});
|
||||
};
|
||||
|
||||
PublicKeyRing.prototype.getAddressesInfo = function(excludeChange) {
|
||||
var ret = [];
|
||||
if (!excludeChange) {
|
||||
for (var i=0; i<this.changeAddressIndex; i++) {
|
||||
ret.unshift({
|
||||
address: this.getAddress(i,true),
|
||||
isChange: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (var i=0; i<this.addressIndex; i++) {
|
||||
ret.unshift(this.getAddress(i,false));
|
||||
ret.unshift({
|
||||
address: this.getAddress(i,false),
|
||||
isChange: false
|
||||
});
|
||||
}
|
||||
|
||||
if (!onlyMain) {
|
||||
for (var i=0; i<this.changeAddressIndex; i++) {
|
||||
ret.unshift(this.getAddress(i,true));
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
};
|
||||
|
||||
// TODO this could be cached
|
||||
PublicKeyRing.prototype._addScriptMap = function (map, index, isChange) {
|
||||
var script = this.getRedeemScript(index,isChange);
|
||||
map[Address.fromScript(script, this.network.name).toString()] = script.getBuffer().toString('hex');
|
||||
};
|
||||
|
||||
PublicKeyRing.prototype.getRedeemScriptMap = function () {
|
||||
var ret = {};
|
||||
|
||||
|
|
|
@ -401,16 +401,19 @@ Wallet.prototype.addSeenToTxProposals = function() {
|
|||
return ret;
|
||||
};
|
||||
|
||||
Wallet.prototype.getAddresses = function(onlyMain) {
|
||||
return this.publicKeyRing.getAddresses(onlyMain);
|
||||
// TODO: remove this method and use getAddressesInfo everywhere
|
||||
Wallet.prototype.getAddresses = function(excludeChange) {
|
||||
return this.publicKeyRing.getAddresses(excludeChange);
|
||||
};
|
||||
|
||||
Wallet.prototype.getAddressesStr = function(onlyMain) {
|
||||
var ret = [];
|
||||
this.publicKeyRing.getAddresses(onlyMain).forEach(function(a) {
|
||||
ret.push(a.toString());
|
||||
Wallet.prototype.getAddressesStr = function(excludeChange) {
|
||||
return this.getAddresses(excludeChange).map(function(a) {
|
||||
return a.toString();
|
||||
});
|
||||
return ret;
|
||||
};
|
||||
|
||||
Wallet.prototype.getAddressesInfo = function(excludeChange) {
|
||||
return this.publicKeyRing.getAddressesInfo(excludeChange);
|
||||
};
|
||||
|
||||
Wallet.prototype.addressIsOwn = function(addrStr) {
|
||||
|
@ -432,27 +435,21 @@ Wallet.prototype.getBalance = function(safe, cb) {
|
|||
var balanceByAddr = {};
|
||||
var isMain = {};
|
||||
var COIN = bitcore.util.COIN;
|
||||
var addresses = this.getAddressesStr(true);
|
||||
|
||||
if (!addresses.length) return cb(0, []);
|
||||
|
||||
// Prefill balanceByAddr with main address
|
||||
addresses.forEach(function(a) {
|
||||
balanceByAddr[a] = 0;
|
||||
isMain[a] = 1;
|
||||
});
|
||||
var f = safe ? this.getSafeUnspent.bind(this) : this.getUnspent.bind(this);
|
||||
f(function(utxos) {
|
||||
for (var i = 0; i < utxos.length; i++) {
|
||||
var u = utxos[i];
|
||||
var amt = u.amount * COIN;
|
||||
balance = balance + amt;
|
||||
balance += amt;
|
||||
balanceByAddr[u.address] = (balanceByAddr[u.address] || 0) + amt;
|
||||
}
|
||||
|
||||
// we multiply and divide by COIN to avoid rounding errors when adding
|
||||
for (var a in balanceByAddr) {
|
||||
balanceByAddr[a] = balanceByAddr[a] / COIN;
|
||||
}
|
||||
return cb(balance / COIN, balanceByAddr, isMain);
|
||||
balance = balance / COIN;
|
||||
return cb(balance, balanceByAddr, isMain);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -4,6 +4,8 @@ angular.module('copay.controllerUtils')
|
|||
.factory('controllerUtils', function($rootScope, $sce, $location, Socket, video) {
|
||||
var root = {};
|
||||
$rootScope.videoSrc = {};
|
||||
$rootScope.loading = false;
|
||||
|
||||
$rootScope.getVideoURL = function(copayer) {
|
||||
var encoded = $rootScope.videoSrc[copayer];
|
||||
if (!encoded) return;
|
||||
|
@ -18,7 +20,6 @@ angular.module('copay.controllerUtils')
|
|||
};
|
||||
|
||||
root.logout = function() {
|
||||
console.log('### DELETING WALLET'); //TODO
|
||||
$rootScope.wallet = null;
|
||||
delete $rootScope['wallet'];
|
||||
$rootScope.totalBalance = 0;
|
||||
|
@ -44,7 +45,7 @@ angular.module('copay.controllerUtils')
|
|||
return;
|
||||
}
|
||||
$rootScope.videoSrc[peerID] = encodeURI(url);
|
||||
$rootScope.$apply();
|
||||
$rootScope.$digest();
|
||||
};
|
||||
w.on('badMessage', function(peerId) {
|
||||
$rootScope.flashMessage = {
|
||||
|
@ -54,12 +55,15 @@ angular.module('copay.controllerUtils')
|
|||
});
|
||||
w.on('created', function(myPeerID) {
|
||||
video.setOwnPeer(myPeerID, w, handlePeerVideo);
|
||||
$location.path('addresses');
|
||||
$rootScope.wallet = w;
|
||||
root.updateBalance();
|
||||
$location.path('addresses');
|
||||
});
|
||||
w.on('refresh', function() {
|
||||
root.updateBalance();
|
||||
root.setSocketHandlers();
|
||||
root.updateBalance(function() {
|
||||
$rootScope.$digest();
|
||||
});
|
||||
$rootScope.$digest();
|
||||
});
|
||||
w.on('publicKeyRingUpdated', function() {
|
||||
root.setSocketHandlers();
|
||||
|
@ -72,21 +76,31 @@ angular.module('copay.controllerUtils')
|
|||
w.netStart();
|
||||
};
|
||||
|
||||
root.updateBalance = function() {
|
||||
root.updateBalance = function(cb) {
|
||||
root.setSocketHandlers();
|
||||
$rootScope.balanceByAddr = {};
|
||||
var w = $rootScope.wallet;
|
||||
if (!w) return;
|
||||
$rootScope.addrInfos = w.getAddressesInfo();
|
||||
if ($rootScope.addrInfos.length === 0) return;
|
||||
$rootScope.loading = true;
|
||||
w.getBalance(false, function(balance, balanceByAddr) {
|
||||
console.log('New total balance:', balance);
|
||||
$rootScope.totalBalance = balance;
|
||||
$rootScope.balanceByAddr = balanceByAddr;
|
||||
console.log('New balance:', balance);
|
||||
w.getBalance(true, function(balance) {
|
||||
$rootScope.availableBalance = balance;
|
||||
$rootScope.$digest();
|
||||
$rootScope.selectedAddr = $rootScope.addrInfos[0].address.toString();
|
||||
$rootScope.loading = false;
|
||||
if (cb) cb();
|
||||
});
|
||||
w.getBalance(true, function(balance) {
|
||||
console.log('New available balance:', balance);
|
||||
$rootScope.availableBalance = balance;
|
||||
$rootScope.loading = false;
|
||||
if (cb) cb();
|
||||
});
|
||||
};
|
||||
|
||||
root.setSocketHandlers = function() {
|
||||
// TODO: optimize this?
|
||||
Socket.removeAllListeners();
|
||||
if (!$rootScope.wallet) return;
|
||||
|
||||
|
@ -98,10 +112,11 @@ angular.module('copay.controllerUtils')
|
|||
addrs.forEach(function(addr) {
|
||||
Socket.on(addr, function(txid) {
|
||||
console.log('Received!', txid);
|
||||
root.updateBalance();
|
||||
root.updateBalance(function() {
|
||||
$rootScope.$digest();
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return root;
|
||||
});
|
||||
|
|
|
@ -1,8 +1,4 @@
|
|||
'use strict';
|
||||
|
||||
var wf;
|
||||
angular.module('copay.walletFactory').factory('walletFactory', function($rootScope) {
|
||||
wf = wf || new copay.WalletFactory(config);
|
||||
return wf;
|
||||
});
|
||||
angular.module('copay.walletFactory').value('walletFactory', new copay.WalletFactory(config));
|
||||
|
||||
|
|
Loading…
Reference in New Issue