insight-previous-tcr/src/components/transaction/transaction.html

A blockchain explorer for Bitcore

<ion-grid>
  <ion-row>
    <ion-col col-7>
      <div class="ellipsis">
        <span *ngIf="showCoins">
          <ion-icon name="add-circle" [hidden]="expanded" (click)="toggleExpanded()"></ion-icon>
          <ion-icon name="remove-circle" [hidden]="!expanded" (click)="toggleExpanded()"></ion-icon>
        </span>
        <span>
          <a (click)="goToTx(tx.txid)">{{ tx.txid }}</a>
        </span>
      </div>
    </ion-col>
    <ion-col col-5 text-right>
      <ion-note [hidden]="!tx.firstSeenTs">
        <span translate>first seen on</span>
        <time>{{ tx.firstSeenTs * 1000 | date:'long' }}</time>
      </ion-note>
      <ion-note [hidden]="!tx.blocktime && tx.firstSeenTs">
        <span translate>mined on</span>
        <time>{{ tx.time * 1000 | date:'long' }}</time>
      </ion-note>
    </ion-col>
  </ion-row>

  <ion-row align-items-end class="small" *ngIf="!showCoins">
    <ion-col col-12 text-right text-uppercase>
      <ion-chip item-end color="danger" *ngIf="confirmations === -3">
        <ion-label>
          Invalid
        </ion-label>
      </ion-chip>
      <ion-chip item-end color="warning" *ngIf="confirmations === -1">
        <ion-label>
          Unconfirmed
        </ion-label>
      </ion-chip>
      <ion-chip item-end color="primary" *ngIf="confirmations === 1">
        <ion-label>
          1 Confirmation
        </ion-label>
      </ion-chip>
      <ion-chip item-end color="primary" *ngIf="confirmations > 1">
        <ion-label>
          {{ confirmations }} Confirmations
        </ion-label>
      </ion-chip>
      <ion-chip item-end color="default">
        <ion-label>
          {{ currencyProvider.getConvertedNumber(tx.valueOut) | number:'1.0-8' }} {{ currencyProvider.currencySymbol }}
        </ion-label>
      </ion-chip>
    </ion-col>
  </ion-row>

  <ion-row *ngIf="showCoins" align-items-start>
    <ion-col col-12 col-md-5>

      <ion-list [hidden]="!tx.isCoinBase">
        <ion-item>
          No Inputs (Newly Generated Coins)
        </ion-item>
      </ion-list>

      <ion-list [hidden]="tx.isCoinBase">
        <ion-item *ngFor="let vin of aggregateItems(tx.vin); let i = index ">
          <button item-start ion-button *ngIf="expanded" (click)="goToTx(vin.items[i].mintTxid, i, false)" clear
            icon-only>
            <ion-icon color="primary" name="ios-arrow-forward"></ion-icon>
          </button>

          <div class="ellipsis">
            <p>
              <a (click)="goToAddress(vin.address)"
                [ngClass]="{'disabled-link': getAddress(vin) === 'Unparsed address' }">{{ getAddress(vin) }}</a>
            </p>
          </div>
          <div [hidden]="!expanded">
            <p *ngIf="confirmations > 0">
              <b>Confirmations</b> {{ confirmations }}</p>
            <p>
              <b>Unlocking Script</b>
            </p>
            <div *ngFor="let item of vin.items">
              <div *ngIf="item.scriptSig">
                <div class="unlocking-script">
                  <p>{{ item.scriptSig.asm }}
                </div>
              </div>
            </div>
          </div>

          <div item-end>
            {{ currencyProvider.getConvertedNumber(vin.value) | number:'1.0-8' }} {{ currencyProvider.currencySymbol }}
          </div>
        </ion-item>
      </ion-list>

    </ion-col>

    <ion-col col-12 col-md-1 text-center class="arrow-forward">
      <ion-icon name="arrow-forward"></ion-icon>
    </ion-col>

    <ion-col col-12 col-md-6>
      <ion-list>
        <ion-item *ngFor="let vout of tx.vout; let i = index">
          <div>
            <div class="ellipsis">
              <p>
                <a [ngClass]="{'disabled-link': getAddress(vout) === 'Unparsed address' }"
                  (click)="goToAddress(vout.address)">{{ getAddress(vout) }}</a>
              </p>
            </div>
            <div *ngIf="expanded">
              <p>
                <b>Script Template</b>
                <i>{{ vout.script.type }}</i>
              </p>
              <p>
                <b>Locking Script</b>
              </p>
              <div class="locking-script">
                <p>{{ vout.script.asm }}</p>
              </div>
            </div>
          </div>

          <div item-end>
            {{ currencyProvider.getConvertedNumber(vout.value) | number:'1.0-8' }} {{ currencyProvider.currencySymbol }}
            <span [hidden]="!vout.spentTxid">(S)</span>
            <span [hidden]="vout.spentTxid">(U)</span>
          </div>

          <button item-end ion-button *ngIf="expanded && vout.spentTxid && vout.spentTxid !== '' " (click)="
            goToTx(vout.spentTxid, i, true)" clear icon-only>
            <ion-icon color="primary" name="ios-arrow-forward"></ion-icon>
          </button>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>

  <ion-row align-items-start text-uppercase class="small" *ngIf="showCoins">
    <ion-col col-6>
      <div *ngIf="!tx.isCoinBase && currencyProvider.getConvertedNumber(tx.fee) >= 0">
        <ion-chip>
          <ion-label>Fee
            <span text-nowrap>{{ currencyProvider.getConvertedNumber(tx.fee) | number:'1.0-8' }}
              {{ currencyProvider.currencySymbol }}</span>
          </ion-label>
        </ion-chip>
      </div>
    </ion-col>
    <ion-col col-6 text-right>
      <ion-chip color="danger" *ngIf="confirmations === -3">
        <ion-label>Invalid</ion-label>
      </ion-chip>
      <ion-chip color="warning" *ngIf="confirmations === -1">
        <ion-label>Unconfirmed</ion-label>
      </ion-chip>
      <ion-chip color="primary" *ngIf="confirmations === 1">
        <ion-label>1 Confirmation</ion-label>
      </ion-chip>
      <ion-chip color="primary" *ngIf="confirmations > 1">
        <ion-label>{{ confirmations }} Confirmations
        </ion-label>
      </ion-chip>
      <ion-chip color="default">
        <ion-label>{{ currencyProvider.getConvertedNumber(tx.valueOut) | number:'1.0-8' }}
          {{ currencyProvider.currencySymbol }}
        </ion-label>
      </ion-chip>
    </ion-col>
  </ion-row>
</ion-grid>