Bisq explorer is now a separate module.

frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html

@@ -0,0 +1,60 @@
+<div class="header-bg box">
+  <div class="row">
+    <div class="col">
+      <table class="table table-borderless smaller-text table-xs" style="margin: 0;">
+        <tbody>
+          <ng-template ngFor let-input [ngForOf]="tx.inputs" [ngForTrackBy]="trackByIndexFn">
+            <tr *ngIf="input.isVerified">
+              <td class="arrow-td">
+                <ng-template [ngIf]="input.spendingTxId === null" [ngIfElse]="hasPreoutput">
+                  <i class="arrow grey"></i>
+                </ng-template>
+                <ng-template #hasPreoutput>
+                  <a [routerLink]="['/tx/' | relativeUrl, input.spendingTxId]">
+                    <i class="arrow red"></i>
+                  </a>
+                </ng-template>
+              </td>
+              <td>
+                <a [routerLink]="['/address/' | relativeUrl, input.address]" title="{{ input.address }}">
+                  <span class="d-block d-lg-none">B{{ input.address | shortenString : 16 }}</span>
+                  <span class="d-none d-lg-block">B{{ input.address | shortenString : 35 }}</span>
+                </a>
+              </td>
+              <td class="text-right nowrap">
+                {{ input.bsqAmount / 100 | number: '1.2-2' }} BSQ
+              </td>
+            </tr>
+          </ng-template>
+        </tbody>
+      </table>
+    </div>
+    <div class="w-100 d-block d-md-none"></div>
+    <div class="col mobile-bottomcol">
+      <table class="table table-borderless smaller-text table-xs"  style="margin: 0;">
+        <tbody>
+          <ng-template ngFor let-output [ngForOf]="tx.outputs" [ngForTrackBy]="trackByIndexFn">
+            <tr *ngIf="output.isVerified && output.opReturn === undefined">
+              <td>
+                <a [routerLink]="['/address/' | relativeUrl, output.address]" title="{{ output.address }}">
+                  <span class="d-block d-lg-none">B{{ output.address | shortenString : 16 }}</span>
+                  <span class="d-none d-lg-block">B{{ output.address | shortenString : 35 }}</span>
+                </a>
+              </td>
+              <td class="text-right nowrap">
+                {{ output.bsqAmount / 100 | number: '1.2-2' }} BSQ
+              </td>
+              <td class="pl-1 arrow-td">
+                <i *ngIf="!output.spentInfo; else spent" class="arrow green"></i>
+                <ng-template #spent>
+                  <a [routerLink]="['/tx/' | relativeUrl, output.spentInfo.txId]"><i class="arrow red"></i></a>
+                </ng-template>
+              </td>
+            </tr>
+          </ng-template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+</div>

frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.scss

@@ -0,0 +1,84 @@
+.arrow-td {
+	width: 22px;
+}
+
+.arrow {
+	display: inline-block!important;
+	position: relative;
+	width: 14px;
+	height: 22px;
+	box-sizing: content-box
+}
+
+.arrow:before {
+	position: absolute;
+	content: '';
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: calc(-1*30px/3);
+	width: 0;
+  height: 0;
+	border-top: 6.66px solid transparent;
+  border-bottom: 6.66px solid transparent
+}
+
+.arrow:after {
+	position: absolute;
+	content: '';
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: calc(30px/6);
+	width: calc(30px/3);
+	height: calc(20px/3);
+	background: rgba(0, 0, 0, 0);
+}
+
+.arrow.green:before {
+  border-left: 10px solid #28a745;
+}
+.arrow.green:after {
+  background-color:#28a745;
+}
+
+.arrow.red:before {
+  border-left: 10px solid #dc3545;
+}
+.arrow.red:after {
+  background-color:#dc3545;
+}
+
+.arrow.grey:before {
+  border-left: 10px solid #6c757d;
+}
+
+.arrow.grey:after {
+  background-color:#6c757d;
+}
+
+.scriptmessage {
+	max-width: 280px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+}
+
+.scriptmessage.longer {
+	max-width: 500px;
+}
+
+@media (max-width: 767.98px) {
+	.mobile-bottomcol {
+		margin-top: 15px;
+	}
+
+	.scriptmessage {
+		max-width: 90px !important;
+	}
+	.scriptmessage.longer {
+		max-width: 280px !important;
+	}
+}

frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { BisqTransaction } from 'src/app/interfaces/bisq.interfaces';
+
+@Component({
+  selector: 'app-bisq-transfers',
+  templateUrl: './bisq-transfers.component.html',
+  styleUrls: ['./bisq-transfers.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BisqTransfersComponent {
+  @Input() tx: BisqTransaction;
+
+  constructor() { }
+
+  trackByIndexFn(index: number) {
+    return index;
+  }
+
+}