File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
app-transaction-details |
| styleUrls |
./transaction-details.component.scss |
| templateUrl |
./transaction-details.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Outputs
|
closeWindow
|
Type : EventEmitter<any>
|
|
|
Methods
|
copyAddress
|
copyAddress(address: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| address |
string
|
No
|
|
|
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>
|
|
recipientBloxbergLink
|
Type : string
|
|
|
|
senderBloxbergLink
|
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>
Legend
Html element with directive