diff --git a/web-ui/src/app/components/address-details/address-details.component.html b/web-ui/src/app/components/address-details/address-details.component.html index 323eb81..d40c2c4 100644 --- a/web-ui/src/app/components/address-details/address-details.component.html +++ b/web-ui/src/app/components/address-details/address-details.component.html @@ -57,8 +57,8 @@ - - {{(currentPage - 1) * pageSize + index + 1}} + + {{index + 1}} {{item.id | slice:0:15}}... @@ -66,7 +66,7 @@ {{item.blockhash | slice:0:15}}... {{item.time * 1000 | explorerDatetime}} - {{item.received >= item.sent ? '+' : ''}}{{item.received - item.sent}} {{'label.coinName' | translate}} + {{renderValue(item)}} {{'label.coinName' | translate}} {{item.size}} bytes @@ -75,8 +75,7 @@
- - +
diff --git a/web-ui/src/app/components/address-details/address-details.component.ts b/web-ui/src/app/components/address-details/address-details.component.ts index b8b6955..672b9f5 100644 --- a/web-ui/src/app/components/address-details/address-details.component.ts +++ b/web-ui/src/app/components/address-details/address-details.component.ts @@ -1,13 +1,10 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs/Observable'; - import { Balance } from '../../models/balance'; -import { Transaction } from '../../models/transaction'; - import { AddressesService } from '../../services/addresses.service'; import { ErrorService } from '../../services/error.service'; +import { LightWalletTransaction } from '../..//models/light-wallet-transaction'; @Component({ selector: 'app-address-details', @@ -20,10 +17,8 @@ export class AddressDetailsComponent implements OnInit { addressString: string; // pagination - total = 0; - currentPage = 1; - pageSize = 10; - asyncItems: Observable; + limit = 10; + items: LightWalletTransaction[] = []; constructor( private route: ActivatedRoute, @@ -36,26 +31,46 @@ export class AddressDetailsComponent implements OnInit { response => this.onAddressRetrieved(response), response => this.onError(response) ); - this.getPage(this.currentPage); } private onAddressRetrieved(response: Balance) { this.address = response; + this.load(); } - getPage(page: number) { - const offset = (page - 1) * this.pageSize; - const limit = this.pageSize; - const order = 'time:desc'; + load() { + const order = 'desc'; + let lastSeenTxid = ''; + if (this.items.length > 0) { + lastSeenTxid = this.items[this.items.length - 1].id; + } - this.asyncItems = this.addressesService - .getTransactions(this.addressString, offset, limit, order) - .do(response => this.total = response.total) - .do(response => this.currentPage = 1 + (response.offset / this.pageSize)) - .map(response => response.data); + this.addressesService + .getTransactionsV2(this.addressString, this.limit, lastSeenTxid, order) + .do(response => this.items = this.items.concat(response.data)) + .subscribe(); } private onError(response: any) { this.errorService.renderServerErrors(null, response); } + + renderValue(tx: LightWalletTransaction): string { + const spent = tx + .inputs + .map(input => input.value) + .reduce((a, b) => a + b, 0); + + const received = tx + .outputs + .map(output => output.value) + .reduce((a, b) => a + b, 0); + + const diff = Math.abs(received - spent); + if (received >= spent) { + return '+' + diff; + } else { + return '-' + diff; + } + } } diff --git a/web-ui/src/app/models/light-wallet-transaction.ts b/web-ui/src/app/models/light-wallet-transaction.ts new file mode 100644 index 0000000..b26f477 --- /dev/null +++ b/web-ui/src/app/models/light-wallet-transaction.ts @@ -0,0 +1,14 @@ + +export class LightWalletTransaction { + id: string; + size: number; + blockhash: string; + time: number; + inputs: LightWalletTransactionValue[]; + outputs: LightWalletTransactionValue[]; +} + +class LightWalletTransactionValue { + index: number; + value: number; +} diff --git a/web-ui/src/app/services/addresses.service.ts b/web-ui/src/app/services/addresses.service.ts index 4592046..54690cb 100644 --- a/web-ui/src/app/services/addresses.service.ts +++ b/web-ui/src/app/services/addresses.service.ts @@ -6,7 +6,9 @@ import { environment } from '../../environments/environment'; import { Balance } from '../models/balance'; import { PaginatedResult } from '../models/paginated-result'; +import { LightWalletTransaction } from '../models/light-wallet-transaction'; import { Transaction } from '../models/transaction'; +import { WrappedResult } from '../models/wrapped-result'; const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) @@ -16,6 +18,7 @@ const httpOptions = { export class AddressesService { private baseUrl = environment.api.url + '/addresses'; + private baseUrlV2 = environment.api.url + '/v2/addresses'; constructor(private http: HttpClient) { } @@ -28,4 +31,18 @@ export class AddressesService { const url = `${this.baseUrl}/${address}/transactions?offset=${offset}&limit=${limit}&orderBy=${orderBy}`; return this.http.get>(url); } + + getTransactionsV2( + address: string, + limit: number = 10, + lastSeenTxid: string = '', + order: string = 'desc'): Observable> { + + let url = `${this.baseUrlV2}/${address}/transactions?limit=${limit}&order=${order}`; + if (lastSeenTxid !== '') { + url += `&lastSeenTxid=${lastSeenTxid}`; + } + + return this.http.get>(url); + } }