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).
block-core · May 14, 2020 · fa5c711 · fa5c711
1 parent 8ebb9e6
commit fa5c711
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
       }