Bisq explorer is now a separate module.

frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html

@@ -0,0 +1,40 @@
+<div class="box">
+  <div class="row">
+    <div class="col-sm">
+      <table class="table table-borderless table-striped">
+        <tbody>
+          <tr>
+            <td>Inputs</td>
+            <td>{{ totalInput / 100 | number: '1.2-2' }} BSQ</td>
+          </tr>
+          <tr>
+            <td>Outputs</td>
+            <td>{{ totalOutput / 100 | number: '1.2-2' }} BSQ</td>
+          </tr>
+          <tr>
+            <td>Burnt</td>
+            <td>{{ tx.burntFee / 100 | number: '1.2-2' }} BSQ</td>
+          </tr>
+          <tr>
+            <td>Issuance</td>
+            <td>{{ totalIssued / 100 | number: '1.2-2' }} BSQ</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="col-sm">
+      <table class="table table-borderless table-striped">
+        <tbody>
+          <tr>
+            <td>Type</td>
+            <td><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
+          </tr>
+          <tr>
+            <td>Version</td>
+            <td>{{ tx.txVersion }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.ts

@@ -0,0 +1,26 @@
+import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
+import { BisqTransaction } from 'src/app/interfaces/bisq.interfaces';
+
+@Component({
+  selector: 'app-bisq-transaction-details',
+  templateUrl: './bisq-transaction-details.component.html',
+  styleUrls: ['./bisq-transaction-details.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BisqTransactionDetailsComponent implements OnChanges {
+  @Input() tx: BisqTransaction;
+
+  totalInput: number;
+  totalOutput: number;
+  totalIssued: number;
+
+  constructor() { }
+
+  ngOnChanges() {
+    this.totalInput = this.tx.inputs.filter((input) => input.isVerified).reduce((acc, input) => acc + input.bsqAmount, 0);
+    this.totalOutput = this.tx.outputs.filter((output) => output.isVerified).reduce((acc, output) => acc + output.bsqAmount, 0);
+    this.totalIssued = this.tx.outputs
+      .filter((output) => output.isVerified && output.txOutputType === 'ISSUANCE_CANDIDATE_OUTPUT')
+      .reduce((acc, output) => acc + output.bsqAmount, 0);
+  }
+}