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
Outputs

Constructor

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

Inputs

transaction

Outputs

closeWindow
Type : EventEmitter<any>

Methods

close
close()
Returns : void
copyAddress
copyAddress(address: string)
Parameters :
Name Type Optional
address string No
Returns : void
Async ngOnInit
ngOnInit()
Returns : Promise<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
tokenName
Type : string
tokenSymbol
Type : string
traderBloxbergLink
Type : string
import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output,
} from '@angular/core';
import { Router } from '@angular/router';
import { TokenService, 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;

  @Output() closeWindow: EventEmitter<any> = new EventEmitter<any>();

  senderBloxbergLink: string;
  recipientBloxbergLink: string;
  traderBloxbergLink: string;
  tokenName: string;
  tokenSymbol: string;

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

  async ngOnInit(): Promise<void> {
    await this.transactionService.init();
    await this.tokenService.init();
    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';
    }
    this.tokenService.load.subscribe(async (status: boolean) => {
      if (status) {
        this.tokenSymbol = await this.tokenService.getTokenSymbol();
        this.tokenName = await this.tokenService.getTokenName();
      }
    });
  }

  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 });
    }
  }

  close(): void {
    this.transaction = null;
    this.closeWindow.emit(this.transaction);
  }
}
<div *ngIf="transaction" 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)="close()"
        >
          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: {{ transaction.value | tokenRatio }} {{ tokenSymbol | uppercase }}</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: {{ tokenName }}</span>
            </li>
            <li class="list-group-item">
              <span>Symbol: {{ tokenSymbol | uppercase }}</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 | unixDate }}</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 | uppercase }}</span>
            </li>
            <li class="list-group-item">
              <span
                >Amount: {{ transaction.fromValue }}
                {{ transaction.sourceToken.symbol | uppercase }}</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 | uppercase }}</span>
            </li>
            <li class="list-group-item">
              <span
                >Amount: {{ transaction.toValue }}
                {{ transaction.destinationToken.symbol | uppercase }}</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 ""