Merge pull request #847 from LiskHQ/xxx-explorer-ux-redesign

Explorer redesign - Closes #796 #813 #816 #820 #825

lib/api/accounts.js

@@ -14,7 +14,6 @@
  *
  */
 const request = require('request');
-const _ = require('underscore');
 const async = require('async');
 const coreUtils = require('../../utils/core.js');
 
@@ -143,7 +142,12 @@ module.exports = function (app) {
 				} else if (err || response.statusCode !== 200) {
 					return cb(err || 'Response was unsuccessful');
 				} else if (body && Array.isArray(body.data) && body.data.length > 0) {
-					account.multisignatures = account.multisignatures || [];
+					account.multisignatureAccount = {
+						lifetime: body.data[0].lifetime,
+						members: body.data[0].members,
+						min: body.data[0].min,
+					};
+					account.multisignatureGroups = body.data[0].members || [];
 					return cb(null, account);
 				}
 				return cb(body.error);
@@ -159,9 +163,18 @@ module.exports = function (app) {
 					return cb(err || 'Response was unsuccessful');
 				} else if (body && Array.isArray(body.data)) {
 					if (body.data.length > 0) {
-						account.multisignatures = _.extend(
-							account.multisignatures || [],
-							body.data[0].members.map(o => o.publicKey));
+						// eslint-disable-next-line arrow-body-style
+						account.multisignatureMemberships = body.data.map((o) => {
+							return {
+								address: o.address,
+								balance: o.balance,
+								lifetime: o.lifetime,
+								min: o.min,
+								publicKey: o.publicKey,
+								secondPublicKey: o.secondPublicKey,
+								unconfirmedBalance: o.unconfirmedBalance,
+							};
+						});
 					}
 					return cb(null, account);
 				}
@@ -278,11 +291,13 @@ module.exports = function (app) {
 					delegate: o.delegate,
 					incoming_cnt: String(o.incoming_cnt),
 					knowledge: o.knowledge,
-					multisignatures: o.multisignatures || [],
+					multisignatures: o.multisignatureGroups || [],
+					multisignatureAccount: o.multisignatureAccount || {},
+					multisignatureMemberships: o.multisignatureMemberships || [],
 					outgoing_cnt: String(o.outgoing_cnt),
 					publicKey: o.publicKey,
 					secondPublicKey: o.secondPublicKey,
-					secondSignature: o.secondSignature || 0,
+					secondSignature: !!o.secondPublicKey,
 					success: o.success,
 					u_multisignatures: o.u_multisignatures || [],
 					unconfirmedBalance: o.unconfirmedBalance,

src/assets/styles/common.css

@@ -207,13 +207,10 @@ h1 {
   margin: 0;
 }
 
-h1>small {
-  white-space: nowrap;
-}
-
 @media (max-width: 769px) {
   h1 {
-    padding: 30px 12px 25px;
+		padding: 30px 12px 25px;
+		font-size: 2em;
   }
 }
 
@@ -1200,8 +1197,8 @@ a.v_highlight_more {
 }
 
 .big-info {
-  padding-bottom: 23px;
-  padding-top: 23px;
+  padding-bottom: 24px;
+  padding-top: 0px;
 }
 
 .big-info p.small-title {
@@ -1223,8 +1220,8 @@ a.v_highlight_more {
 
 @media (max-width: 768px) {
   .big-info {
-    padding-bottom: 10px;
-    padding-top: 10px;
+    padding-bottom: 12px;
+    padding-top: 0px;
   }
 }
 

src/components/activity-graph/activity-graph.html

@@ -16,7 +16,11 @@
  */
 -->
 <div>
-	<h1>Activity Graph</h1>
+	<h1>
+		Activity Graph
+		<br />
+		<small><span>Real-time graphical presentation of the network activty</span></small>
+	</h1>
 	<div class="row horizontal-padding-xs horizontal-padding-s horizontal-padding-m horizontal-padding-l">
 		<div class="col-xs-12">
 			<p class="text-justify">The following is a live graphical visualisation of the lisk blockchain. Upon initialization only the latest block

src/components/address/address.component.js

@@ -25,15 +25,41 @@ const AddressConstructor = function (
 ) {
 	const vm = this;
 
+	const addAccountTypeDescription = (d) => {
+		if (vm.isMultisig && vm.isDelegate) {
+			vm.accountType = 'Multisignature delegate account';
+		} else if (vm.isMultisig) {
+			vm.accountType = 'Multisignature account';
+		} else if (vm.isDelegate) {
+			vm.accountType = 'Delegate account';
+		} else {
+			vm.accountType = 'Regular account';
+		}
+
+		if (d.secondSignature) {
+			vm.accountType += ' with a second signature';
+		}
+		if (Array.isArray(d.multisignatureMemberships) && d.multisignatureMemberships.length >= 1) {
+			vm.accountType += `, member of ${d.multisignatureMemberships.length} multisignature group`;
+		}
+		if (Array.isArray(d.multisignatureMemberships) && d.multisignatureMemberships.length > 1) {
+			vm.accountType += 's';
+		}
+		return d;
+	};
+
 	vm.getAddress = () => {
 		$http.get('/api/getAccount', {
 			params: {
 				address: $stateParams.address,
 			},
 		}).then((resp) => {
 			if (resp.data.success) {
-				vm.address = resp.data;
+				vm.isMultisig = resp.data.multisignatureAccount !== null && typeof resp.data.multisignatureAccount === 'object' && resp.data.multisignatureAccount.members;
+				vm.isDelegate = resp.data.delegate !== null && typeof resp.data.delegate === 'object' && resp.data.delegate.username;
+				vm.address = addAccountTypeDescription(resp.data);
 				vm.getVotes(vm.address.publicKey);
+				if (vm.isDelegate) { vm.getVoters(vm.address.publicKey); }
 			} else {
 				throw new Error('Account was not found!');
 			}
@@ -50,6 +76,34 @@ const AddressConstructor = function (
 		});
 	};
 
+	vm.getVoters = (publicKey) => {
+		$http.get('/api/getVoters', { params: { publicKey } }).then((resp) => {
+			if (resp.data.success) {
+				vm.address.voters = resp.data.voters;
+				vm.address.votersMeta = resp.data.meta;
+				vm.address.votersCount = vm.address.votersMeta.count;
+			}
+		});
+	};
+
+	vm.loadMoreVoters = () => {
+		const limit = vm.address.votersMeta.limit;
+		const offset = vm.address.votersMeta.offset + limit;
+
+		$http.get('/api/getVoters', { params: { publicKey: vm.address.publicKey, limit, offset } }).then((resp) => {
+			if (resp.data.success) {
+				for (let i = 0; i < resp.data.voters.length; i++) {
+					if (vm.address.voters.indexOf(resp.data.voters[i]) < 0) {
+						vm.address.voters.push(resp.data.voters[i]);
+					}
+				}
+
+				vm.address.votersMeta = resp.data.meta;
+				vm.address.votersCount = vm.address.votersMeta.count;
+			}
+		});
+	};
+
 	vm.address = {
 		address: $stateParams.address,
 	};
@@ -69,6 +123,7 @@ const AddressConstructor = function (
 	};
 
 	vm.getAddress();
+
 	vm.txs = addressTxs({ address: $stateParams.address });
 };