File

src/app/pages/transactions/transaction-details/transaction-details.component.ts

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector app-transaction-details
styleUrls ./transaction-details.component.scss
templateUrl ./transaction-details.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(router: Router, transactionService: TransactionService, snackBar: MatSnackBar)
Parameters :
Name Type Optional
router Router No
transactionService TransactionService No
snackBar MatSnackBar No

Inputs

transaction

Methods

copyAddress
copyAddress(address: string)
Parameters :
Name Type Optional
address string No
Returns : void
ngOnInit
ngOnInit()
Returns : void
Async reverseTransaction
reverseTransaction()
Returns : Promise<void>
Async viewRecipient
viewRecipient()
Returns : Promise<void>
Async viewSender
viewSender()
Returns : Promise<void>
Async viewTrader
viewTrader()
Returns : Promise<void>

Properties

recipientBloxbergLink
Type : string
senderBloxbergLink
Type : string
traderBloxbergLink
Type : string
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { TransactionService } from '@app/_services';
import { copyToClipboard } from '@app/_helpers';
import { MatSnackBar } from '@angular/material/snack-bar';
import { strip0x } from '@src/assets/js/ethtx/dist/hex';

@Component({
  selector: 'app-transaction-details',
  templateUrl: './transaction-details.component.html',
  styleUrls: ['./transaction-details.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TransactionDetailsComponent implements OnInit {
  @Input() transaction;
  senderBloxbergLink: string;
  recipientBloxbergLink: string;
  traderBloxbergLink: string;

  constructor(
    private router: Router,
    private transactionService: TransactionService,
    private snackBar: MatSnackBar
  ) {}

  ngOnInit(): void {
    if (this.transaction?.type === 'conversion') {
      this.traderBloxbergLink =
        'https://blockexplorer.bloxberg.org/address/' + this.transaction?.trader + '/transactions';
    } else {
      this.senderBloxbergLink =
        'https://blockexplorer.bloxberg.org/address/' + this.transaction?.from + '/transactions';
      this.recipientBloxbergLink =
        'https://blockexplorer.bloxberg.org/address/' + this.transaction?.to + '/transactions';
    }
  }

  async viewSender(): Promise<void> {
    await this.router.navigateByUrl(`/accounts/${strip0x(this.transaction.from)}`);
  }

  async viewRecipient(): Promise<void> {
    await this.router.navigateByUrl(`/accounts/${strip0x(this.transaction.to)}`);
  }

  async viewTrader(): Promise<void> {
    await this.router.navigateByUrl(`/accounts/${strip0x(this.transaction.trader)}`);
  }

  async reverseTransaction(): Promise<void> {
    await this.transactionService.transferRequest(
      this.transaction.token.address,
      this.transaction.to,
      this.transaction.from,
      this.transaction.value
    );
  }

  copyAddress(address: string): void {
    if (copyToClipboard(address)) {
      this.snackBar.open(address + ' copied successfully!', 'Close', { duration: 3000 });
    }
  }
}
<div *ngIf="transaction | async" class="mb-3 mt-1">
  <div class="card text-center">
    <mat-card-title class="card-header">
      <div class="row">
        TRANSACTION DETAILS
        <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="transaction = null"> CLOSE </button>
      </div>
    </mat-card-title>
    <div *ngIf="transaction.type == 'transaction'" 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">
              <span>Sender: {{transaction.sender?.vcard.fn[0].value}}</span><br><br>
              <span>
                Sender Address:
                <a href="{{senderBloxbergLink}}" target="_blank"> {{transaction.from}} </a>
                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.from)" alt="Copy">
              </span><br><br>
              <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewSender()">View Sender</button>
            </li>
            <li class="list-group-item">
              <span>Recipient: {{transaction.recipient?.vcard.fn[0].value}}</span><br><br>
              <span>
                Recipient Address:
                <a href="{{recipientBloxbergLink}}" target="_blank"> {{transaction.to}} </a>
                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.to)" alt="Copy">
              </span><br><br>
              <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewRecipient()">View Recipient</button>
            </li>
            <li class="list-group-item">
              <span>Amount: SRF {{transaction.value | tokenRatio}}</span>
            </li>
          </ul>
          <h4 class="mt-2">Token: </h4>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <span>
                Address:
                {{transaction.token._address}}
                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.token._address)" alt="Copy">
              </span>
            </li>
            <li class="list-group-item">
              <span>Name: Sarafu Token</span>
            </li>
            <li class="list-group-item">
              <span>Symbol: SRF</span>
            </li>
          </ul>
        </div>
        <div class="col-md-6">
          <h4>Transaction: </h4>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <span>Block: {{transaction.tx.block}}</span>
            </li>
            <li class="list-group-item">
              <span>Index: {{transaction.tx.txIndex}}</span>
            </li>
            <li class="list-group-item">
              <span>Hash: {{transaction.tx.txHash}}</span>
            </li>
            <li class="list-group-item">
              <span>Success: {{transaction.tx.success}}</span>
            </li>
            <li class="list-group-item">
              <span>Timestamp: {{transaction.tx.timestamp | date}}</span>
            </li>
          </ul><br>
          <div class="mb-3">
            <button mat-raised-button color="primary" type="button" class="btn btn-outline-success">Resend SMS</button>
          </div>
          <div>
            <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger">Reverse Transaction</button>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="transaction.type == 'conversion'" class="card-body">
      <h3>Exchange: </h3>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <span><strong>Trader: {{transaction.sender?.vcard.fn[0].value}}</strong></span>
        </li>
        <li class="list-group-item">
          <span>
            Trader Address:
            <a href="{{traderBloxbergLink}}" target="_blank"> {{transaction.trader}} </a>
            <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.trader)" alt="Copy">
          </span>
        </li>
      </ul>
      <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewTrader()">View Trader</button>
      <br><br>
      <div class="row">
        <div class="col-md-6">
          <h4>Source Token: </h4>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <span>
                Address:
                {{transaction.sourceToken.address}}
                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.sourceToken.address)" alt="Copy">
              </span>
            </li>
            <li class="list-group-item">
              <span>Name: {{transaction.sourceToken.name}}</span>
            </li>
            <li class="list-group-item">
              <span>Symbol: {{transaction.sourceToken.symbol}}</span>
            </li>
            <li class="list-group-item">
              <span>Amount: {{transaction.sourceToken.symbol + ' ' + transaction.fromValue}}</span>
            </li>
          </ul>
        </div>
        <div class="col-md-6">
          <h4>Destination Token: </h4>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <span>
                Address:
                {{transaction.destinationToken.address}}
                <img src="assets/images/checklist.svg" class="ml-2" height="20rem" (click)="copyAddress(transaction.destinationToken.address)" alt="Copy">
              </span>
            </li>
            <li class="list-group-item">
              <span>Name: {{transaction.destinationToken.name}}</span>
            </li>
            <li class="list-group-item">
              <span>Symbol: {{transaction.destinationToken.symbol}}</span>
            </li>
            <li class="list-group-item">
              <span>Amount: {{transaction.destinationToken.symbol + ' ' + transaction.toValue}}</span>
            </li>
          </ul>
        </div>
        <div class="col-md-6">
          <button mat-raised-button color="primary" type="button" class="btn btn-outline-success">Resend SMS</button>
        </div>
        <div class="col-md-6">
          <button mat-raised-button color="warn" type="button" class="btn btn-outline-danger ml-2" (click)="reverseTransaction()">Reverse Transaction</button>
        </div>
      </div>
    </div>
  </div>
</div>

./transaction-details.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""