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

Decode inscription / rune data client-side

Browse Source
This commit is contained in:
natsoni
2024-10-07 20:03:36 +09:00
parent 4143a5f593
commit 8b6db768cd
11 changed files with 473 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,7 +81,8 @@
</ng-container>
</div>
</td>
<td class="text-right nowrap amount" [class]="{large: vin?.prevout?.value > 1000000000}">
<td class="text-right nowrap amount" [class]="{large: vin?.prevout?.value > 1000000000 || vin.isInscription}">
<button *ngIf="vin.isInscription" (click)="toggleOrdData(tx.txid, 'vin', vindex)" type="button" class="btn btn-sm badge badge-ord primary" style="margin-right: 10px;">Inscription</button>
<ng-template [ngIf]="vin.prevout && vin.prevout.asset && vin.prevout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
<div *ngIf="assetsMinimal && assetsMinimal[vin.prevout.asset] else assetVinNotFound">
<ng-container *ngTemplateOutlet="assetBox; context:{ $implicit: vin.prevout }"></ng-container>
@@ -96,6 +97,15 @@
</ng-template>
</td>
</tr>
<tr *ngIf="showOrdData[tx.txid + '-vin-' + vindex]?.show" [ngClass]="{
'assetBox': (assetsMinimal && vin.prevout && assetsMinimal[vin.prevout.asset] && !vin.is_coinbase && vin.prevout.scriptpubkey_address && tx._unblinded) || inputIndex === vindex,
'highlight': this.address !== '' && (vin.prevout?.scriptpubkey_address === this.address || (vin.prevout?.scriptpubkey_type === 'p2pk' && vin.prevout?.scriptpubkey.slice(2, -2) === this.address))
}">
<td></td>
<td colspan="2">
<app-ord-data [inscriptions]="showOrdData[tx.txid + '-vin-' + vindex]['inscriptions']" [type]="'vin'" [error]="showOrdData[tx.txid + '-vin-' + vindex]['error']"></app-ord-data>
</td>
</tr>
<tr *ngIf="(showDetails$ | async) === true">
<td colspan="3" class="details-container" >
<table class="table table-striped table-fixed table-borderless details-table mb-3">
@@ -236,7 +246,12 @@
</ng-template>
<ng-template #defaultscriptpubkey_type>
<ng-template [ngIf]="vout.scriptpubkey_type === 'op_return'" [ngIfElse]="otherPubkeyType">
OP_RETURN&nbsp;<a placement="bottom" [ngbTooltip]="vout.scriptpubkey_asm | hex2ascii"><span *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span></a>
OP_RETURN&nbsp;
@if (vout.isRunestone) {
<button (click)="toggleOrdData(tx.txid, 'vout', vindex)" type="button" class="btn btn-sm badge badge-ord">Runestone</button>
} @else {
<a placement="bottom" [ngbTooltip]="vout.scriptpubkey_asm | hex2ascii"><span *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span></a>
}
</ng-template>
<ng-template #otherPubkeyType>{{ vout.scriptpubkey_type | scriptpubkeyType }}</ng-template>
</ng-template>
@@ -276,6 +291,15 @@
</ng-template>
</td>
</tr>
<tr *ngIf="showOrdData[tx.txid + '-vout-' + vindex]?.show" [ngClass]="{
'assetBox': assetsMinimal && assetsMinimal[vout.asset] && vout.scriptpubkey_address && tx.vin && !tx.vin[0].is_coinbase && tx._unblinded || outputIndex === vindex,
'highlight': this.address !== '' && (vout.scriptpubkey_address === this.address || (vout.scriptpubkey_type === 'p2pk' && vout.scriptpubkey.slice(2, -2) === this.address))
}">
<td colspan="3">
<app-ord-data [runestone]="showOrdData[tx.txid + '-vout-' + vindex]['runestone']" [runeInfo]="showOrdData[tx.txid + '-vout-' + vindex]['runeInfo']" [type]="'vout'" [error]="showOrdData[tx.txid + '-vout-' + vindex]['error']"></app-ord-data>
</td>
</tr>
<tr *ngIf="(showDetails$ | async) === true">
<td colspan="3" class=" details-container" >
<table class="table table-striped table-borderless details-table mb-3">

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

@@ -175,4 +175,15 @@ h2 {
.witness-item {
overflow: hidden;
}
}
}
.badge-ord {
background-color: var(--grey);
position: relative;
top: -2px;
font-size: 81%;
border: 0;
&.primary {
background-color: var(--primary);
}
}

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

@@ -11,6 +11,10 @@ import { BlockExtended } from '../../interfaces/node-api.interface';
import { ApiService } from '../../services/api.service';
import { PriceService } from '../../services/price.service';
import { StorageService } from '../../services/storage.service';
import { OrdApiService } from '../../services/ord-api.service';
import { Inscription } from '../ord-data/ord-data.component';
import { Runestone } from '../../shared/ord/rune/runestone';
import { Etching } from '../../shared/ord/rune/etching';
@Component({
selector: 'app-transactions-list',
@@ -50,12 +54,14 @@ export class TransactionsListComponent implements OnInit, OnChanges {
outputRowLimit: number = 12;
showFullScript: { [vinIndex: number]: boolean } = {};
showFullWitness: { [vinIndex: number]: { [witnessIndex: number]: boolean } } = {};
showOrdData: { [key: string]: { show: boolean; inscriptions?: Inscription[]; runestone?: Runestone, runeInfo?: { [id: string]: { etching: Etching; txid: string; } }; } } = {};
constructor(
public stateService: StateService,
private cacheService: CacheService,
private electrsApiService: ElectrsApiService,
private apiService: ApiService,
private ordApiService: OrdApiService,
private assetsService: AssetsService,
private ref: ChangeDetectorRef,
private priceService: PriceService,
@@ -239,6 +245,24 @@ export class TransactionsListComponent implements OnInit, OnChanges {
tap((price) => tx['price'] = price),
).subscribe();
}
// Check for ord data fingerprints in inputs and outputs
if (this.stateService.network !== 'liquid' && this.stateService.network !== 'liquidtestnet') {
for (let i = 0; i < tx.vin.length; i++) {
if (tx.vin[i].prevout?.scriptpubkey_type === 'v1_p2tr' && tx.vin[i].witness?.length) {
const hasAnnex = tx.vin[i].witness?.[tx.vin[i].witness.length - 1].startsWith('50');
if (tx.vin[i].witness.length > (hasAnnex ? 2 : 1) && tx.vin[i].witness[tx.vin[i].witness.length - (hasAnnex ? 3 : 2)].includes('0063036f7264')) {
tx.vin[i].isInscription = true;
}
}
}
for (let i = 0; i < tx.vout.length; i++) {
if (tx.vout[i]?.scriptpubkey?.startsWith('6a5d')) {
tx.vout[i].isRunestone = true;
break;
}
}
}
});
if (this.blockTime && this.transactions?.length && this.currency) {
@@ -372,6 +396,40 @@ export class TransactionsListComponent implements OnInit, OnChanges {
this.showFullWitness[vinIndex][witnessIndex] = !this.showFullWitness[vinIndex][witnessIndex];
}
toggleOrdData(txid: string, type: 'vin' | 'vout', index: number) {
const tx = this.transactions.find((tx) => tx.txid === txid);
if (!tx) {
return;
}
const key = tx.txid + '-' + type + '-' + index;
this.showOrdData[key] = this.showOrdData[key] || { show: false };
if (type === 'vin') {
if (!this.showOrdData[key].inscriptions) {
const hasAnnex = tx.vin[index].witness?.[tx.vin[index].witness.length - 1].startsWith('50');
this.showOrdData[key].inscriptions = this.ordApiService.decodeInscriptions(tx.vin[index].witness[tx.vin[index].witness.length - (hasAnnex ? 3 : 2)]);
}
this.showOrdData[key].show = !this.showOrdData[key].show;
} else if (type === 'vout') {
if (!this.showOrdData[key].runestone) {
this.ordApiService.decodeRunestone$(tx).pipe(
tap((runestone) => {
if (runestone) {
Object.assign(this.showOrdData[key], runestone);
this.ref.markForCheck();
}
}),
).subscribe();
}
this.showOrdData[key].show = !this.showOrdData[key].show;
}
}
ngOnDestroy(): void {
this.outspendsSubscription.unsubscribe();
this.currencyChangeSubscription?.unsubscribe();