Footer and header design updates.

2025-03-26 17:51:45 +01:00 · 2020-02-24 03:42:29 +07:00 · 2020-02-24 03:42:29 +07:00 · d690511a08
commit d690511a08
parent c8c1be594b
23 changed files with 114 additions and 82 deletions
--- a/backend/src/api/blocks.ts
+++ b/backend/src/api/blocks.ts
@ -60,6 +60,8 @@ class Blocks {
          }
        }

+        console.log(`${found} of ${txIds.length} found in mempool. ${notFound} not found.`);
+
        transactions.sort((a, b) => b.feePerVsize - a.feePerVsize);
        block.medianFee = this.median(transactions.map((tx) => tx.feePerVsize));
        block.feeRange = this.getFeesInRange(transactions, 8);
--- a/backend/src/api/mempool.ts
+++ b/backend/src/api/mempool.ts
@ -104,7 +104,7 @@ class Mempool {
      }

      // Replace mempool to clear already confirmed transactions
-      const newMempool: any = {};
+      const newMempool = {};
      transactions.forEach((tx) => {
        if (this.mempoolCache[tx]) {
          newMempool[tx] = this.mempoolCache[tx];
@ -113,6 +113,9 @@ class Mempool {
        }
      });

+      console.log(`New mempool size: ${Object.keys(newMempool).length} ` +
+       ` Change: ${transactions.length - Object.keys(newMempool).length}`);
+
      this.mempoolCache = newMempool;

      if (hasChange && this.mempoolChangedCallback) {
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@ -19,16 +19,12 @@ const routes: Routes = [
        path: '',
        component: StartComponent,
      },
-      {
-        path: 'explorer',
-        component: ExplorerComponent,
-      },
      {
        path: 'graphs',
        component: StatisticsComponent,
      },
      {
-        path: 'about',
+        path: 'team',
        component: AboutComponent,
      },
      {
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@ -1,14 +1,15 @@
 <div class="container">
  <div class="text-center">
+    <br />
    <img src="./assets/mempool-tube.png" width="63" height="63" />
    <br /><br />

-    <h1>About</h1>
+    <h1>Team</h1>

    <p>Mempool.Space is a realtime Bitcoin blockchain explorer and mempool visualizer.</p>
-    <p>Created by <a href="https://twitter.com/softbtc">@softbtc</a>
-    <br />Hosted by <a href="https://twitter.com/wiz">@wiz</a>
-    <br />Designed by <a href="https://instagram.com/markjborg">@markjborg</a>
+    <p>Lead Developer <a href="https://twitter.com/softbtc">@softbtc</a>
+    <br />Backend Operator <a href="https://twitter.com/wiz">@wiz</a>
+    <br />Frontend Designer <a href="https://instagram.com/markjborg">@markjborg</a>
  </div>

  <h2>HTTP API</h2>
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@ -36,6 +36,7 @@ export class AddressComponent implements OnInit, OnDestroy {
        this.isLoadingAddress = true;
        this.isLoadingTransactions = true;
        this.transactions = null;
+        document.body.scrollTo(0, 0);
        this.addressString = params.get('id') || '';
        return this.electrsApiService.getAddress$(this.addressString);
      })
@ -44,7 +45,6 @@ export class AddressComponent implements OnInit, OnDestroy {
      this.address = address;
      this.websocketService.startTrackAddress(address.address);
      this.isLoadingAddress = false;
-      document.body.scrollTo({ top: 0, behavior: 'smooth' });
      this.getAddressTransactions(address.address);
    },
    (error) => {
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@ -42,6 +42,7 @@ export class BlockComponent implements OnInit {
        }

        this.blockHash = blockHash;
+        document.body.scrollTo(0, 0);

        if (history.state.data && history.state.data.block) {
          this.blockHeight = history.state.data.block.height;
@ -57,7 +58,6 @@ export class BlockComponent implements OnInit {
      this.blockHeight = block.height;
      this.isLoadingBlock = false;
      this.getBlockTransactions(block.id);
-      document.body.scrollTo({ top: 0, behavior: 'smooth' });
    },
    (error) => {
      this.error = error;
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@ -18,5 +18,5 @@
      </div>
    </div>
  </div>
-  <div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'left': arrowLeftPx + 'px' }"></div>
+  <div [hidden]="!arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 'px' }"></div>
 </div>
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@ -104,7 +104,7 @@

 #arrow-up {
  position: relative;
-  left: 30px;
+  right: 30px;
  top: 140px;
  transition: 1s;
  width: 0; 
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@ -10,15 +10,18 @@ import { StateService } from 'src/app/services/state.service';
 })
 export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
  @Input() markHeight = 0;
+  @Input() txFeePerVSize: number;

  blocks: Block[] = [];
  blocksSubscription: Subscription;
  interval: any;
  trigger = 0;

-
-  arrowVisible = false;
+  blockWidth = 125;
+  blockPadding = 30;
  arrowLeftPx = 30;
+  rightPosition = 0;
+  arrowVisible = false;

  constructor(
    private stateService: StateService,
@ -53,10 +56,38 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
      this.arrowVisible = false;
      return;
    }
-    const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
-    if (blockindex !== -1) {
-      this.arrowVisible = true;
-      this.arrowLeftPx = blockindex * 155 + 30;
+    const block = this.blocks.find((b) => b.height === this.markHeight);
+    if (!block) {
+      return;
+    }
+    const blockindex = this.blocks.indexOf(block);
+
+    this.arrowVisible = true;
+    this.rightPosition = blockindex * -(this.blockWidth + this.blockPadding) - 30;
+
+    if (!this.txFeePerVSize) {
+      return;
+    }
+
+    for (let i = 0; i < block.feeRange.length - 1; i++) {
+      if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
+        const feeRangeIndex = block.feeRange.findIndex((val, index) => this.txFeePerVSize < block.feeRange[index + 1]);
+        const feeRangeChunkSize = 1 / (block.feeRange.length - 1);
+
+        const txFee = this.txFeePerVSize - block.feeRange[i];
+        const max = block.feeRange[i + 1] - block.feeRange[i];
+        const blockLocation = txFee / max;
+
+        const chunkPositionOffset = blockLocation * feeRangeChunkSize;
+        const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
+
+        const blockedFilledPercentage = (block.weight > 4000000 ? 4000000 : block.weight) / 4000000;
+        const arrowRightPosition = blockindex * (-this.blockWidth + this.blockPadding)
+          + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
+
+        this.rightPosition = arrowRightPosition - 93;
+        break;
+      }
    }
  }

--- a/frontend/src/app/components/blockchain/blockchain.component.html
+++ b/frontend/src/app/components/blockchain/blockchain.component.html
@ -1,7 +1,7 @@
 <div class="text-center" class="blockchain-wrapper">
-  <div class="position-container" [ngStyle]="{'top': position === 'top' ? '75px' : 'calc(50% - 60px)'}">
-    <app-mempool-blocks [txFeePerVSize]="txFeePerVSize"></app-mempool-blocks>
-    <app-blockchain-blocks [markHeight]="markHeight"></app-blockchain-blocks>
+  <div class="position-container">
+    <app-mempool-blocks [txFeePerVSize]="markHeight ? 0 : txFeePerVSize"></app-mempool-blocks>
+    <app-blockchain-blocks [markHeight]="markHeight" [txFeePerVSize]="txFeePerVSize"></app-blockchain-blocks>

    <div id="divider" *ngIf="!isLoading; else loadingTmpl"></div>

--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@ -23,6 +23,7 @@
 .position-container {
  position: absolute;
  left: 50%;
+  top: 75px;
 }

@media (max-width: 767.98px) {
--- a/frontend/src/app/components/explorer/explorer.component.html
+++ b/frontend/src/app/components/explorer/explorer.component.html
@ -1,20 +1,14 @@
-<div class="container">
-
-  <br>
-
-  <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>
-</div>
+<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>
--- a/frontend/src/app/components/explorer/explorer.component.ts
+++ b/frontend/src/app/components/explorer/explorer.component.ts
@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-explorer',
  templateUrl: './explorer.component.html',
-  styleUrls: ['./explorer.component.scss']
+  styleUrls: ['./explorer.component.scss'],
 })
 export class ExplorerComponent implements OnInit {
  view: 'blocks' | 'transactions' = 'blocks';
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/frontend/src/app/components/footer/footer.component.html
@ -1,17 +1,18 @@
 <footer class="footer">
  <div class="container">
-    <div class="my-2 my-md-0 mr-md-3">
-      <div *ngIf="memPoolInfo" class="info-block">
-        <span class="unconfirmedTx">Unconfirmed transactions:</span>&nbsp;<b>{{ memPoolInfo?.memPoolInfo?.size | number }}</b>
-        <br />
-        <span class="mempoolSize">Mempool size:</span>&nbsp;<b>{{ mempoolSize | bytes }} ({{ mempoolBlocks }} block<span [hidden]="mempoolBlocks <= 1">s</span>)</b>
-        <br />
+    <div class="row" *ngIf="memPoolInfo">
+      <div class="col">
        <span class="txPerSecond">Tx weight per second:</span>&nbsp;
        
        <div class="progress">
          <div class="progress-bar {{ progressClass }}" role="progressbar" [ngStyle]="{'width': progressWidth}">{{ memPoolInfo?.vBytesPerSecond | ceil | number }} vBytes/s</div>
-        </div>
-
+        </div>      
+      </div>
+      <div class="col">
+        <span class="unconfirmedTx">Unconfirmed transactions:</span>&nbsp;<b>{{ memPoolInfo?.memPoolInfo?.size | number }}</b>
+      </div>
+      <div class="col">
+        <span class="mempoolSize">Mempool size:</span>&nbsp;<b>{{ mempoolSize | bytes }} ({{ mempoolBlocks }} block<span [hidden]="mempoolBlocks <= 1">s</span>)</b>
      </div>
    </div>
  </div>
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
@ -2,12 +2,12 @@
  position: fixed;
  bottom: 0;
  width: 100%;
-  height: 120px;
+  height: 60px;
  background-color: #1d1f31;
 }

 .footer > .container {
-  margin-top: 25px;
+  margin-top: 17px;
 }

 .txPerSecond {
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@ -11,9 +11,6 @@
      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        <a class="nav-link" routerLink="/" (click)="collapse()">Blockchain</a>
      </li>
-      <li class="nav-item" routerLinkActive="active">
-        <a class="nav-link" routerLink="/explorer" (click)="collapse()">Explorer</a>
-      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/graphs" (click)="collapse()">Graphs</a>
      </li>
@ -21,7 +18,7 @@
        <a class="nav-link" routerLink="/tv" (click)="collapse()">TV view &nbsp;<img src="./assets/expand.png" width="15"/></a>
      </li>
      <li class="nav-item" routerLinkActive="active">
-        <a class="nav-link" routerLink="/about" (click)="collapse()">About</a>
+        <a class="nav-link" routerLink="/team" (click)="collapse()">Team</a>
      </li>
    </ul>
    <app-search-form location="top"></app-search-form>
@ -31,4 +28,8 @@

 <br />

-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
+
+<br><br>
+
+<app-footer></app-footer>
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@ -14,13 +14,10 @@ li.nav-item {
  .navbar {
    padding: 0rem 1rem;
  }
-  li.nav-item {
-    padding: 20px;
-  }
 }

 .logo {
-  margin-left: 40px;
+  margin-left: 30px;
 }

 li.nav-item a {
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@ -1,20 +1,22 @@
 <div class="mempool-blocks-container">
-  <div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
-    <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
-      <div class="block-body" *ngIf="mempoolBlocks?.length">
-        <div class="fees">
-          ~{{ projectedBlock.medianFee | ceil }} sat/vB
-          <br/>
-          <span class="yellow-color">{{ projectedBlock.feeRange[0] | ceil }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | ceil }} sat/vB</span>
+  <div class="flashing">
+    <div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
+      <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
+        <div class="block-body" *ngIf="mempoolBlocks?.length">
+          <div class="fees">
+            ~{{ projectedBlock.medianFee | ceil }} sat/vB
+            <br/>
+            <span class="yellow-color">{{ projectedBlock.feeRange[0] | ceil }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | ceil }} sat/vB</span>
+          </div>
+          <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
+          <div class="transaction-count">{{ projectedBlock.nTx }} transactions</div>
+          <div class="time-difference" *ngIf="i !== 3">In ~{{ 10 * i + 10 }} minutes</div>
+          <ng-template [ngIf]="i === 3 && mempoolBlocks?.length >= 4 && (projectedBlock.blockVSize / 1000000 | ceil) > 1">
+            <div class="time-difference">+{{ projectedBlock.blockVSize / 1000000 | ceil }} blocks</div>
+          </ng-template>
        </div>
-        <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
-        <div class="transaction-count">{{ projectedBlock.nTx }} transactions</div>
-        <div class="time-difference" *ngIf="i !== 3">In ~{{ 10 * i + 10 }} minutes</div>
-        <ng-template [ngIf]="i === 3 && mempoolBlocks?.length >= 4 && (projectedBlock.blockVSize / 1000000 | ceil) > 1">
-          <div class="time-difference">+{{ projectedBlock.blockVSize / 1000000 | ceil }} blocks</div>
-        </ng-template>
+        <span class="animated-border"></span>
      </div>
-      <span class="animated-border"></span>
    </div>
  </div>
  <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px' }"></div>
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@ -13,7 +13,9 @@
  top: 0px;
  right: 0px;
  left: 0px;
+}

+.flashing {
  animation: opacityPulse 2s ease-out;
  animation-iteration-count: infinite; 
  opacity: 1;
--- a/frontend/src/app/components/start/start.component.html
+++ b/frontend/src/app/components/start/start.component.html
@ -1,3 +1,4 @@
-<app-blockchain></app-blockchain>
-
-<app-footer></app-footer>
+<div class="container">
+  <app-blockchain></app-blockchain>
+  <app-explorer></app-explorer>
+</div>
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@ -1,6 +1,6 @@
 <div class="container">

-  <app-blockchain position="top" [txFeePerVSize]="tx?.status?.block_height ? 0 : tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain>
+  <app-blockchain position="top" [txFeePerVSize]="tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain>

  <div class="title-block">
    <h1 style="float: left;">Transaction</h1>
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@ -38,6 +38,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
        this.txId = params.get('id') || '';
        this.error = undefined;
        this.isLoadingTx = true;
+        document.body.scrollTo(0, 0);
        if (history.state.data) {
          return of(history.state.data);
        } else {
@ -48,7 +49,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
    .subscribe((tx: Transaction) => {
      this.tx = tx;
      this.isLoadingTx = false;
-      document.body.scrollTo({ top: 0, behavior: 'smooth' });

      if (!tx.status.confirmed) {
        this.websocketService.startTrackTransaction(tx.txid);
--- a/frontend/src/app/services/electrs-api.service.ts
+++ b/frontend/src/app/services/electrs-api.service.ts
@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Block, Transaction, Address, Outspend, Recent } from '../interfaces/electrs.interface';

-const API_BASE_URL = 'https://www.blockstream.info/api';
+const API_BASE_URL = 'https://www.blockstream.info/testnet/api';

@Injectable({
  providedIn: 'root'