### 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
recipientBloxbergLink senderBloxbergLink tokenName tokenSymbol traderBloxbergLink
###### Methods
close copyAddress Async ngOnInit Async reverseTransaction Async viewRecipient Async viewSender Async viewTrader
###### Inputs
transaction
###### Outputs
closeWindow

### Constructor

`constructor(router: Router, transactionService: TransactionService, snackBar: MatSnackBar, tokenService: TokenService)`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:30
Parameters :
Name | Type | Optional
router | `Router` | No
transactionService | `TransactionService` | No
snackBar | `MatSnackBar` | No
tokenService | `TokenService` | No

### Inputs

transaction
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:22

### Outputs

closeWindow
Type : `EventEmitter<any>`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:24

### Methods

close
`close()`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:86
Returns : `void`

copyAddress
`copyAddress(address: string)`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:80
Parameters :
Name | Type | Optional
address | `string` | No
Returns : `void`

Async ngOnInit
`ngOnInit()`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:39
Returns : `Promise<void>`

Async reverseTransaction
`reverseTransaction()`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:71
Returns : `Promise<void>`

Async viewRecipient
`viewRecipient()`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:63
Returns : `Promise<void>`

Async viewSender
`viewSender()`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:59
Returns : `Promise<void>`

Async viewTrader
`viewTrader()`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:67
Returns : `Promise<void>`

### Properties

recipientBloxbergLink
Type : `string`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:27

senderBloxbergLink
Type : `string`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:26

tokenName
Type : `string`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:29

tokenSymbol
Type : `string`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:30

traderBloxbergLink
Type : `string`
Defined in src/app/pages/transactions/transaction-details/transaction-details.component.ts:28

    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 ""