machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/mempool/mempool

Browse Source
This commit is contained in:
TechMiX
2020-10-28 22:25:33 +01:00
parent 6f423adda1 3b83f41e49
commit eae49ddafb
35 changed files with 1834 additions and 1374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/app/components/about/about.component.html
View File

@@ -73,14 +73,16 @@
</div>
<input formControlName="amount" class="form-control" type="number" min="0.001" step="1E-03">
</div>
<div class="input-group mb-4" *ngIf="donationForm.get('amount').value >= 0.01; else lowAmount">
<div class="input-group" *ngIf="donationForm.get('amount').value >= 0.01; else lowAmount">
<div class="input-group-prepend" style="width: 42px;">
<span class="input-group-text">@</span>
</div>
<input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
</div>
<div class="input-group">
<button class="btn btn-primary mx-auto" type="submit">Request invoice</button>
<div class="required" *ngIf="donationForm.get('amount').hasError('required')">Amount required</div>
<div class="required" *ngIf="donationForm.get('amount').hasError('min')">Minimum amount is 0.001 BTC</div>
<div class="input-group mt-4">
<button class="btn btn-primary mx-auto" type="submit" [disabled]="donationForm.invalid">Request invoice</button>
</div>
</form>
</div>
@@ -92,14 +94,78 @@
</ng-template>
<div *ngIf="donationStatus === 3" class="text-center">
<div class="qr-wrapper mt-2 mb-2">
<a [href]="bypassSecurityTrustUrl('bitcoin:' + donationObj.address + '?amount=' + donationObj.amount)" target="_blank">
<app-qrcode [data]="'bitcoin:' + donationObj.address + '?amount=' + donationObj.amount"></app-qrcode>
</a>
</div>
<br>
<p style="font-size: 10px;">{{ donationObj.address }}</p>
<p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
<form [formGroup]="paymentForm">
<div class="btn-group btn-group-toggle mb-2" ngbRadioGroup formControlName="method">
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" value="chain"> <fa-icon [icon]="['fas', 'link']" [fixedWidth]="true" title="Onchain"></fa-icon>
</label>
<label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.BTC_LightningLike">
<input ngbButton type="radio" value="lightning"> <fa-icon [icon]="['fas', 'bolt']" [fixedWidth]="true" title="Lightning"></fa-icon>
</label>
<label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.LBTC">
<input ngbButton type="radio" value="lbtc"> <fa-icon [icon]="['fas', 'tint']" [fixedWidth]="true" title="Liquid Bitcoin"></fa-icon>
</label>
</div>
</form>
<ng-template [ngIf]="paymentForm.get('method').value === 'chain'">
<div class="qr-wrapper mt-2 mb-2">
<a [href]="bypassSecurityTrustUrl('bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount)" target="_blank">
<app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="'bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount"></app-qrcode>
</a>
</div>
<br>
<div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
<input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.BTC"></app-clipboard></button>
</div>
</div>
<p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
</ng-template>
<ng-template [ngIf]="paymentForm.get('method').value === 'lightning'">
<div class="qr-wrapper mt-2 mb-2">
<a [href]="bypassSecurityTrustUrl('lightning:' + donationObj.addresses.BTC_LightningLike)" target="_blank">
<app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="donationObj.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
</a>
</div>
<br>
<div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
<input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC_LightningLike">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="donationObj.addresses.BTC_LightningLike"></app-clipboard></button>
</div>
</div>
<div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
<input type="text" class="form-control" readonly value="0334ac407769a00334afac4231a6e4c0faa31328b67b42c0c59e722e083ed5e6cf@103.99.170.180:9735">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="'0334ac407769a00334afac4231a6e4c0faa31328b67b42c0c59e722e083ed5e6cf@103.99.170.180:9735'"></app-clipboard></button>
</div>
</div>
<p style="font-size: 10px;"></p>
<p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
</ng-template>
<ng-template [ngIf]="paymentForm.get('method').value === 'lbtc'">
<div class="qr-wrapper mt-2 mb-2">
<a [href]="bypassSecurityTrustUrl('liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d')" target="_blank">
<app-qrcode imageUrl="./resources/liquid-bitcoin.png" [size]="200" [data]="'liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'"></app-qrcode>
</a>
</div>
<br>
<div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
<input type="text" class="form-control" readonly [value]="donationObj.addresses.LBTC">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.LBTC"></app-clipboard></button>
</div>
</div>
<p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
</ng-template>
<p>Waiting for transaction... </p>
<div class="spinner-border text-light"></div>

11
frontend/src/app/components/about/about.component.scss
View File

@@ -2,6 +2,7 @@
background-color: #FFF;
padding: 10px;
display: inline-block;
padding-bottom: 5px;
}
.profile_photo {
@@ -22,3 +23,13 @@
.text-small {
font-size: 12px;
}
.info-group {
max-width: 400px;
}
.required {
color: #FF0000;
font-weight: bold;
}

9
frontend/src/app/components/about/about.component.ts
View File

@@ -3,7 +3,7 @@ import { WebsocketService } from '../../services/websocket.service';
import { SeoService } from 'src/app/services/seo.service';
import { StateService } from 'src/app/services/state.service';
import { Observable } from 'rxjs';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ApiService } from 'src/app/services/api.service';
import { env } from '../../app.constants';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -17,6 +17,7 @@ import { map } from 'rxjs/operators';
export class AboutComponent implements OnInit {
gitCommit$: Observable<string>;
donationForm: FormGroup;
paymentForm: FormGroup;
donationStatus = 1;
sponsors$: Observable<any>;
donationObj: any;
@@ -38,10 +39,14 @@ export class AboutComponent implements OnInit {
this.websocketService.want(['blocks']);
this.donationForm = this.formBuilder.group({
amount: [0.01],
amount: [0.01, [Validators.min(0.001), Validators.required]],
handle: [''],
});
this.paymentForm = this.formBuilder.group({
'method': 'chain'
});
this.apiService.getDonation$()
.subscribe((sponsors) => {
this.sponsors = sponsors;

2
frontend/src/app/components/block/block.component.html
View File

@@ -43,7 +43,7 @@
<tbody>
<tr *ngIf="block.medianFee !== undefined">
<td class="td-width">Median fee</td>
<td>~{{ block.medianFee | number:'1.0-0' }} sat/vB (<app-fiat [value]="block.medianFee * 250" digitsInfo="1.2-2"></app-fiat>)</td>
<td>~{{ block.medianFee | number:'1.0-0' }} sat/vB (<app-fiat [value]="block.medianFee * 140" digitsInfo="1.2-2" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)</td>
</tr>
<ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
<tr>

6
frontend/src/app/components/fees-box/fees-box.component.html
View File

@@ -3,19 +3,19 @@
<td class="d-none d-md-block">
<h5 class="card-title">Low priority</h5>
<p class="card-text">
{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)
{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 140" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
</p>
</td>
<td>
<h5 class="card-title">Medium priority</h5>
<p class="card-text">
{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)
{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 140" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
</p>
</td>
<td>
<h5 class="card-title">High priority</h5>
<p class="card-text">
{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)
{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 140" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)
</p>
</td>
</tr>

2
frontend/src/app/components/mempool-block/mempool-block.component.html
View File

@@ -14,7 +14,7 @@
<tbody>
<tr>
<td>Median fee</td>
<td>~{{ mempoolBlock.medianFee | number:'1.0-0' }} sat/vB (<app-fiat [value]="mempoolBlock.medianFee * 250" digitsInfo="1.2-2"></app-fiat>)</td>
<td>~{{ mempoolBlock.medianFee | number:'1.0-0' }} sat/vB (<app-fiat [value]="mempoolBlock.medianFee * 140" digitsInfo="1.2-2" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat>)</td>
</tr>
<tr>
<td>Fee span</td>

12
frontend/src/app/components/mempool-graph/mempool-graph.component.ts
View File

@@ -30,9 +30,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
ngOnInit(): void {
const showLegend = !this.isMobile && this.showLegend;
let labelHops = !this.showLegend ? 12 : 6;
let labelHops = !this.showLegend ? 48 : 24;
if (this.small) {
labelHops = labelHops * 2;
labelHops = labelHops / 2;
}
if (this.isMobile) {
labelHops = 96;
}
const labelInterpolationFnc = (value: any, index: any) => {
@@ -50,7 +54,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
case '1y':
value = formatDate(value, 'dd/MM', this.locale);
}
return index % labelHops === 0 ? value : null;
return index % labelHops === 0 ? value : null;
};
this.mempoolVsizeFeesOptions = {
@@ -65,7 +69,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
},
axisY: {
labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2),
offset: showLegend ? 160 : 80,
offset: showLegend ? 160 : 60,
},
plugins: [
Chartist.plugins.ctTargetLine({

5
frontend/src/app/components/qrcode/qrcode.component.html
View File

@@ -1 +1,4 @@
<canvas #canvas></canvas>
<div class="holder" [ngStyle]="{'width': size, 'height': size}">
<img *ngIf="imageUrl" [src]="imageUrl">
<canvas #canvas></canvas>
</div>

11
frontend/src/app/components/qrcode/qrcode.component.scss
View File

@@ -0,0 +1,11 @@
img {
position: absolute;
top: 67px;
left: 67px;
width: 65px;
height: 65px;
}
.holder {
position: relative;
}

6
frontend/src/app/components/qrcode/qrcode.component.ts
View File

@@ -8,6 +8,8 @@ import * as QRCode from 'qrcode/build/qrcode.js';
})
export class QrcodeComponent implements AfterViewInit {
@Input() data: string;
@Input() size = 125;
@Input() imageUrl: string;
@ViewChild('canvas') canvas: ElementRef;
qrcodeObject: any;
@@ -22,8 +24,8 @@ export class QrcodeComponent implements AfterViewInit {
dark: '#000',
light: '#fff'
},
width: 125,
height: 125,
width: this.size,
height: this.size,
};
if (!this.data) {

6
frontend/src/app/components/statistics/statistics.component.ts
View File

@@ -53,7 +53,11 @@ export class StatisticsComponent implements OnInit {
this.seoService.setTitle('Graphs');
this.stateService.networkChanged$.subscribe((network) => this.network = network);
const isMobile = window.innerWidth <= 767.98;
const labelHops = isMobile ? 12 : 6;
let labelHops = isMobile ? 48 : 24;
if (isMobile) {
labelHops = 96;
}
const labelInterpolationFnc = (value: any, index: any) => {
switch (this.radioGroupForm.controls.dateSpan.value) {

10
frontend/src/app/components/tx-features/tx-features.component.html
View File

@@ -1,4 +1,8 @@
<span *ngIf="segwitGains.realizedGains && !segwitGains.potentialBech32Gains" class="badge badge-success mr-1" ngbTooltip="This transaction saved {{ segwitGains.realizedGains * 100 | number: '1.0-0' }}% on fees by using native SegWit-Bech32" placement="bottom">SegWit</span>
<span *ngIf="segwitGains.realizedGains && segwitGains.potentialBech32Gains" class="badge badge-warning mr-1" ngbTooltip="This transaction saved {{ segwitGains.realizedGains * 100 | number: '1.0-0' }}% on fees by using SegWit and could save {{ segwitGains.potentialBech32Gains * 100 | number : '1.0-0' }}% more by fully upgrading to native SegWit-Bech32" placement="bottom">SegWit</span>
<span *ngIf="segwitGains.potentialP2shGains" class="badge badge-danger mr-1" ngbTooltip="This transaction could save {{ segwitGains.potentialBech32Gains * 100 | number : '1.0-0' }}% on fees by upgrading to native SegWit-Bech32 or {{ segwitGains.potentialP2shGains * 100 | number: '1.0-0' }}% by upgrading to SegWit-P2SH" placement="bottom"><del>SegWit</del></span>
<span *ngIf="segwitGains.realizedGains && !segwitGains.potentialBech32Gains; else segwitTwo" class="badge badge-success mr-1" ngbTooltip="This transaction saved {{ segwitGains.realizedGains * 100 | number: '1.0-0' }}% on fees by using native SegWit-Bech32" placement="bottom">SegWit</span>
<ng-template #segwitTwo>
<span *ngIf="segwitGains.realizedGains && segwitGains.potentialBech32Gains else potentialP2shGains" class="badge badge-warning mr-1" ngbTooltip="This transaction saved {{ segwitGains.realizedGains * 100 | number: '1.0-0' }}% on fees by using SegWit and could save {{ segwitGains.potentialBech32Gains * 100 | number : '1.0-0' }}% more by fully upgrading to native SegWit-Bech32" placement="bottom">SegWit</span>
<ng-template #potentialP2shGains>
<span *ngIf="segwitGains.potentialP2shGains" class="badge badge-danger mr-1" ngbTooltip="This transaction could save {{ segwitGains.potentialBech32Gains * 100 | number : '1.0-0' }}% on fees by upgrading to native SegWit-Bech32 or {{ segwitGains.potentialP2shGains * 100 | number: '1.0-0' }}% by upgrading to SegWit-P2SH" placement="bottom"><del>SegWit</del></span>
</ng-template>
</ng-template>
<span *ngIf="isRbfTransaction" class="badge badge-success" ngbTooltip="This transaction support Replace-By-Fee (RBF) allowing fee bumping" placement="bottom">RBF</span>