bivcore-insight/src/components/transaction-details-eth/transaction-details-eth.html

A blockchain explorer for Bitcore

<ion-grid>
  <ion-row>
    <ion-col col-7>
      <div class="ellipsis">
        <span>
          <a (click)="goToTx(tx.txid)">{{ tx.txid }}</a>
        </span>
      </div>
    </ion-col>
    <ion-col col-5 text-right>
      <ion-note *ngIf="tx.time">
        <span translate>mined on</span>
        <time>{{ tx.time * 1000 | date:'medium' }}</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="tx.confirmations === -3">
        <ion-label>
          Invalid
        </ion-label>
      </ion-chip>
      <ion-chip item-end color="warning" *ngIf="tx.confirmations === -1">
        <ion-label>
          Unconfirmed
        </ion-label>
      </ion-chip>
      <ion-chip item-end color="primary" *ngIf="tx.confirmations === 1">
        <ion-label>
          1 Confirmation
        </ion-label>
      </ion-chip>
      <ion-chip item-end color="primary" *ngIf="tx.confirmations > 1">
        <ion-label>
          {{ tx.confirmations }} Confirmations
        </ion-label>
      </ion-chip>
      <ion-chip item-end color="default">
        <ion-label>
          {{ currencyProvider.getConvertedNumber(tx.valueOut, chainNetwork.chain) | 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 *ngIf="tx.from">
          <div class="ellipsis">
            <p>
              <a (click)="goToAddress(tx.from)">{{ tx.from }}</a>
            </p>
          </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 *ngIf="tx.to">
          <div>
            <div class="ellipsis">
              <p>
                <a (click)="goToAddress(tx.to)">{{ tx.to }}</a>
              </p>
            </div>
          </div>
        </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, chainNetwork.chain) | 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="tx.confirmations === -3">
        <ion-label>Invalid</ion-label>
      </ion-chip>
      <ion-chip color="warning" *ngIf="tx.confirmations === -1">
        <ion-label>Unconfirmed</ion-label>
      </ion-chip>
      <ion-chip color="primary" *ngIf="tx.confirmations === 1">
        <ion-label>1 Confirmation</ion-label>
      </ion-chip>
      <ion-chip color="primary" *ngIf="tx.confirmations > 1">
        <ion-label>{{ tx.confirmations }} Confirmations
        </ion-label>
      </ion-chip>
      <ion-chip color="default">
        <ion-label>{{ currencyProvider.getConvertedNumber(tx.valueOut, chainNetwork.chain) | number:'1.0-8' }}
          {{ currencyProvider.currencySymbol }}
        </ion-label>
      </ion-chip>
    </ion-col>
  </ion-row>
</ion-grid>