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