Initial code commit.

frontend/src/app/tx-bubble/tx-bubble.component.html

@@ -0,0 +1,26 @@
+<div class="txBubble" *ngIf="tx">
+  <span class="txBubbleText" ngClass="arrow-{{ arrowPosition }}">
+      <table style="width: 100%;">
+        <tr>
+            <td class="text-left"><b>Transaction hash</b></td>
+            <td class="text-right"><a href="https://www.blockstream.info/tx/{{ tx?.txid }}" target="_blank">{{ txIdShort }}</a></td>
+        </tr>
+        <tr>
+            <td class="text-left"><b>Fees:</b></td>
+            <td class="text-right">{{ tx?.fee }} BTC</td>
+        </tr>
+        <tr>
+          <td class="text-left"><b>Fee per vByte:</b></td>
+          <td class="text-right">{{ tx?.feePerVsize | number : '1.2-2' }} sat/vB</td>
+        </tr>
+      </table>
+      <br />
+
+      <span *ngIf="txTrackingBlockHeight === 0">
+        <button type="button" class="btn btn-danger">Unconfirmed</button>
+      </span>
+      <span *ngIf="txTrackingBlockHeight > 0">
+        <button type="button" class="btn btn-success">{{ confirmations }} confirmation<span *ngIf="confirmations > 1">s</span></button>
+      </span>
+  </span>
+</div>

frontend/src/app/tx-bubble/tx-bubble.component.scss

@@ -0,0 +1,65 @@
+.txBubble {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted #000000;
+  z-index: 99;
+}
+
+.txBubble .txBubbleText {
+  width: 300px;
+  background-color: #ffffff;
+  color: #000;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  top: 150%;
+  left: 50%;
+  margin-left: -100px;
+  padding: 10px;
+  font-size: 14px;
+}
+
+.txBubble .txBubbleText::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -10px;
+  border-width: 10px;
+  border-style: solid;
+  border-color: transparent transparent white transparent;
+}
+
+.txBubble .arrow-right.txBubbleText::after {
+  top: calc(50% - 10px);
+  border-color: transparent transparent transparent white;
+  right: -20px;
+  left: auto;
+}
+
+.txBubble .arrow-left.txBubbleText::after {
+  top: calc(50% - 10px);
+  left: 0;
+  margin-left: -20px;
+  border-width: 10px;
+  border-color: transparent white transparent transparent;
+}
+
+.txBubble .arrow-bottom.txBubbleText::after {
+  bottom: -20px;
+  left: 50%;
+  margin-left: -10px;
+  border-width: 10px;
+  border-style: solid;
+  border-color: white transparent transparent transparent;
+}
+
+.txBubble .arrow-top-right.txBubbleText::after {
+  left: 80%;
+}
+
+.txBubble .arrow-top-left.txBubbleText::after {
+  left: 20%;
+}

frontend/src/app/tx-bubble/tx-bubble.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { ITransaction } from '../blockchain/interfaces';
+
+@Component({
+  selector: 'app-tx-bubble',
+  templateUrl: './tx-bubble.component.html',
+  styleUrls: ['./tx-bubble.component.scss']
+})
+export class TxBubbleComponent implements OnChanges {
+  @Input() tx: ITransaction | null = null;
+  @Input() txTrackingBlockHeight = 0;
+  @Input() latestBlockHeight = 0;
+  @Input() arrowPosition: 'top' | 'right' | 'bottom' | 'top-right' | 'top-left' = 'top';
+
+  txIdShort = '';
+  confirmations = 0;
+
+  constructor() { }
+
+  ngOnChanges() {
+    if (this.tx) {
+      this.txIdShort = this.tx.txid.substring(0, 6) + '...' + this.tx.txid.substring(this.tx.txid.length - 6);
+    }
+    this.confirmations = (this.latestBlockHeight - this.txTrackingBlockHeight) + 1;
+  }
+}