Browse Source

web-ui: Complete pending fields on the TransactionDetails view

scalafmt-draft
Alexis Hernandez 7 years ago
parent
commit
415605986b
  1. 10
      web-ui/src/app/app.component.ts
  2. 46
      web-ui/src/app/components/transaction-details/transaction-details.component.html
  3. 38
      web-ui/src/app/components/transaction-details/transaction-details.component.ts
  4. 16
      web-ui/src/app/models/transaction.ts
  5. 6
      web-ui/src/app/services/transactions.service.ts

10
web-ui/src/app/app.component.ts

@ -41,12 +41,18 @@ export class AppComponent {
'action.find': 'Find',
// labels
'label.coinName': 'XSN',
'label.transactionId': 'Transaction Id',
'label.confirmations': 'Confirmations',
'label.blockhash': 'Block Hash',
'label.blocktime': 'Block Time',
'label.inputAddresses': 'Senders',
'label.outputAddresses': 'Receivers'
'label.noInput': 'No input',
'label.coinbase': 'Coinbase',
'label.output': 'Receivers',
'label.from': 'From',
'label.to': 'To',
'label.value': 'Amount',
'label.fee': 'Fee'
};
}
}

46
web-ui/src/app/components/transaction-details/transaction-details.component.html

@ -5,12 +5,13 @@
<div *ngIf="transaction != null">
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.transactionId' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.txid}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.id}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.confirmations' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.confirmations}}</label>
</div>
<!-- TODO: Add link to block view -->
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blockhash' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.blockhash}}</label>
@ -19,29 +20,44 @@
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blocktime' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{transaction.blocktime * 1000 | date:'MMMM d, y, h:mm:ss a'}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.fee' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{getFee(transaction)}} {{'label.coinName' | translate}}</label>
</div>
<!-- TODO: Add amounts -->
<!-- Input -->
<div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.inputAddresses' | translate}}</label>
<div *ngIf="transaction.input == null">
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.noInput' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.coinbase' | translate}}</label>
</div>
</div>
<div class="row">
<div *ngFor="let item of inputAddresses(transaction)">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1"></label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{item}}</label>
<div *ngIf="transaction.input != null">
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.from' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.input.address}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.value' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.input.value}} {{'label.coinName' | translate}}</label>
</div>
</div>
</div>
<!-- TODO: Add amounts -->
<!-- Output -->
<div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.outputAddresses' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1"><strong>{{'label.output' | translate}}</strong></label>
</div>
<div class="row">
<div *ngFor="let item of outputAddresses(transaction)">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1"></label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{item}}</label>
<div *ngFor="let item of transaction.output">
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.to' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{item.address}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.value' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{item.value}} {{'label.coinName' | translate}}</label>
</div>
</div>
</div>

38
web-ui/src/app/components/transaction-details/transaction-details.component.ts

@ -3,6 +3,8 @@ import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Transaction } from '../../models/transaction';
import { ErrorService } from '../../services/error.service';
import { NavigatorService } from '../../services/navigator.service';
import { TransactionsService } from '../../services/transactions.service';
@ -14,7 +16,7 @@ import { TransactionsService } from '../../services/transactions.service';
})
export class TransactionDetailsComponent implements OnInit {
transaction: object;
transaction: Transaction;
constructor(
private route: ActivatedRoute,
@ -31,8 +33,7 @@ export class TransactionDetailsComponent implements OnInit {
);
}
private onTransactionRetrieved(response: any) {
console.log(response);
private onTransactionRetrieved(response: Transaction) {
this.transaction = response;
}
@ -40,29 +41,16 @@ export class TransactionDetailsComponent implements OnInit {
this.errorService.renderServerErrors(null, response);
}
inputAddresses(transaction): string[] {
// TODO: complete
// transaction.vin.keys
return [];
}
// TODO: verify correctness
outputAddresses(transaction): string[] {
const keys: number[] = Array.from(transaction.vout.keys());
const nestedAddresses = keys.map(k => transaction.vout[k].scriptPubKey.addresses);
return this.flatten(nestedAddresses);
getFee(tx: Transaction): number {
const vout = tx.output.map(t => t.value).reduce((a, b) => a + b);
return Math.max(0, this.getVIN(tx) - vout);
}
// TODO: move function to another package
private flatten = function (arr, result = []) {
for (let i = 0, length = arr.length; i < length; i++) {
const value = arr[i];
if (Array.isArray(value)) {
this.flatten(value, result);
} else {
result.push(value);
}
private getVIN(tx): number {
if (tx.input == null) {
return 0;
} else {
return tx.input.value;
}
return result;
};
}
}

16
web-ui/src/app/models/transaction.ts

@ -0,0 +1,16 @@
export class Transaction {
id: string;
size: number;
blockhash: string;
time: number;
blocktime: number;
confirmations: number;
input: TransactionValue;
output: TransactionValue[];
}
class TransactionValue {
address: string;
value: number;
}

6
web-ui/src/app/services/transactions.service.ts

@ -4,6 +4,8 @@ import { Observable } from 'rxjs/Observable';
import { environment } from '../../environments/environment';
import { Transaction } from '../models/transaction';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@ -15,8 +17,8 @@ export class TransactionsService {
constructor(private http: HttpClient) { }
get(txid: string): Observable<any> {
get(txid: string): Observable<Transaction> {
const url = `${this.baseUrl}/${txid}`;
return this.http.get(url);
return this.http.get<Transaction>(url);
}
}

Loading…
Cancel
Save