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

Merge branch 'master' into simon/angular-universal

Browse Source 
* master:
  Tweak ASM opcode styling colors
  Add some color and styling to the Bitcoin ASM opcodes
  Correcting title text on graph invert button.
  Modify upgrade script to include "tag @ hash" in notification msg
  Adding a button to invert the graph globally.
  Display P2PK instead of OP_RETURN fixes #161
  Improved utxo script design. fixes #46
  Adding prevout script. Fixed padding. refs #46
  Correcting details button padding on mobile.
  Fix nginx.conf reverse proxy cache URL path for sponsor images
  Add missing "engines" metadata into package-lock.json
  Upgrade backend/package-lock.json to version 2
  Toggle display UTXO details and scripts for transactions fixes #46
  Axios error handle sponsor proxy requests.
  Replacing request.js with axios fixes #153
  Add basic websocket error handler as emergency fix for site crashing

# Conflicts:
#	frontend/src/app/services/storage.service.ts
This commit is contained in:
softsimon
2020-11-22 20:53:12 +07:00
parent 647bb387ea 97a08cc6f2
commit 24aed09489
24 changed files with 1601 additions and 665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/app.module.ts
View File

@@ -43,7 +43,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
import { FeesBoxComponent } from './components/fees-box/fees-box.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faAngleDoubleDown, faAngleDoubleUp, faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faInfoCircle,
import { faAngleDoubleDown, faAngleDoubleUp, faAngleDown, faAngleUp, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
faLink, faList, faSearch, faTachometerAlt, faThList, faTint, faTv } from '@fortawesome/free-solid-svg-icons';
import { ApiDocsComponent } from './components/api-docs/api-docs.component';
import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@@ -121,5 +121,6 @@ export class AppModule {
library.addIcons(faTint);
library.addIcons(faAngleDown);
library.addIcons(faAngleUp);
library.addIcons(faExchangeAlt);
}
}

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

@@ -4,6 +4,7 @@ import { VbytesPipe } from 'src/app/shared/pipes/bytes-pipe/vbytes.pipe';
import * as Chartist from '@mempool/chartist';
import { OptimizedMempoolStats } from 'src/app/interfaces/node-api.interface';
import { StateService } from 'src/app/services/state.service';
import { StorageService } from 'src/app/services/storage.service';
@Component({
selector: 'app-mempool-graph',
@@ -21,11 +22,13 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
mempoolVsizeFeesData: any;
isMobile = window.innerWidth <= 767.98;
inverted: boolean;
constructor(
private vbytesPipe: VbytesPipe,
private stateService: StateService,
@Inject(LOCALE_ID) private locale: string,
private storageService: StorageService,
) { }
ngOnInit(): void {
@@ -62,7 +65,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
showLine: false,
fullWidth: true,
showPoint: false,
stackedLine: true,
stackedLine: !this.inverted,
low: 0,
axisX: {
labelInterpolationFnc: labelInterpolationFnc,
@@ -72,7 +75,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
labelInterpolationFnc: (value: number): any => this.vbytesPipe.transform(value, 2),
offset: showLegend ? 160 : 60,
},
plugins: []
plugins: this.inverted ? [Chartist.plugins.ctTargetLine({ value: 1000000 })] : []
};
if (showLegend) {
@@ -97,6 +100,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
}
ngOnChanges() {
this.inverted = this.storageService.getValue('inverted-graph') === 'true';
this.mempoolVsizeFeesData = this.handleNewMempoolData(this.data.concat([]));
}
@@ -131,10 +135,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
feesArray.push(0);
}
});
if (this.inverted && finalArray.length) {
feesArray = feesArray.map((value, i) => value + finalArray[finalArray.length - 1][i]);
}
finalArray.push(feesArray);
}
finalArray.reverse();
return finalArray;
}
}

1
frontend/src/app/components/statistics/statistics.component.html
View File

@@ -40,6 +40,7 @@
<input ngbButton type="radio" [value]="'1y'" [routerLink]="['/graphs' | relativeUrl]" fragment="1y"> 1Y
</label>
</div>
<button (click)="invertGraph()" class="btn btn-primary btn-sm ml-2 d-none d-md-inline"><fa-icon [icon]="['fas', 'exchange-alt']" [rotate]="90" [fixedWidth]="true" title="Invert"></fa-icon></button>
</form>
</div>
<div class="card-body">

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

@@ -12,6 +12,7 @@ import { ApiService } from '../../services/api.service';
import * as Chartist from '@mempool/chartist';
import { StateService } from 'src/app/services/state.service';
import { SeoService } from 'src/app/services/seo.service';
import { StorageService } from 'src/app/services/storage.service';
@Component({
selector: 'app-statistics',
@@ -33,6 +34,7 @@ export class StatisticsComponent implements OnInit {
transactionsWeightPerSecondOptions: any;
radioGroupForm: FormGroup;
inverted: boolean;
constructor(
@Inject(LOCALE_ID) private locale: string,
@@ -42,6 +44,7 @@ export class StatisticsComponent implements OnInit {
private apiService: ApiService,
private stateService: StateService,
private seoService: SeoService,
private storageService: StorageService,
) {
this.radioGroupForm = this.formBuilder.group({
dateSpan: '2h'
@@ -51,6 +54,7 @@ export class StatisticsComponent implements OnInit {
ngOnInit() {
this.seoService.setTitle('Graphs');
this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.inverted = this.storageService.getValue('inverted-graph') === 'true';
const isMobile = window.innerWidth <= 767.98;
let labelHops = isMobile ? 48 : 24;
@@ -157,4 +161,9 @@ export class StatisticsComponent implements OnInit {
series: [mempoolStats.map((stats) => stats.vbytes_per_second)],
};
}
invertGraph() {
this.storageService.setValue('inverted-graph', !this.inverted);
document.location.reload();
}
}

8
frontend/src/app/components/transaction/transaction.component.html
View File

@@ -162,9 +162,13 @@
<br>
<h2>Inputs & Outputs</h2>
<h2 class="float-left">Inputs & Outputs</h2>
<app-transactions-list [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>
<button type="button" class="btn btn-outline-info btn-sm float-right mr-1 mt-0 mt-md-2" (click)="txList.toggleDetails()">Details</button>
<div class="clearfix"></div>
<app-transactions-list #txList [transactions]="[tx]" [transactionPage]="true"></app-transactions-list>
<h2>Details</h2>
<div class="box">

219
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@@ -17,50 +17,90 @@
<div class="col">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody>
<tr *ngFor="let vin of (tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin); trackBy: trackByIndexFn">
<td class="arrow-td">
<ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
<i class="arrow grey"></i>
</ng-template>
<ng-template #hasPrevout>
<a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]">
<i class="arrow red"></i>
</a>
<ng-template #defaultPrevout>
<a [routerLink]="['/tx/' | relativeUrl, vin.txid]">
<ng-template ngFor let-vin [ngForOf]="tx['@vinLimit'] ? tx.vin.slice(0, 10) : tx.vin" [ngForTrackBy]="trackByIndexFn">
<tr>
<td class="arrow-td">
<ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
<i class="arrow grey"></i>
</ng-template>
<ng-template #hasPrevout>
<a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]">
<i class="arrow red"></i>
</a>
<ng-template #defaultPrevout>
<a [routerLink]="['/tx/' | relativeUrl, vin.txid]">
<i class="arrow red"></i>
</a>
</ng-template>
</ng-template>
</ng-template>
</td>
<td>
<div [ngSwitch]="true">
<ng-container *ngSwitchCase="vin.is_coinbase"><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii">Coinbase<ng-template [ngIf]="network !== 'liquid'"> (Newly Generated Coins)</ng-template></a><br><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></ng-container>
<ng-container *ngSwitchCase="vin.is_pegin">
Peg-in
</ng-container>
<ng-container *ngSwitchDefault>
<a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
<span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
<span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 35 }}</span>
</a>
<div>
<app-address-labels [vin]="vin"></app-address-labels>
</div>
</ng-container>
</div>
</td>
<td class="text-right nowrap">
<ng-template [ngIf]="vin.prevout && vin.prevout.asset && vin.prevout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
<div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset]">
<ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vin.prevout }"></ng-container>
</td>
<td>
<div [ngSwitch]="true">
<ng-container *ngSwitchCase="vin.is_coinbase"><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii">Coinbase<ng-template [ngIf]="network !== 'liquid'"> (Newly Generated Coins)</ng-template></a><br><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></ng-container>
<ng-container *ngSwitchCase="vin.is_pegin">
Peg-in
</ng-container>
<ng-container *ngSwitchDefault>
<a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
<span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
<span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 35 }}</span>
</a>
<div>
<app-address-labels [vin]="vin"></app-address-labels>
</div>
</ng-container>
</div>
</ng-template>
<ng-template #defaultOutput>
<app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
</ng-template>
</td>
</tr>
</td>
<td class="text-right nowrap">
<ng-template [ngIf]="vin.prevout && vin.prevout.asset && vin.prevout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
<div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset]">
<ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vin.prevout }"></ng-container>
</div>
</ng-template>
<ng-template #defaultOutput>
<app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
</ng-template>
</td>
</tr>
<tr *ngIf="displayDetails">
<td colspan="3">
<table class="table table-striped table-borderless details-table mb-3">
<tbody>
<ng-template [ngIf]="vin.scriptsig">
<tr>
<td>ScriptSig (ASM)</td>
<td [innerHTML]="vin.scriptsig_asm | asmStyler"></td>
</tr>
<tr>
<td>ScriptSig (HEX)</td>
<td>{{ vin.scriptsig }}</td>
</tr>
</ng-template>
<tr *ngIf="vin.witness">
<td>Witness</td>
<td>{{ vin.witness.join(' ') }}</td>
</tr>
<tr *ngIf="vin.inner_redeemscript_asm">
<td>P2SH redeem script</td>
<td [innerHTML]="vin.inner_redeemscript_asm | asmStyler"></td>
</tr>
<tr *ngIf="vin.inner_witnessscript_asm">
<td>P2WSH witness script</td>
<td [innerHTML]="vin.inner_witnessscript_asm | asmStyler"></td>
</tr>
<tr>
<td>nSequence</td>
<td>{{ formatHex(vin.sequence) }}</td>
</tr>
<tr *ngIf="vin.prevout">
<td>Previous output script</td>
<td [innerHTML]="vin.prevout.scriptpubkey_asm | asmStyler">{{ vin.prevout.scriptpubkey_type ? ('(' + vin.prevout.scriptpubkey_type + ')') : '' }}"</td>
</tr>
</tbody>
</table>
</td>
</tr>
</ng-template>
<tr *ngIf="tx.vin.length > 10 && tx['@vinLimit']">
<td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary mt-2" (click)="tx['@vinLimit'] = false;">Load all ({{ tx.vin.length - 10 }})</button>
@@ -73,44 +113,73 @@
<div class="col mobile-bottomcol">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;">
<tbody>
<tr *ngFor="let vout of (tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout); let vindex = index; trackBy: trackByIndexFn">
<td>
<a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
<span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
<span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 35 }}</span>
</a>
<ng-template #scriptpubkey_type>
<ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
Peg-out to <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
<span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
<span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
</a>
<ng-template ngFor let-vout let-vindex="index" [ngForOf]="tx['@voutLimit'] ? tx.vout.slice(0, 10) : tx.vout" [ngForTrackBy]="trackByIndexFn">
<tr>
<td>
<a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
<span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
<span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 35 }}</span>
</a>
<ng-template #scriptpubkey_type>
<ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
Peg-out to <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
<span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
<span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 35 }}</span>
</a>
</ng-template>
<ng-template #defaultscriptpubkey_type>
<ng-template [ngIf]="vout.scriptpubkey_type === 'op_return'" [ngIfElse]="otherPubkeyType">
<a placement="bottom" [ngbTooltip]="vout.scriptpubkey | hex2ascii">OP_RETURN</a>&nbsp;<span class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span>
</ng-template>
<ng-template #otherPubkeyType>{{ vout.scriptpubkey_type | scriptpubkeyType }}</ng-template>
</ng-template>
</ng-template>
<ng-template #defaultscriptpubkey_type>
<a placement="bottom" [ngbTooltip]="vout.scriptpubkey | hex2ascii">{{ vout.scriptpubkey_type | scriptpubkeyType }}</a>&nbsp;<span class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span>
</td>
<td class="text-right nowrap">
<ng-template [ngIf]="vout.asset && vout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
<div *ngIf="assetsMinimal && assetsMinimal[vout.asset]">
<ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vout }"></ng-container>
</div>
</ng-template>
</ng-template>
</td>
<td class="text-right nowrap">
<ng-template [ngIf]="vout.asset && vout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
<div *ngIf="assetsMinimal && assetsMinimal[vout.asset]">
<ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vout }"></ng-container>
</div>
</ng-template>
<ng-template #defaultOutput>
<app-amount [satoshis]="vout.value"></app-amount>
</ng-template>
</td>
<td class="pl-1 arrow-td">
<i *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="arrow grey"></i>
<ng-template #outspend>
<i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
<ng-template #spent>
<a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]"><i class="arrow red"></i></a>
<ng-template #defaultOutput>
<app-amount [satoshis]="vout.value"></app-amount>
</ng-template>
</ng-template>
</td>
</tr>
</td>
<td class="pl-1 arrow-td">
<i *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="arrow grey"></i>
<ng-template #outspend>
<i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
<ng-template #spent>
<a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]"><i class="arrow red"></i></a>
</ng-template>
</ng-template>
</td>
</tr>
<tr *ngIf="displayDetails">
<td colspan="3">
<table class="table table-striped table-borderless details-table mb-3">
<tbody>
<tr *ngIf="vout.scriptpubkey_type">
<td>Type</td>
<td>{{ vout.scriptpubkey_type.toUpperCase() }}</td>
</tr>
<tr>
<td>scriptPubKey (ASM)</td>
<td [innerHTML]="vout.scriptpubkey_asm | asmStyler"></td>
</tr>
<tr>
<td>scriptPubKey (HEX)</td>
<td>{{ vout.scriptpubkey }}</td>
</tr>
<tr *ngIf="vout.scriptpubkey_type == 'op_return'">
<td>OP_RETURN data</td>
<td>{{ vout.scriptpubkey_asm | hex2ascii }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</ng-template>
<tr *ngIf="tx.vout.length > 10 && tx['@voutLimit']">
<td colspan="3" class="text-center">
<button class="btn btn-sm btn-primary mt-2" (click)="tx['@voutLimit'] = false;">Load all ({{ tx.vout.length - 10 }})</button>

21
frontend/src/app/components/transactions-list/transactions-list.component.scss
View File

@@ -81,4 +81,23 @@
.scriptmessage.longer {
max-width: 280px !important;
}
}
.details-table td:first-child {
white-space: pre-wrap;
}
}
.details-table {
margin-top: 5px;
}
.details-table td {
padding: 0.75rem;
}
.details-table td:nth-child(2) {
word-break: break-all;
white-space: normal;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}

11
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@@ -16,6 +16,7 @@ import { map } from 'rxjs/operators';
export class TransactionsListComponent implements OnInit, OnChanges {
network = '';
nativeAssetId = environment.nativeAssetId;
displayDetails = false;
@Input() transactions: Transaction[];
@Input() showConfirmations = false;
@@ -95,4 +96,14 @@ export class TransactionsListComponent implements OnInit, OnChanges {
trackByIndexFn(index: number) {
return index;
}
formatHex(num: number): string {
const str = num.toString(16);
return '0x' + (str.length % 2 ? '0' : '') + str;
}
toggleDetails() {
this.displayDetails = !this.displayDetails;
this.ref.markForCheck();
}
}

9
frontend/src/app/services/storage.service.ts
View File

@@ -7,12 +7,17 @@ export class StorageService {
getValue(key: string): string {
try {
return localStorage.getItem(key);
} catch (e) { }
} catch (e) {
console.log(e);
return '';
}
}
setValue(key: string, value: any): void {
try {
localStorage.setItem(key, value);
} catch (e) { }
} catch (e) {
console.log(e);
}
}
}

8
frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.spec.ts Normal file
View File

@@ -0,0 +1,8 @@
import { AsmStylerPipe } from './asm-styler.pipe';
describe('OpcodesStylerPipe', () => {
it('create an instance', () => {
const pipe = new AsmStylerPipe();
expect(pipe).toBeTruthy();
});
});

316
frontend/src/app/shared/pipes/asm-styler/asm-styler.pipe.ts Normal file
View File

@@ -0,0 +1,316 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'asmStyler'
})
export class AsmStylerPipe implements PipeTransform {
transform(asm: string): string {
const instructions = asm.split('OP_');
let out = '';
for (const instruction of instructions) {
if (instruction === '') {
continue;
}
out += this.addStyling(instruction);
}
return out;
}
addStyling(instruction: string): string {
const opcode = instruction.split(' ')[0];
let style = '';
switch (opcode) {
case '0':
case 'FALSE':
case 'PUSHBYTES_1':
case 'PUSHBYTES_2':
case 'PUSHBYTES_3':
case 'PUSHBYTES_4':
case 'PUSHBYTES_5':
case 'PUSHBYTES_6':
case 'PUSHBYTES_7':
case 'PUSHBYTES_8':
case 'PUSHBYTES_9':
case 'PUSHBYTES_10':
case 'PUSHBYTES_11':
case 'PUSHBYTES_12':
case 'PUSHBYTES_13':
case 'PUSHBYTES_14':
case 'PUSHBYTES_15':
case 'PUSHBYTES_16':
case 'PUSHBYTES_17':
case 'PUSHBYTES_18':
case 'PUSHBYTES_19':
case 'PUSHBYTES_20':
case 'PUSHBYTES_21':
case 'PUSHBYTES_22':
case 'PUSHBYTES_23':
case 'PUSHBYTES_24':
case 'PUSHBYTES_25':
case 'PUSHBYTES_26':
case 'PUSHBYTES_27':
case 'PUSHBYTES_28':
case 'PUSHBYTES_29':
case 'PUSHBYTES_30':
case 'PUSHBYTES_31':
case 'PUSHBYTES_32':
case 'PUSHBYTES_33':
case 'PUSHBYTES_34':
case 'PUSHBYTES_35':
case 'PUSHBYTES_36':
case 'PUSHBYTES_37':
case 'PUSHBYTES_38':
case 'PUSHBYTES_39':
case 'PUSHBYTES_40':
case 'PUSHBYTES_41':
case 'PUSHBYTES_42':
case 'PUSHBYTES_43':
case 'PUSHBYTES_44':
case 'PUSHBYTES_45':
case 'PUSHBYTES_46':
case 'PUSHBYTES_47':
case 'PUSHBYTES_48':
case 'PUSHBYTES_49':
case 'PUSHBYTES_50':
case 'PUSHBYTES_51':
case 'PUSHBYTES_52':
case 'PUSHBYTES_53':
case 'PUSHBYTES_54':
case 'PUSHBYTES_55':
case 'PUSHBYTES_56':
case 'PUSHBYTES_57':
case 'PUSHBYTES_58':
case 'PUSHBYTES_59':
case 'PUSHBYTES_60':
case 'PUSHBYTES_61':
case 'PUSHBYTES_62':
case 'PUSHBYTES_63':
case 'PUSHBYTES_64':
case 'PUSHBYTES_65':
case 'PUSHBYTES_66':
case 'PUSHBYTES_67':
case 'PUSHBYTES_68':
case 'PUSHBYTES_69':
case 'PUSHBYTES_70':
case 'PUSHBYTES_71':
case 'PUSHBYTES_72':
case 'PUSHBYTES_73':
case 'PUSHBYTES_74':
case 'PUSHBYTES_75':
case 'PUSHDATA1':
case 'PUSHDATA2':
case 'PUSHDATA4':
case 'PUSHNUM_NEG1':
case 'TRUE':
case 'PUSHNUM_1':
case 'PUSHNUM_2':
case 'PUSHNUM_3':
case 'PUSHNUM_4':
case 'PUSHNUM_5':
case 'PUSHNUM_6':
case 'PUSHNUM_7':
case 'PUSHNUM_8':
case 'PUSHNUM_9':
case 'PUSHNUM_10':
case 'PUSHNUM_11':
case 'PUSHNUM_12':
case 'PUSHNUM_13':
case 'PUSHNUM_14':
case 'PUSHNUM_15':
case 'PUSHNUM_16':
style = 'constants';
break;
case 'NOP':
case 'IF':
case 'NOTIF':
case 'ELSE':
case 'ENDIF':
case 'VERIFY':
case 'RETURN':
case 'RETURN_186':
case 'RETURN_187':
case 'RETURN_188':
case 'RETURN_189':
case 'RETURN_190':
case 'RETURN_191':
case 'RETURN_192':
case 'RETURN_193':
case 'RETURN_194':
case 'RETURN_195':
case 'RETURN_196':
case 'RETURN_197':
case 'RETURN_198':
case 'RETURN_199':
case 'RETURN_200':
case 'RETURN_201':
case 'RETURN_202':
case 'RETURN_203':
case 'RETURN_204':
case 'RETURN_205':
case 'RETURN_206':
case 'RETURN_207':
case 'RETURN_208':
case 'RETURN_209':
case 'RETURN_210':
case 'RETURN_211':
case 'RETURN_212':
case 'RETURN_213':
case 'RETURN_214':
case 'RETURN_215':
case 'RETURN_216':
case 'RETURN_217':
case 'RETURN_218':
case 'RETURN_219':
case 'RETURN_220':
case 'RETURN_221':
case 'RETURN_222':
case 'RETURN_223':
case 'RETURN_224':
case 'RETURN_225':
case 'RETURN_226':
case 'RETURN_227':
case 'RETURN_228':
case 'RETURN_229':
case 'RETURN_230':
case 'RETURN_231':
case 'RETURN_232':
case 'RETURN_233':
case 'RETURN_234':
case 'RETURN_235':
case 'RETURN_236':
case 'RETURN_237':
case 'RETURN_238':
case 'RETURN_239':
case 'RETURN_240':
case 'RETURN_241':
case 'RETURN_242':
case 'RETURN_243':
case 'RETURN_244':
case 'RETURN_245':
case 'RETURN_246':
case 'RETURN_247':
case 'RETURN_248':
case 'RETURN_249':
case 'RETURN_250':
case 'RETURN_251':
case 'RETURN_252':
case 'RETURN_253':
case 'RETURN_254':
case 'RETURN_255':
style = 'control';
break;
case 'TOALTSTACK':
case 'FROMALTSTACK':
case 'IFDUP':
case 'DEPTH':
case 'DROP':
case 'DUP':
case 'NIP':
case 'OVER':
case 'PICK':
case 'ROLL':
case 'ROT':
case 'SWAP':
case 'TUCK':
case '2DROP':
case '2DUP':
case '3DUP':
case '2OVER':
case '2ROT':
case '2SWAP':
style = 'stack';
break;
case 'CAT':
case 'SUBSTR':
case 'LEFT':
case 'RIGHT':
case 'SIZE':
style = 'splice';
break;
case 'INVERT':
case 'AND':
case 'OR':
case 'XOR':
case 'EQUAL':
case 'EQUALVERIFY':
style = 'logic';
break;
case '1ADD':
case '1SUB':
case '2MUL':
case '2DIV':
case 'NEGATE':
case 'ABS':
case 'NOT':
case '0NOTEQUAL':
case 'ADD':
case 'SUB':
case 'MUL':
case 'DIV':
case 'MOD':
case 'LSHIFT':
case 'RSHIFT':
case 'BOOLAND':
case 'BOOLOR':
case 'NUMEQUAL':
case 'NUMEQUALVERIFY':
case 'NUMNOTEQUAL':
case 'LESSTHAN':
case 'GREATERTHAN':
case 'LESSTHANOREQUAL':
case 'MIN':
case 'MAX':
case 'WITHIN':
style = 'arithmetic';
break;
case 'RIPEMD160':
case 'SHA1':
case 'SHA256':
case 'HASH160':
case 'HASH256':
case 'CODESEPARATOR':
case 'CHECKSIG':
case 'CHECKSIGVERIFY':
case 'CHECKMULTISIG':
case 'CHCEKMULTISIGVERIFY':
style = 'crypto';
break;
case 'CHECKLOCKTIMEVERIFY':
case 'CHECKSEQUENCEVERIFY':
style = 'locktime';
break;
case 'RESERVED':
case 'VER':
case 'VERIF':
case 'VERNOTIF':
case 'RESERVED1':
case 'RESERVED2':
case 'NOP1':
case 'NOP4':
case 'NOP5':
case 'NOP6':
case 'NOP7':
case 'NOP8':
case 'NOP9':
case 'NOP10':
style = 'reserved';
break;
}
let args = instruction.substr(instruction.indexOf(' ') + 1);
if (args === opcode) {
args = '';
}
return `<span class='${style}'>OP_${opcode}</span> ${args}<br>`;
}
}

5
frontend/src/app/shared/pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe.ts
View File

@@ -9,9 +9,12 @@ export class ScriptpubkeyTypePipe implements PipeTransform {
switch (value) {
case 'fee':
return 'Transaction fee';
case 'p2pk':
return 'P2PK';
case 'op_return':
return 'OP_RETURN';
default:
return 'OP_RETURN';
return value.toUpperCase();
}
}

3
frontend/src/app/shared/shared.module.ts
View File

@@ -4,6 +4,7 @@ import { VbytesPipe } from './pipes/bytes-pipe/vbytes.pipe';
import { ShortenStringPipe } from './pipes/shorten-string-pipe/shorten-string.pipe';
import { CeilPipe } from './pipes/math-ceil/math-ceil.pipe';
import { Hex2asciiPipe } from './pipes/hex2ascii/hex2ascii.pipe';
import { AsmStylerPipe } from './pipes/asm-styler/asm-styler.pipe';
import { RelativeUrlPipe } from './pipes/relative-url/relative-url.pipe';
import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubkey-type.pipe';
import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
@@ -28,6 +29,7 @@ import { ReactiveFormsModule } from '@angular/forms';
ScriptpubkeyTypePipe,
RelativeUrlPipe,
Hex2asciiPipe,
AsmStylerPipe,
BytesPipe,
VbytesPipe,
WuBytesPipe,
@@ -63,6 +65,7 @@ import { ReactiveFormsModule } from '@angular/forms';
ScriptpubkeyTypePipe,
RelativeUrlPipe,
Hex2asciiPipe,
AsmStylerPipe,
BytesPipe,
VbytesPipe,
WuBytesPipe,