From 309e851ead676c434bdde2cd4eac4ede7ee580f7 Mon Sep 17 00:00:00 2001 From: Simon Lindh Date: Tue, 12 Nov 2019 16:39:59 +0800 Subject: [PATCH] Block view. --- .../bitcoin/bitcoin-api-abstract-factory.ts | 5 +- backend/src/api/bitcoin/bitcoind-api.ts | 14 ++- backend/src/api/bitcoin/esplora-api.ts | 35 ++++++- backend/src/api/blocks.ts | 2 +- backend/src/index.ts | 5 +- backend/src/routes.ts | 27 ++++++ .../block-modal/block-modal.component.html | 5 +- .../block-modal/block-modal.component.ts | 3 +- .../app/explorer/block/block.component.html | 78 ++++++++++++++- .../src/app/explorer/block/block.component.ts | 52 +++++++++- frontend/src/app/explorer/explorer.module.ts | 3 +- .../explorer/explorer/explorer.component.html | 6 +- .../transaction/transaction.component.html | 96 ++----------------- .../transaction/transaction.component.ts | 10 -- .../transactions-list.component.html | 94 ++++++++++++++++++ .../transactions-list.component.scss | 3 + .../transactions-list.component.ts | 36 +++++++ frontend/src/app/services/api.service.ts | 16 +++- .../shared/pipes/bytes-pipe/wubytes.pipe.ts | 63 ++++++++++++ .../shorten-string.pipe.ts | 9 ++ frontend/src/app/shared/shared.module.ts | 8 ++ .../app/tx-bubble/tx-bubble.component.html | 4 +- .../src/app/tx-bubble/tx-bubble.component.ts | 3 - frontend/src/styles.scss | 4 - 24 files changed, 455 insertions(+), 126 deletions(-) create mode 100644 frontend/src/app/explorer/transactions-list/transactions-list.component.html create mode 100644 frontend/src/app/explorer/transactions-list/transactions-list.component.scss create mode 100644 frontend/src/app/explorer/transactions-list/transactions-list.component.ts create mode 100644 frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts create mode 100644 frontend/src/app/shared/pipes/shorten-string-pipe/shorten-string.pipe.ts diff --git a/backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts b/backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts index ae7191c82..cf4d07a40 100644 --- a/backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts +++ b/backend/src/api/bitcoin/bitcoin-api-abstract-factory.ts @@ -5,9 +5,12 @@ export interface AbstractBitcoinApi { getRawMempool(): Promise; getRawTransaction(txId: string): Promise; getBlockCount(): Promise; - getBlock(hash: string): Promise; + getBlockAndTransactions(hash: string): Promise; getBlockHash(height: number): Promise; + getBlock(hash: string): Promise; + getBlockTransactions(hash: string): Promise; + getBlockTransactionsFromIndex(hash: string, index: number): Promise; getBlocks(): Promise; getBlocksFromHeight(height: number): Promise; } diff --git a/backend/src/api/bitcoin/bitcoind-api.ts b/backend/src/api/bitcoin/bitcoind-api.ts index 372db12d2..c4b2caeb0 100644 --- a/backend/src/api/bitcoin/bitcoind-api.ts +++ b/backend/src/api/bitcoin/bitcoind-api.ts @@ -59,7 +59,7 @@ class BitcoindApi implements AbstractBitcoinApi { }); } - getBlock(hash: string, verbosity: 1 | 2 = 1): Promise { + getBlockAndTransactions(hash: string, verbosity: 1 | 2 = 1): Promise { return new Promise((resolve, reject) => { this.client.getBlock(hash, verbosity, (err: Error, block: IBlock) => { if (err) { @@ -81,6 +81,10 @@ class BitcoindApi implements AbstractBitcoinApi { }); } + getBlock(hash: string): Promise { + throw new Error('Method not implemented.'); + } + getBlocks(): Promise { throw new Error('Method not implemented.'); } @@ -88,6 +92,14 @@ class BitcoindApi implements AbstractBitcoinApi { getBlocksFromHeight(height: number): Promise { throw new Error('Method not implemented.'); } + + getBlockTransactions(hash: string): Promise { + throw new Error('Method not implemented.'); + } + + getBlockTransactionsFromIndex(hash: string, index: number): Promise { + throw new Error('Method not implemented.'); + } } export default BitcoindApi; diff --git a/backend/src/api/bitcoin/esplora-api.ts b/backend/src/api/bitcoin/esplora-api.ts index 77683fd4d..2c5cc0927 100644 --- a/backend/src/api/bitcoin/esplora-api.ts +++ b/backend/src/api/bitcoin/esplora-api.ts @@ -65,7 +65,7 @@ class EsploraApi implements AbstractBitcoinApi { }); } - getBlock(hash: string): Promise { + getBlockAndTransactions(hash: string): Promise { return new Promise(async (resolve, reject) => { try { const blockInfo: AxiosResponse = await this.client.get('/block/' + hash); @@ -116,6 +116,39 @@ class EsploraApi implements AbstractBitcoinApi { } }); } + + getBlock(hash: string): Promise { + return new Promise(async (resolve, reject) => { + try { + const blockInfo: AxiosResponse = await this.client.get('/block/' + hash); + resolve(blockInfo.data); + } catch (error) { + reject(error); + } + }); + } + + getBlockTransactions(hash: string): Promise { + return new Promise(async (resolve, reject) => { + try { + const blockInfo: AxiosResponse = await this.client.get('/block/' + hash + '/txs'); + resolve(blockInfo.data); + } catch (error) { + reject(error); + } + }); + } + + getBlockTransactionsFromIndex(hash: string, index: number): Promise { + return new Promise(async (resolve, reject) => { + try { + const blockInfo: AxiosResponse = await this.client.get('/block/' + hash + '/txs/' + index); + resolve(blockInfo.data); + } catch (error) { + reject(error); + } + }); + } } export default EsploraApi; diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts index 4a2b0b557..d8af00cf4 100644 --- a/backend/src/api/blocks.ts +++ b/backend/src/api/blocks.ts @@ -56,7 +56,7 @@ class Blocks { block = storedBlock; } else { const blockHash = await bitcoinApi.getBlockHash(this.currentBlockHeight); - block = await bitcoinApi.getBlock(blockHash); + block = await bitcoinApi.getBlockAndTransactions(blockHash); const coinbase = await memPool.getRawTransaction(block.tx[0], true); if (coinbase && coinbase.totalOut) { diff --git a/backend/src/index.ts b/backend/src/index.ts index 97c1bf92b..654c18bca 100644 --- a/backend/src/index.ts +++ b/backend/src/index.ts @@ -120,7 +120,7 @@ class MempoolSpace { console.log('Found block by looking in local cache'); client['blockHeight'] = foundBlock.height; } else { - const theBlock = await bitcoinApi.getBlock(tx.blockhash); + const theBlock = await bitcoinApi.getBlockAndTransactions(tx.blockhash); if (theBlock) { client['blockHeight'] = theBlock.height; } @@ -269,6 +269,9 @@ class MempoolSpace { .get(config.API_ENDPOINT + 'explorer/blocks', routes.getBlocks) .get(config.API_ENDPOINT + 'explorer/blocks/:height', routes.getBlocks) .get(config.API_ENDPOINT + 'explorer/tx/:id', routes.getRawTransaction) + .get(config.API_ENDPOINT + 'explorer/block/:hash', routes.getBlock) + .get(config.API_ENDPOINT + 'explorer/block/:hash/tx', routes.getBlockTransactions) + .get(config.API_ENDPOINT + 'explorer/block/:hash/tx/:index', routes.getBlockTransactionsFromIndex) ; } diff --git a/backend/src/routes.ts b/backend/src/routes.ts index adf3e0daf..9d1d15bf7 100644 --- a/backend/src/routes.ts +++ b/backend/src/routes.ts @@ -99,6 +99,33 @@ class Routes { res.status(500).send(e.message); } } + + public async getBlock(req, res) { + try { + const result = await bitcoinApi.getBlock(req.params.hash); + res.send(result); + } catch (e) { + res.status(500).send(e.message); + } + } + + public async getBlockTransactions(req, res) { + try { + const result = await bitcoinApi.getBlockTransactions(req.params.hash); + res.send(result); + } catch (e) { + res.status(500).send(e.message); + } + } + + public async getBlockTransactionsFromIndex(req, res) { + try { + const result = await bitcoinApi.getBlockTransactionsFromIndex(req.params.hash, req.params.index); + res.send(result); + } catch (e) { + res.status(500).send(e.message); + } + } } export default new Routes(); diff --git a/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.html b/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.html index 7050174d6..5cd09ed9e 100644 --- a/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.html +++ b/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.html @@ -1,5 +1,8 @@
-

Fee distribution for block #{{ block.height }}

+

Fee distribution for block + #{{ block.height }} + #{{ block.height }} +

diff --git a/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts b/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts index 196c0eee4..bdf5785bf 100644 --- a/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts +++ b/frontend/src/app/blockchain-blocks/block-modal/block-modal.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit, Input } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { IBlock } from '../../blockchain/interfaces'; import { MemPoolService } from '../../services/mem-pool.service'; +import { environment } from '../../../environments/environment'; @Component({ selector: 'app-block-modal', @@ -11,7 +12,7 @@ import { MemPoolService } from '../../services/mem-pool.service'; export class BlockModalComponent implements OnInit { @Input() block: IBlock; blockSubsidy = 50; - + isEsploraEnabled = !!environment.esplora; conversions: any; constructor( diff --git a/frontend/src/app/explorer/block/block.component.html b/frontend/src/app/explorer/block/block.component.html index 44579d51c..1ee9666da 100644 --- a/frontend/src/app/explorer/block/block.component.html +++ b/frontend/src/app/explorer/block/block.component.html @@ -1 +1,77 @@ -

block works!

+
+

Block #{{ block.height }}

+ + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
Timestamp{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} ({{ block.timestamp | timeSince }} ago)
Number of transactions{{ block.tx_count }}
Size{{ block.size | bytes: 2 }}
Weight{{ block.weight | wuBytes: 2 }}
Status{{ latestBlockHeight - block.height + 1 }} confirmations
+
+
+ + + + + + + + + + + +
Hash{{ block.id | shortenString : 36 }}
Previous Block{{ block.previousblockhash | shortenString : 36 }}
+
+
+ +
+ +

{{ transactions?.length || '?' }} of {{ block.tx_count }} transactions

+ +
+ + + +
+ + +

+ + +
+ + + +
+ +

+
+ + +
+ +
\ No newline at end of file diff --git a/frontend/src/app/explorer/block/block.component.ts b/frontend/src/app/explorer/block/block.component.ts index d45fb1abe..996e0409a 100644 --- a/frontend/src/app/explorer/block/block.component.ts +++ b/frontend/src/app/explorer/block/block.component.ts @@ -1,4 +1,9 @@ import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, ParamMap } from '@angular/router'; +import { ApiService } from 'src/app/services/api.service'; +import { MemPoolService } from 'src/app/services/mem-pool.service'; +import { switchMap } from 'rxjs/operators'; +import { ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'app-block', @@ -6,10 +11,55 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./block.component.scss'] }) export class BlockComponent implements OnInit { + block: any; + isLoadingBlock = true; + latestBlockHeight: number; + transactions: any[]; + isLoadingTransactions = true; - constructor() { } + constructor( + private route: ActivatedRoute, + private apiService: ApiService, + private memPoolService: MemPoolService, + private ref: ChangeDetectorRef, + ) { } ngOnInit() { + this.route.paramMap.pipe( + switchMap((params: ParamMap) => { + this.isLoadingBlock = true; + const blockHash: string = params.get('id') || ''; + this.getBlockTransactions(blockHash); + return this.apiService.getBlock$(blockHash); + }) + ) + .subscribe((block) => { + this.block = block; + this.isLoadingBlock = false; + this.ref.markForCheck(); + }); + + this.memPoolService.blocks$ + .subscribe((block) => { + this.latestBlockHeight = block.height; + }); + } + + getBlockTransactions(hash: string) { + this.apiService.getBlockTransactions$(hash) + .subscribe((transactions: any) => { + this.transactions = transactions; + this.isLoadingTransactions = false; + }); + } + + loadMore() { + this.isLoadingTransactions = true; + this.apiService.getBlockTransactions$(this.block.id, this.transactions.length) + .subscribe((transactions) => { + this.transactions = this.transactions.concat(transactions); + this.isLoadingTransactions = false; + }); } } diff --git a/frontend/src/app/explorer/explorer.module.ts b/frontend/src/app/explorer/explorer.module.ts index 9e020d437..bf5558c4d 100644 --- a/frontend/src/app/explorer/explorer.module.ts +++ b/frontend/src/app/explorer/explorer.module.ts @@ -6,6 +6,7 @@ import { RouterModule, Routes } from '@angular/router'; import { SharedModule } from '../shared/shared.module'; import { BlockComponent } from './block/block.component'; import { AddressComponent } from './address/address.component'; +import { TransactionsListComponent } from './transactions-list/transactions-list.component'; const routes: Routes = [ { @@ -27,7 +28,7 @@ const routes: Routes = [ ]; @NgModule({ - declarations: [ExplorerComponent, TransactionComponent, BlockComponent, AddressComponent], + declarations: [ExplorerComponent, TransactionComponent, BlockComponent, AddressComponent, TransactionsListComponent], imports: [ SharedModule, CommonModule, diff --git a/frontend/src/app/explorer/explorer/explorer.component.html b/frontend/src/app/explorer/explorer/explorer.component.html index 7e0485baa..df7d97f79 100644 --- a/frontend/src/app/explorer/explorer/explorer.component.html +++ b/frontend/src/app/explorer/explorer/explorer.component.html @@ -7,8 +7,8 @@ Timestamp Mined Transactions - Size (kB) - Weight (kWU) + Size + Weight @@ -17,7 +17,7 @@ {{ block.timestamp | timeSince }} ago {{ block.tx_count }} {{ block.size | bytes: 2 }} - {{ block.weight | bytes: 2 }} + {{ block.weight | wuBytes: 2 }} diff --git a/frontend/src/app/explorer/transaction/transaction.component.html b/frontend/src/app/explorer/transaction/transaction.component.html index dbc258801..e5951ca57 100644 --- a/frontend/src/app/explorer/transaction/transaction.component.html +++ b/frontend/src/app/explorer/transaction/transaction.component.html @@ -1,96 +1,12 @@

Transaction

+
+ - - - - - - -
- {{ tx.txid }} -
+ -
-
- - - - - - - - -
-
- - Coinbase - - - {{ vin.prevout.scriptpubkey_address }} - (tx) - -
- 		-
- - - {{ conversions.USD * (vin.prevout.value / 100000000) | currency:'USD':'symbol':'1.2-2' }} - - - {{ vin.prevout.value / 100000000 }} BTC - - -
-
- -
-
- - - - - - - - - - -
-
- {{ vout.scriptpubkey_address }} - - {{ vout.scriptpubkey_type | uppercase }} - -
- 		-
- - {{ conversions.USD * (vout.value / 100000000) | currency:'USD':'symbol':'1.2-2' }} - - - {{ vout.value / 100000000 }} BTC - -
-
- - - - -   - -
-
-

Details

@@ -103,11 +19,11 @@ Size - {{ tx.size | bytes }} + {{ tx.size | bytes: 2 }} Weight - {{ tx.weight }} WU + {{ tx.weight | wuBytes: 2 }} Included in block @@ -117,7 +33,7 @@
- +
diff --git a/frontend/src/app/explorer/transaction/transaction.component.ts b/frontend/src/app/explorer/transaction/transaction.component.ts index 14cb23fb2..9fedbfd30 100644 --- a/frontend/src/app/explorer/transaction/transaction.component.ts +++ b/frontend/src/app/explorer/transaction/transaction.component.ts @@ -13,10 +13,6 @@ export class TransactionComponent implements OnInit { tx: any; isLoadingTx = true; conversions: any; - totalOutput: number; - - viewFiat = false; - latestBlockHeight: number; constructor( private route: ActivatedRoute, @@ -33,7 +29,6 @@ export class TransactionComponent implements OnInit { ) .subscribe((tx) => { this.tx = tx; - this.totalOutput = this.tx.vout.map((v: any) => v.value || 0).reduce((a: number, b: number) => a + b); this.isLoadingTx = false; }); @@ -41,10 +36,5 @@ export class TransactionComponent implements OnInit { .subscribe((conversions) => { this.conversions = conversions; }); - - this.memPoolService.blocks$ - .subscribe((block) => { - this.latestBlockHeight = block.height; - }); } } diff --git a/frontend/src/app/explorer/transactions-list/transactions-list.component.html b/frontend/src/app/explorer/transactions-list/transactions-list.component.html new file mode 100644 index 000000000..5ae228ad2 --- /dev/null +++ b/frontend/src/app/explorer/transactions-list/transactions-list.component.html @@ -0,0 +1,94 @@ + + +
Fees
+ + + + + +
+ {{ tx.txid }} +
+ +
+
+ + + + + + + +
+
+ + Coinbase + + + {{ vin.prevout.scriptpubkey_address }} + (tx) + +
+ 		+
+ + + {{ conversions.USD * (vin.prevout.value / 100000000) | currency:'USD':'symbol':'1.2-2' }} + + + {{ vin.prevout.value / 100000000 }} BTC + + +
+
+ +
+
+ + + + + + + + + + +
+
+ {{ vout.scriptpubkey_address }} + + {{ vout.scriptpubkey_type | uppercase }} + +
+ 		+
+ + {{ conversions.USD * (vout.value / 100000000) | currency:'USD':'symbol':'1.2-2' }} + + + {{ vout.value / 100000000 }} BTC + +
+
+ + + + + +   + + +
+
+
+ + + \ No newline at end of file diff --git a/frontend/src/app/explorer/transactions-list/transactions-list.component.scss b/frontend/src/app/explorer/transactions-list/transactions-list.component.scss new file mode 100644 index 000000000..45b630a61 --- /dev/null +++ b/frontend/src/app/explorer/transactions-list/transactions-list.component.scss @@ -0,0 +1,3 @@ +.header-bg { + background-color: #181b2d !important; +} diff --git a/frontend/src/app/explorer/transactions-list/transactions-list.component.ts b/frontend/src/app/explorer/transactions-list/transactions-list.component.ts new file mode 100644 index 000000000..ecd1c9f85 --- /dev/null +++ b/frontend/src/app/explorer/transactions-list/transactions-list.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { MemPoolService } from 'src/app/services/mem-pool.service'; + +@Component({ + selector: 'app-transactions-list', + templateUrl: './transactions-list.component.html', + styleUrls: ['./transactions-list.component.scss'] +}) +export class TransactionsListComponent implements OnInit { + @Input() transactions: any[]; + @Input() showConfirmations = false; + latestBlockHeight: number; + + viewFiat = false; + conversions: any; + + constructor( + private memPoolService: MemPoolService, + ) { } + + ngOnInit() { + this.memPoolService.conversions$ + .subscribe((conversions) => { + this.conversions = conversions; + }); + + this.memPoolService.blocks$ + .subscribe((block) => { + this.latestBlockHeight = block.height; + }); + } + + getTotalTxOutput(tx: any) { + return tx.vout.map((v: any) => v.value || 0).reduce((a: number, b: number) => a + b); + } +} diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 12ed8f8fa..efa40d66a 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -162,11 +162,19 @@ export class ApiService { return this.httpClient.get(API_BASE_URL + '/statistics/6m'); } - listBlocks$(height?: number): Observable { - return this.httpClient.get(API_BASE_URL + '/explorer/blocks/' + (height || '')); + listBlocks$(height?: number): Observable { + return this.httpClient.get(API_BASE_URL + '/explorer/blocks/' + (height || '')); } - getTransaction$(txId: string): Observable { - return this.httpClient.get(API_BASE_URL + '/explorer/tx/' + txId); + getTransaction$(txId: string): Observable { + return this.httpClient.get(API_BASE_URL + '/explorer/tx/' + txId); + } + + getBlock$(hash: string): Observable { + return this.httpClient.get(API_BASE_URL + '/explorer/block/' + hash); + } + + getBlockTransactions$(hash: string, index?: number): Observable { + return this.httpClient.get(API_BASE_URL + '/explorer/block/' + hash + '/tx/' + (index || '')); } } diff --git a/frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts b/frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts new file mode 100644 index 000000000..ebb673d07 --- /dev/null +++ b/frontend/src/app/shared/pipes/bytes-pipe/wubytes.pipe.ts @@ -0,0 +1,63 @@ +/* tslint:disable */ +import { Pipe, PipeTransform } from '@angular/core'; +import { isNumberFinite, isPositive, isInteger, toDecimal } from './utils'; + +export type ByteUnit = 'WU' | 'kWU' | 'MWU' | 'GWU' | 'TWU'; + +@Pipe({ + name: 'wuBytes' +}) +export class WuBytesPipe implements PipeTransform { + + static formats: { [key: string]: { max: number, prev?: ByteUnit } } = { + 'WU': {max: 1000}, + 'kWU': {max: Math.pow(1000, 2), prev: 'WU'}, + 'MWU': {max: Math.pow(1000, 3), prev: 'kWU'}, + 'GWU': {max: Math.pow(1000, 4), prev: 'MWU'}, + 'TWU': {max: Number.MAX_SAFE_INTEGER, prev: 'GWU'} + }; + + transform(input: any, decimal: number = 0, from: ByteUnit = 'WU', to?: ByteUnit): any { + + if (!(isNumberFinite(input) && + isNumberFinite(decimal) && + isInteger(decimal) && + isPositive(decimal))) { + return input; + } + + let bytes = input; + let unit = from; + while (unit !== 'WU') { + bytes *= 1024; + unit = WuBytesPipe.formats[unit].prev!; + } + + if (to) { + const format = WuBytesPipe.formats[to]; + + const result = toDecimal(WuBytesPipe.calculateResult(format, bytes), decimal); + + return WuBytesPipe.formatResult(result, to); + } + + for (const key in WuBytesPipe.formats) { + const format = WuBytesPipe.formats[key]; + if (bytes < format.max) { + + const result = toDecimal(WuBytesPipe.calculateResult(format, bytes), decimal); + + return WuBytesPipe.formatResult(result, key); + } + } + } + + static formatResult(result: number, unit: string): string { + return `${result} ${unit}`; + } + + static calculateResult(format: { max: number, prev?: ByteUnit }, bytes: number) { + const prev = format.prev ? WuBytesPipe.formats[format.prev] : undefined; + return prev ? bytes / prev.max : bytes; + } +} diff --git a/frontend/src/app/shared/pipes/shorten-string-pipe/shorten-string.pipe.ts b/frontend/src/app/shared/pipes/shorten-string-pipe/shorten-string.pipe.ts new file mode 100644 index 000000000..98b767042 --- /dev/null +++ b/frontend/src/app/shared/pipes/shorten-string-pipe/shorten-string.pipe.ts @@ -0,0 +1,9 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ name: 'shortenString' }) +export class ShortenStringPipe implements PipeTransform { + transform(str: string, length: number = 12) { + const half = length / 2; + return str.substring(0, half) + '...' + str.substring(str.length - half); + } +} diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index f83791ad4..44456461c 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -8,6 +8,8 @@ import { RoundPipe } from './pipes/math-round-pipe/math-round.pipe'; import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe'; import { ChartistComponent } from '../statistics/chartist.component'; import { TimeSincePipe } from './pipes/time-since/time-since.pipe'; +import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe'; +import { ShortenStringPipe } from './pipes/shorten-string-pipe/shorten-string.pipe'; @NgModule({ imports: [ @@ -21,6 +23,8 @@ import { TimeSincePipe } from './pipes/time-since/time-since.pipe'; CeilPipe, BytesPipe, VbytesPipe, + WuBytesPipe, + ShortenStringPipe, TimeSincePipe, ], exports: [ @@ -28,7 +32,9 @@ import { TimeSincePipe } from './pipes/time-since/time-since.pipe'; CeilPipe, BytesPipe, VbytesPipe, + WuBytesPipe, TimeSincePipe, + ShortenStringPipe, NgbButtonsModule, NgbModalModule, ChartistComponent, @@ -36,6 +42,8 @@ import { TimeSincePipe } from './pipes/time-since/time-since.pipe'; providers: [ BytesPipe, VbytesPipe, + WuBytesPipe, + ShortenStringPipe, ] }) export class SharedModule { } diff --git a/frontend/src/app/tx-bubble/tx-bubble.component.html b/frontend/src/app/tx-bubble/tx-bubble.component.html index 9d18c1dd7..a2b83181f 100644 --- a/frontend/src/app/tx-bubble/tx-bubble.component.html +++ b/frontend/src/app/tx-bubble/tx-bubble.component.html @@ -4,8 +4,8 @@ Transaction hash - {{ txIdShort }} - {{ txIdShort }} + {{ tx?.txid | shortenString }} + {{ tx?.txid | shortenString }} diff --git a/frontend/src/app/tx-bubble/tx-bubble.component.ts b/frontend/src/app/tx-bubble/tx-bubble.component.ts index 91e9fffe4..6ac50f3aa 100644 --- a/frontend/src/app/tx-bubble/tx-bubble.component.ts +++ b/frontend/src/app/tx-bubble/tx-bubble.component.ts @@ -61,9 +61,6 @@ export class TxBubbleComponent implements OnInit, OnDestroy { if (this.txShowTxNotFound) { setTimeout(() => { this.txShowTxNotFound = false; }, 2000); } - if (this.tx) { - this.txIdShort = this.tx.txid.substring(0, 6) + '...' + this.tx.txid.substring(this.tx.txid.length - 6); - } if (this.latestBlockHeight) { this.confirmations = (this.latestBlockHeight - this.txTrackingBlockHeight) + 1; } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index e170e22b4..18f0b1687 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -146,10 +146,6 @@ hr { background-color: #181b2d !important; } -.header-bg { - background-color: #653b9c; -} - .bordertop { border-top: 1px solid #4c4c4c; }