cic-staff-client/src/app/pages/transactions/transaction-details/transaction-details.component.html

<div *ngIf="transaction" class="mb-5">
  <div class="card text-center">
    <div class="card-header bg-dark text-white">
      <strong>TRANSACTION DETAILS</strong>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6">
          <h4>Exchange: </h4>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <p>Sender: {{transaction.sender?.vcard.fn}}</p>
              <p>Sender Address: {{transaction.from}}</p>
              <button mat-raised-button class="btn btn-outline-dark" routerLink="/accounts/1">View Sender</button>
            </li>
            <li class="list-group-item">
              <p>Recipient: {{transaction.recipient?.vcard.fn}}</p>
              <p>Recipient Address: {{transaction.to}}</p>
              <button mat-raised-button class="btn btn-outline-dark" routerLink="/accounts/1">View Recipient</button>
            </li>
            <li class="list-group-item">
              <p>Amount: {{transaction.token.symbol + ' ' + transaction.value}}</p>
            </li>
          </ul>
          <h4 class="mt-2">Token: </h4>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <p>Address: {{transaction.token.address}}</p>
            </li>
            <li class="list-group-item">
              <p>Name: {{transaction.token.name}}</p>
            </li>
            <li class="list-group-item">
              <p>Symbol: {{transaction.token.symbol}}</p>
            </li>
          </ul>
        </div>
        <div class="col-md-6">
          <h4>Transaction: </h4>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <p>Block: {{transaction.tx.block}}</p>
            </li>
            <li class="list-group-item">
              <p>Index: {{transaction.tx.txIndex}}</p>
            </li>
            <li class="list-group-item">
              <p>Hash: {{transaction.tx.txHash}}</p>
            </li>
            <li class="list-group-item">
              <p>Success: {{transaction.tx.success}}</p>
            </li>
            <li class="list-group-item">
              <p>Timestamp: {{transaction.tx.timestamp | date}}</p>
            </li>
          </ul>
          <div class="mb-3">
            <button mat-raised-button type="button" class="btn btn-outline-success">Resend SMS</button>
          </div>
          <div>
            <button mat-raised-button type="button" class="btn btn-outline-danger">Reverse Transaction</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>