Track transaction among mempool blocks.

2025-04-08 03:48:31 +02:00 · 2020-02-23 05:23:24 +07:00 · 2020-02-23 05:23:24 +07:00 · 5186f81d56
commit 5186f81d56
parent f3cfa038d3
14 changed files with 53 additions and 35 deletions
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@ -1,6 +1,6 @@
 <div class="container">
  <h1 style="float: left;">Address</h1>
-  <a [routerLink]="['/address/', addressString]" style="line-height: 55px; margin-left: 10px;">{{ addressString }}</a>
+  <a [routerLink]="['/address/', addressString]" style="line-height: 56px; margin-left: 10px;">{{ addressString }}</a>
  <app-clipboard [text]="addressString"></app-clipboard>
  <br>

--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@ -36,7 +36,7 @@ export class AddressComponent implements OnInit {
    .subscribe((address) => {
      this.address = address;
      this.isLoadingAddress = false;
-      window.scrollTo(0, 0);
+      document.body.scrollTo({ top: 0, behavior: 'smooth' });
      this.getAddressTransactions(address.address);
    },
    (error) => {
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@ -43,7 +43,7 @@
            <tbody>
              <tr>
                <td>Hash</td>
-                <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}" >{{ block.id | shortenString : 32 }}</a></td>
+                <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 32 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
              </tr>
              <tr>
                <td>Previous Block</td>
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@ -1,7 +1,7 @@
 .title-block {
  color: #FFF;
  padding-left: 10px;
-  padding-top: 13px;
+  padding-top: 20px;
  padding-bottom: 3px;
  border-top: 5px solid #FFF;
 }
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@ -57,7 +57,7 @@ export class BlockComponent implements OnInit {
      this.blockHeight = block.height;
      this.isLoadingBlock = false;
      this.getBlockTransactions(block.id);
-      window.scrollTo(0, 0);
+      document.body.scrollTo({ top: 0, behavior: 'smooth' });
    },
    (error) => {
      this.error = error;
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@ -56,7 +56,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
    if (blockindex !== -1) {
      this.arrowVisible = true;
-      this.arrowLeftPx = blockindex * 150 + 30;
+      this.arrowLeftPx = blockindex * 155 + 30;
    }
  }

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

    <div id="divider" *ngIf="!isLoading"></div>
--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@ -11,6 +11,7 @@ import { StateService } from 'src/app/services/state.service';
 export class BlockchainComponent implements OnInit, OnDestroy {
  @Input() position: 'middle' | 'top' = 'middle';
  @Input() markHeight: number;
+  @Input() txFeePerVSize: number;

  txTrackingSubscription: Subscription;
  blocksSubscription: Subscription;
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@ -17,4 +17,5 @@
      <span class="animated-border"></span>
    </div>
  </div>
+  <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px' }"></div>
 </div>
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@ -100,3 +100,15 @@
  z-index: 100;
  position: relative;
 }
+
+#arrow-up {
+  position: relative;
+  right: 75px;
+  top: 140px;
+  transition: 1s;
+  width: 0; 
+  height: 0; 
+  border-left: 35px solid transparent;
+  border-right: 35px solid transparent;
+  border-bottom: 35px solid #FFF;
+}
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, EventEmitter, Output, OnChanges } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
@ -8,16 +8,17 @@ import { StateService } from 'src/app/services/state.service';
  templateUrl: './mempool-blocks.component.html',
  styleUrls: ['./mempool-blocks.component.scss']
 })
-export class MempoolBlocksComponent implements OnInit, OnDestroy {
+export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
  mempoolBlocks: MempoolBlock[];
  mempoolBlocksSubscription: Subscription;

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

  @Input() txFeePerVSize: number;
-  @Output() rightPosition: EventEmitter<number> = new EventEmitter<number>(true);
-  @Output() blockDepth: EventEmitter<number> = new EventEmitter<number>(true);

  constructor(
    private stateService: StateService,
@ -31,6 +32,10 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
      });
  }

+  ngOnChanges() {
+    this.calculateTransactionPosition();
+  }
+
  ngOnDestroy() {
    this.mempoolBlocksSubscription.unsubscribe();
  }
@ -49,10 +54,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
  }

  calculateTransactionPosition() {
-    if (!this.txFeePerVSize) {
+    if (!this.txFeePerVSize || !this.mempoolBlocks) {
+      this.arrowVisible = false;
      return;
    }

+    this.arrowVisible = true;
+
    for (const block of this.mempoolBlocks) {
      for (let i = 0; i < block.feeRange.length - 1; i++) {
        if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
@ -68,12 +76,11 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
          const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;

          const blockedFilledPercentage = (block.blockVSize > 1000000 ? 1000000 : block.blockVSize) / 1000000;
-
-          const arrowRightPosition = txInBlockIndex * (this.blockMarginLeft + this.blockWidth)
+          console.log(txInBlockIndex);
+          const arrowRightPosition = txInBlockIndex * (this.blockWidth + this.blockPadding)
            + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);

-          this.rightPosition.next(arrowRightPosition);
-          this.blockDepth.next(txInBlockIndex);
+          this.rightPosition = arrowRightPosition;
          break;
        }
      }
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@ -1,11 +1,18 @@
 <div class="container">

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

  <div class="title-block">
    <h1 style="float: left;">Transaction</h1>
-    <a [routerLink]="['/tx/', txId]" style="line-height: 55px; margin-left: 10px;">{{ txId }}</a>
+    <a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">{{ txId }}</a>
    <app-clipboard [text]="txId"></app-clipboard>
+   
+    <ng-template [ngIf]="tx?.status?.confirmed" [ngIfElse]="unconfirmedBtn">
+      <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2" style="margin-top: 0.75rem;">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
+    </ng-template>
+    <ng-template #unconfirmedBtn>
+      <button type="button" class="btn btn-sm btn-danger float-right  mr-2" style="margin-top: 0.75rem;">Unconfirmed</button>
+    </ng-template>
  </div>

  <br>
@ -18,14 +25,6 @@
        
        <table class="table table-borderless table-striped">
          <tbody>
-            <tr>
-              <td>Status</td>
-              <td class="adjust-btn-padding">
-                <ng-template [ngIf]="latestBlock">
-                  <button type="button" class="btn btn-sm btn-success">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
-                </ng-template>
-              </td>
-            </tr>
            <tr>
              <td>Included in block</td>
              <td><a [routerLink]="['/block/', tx.status.block_hash]" [state]="{ data: { blockHeight: tx.status.block_height } }">#{{ tx.status.block_height }}</a> at {{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }} <i>(<app-time-since [time]="tx.status.block_time"></app-time-since> ago)</i></td>
@ -55,14 +54,12 @@
        <table class="table table-borderless table-striped">
          <tbody>
            <tr>
-              <td>Status</td>
-              <td class="adjust-btn-padding">
-                <button type="button" class="btn btn-sm btn-danger">Unconfirmed</button>
-              </td>
+              <td>Fees</td>
+              <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
            </tr>
            <tr>
-              <td>Fees</td>
-              <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span> {{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
+              <td>Fees per vByte</td>
+              <td>{{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
            </tr>
          </tbody>
        </table>
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@ -14,7 +14,7 @@
 .title-block {
  color: #FFF;
  padding-left: 10px;
-  padding-top: 13px;
+  padding-top: 20px;
  padding-bottom: 3px;
  border-top: 5px solid #FFF;
 }
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@ -48,7 +48,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
    .subscribe((tx: Transaction) => {
      this.tx = tx;
      this.isLoadingTx = false;
-      window.scrollTo(0, 0);
+      document.body.scrollTo({ top: 0, behavior: 'smooth' });

      if (!tx.status.confirmed) {
        this.websocketService.startTrackTransaction(tx.txid);