Explorer page with latest blocks. WIP

frontend/src/app/explorer/block/block.component.html

@@ -0,0 +1 @@
+<p>block works!</p>

frontend/src/app/explorer/block/block.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-block',
+  templateUrl: './block.component.html',
+  styleUrls: ['./block.component.scss']
+})
+export class BlockComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

frontend/src/app/explorer/explorer.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ExplorerComponent } from './explorer/explorer.component';
+import { TransactionComponent } from './transaction/transaction.component';
+import { RouterModule, Routes } from '@angular/router';
+import { SharedModule } from '../shared/shared.module';
+import { BlockComponent } from './block/block.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ExplorerComponent,
+  },
+  {
+    path: 'block/:id',
+    component: BlockComponent,
+  },
+  {
+    path: 'tx/:id',
+    component: TransactionComponent,
+  },
+];
+
+@NgModule({
+  declarations: [ExplorerComponent, TransactionComponent, BlockComponent],
+  imports: [
+    SharedModule,
+    CommonModule,
+    RouterModule.forChild(routes),
+  ]
+})
+export class ExplorerModule { }

frontend/src/app/explorer/explorer/explorer.component.html

@@ -0,0 +1,34 @@
+<div class="container">
+  <h1>Latest blocks</h1>
+
+  <table class="table table-borderless">
+    <thead>
+      <th>Height</th>
+      <th>Timestamp</th>
+      <th>Mined</th>
+      <th>Transactions</th>
+      <th>Size (kB)</th>
+      <th>Weight (kWU)</th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let block of blocks; let i= index;">
+        <td><a [routerLink]="['./block', block.id]">#{{ block.height }}</a></td>
+        <td>{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
+        <td>{{ block.timestamp | timeSince }} ago </td>
+        <td>{{ block.tx_count }}</td>
+        <td>{{ block.size | bytes: 2 }}</td>
+        <td>{{ block.weight | bytes: 2 }}</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="text-center">
+    <ng-template [ngIf]="isLoading">
+      <div class="spinner-border text-light"></div>
+      <br><br>
+    </ng-template>
+    <button  *ngIf="blocks.length" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
+  </div>
+
+  <br>
+</div>

frontend/src/app/explorer/explorer/explorer.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from 'src/app/services/api.service';
+
+@Component({
+  selector: 'app-explorer',
+  templateUrl: './explorer.component.html',
+  styleUrls: ['./explorer.component.scss']
+})
+export class ExplorerComponent implements OnInit {
+  blocks: any[] = [];
+  isLoading = true;
+
+  constructor(
+    private apiService: ApiService,
+  ) { }
+
+  ngOnInit() {
+    this.apiService.listBlocks$()
+      .subscribe((blocks) => {
+        this.blocks = blocks;
+        this.isLoading = false;
+      });
+  }
+
+  loadMore() {
+    this.isLoading = true;
+    this.apiService.listBlocks$(this.blocks[this.blocks.length - 1].height - 1)
+      .subscribe((blocks) => {
+        this.blocks = this.blocks.concat(blocks);
+        this.isLoading = false;
+      });
+  }
+}

frontend/src/app/explorer/transaction/transaction.component.html

@@ -0,0 +1 @@
+<p>transaction works!</p>

frontend/src/app/explorer/transaction/transaction.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-transaction',
+  templateUrl: './transaction.component.html',
+  styleUrls: ['./transaction.component.scss']
+})
+export class TransactionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}