diff --git a/backend/src/api/bitcoin/bitcoin-api.interface.ts b/backend/src/api/bitcoin/bitcoin-api.interface.ts
index ad603835a..e2b9158bb 100644
--- a/backend/src/api/bitcoin/bitcoin-api.interface.ts
+++ b/backend/src/api/bitcoin/bitcoin-api.interface.ts
@@ -108,7 +108,7 @@ export namespace IBitcoinApi {
scriptPubKey: string; // (string) The hex-encoded scriptPubKey generated by the address
isscript: boolean; // (boolean) If the key is a script
iswitness: boolean; // (boolean) If the address is a witness
- witness_version?: boolean; // (numeric, optional) The version number of the witness program
+ witness_version?: number; // (numeric, optional) The version number of the witness program
witness_program: string; // (string, optional) The hex value of the witness program
confidential_key?: string; // (string) Elements only
unconfidential?: string; // (string) Elements only
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 21b00bb4b..0b7c072f6 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { BlockchainComponent } from './components/blockchain/blockchain.componen
import { FooterComponent } from './components/footer/footer.component';
import { AudioService } from './services/audio.service';
import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component';
+import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component';
import { IncomingTransactionsGraphComponent } from './components/incoming-transactions-graph/incoming-transactions-graph.component';
import { TimeSpanComponent } from './components/time-span/time-span.component';
import { SeoService } from './services/seo.service';
@@ -83,6 +84,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
MempoolBlocksComponent,
FooterComponent,
MempoolBlockComponent,
+ FeeDistributionGraphComponent,
IncomingTransactionsGraphComponent,
MempoolGraphComponent,
LbtcPegsGraphComponent,
diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 9d02cf124..c61680ff4 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -21,7 +21,10 @@
Unconfidential |
- {{ addressInfo.unconfidential }} |
+
+ {{ addressInfo.unconfidential | shortenString : 14 }}
+ {{ addressInfo.unconfidential }}
+ |
diff --git a/frontend/src/app/components/clipboard/clipboard.component.scss b/frontend/src/app/components/clipboard/clipboard.component.scss
index e69de29bb..9483fef52 100644
--- a/frontend/src/app/components/clipboard/clipboard.component.scss
+++ b/frontend/src/app/components/clipboard/clipboard.component.scss
@@ -0,0 +1,3 @@
+.btn-link {
+ padding: 0.25rem 0 0.1rem 0.5rem;
+}
diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
new file mode 100644
index 000000000..3465bde35
--- /dev/null
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.html
@@ -0,0 +1,9 @@
+
+
+
+
+
diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
new file mode 100644
index 000000000..8c90036fd
--- /dev/null
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
@@ -0,0 +1,83 @@
+import { OnChanges } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+ selector: 'app-fee-distribution-graph',
+ templateUrl: './fee-distribution-graph.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FeeDistributionGraphComponent implements OnInit, OnChanges {
+ @Input() data: any;
+ @Input() height: number | string = 210;
+ @Input() top: number | string = 20;
+ @Input() right: number | string = 22;
+ @Input() left: number | string = 30;
+
+ mempoolVsizeFeesOptions: any;
+ mempoolVsizeFeesInitOptions = {
+ renderer: 'svg'
+ };
+
+ constructor() { }
+
+ ngOnInit() {
+ this.mountChart();
+ }
+
+ ngOnChanges() {
+ this.mountChart();
+ }
+
+ mountChart() {
+ this.mempoolVsizeFeesOptions = {
+ grid: {
+ height: '210',
+ right: '20',
+ top: '22',
+ left: '30',
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ type: 'dotted',
+ color: '#ffffff66',
+ opacity: 0.25,
+ }
+ }
+ },
+ series: [{
+ data: this.data,
+ type: 'line',
+ label: {
+ show: true,
+ position: 'top',
+ color: '#ffffff',
+ textShadowBlur: 0,
+ formatter: (label: any) => {
+ return Math.floor(label.data);
+ },
+ },
+ smooth: true,
+ lineStyle: {
+ color: '#D81B60',
+ width: 4,
+ },
+ itemStyle: {
+ color: '#b71c1c',
+ borderWidth: 10,
+ borderMiterLimit: 10,
+ opacity: 1,
+ },
+ areaStyle: {
+ color: '#D81B60',
+ opacity: 1,
+ }
+ }]
+ };
+ }
+}
diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.html b/frontend/src/app/components/mempool-block/mempool-block.component.html
index 48baa3c23..d59b3c477 100644
--- a/frontend/src/app/components/mempool-block/mempool-block.component.html
+++ b/frontend/src/app/components/mempool-block/mempool-block.component.html
@@ -40,6 +40,9 @@
+
diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts
index 2cdff2b99..04091b0ad 100644
--- a/frontend/src/app/interfaces/node-api.interface.ts
+++ b/frontend/src/app/interfaces/node-api.interface.ts
@@ -42,7 +42,7 @@ export interface AddressInformation {
scriptPubKey: string; // (string) The hex-encoded scriptPubKey generated by the address
isscript: boolean; // (boolean) If the key is a script
iswitness: boolean; // (boolean) If the address is a witness
- witness_version?: boolean; // (numeric, optional) The version number of the witness program
+ witness_version?: number; // (numeric, optional) The version number of the witness program
witness_program: string; // (string, optional) The hex value of the witness program
confidential_key?: string; // (string) Elements only
unconfidential?: string; // (string) Elements only