Removing latest transactions component.

frontend/src/app/app-routing.module.ts

@@ -8,7 +8,6 @@ import { MasterPageComponent } from './components/master-page/master-page.compon
 import { AboutComponent } from './components/about/about.component';
 import { TelevisionComponent } from './components/television/television.component';
 import { StatisticsComponent } from './components/statistics/statistics.component';
-import { ExplorerComponent } from './components/explorer/explorer.component';
 
 const routes: Routes = [
   {

frontend/src/app/app.module.ts

@@ -28,7 +28,6 @@ import { TimeSinceComponent } from './components/time-since/time-since.component
 import { AddressLabelsComponent } from './components/address-labels/address-labels.component';
 import { MempoolBlocksComponent } from './components/mempool-blocks/mempool-blocks.component';
 import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe';
-import { LatestTransactionsComponent } from './components/latest-transactions/latest-transactions.component';
 import { QrcodeComponent } from './components/qrcode/qrcode.component';
 import { ClipboardComponent } from './components/clipboard/clipboard.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
@@ -39,7 +38,6 @@ import { ChartistComponent } from './components/statistics/chartist.component';
 import { BlockchainBlocksComponent } from './components/blockchain-blocks/blockchain-blocks.component';
 import { BlockchainComponent } from './components/blockchain/blockchain.component';
 import { FooterComponent } from './components/footer/footer.component';
-import { ExplorerComponent } from './components/explorer/explorer.component';
 import { AudioService } from './services/audio.service';
 import { FiatComponent } from './fiat/fiat.component';
 
@@ -68,10 +66,8 @@ import { FiatComponent } from './fiat/fiat.component';
     TimeSinceComponent,
     AddressLabelsComponent,
     MempoolBlocksComponent,
-    LatestTransactionsComponent,
     QrcodeComponent,
     ClipboardComponent,
-    ExplorerComponent,
     ChartistComponent,
     FooterComponent,
     FiatComponent,

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

@@ -1,14 +0,0 @@
-<ul class="nav nav-tabs mb-2">
-  <li class="nav-item">
-    <a class="nav-link" [class.active]="view === 'blocks'" routerLink="/explorer" (click)="view = 'blocks'">Blocks</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" [class.active]="view === 'transactions'" routerLink="/explorer" fragment="transactions" (click)="view = 'transactions'">Transactions</a>
-  </li>
-</ul>
-
-<app-latest-blocks *ngIf="view === 'blocks'; else latestTransactions"></app-latest-blocks>
-<ng-template #latestTransactions>
-  <app-latest-transactions></app-latest-transactions>
-</ng-template>
-<br>

frontend/src/app/components/explorer/explorer.component.scss

@@ -1,3 +0,0 @@
-.search-container {
-  padding-top: 50px;
-}

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

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ExplorerComponent } from './explorer.component';
-
-describe('ExplorerComponent', () => {
-  let component: ExplorerComponent;
-  let fixture: ComponentFixture<ExplorerComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ExplorerComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ExplorerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,25 +0,0 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-@Component({
-  selector: 'app-explorer',
-  templateUrl: './explorer.component.html',
-  styleUrls: ['./explorer.component.scss'],
-})
-export class ExplorerComponent implements OnInit {
-  view: 'blocks' | 'transactions' = 'blocks';
-
-  constructor(
-    private route: ActivatedRoute,
-  ) {}
-
-  ngOnInit() {
-    this.route.fragment
-      .subscribe((fragment: string) => {
-        if (fragment === 'transactions' ) {
-          this.view = 'transactions';
-        }
-    });
-  }
-
-}

frontend/src/app/components/latest-transactions/latest-transactions.component.html

@@ -1,29 +0,0 @@
-<table class="table table-borderless">
-  <thead>
-    <th style="width: 58%">Transaction ID</th>
-    <th class="d-none d-xl-block" style="width: 12%;">Value</th>
-    <th style="width: 10%;">Size</th>
-    <th style="width: 15%">Fee</th>
-  </thead>
-  <tbody>
-    <ng-container *ngIf="(transactions$ | async) as transactions">
-      <ng-template [ngIf]="!isLoading">
-        <tr *ngFor="let transaction of transactions">
-          <td class="d-block d-md-none"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid | shortenString }}</a></td>
-          <td class="d-none d-md-block"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid }}</a></td>
-          <td class="d-none d-xl-block">{{ transaction.value / 100000000 | number: '1.8-8' }} BTC</td>
-          <td>{{ transaction.vsize | vbytes: 2 }}</td>
-          <td>{{ transaction.fee / transaction.vsize | number : '1.2-2'}} sats/vB</td>
-        </tr>
-      </ng-template>
-    </ng-container>
-    <ng-template [ngIf]="isLoading">
-      <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
-        <td><span class="skeleton-loader"></span></td>
-        <td class="d-none d-lg-block" style="width: 25%;"><span class="skeleton-loader"></span></td>
-        <td style="width: 25%;"><span class="skeleton-loader"></span></td>
-        <td><span class="skeleton-loader"></span></td>
-      </tr>
-    </ng-template>
-  </tbody>
-</table>

frontend/src/app/components/latest-transactions/latest-transactions.component.scss

@@ -1,10 +0,0 @@
-@media (min-width: 768px) {
-  .d-md-block {
-    display: table-cell !important;
-  }
-}
-@media (min-width: 992px) {
-  .d-lg-block {
-    display: table-cell !important;
-  }
-}

frontend/src/app/components/latest-transactions/latest-transactions.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LatestTransactionsComponent } from './latest-transactions.component';
-
-describe('LatestTransactionsComponent', () => {
-  let component: LatestTransactionsComponent;
-  let fixture: ComponentFixture<LatestTransactionsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ LatestTransactionsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LatestTransactionsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/src/app/components/latest-transactions/latest-transactions.component.ts

@@ -1,31 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ElectrsApiService } from '../../services/electrs-api.service';
-import { Observable, timer } from 'rxjs';
-import { Recent } from '../../interfaces/electrs.interface';
-import { flatMap, tap } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-latest-transactions',
-  templateUrl: './latest-transactions.component.html',
-  styleUrls: ['./latest-transactions.component.scss']
-})
-export class LatestTransactionsComponent implements OnInit {
-  transactions$: Observable<Recent[]>;
-  isLoading = true;
-
-  constructor(
-    private electrsApiService: ElectrsApiService,
-  ) { }
-
-  ngOnInit() {
-    this.transactions$ = timer(0, 10000)
-      .pipe(
-        flatMap(() => {
-          return this.electrsApiService.getRecentTransaction$()
-            .pipe(
-              tap(() => this.isLoading = false)
-            );
-        })
-      );
-  }
-}

frontend/src/app/components/start/start.component.html

@@ -2,5 +2,8 @@
   <div style="position: relative;">
     <app-blockchain></app-blockchain>
   </div>
-  <app-explorer></app-explorer>
+
+  <hr>
+  <app-latest-blocks></app-latest-blocks>
+
 </div>