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

<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">
                  <span class="grey">
                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                  </span>
                </ng-template>
                <ng-template #hasPreoutput>
                  <a [routerLink]="['/tx/' | relativeUrl, input.spendingTxId]" class="red">
                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                  </a>
                </ng-template>
              </td>
              <td>
                <a [routerLink]="['/address/' | relativeUrl, 'B' + input.address]" title="B{{ 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">
                <app-bsq-amount [bsq]="input.bsqAmount"></app-bsq-amount>
              </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, 'B' + output.address]" title="B{{ 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">
                <app-bsq-amount [bsq]="output.bsqAmount"></app-bsq-amount>
              </td>
              <td class="arrow-td">
                <span *ngIf="!output.spentInfo; else spent" class="green">
                  <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                </span>
                <ng-template #spent>
                  <a [routerLink]="['/tx/' | relativeUrl, output.spentInfo.txId]" class="red">
                    <fa-icon [icon]="['fas', 'arrow-alt-circle-right']" [fixedWidth]="true"></fa-icon>
                  </a>
                </ng-template>
              </td>
            </tr>
          </ng-template>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <div class="transaction-fee" *ngIf="showConfirmations && tx.burntFee">
      <ng-container i18n="BSQ burnt amount">Burnt amount</ng-container>: {{ tx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="extra-info"><span class="fiat"><app-bsq-amount [bsq]="tx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span></span>
    </div>

    <div class="btn-container">
      <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
        <button type="button" class="btn btn-sm btn-success mt-2">
          <ng-container *ngTemplateOutlet="latestBlock.height - tx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.blockHeight + 1}"></ng-container>
          <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
          <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
        </button>
        &nbsp;
      </span>
      <button type="button" class="btn btn-sm btn-primary mt-2" (click)="switchCurrency()">
        <app-bsq-amount [bsq]="totalOutput"></app-bsq-amount>
      </button>
    </div>
    <div class="clearfix"></div>
  </div>

</div>