From fa5c711a855f432d0d57fe504bb4b9e874cb67b0 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Thu, 14 May 2020 17:47:32 +0200
Subject: [PATCH] Add icons to pages

- Add icon on the Block, Transaction and Address pages.
- Add error handling on the transaction page if node is unavailable.
- Fix scrolling on transactions on an address, was using "Next" link when "Previous" is correct (sort order is latest to older).
---
 .../app/explorer/address/address.component.html    |  2 +-
 .../src/app/explorer/address/address.component.ts  | 14 +-------------
 .../src/app/explorer/block/block.component.html    |  2 +-
 .../src/app/explorer/explorer.component.html       |  4 ++--
 .../transaction/transaction.component.html         |  3 ++-
 .../explorer/transaction/transaction.component.ts  | 10 +++++++++-
 .../src/app/network/network.component.html         |  2 +-
 .../ClientApp/src/app/services/setup.service.ts    |  3 +++
 8 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/Blockcore.Explorer/ClientApp/src/app/explorer/address/address.component.html b/src/Blockcore.Explorer/ClientApp/src/app/explorer/address/address.component.html
index 829e716..19b0c4d 100644
--- a/src/Blockcore.Explorer/ClientApp/src/app/explorer/address/address.component.html
+++ b/src/Blockcore.Explorer/ClientApp/src/app/explorer/address/address.component.html
@@ -37,7 +37,7 @@
          *ngIf="detailsVisible">Hide</span>
       details</a> -->
 
-   <h3>Address</h3>
+   <h3><i class="fas fa-wallet"></i>&nbsp;&nbsp;Address</h3>
 
    <app-progress class="centered" *ngIf="!balance"></app-progress>
 
diff --git a/src/Blockcore.Explorer/ClientApp/src/app/explorer/address/address.component.ts b/src/Blockcore.Explorer/ClientApp/src/app/explorer/address/address.component.ts
index 75c98fe..585d00d 100644
--- a/src/Blockcore.Explorer/ClientApp/src/app/explorer/address/address.component.ts
+++ b/src/Blockcore.Explorer/ClientApp/src/app/explorer/address/address.component.ts
@@ -88,23 +88,11 @@ export class AddressComponent implements OnInit, OnDestroy {
     const links = this.api.parseLinkHeader(linkHeader);
 
     // This will be set to undefined/null when no more next links is available.
-    this.link = links['next'];
+    this.link = links['previous'];
 
     // When the offset is not set (0), we should reverse the order of items.
     const list = await response.json();
 
-    // list.sort((b, a) => {
-    //   if (a.blockIndex === b.blockIndex) {
-    //     return 0;
-    //   }
-    //   if (a.blockIndex < b.blockIndex) {
-    //     return -1;
-    //   }
-    //   if (a.blockIndex > b.blockIndex) {
-    //     return 1;
-    //   }
-    // });
-
     if (!this.transactions) {
       this.transactions = [];
     }
diff --git a/src/Blockcore.Explorer/ClientApp/src/app/explorer/block/block.component.html b/src/Blockcore.Explorer/ClientApp/src/app/explorer/block/block.component.html
index b7dda80..aa089ed 100644
--- a/src/Blockcore.Explorer/ClientApp/src/app/explorer/block/block.component.html
+++ b/src/Blockcore.Explorer/ClientApp/src/app/explorer/block/block.component.html
@@ -41,7 +41,7 @@
          *ngIf="detailsVisible">Hide</span>
       details</a>
 
-   <h3>Block Details</h3>
+   <h3><i class="fas fa-cube"></i>&nbsp;&nbsp;Block Details</h3>
 
    <app-progress class="centered" *ngIf="!block"></app-progress>
    <app-error class="centered" [error]="error"></app-error>
diff --git a/src/Blockcore.Explorer/ClientApp/src/app/explorer/explorer.component.html b/src/Blockcore.Explorer/ClientApp/src/app/explorer/explorer.component.html
index 8ac6466..6b168d2 100644
--- a/src/Blockcore.Explorer/ClientApp/src/app/explorer/explorer.component.html
+++ b/src/Blockcore.Explorer/ClientApp/src/app/explorer/explorer.component.html
@@ -57,8 +57,8 @@ <h3>Network Statistics</h3>
             <span>{{node.transactionsInPool}}</span>
          </div>
          <div>
-            <span>Average Block Size Kb</span>
-            <span>{{(node.avgBlockSizeKb / 1024).toFixed(2)}}</span>
+            <span>Average Block Size</span>
+            <span>{{node.avgBlockSizeKb | size}}</span>
          </div>
          <div>
             <span>Difficulty</span>
diff --git a/src/Blockcore.Explorer/ClientApp/src/app/explorer/transaction/transaction.component.html b/src/Blockcore.Explorer/ClientApp/src/app/explorer/transaction/transaction.component.html
index f915a02..69138a7 100644
--- a/src/Blockcore.Explorer/ClientApp/src/app/explorer/transaction/transaction.component.html
+++ b/src/Blockcore.Explorer/ClientApp/src/app/explorer/transaction/transaction.component.html
@@ -21,9 +21,10 @@
          *ngIf="detailsVisible">Hide</span>
       details</a>
 
-   <h3>Transaction Details</h3>
+   <h3><i class="fas fa-receipt"></i>&nbsp;&nbsp;Transaction Details</h3>
 
    <app-progress class="centered" *ngIf="!transaction"></app-progress>
+   <app-error class="centered" [error]="error"></app-error>
 
    <div class="grid-label-value" *ngIf="transaction">
       <div>
diff --git a/src/Blockcore.Explorer/ClientApp/src/app/explorer/transaction/transaction.component.ts b/src/Blockcore.Explorer/ClientApp/src/app/explorer/transaction/transaction.component.ts
index 6433d88..387200c 100644
--- a/src/Blockcore.Explorer/ClientApp/src/app/explorer/transaction/transaction.component.ts
+++ b/src/Blockcore.Explorer/ClientApp/src/app/explorer/transaction/transaction.component.ts
@@ -28,6 +28,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
   detailsVisible = false;
   lastBlockHeight: number;
   subscription: any;
+  error: Error;
 
   constructor(
     private api: ApiService,
@@ -39,7 +40,14 @@ export class TransactionComponent implements OnInit, OnDestroy {
       const id: any = params.get('transaction');
       console.log('Transaction ID:', id);
 
-      this.transaction = await this.api.getTransaction(id);
+      try {
+        this.transaction = await this.api.getTransaction(id);
+
+        this.error = null;
+      } catch (e) {
+        this.error = e;
+      }
+
       console.log(this.transaction);
     });
   }
diff --git a/src/Blockcore.Explorer/ClientApp/src/app/network/network.component.html b/src/Blockcore.Explorer/ClientApp/src/app/network/network.component.html
index 697bf77..9c60b6b 100644
--- a/src/Blockcore.Explorer/ClientApp/src/app/network/network.component.html
+++ b/src/Blockcore.Explorer/ClientApp/src/app/network/network.component.html
@@ -61,7 +61,7 @@ <h2>Network</h2>
         <span>{{node.avgBlockPersistInSeconds}}</span>
       </div>
       <div>
-        <span>Average Block Size Kb</span>
+        <span>Average Block Size</span>
         <span>{{node.avgBlockSizeKb | size}}</span>
       </div>
       <div>
diff --git a/src/Blockcore.Explorer/ClientApp/src/app/services/setup.service.ts b/src/Blockcore.Explorer/ClientApp/src/app/services/setup.service.ts
index a0abc3f..3400c61 100644
--- a/src/Blockcore.Explorer/ClientApp/src/app/services/setup.service.ts
+++ b/src/Blockcore.Explorer/ClientApp/src/app/services/setup.service.ts
@@ -75,6 +75,9 @@ export class SetupService {
       // Update the chain subject, which should trigger consumers to do some processing.
       this.current = chain;
 
+      console.log(this.Chain);
+      console.log(this.Chain.Color);
+
       if (this.Chain?.Color) {
          document.documentElement.style.setProperty('--accent', this.Chain?.Color);
       }