diff --git a/backend/src/api/bisq.ts b/backend/src/api/bisq.ts index cc2578af9..d412e685c 100644 --- a/backend/src/api/bisq.ts +++ b/backend/src/api/bisq.ts @@ -5,6 +5,7 @@ import { BisqBlocks, BisqBlock, BisqTransaction, BisqStats, BisqTrade } from '.. import { Common } from './common'; class Bisq { + private latestBlockHeight = 0; private blocks: BisqBlock[] = []; private transactions: BisqTransaction[] = []; private transactionIndex: { [txId: string]: BisqTransaction } = {}; @@ -70,6 +71,10 @@ class Bisq { this.priceUpdateCallbackFunction = fn; } + getLatestBlockHeight(): number { + return this.latestBlockHeight; + } + private updatePrice() { request('https://markets.bisq.network/api/trades/?market=bsq_btc', { json: true }, (err, res, trades: BisqTrade[]) => { if (err) { return console.log(err); } @@ -180,6 +185,7 @@ class Bisq { if (data.blocks && data.blocks.length !== this.blocks.length) { this.blocks = data.blocks.filter((block) => block.txs.length > 0); this.blocks.reverse(); + this.latestBlockHeight = data.chainHeight; const time = new Date().getTime() - start; console.log('Bisq dump loaded in ' + time + ' ms'); } else { diff --git a/backend/src/index.ts b/backend/src/index.ts index 5c20cf2e6..09371d54a 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -96,6 +96,7 @@ class Server { .get(config.API_ENDPOINT + 'bisq/stats', routes.getBisqStats) .get(config.API_ENDPOINT + 'bisq/tx/:txId', routes.getBisqTransaction) .get(config.API_ENDPOINT + 'bisq/block/:hash', routes.getBisqBlock) + .get(config.API_ENDPOINT + 'bisq/blocks/tip/height', routes.getBisqTip) .get(config.API_ENDPOINT + 'bisq/blocks/:index/:length', routes.getBisqBlocks) .get(config.API_ENDPOINT + 'bisq/address/:address', routes.getBisqAddress) .get(config.API_ENDPOINT + 'bisq/txs/:index/:length', routes.getBisqTransactions) diff --git a/backend/src/routes.ts b/backend/src/routes.ts index ea7c97472..94253d412 100644 --- a/backend/src/routes.ts +++ b/backend/src/routes.ts @@ -92,6 +92,11 @@ class Routes { res.send(result); } + public getBisqTip(req: Request, res: Response) { + const result = bisq.getLatestBlockHeight(); + res.send(result.toString()); + } + public getBisqTransaction(req: Request, res: Response) { const result = bisq.getTransaction(req.params.txId); if (result) { diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html index 24fdff330..df9821efe 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html @@ -6,13 +6,13 @@ - - - - - + + + + + - + @@ -27,4 +27,10 @@ - \ No newline at end of file + + + + + + + diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts index e8e4a9720..d84158d33 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { BisqApiService } from '../bisq-api.service'; -import { switchMap } from 'rxjs/operators'; +import { switchMap, tap } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces'; import { SeoService } from 'src/app/services/seo.service'; @@ -17,6 +17,8 @@ export class BisqBlocksComponent implements OnInit { itemsPerPage: number; contentSpace = window.innerHeight - (165 + 75); fiveItemsPxSize = 250; + loadingItems: number[]; + isLoading = true; pageSubject$ = new Subject(); @@ -28,12 +30,15 @@ export class BisqBlocksComponent implements OnInit { ngOnInit(): void { this.seoService.setTitle('Blocks', true); this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10); + this.loadingItems = Array(this.itemsPerPage); this.pageSubject$ .pipe( + tap(() => this.isLoading = true), switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * 10, this.itemsPerPage)) ) .subscribe((response) => { + this.isLoading = false; this.blocks = response.body; this.totalCount = parseInt(response.headers.get('x-total-count'), 10); }, (error) => { diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html index e51c19832..1e186650a 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html @@ -6,18 +6,25 @@
HashTotal Sent (BSQ)TransactionsHeightTimeHashTotal Sent (BSQ)TransactionsHeightTime
{{ block.hash | shortenString : 13 }} {{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}
- - - - - - + + + + + + - + - + @@ -29,4 +36,10 @@ - \ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts index 08008e837..0acc55f24 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { BisqTransaction, BisqOutput } from '../bisq.interfaces'; import { Subject } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; +import { switchMap, tap } from 'rxjs/operators'; import { BisqApiService } from '../bisq-api.service'; import { SeoService } from 'src/app/services/seo.service'; @@ -17,7 +17,8 @@ export class BisqTransactionsComponent implements OnInit { itemsPerPage: number; contentSpace = window.innerHeight - (165 + 75); fiveItemsPxSize = 250; - + isLoading = true; + loadingItems: number[]; pageSubject$ = new Subject(); constructor( @@ -29,12 +30,15 @@ export class BisqTransactionsComponent implements OnInit { this.seoService.setTitle('Transactions', true); this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10); + this.loadingItems = Array(this.itemsPerPage); this.pageSubject$ .pipe( + tap(() => this.isLoading = true), switchMap((page) => this.bisqApiService.listTransactions$((page - 1) * 10, this.itemsPerPage)) ) .subscribe((response) => { + this.isLoading = false; this.transactions = response.body; this.totalCount = parseInt(response.headers.get('x-total-count'), 10); }, (error) => { diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index cfe044d1e..af53e7ab0 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -1,12 +1,14 @@
TransactionTypeTotal Sent (BSQ)OutputsBlock HeightBlock TimeTransactionTypeTotal Sent (BSQ)OutputsBlock HeightBlock Time
{{ tx.id | shortenString : 16 }} {{ tx.txTypeDisplayString }}{{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }} + + {{ tx.burntFee / 100 | number: '1.2-2' }} + + + {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }} + + {{ tx.outputs.length }} {{ tx.blockHeight }} {{ tx.time | date:'yyyy-MM-dd HH:mm' }}