Merge pull request #5569 from mempool/natsoni/ord

Add option to display runestones and inscriptions metadata
2024-10-08 13:21:43 +09:00
parent 19347614bd 1b2f1b38b4
commit 24ec31acd9
13 changed files with 1060 additions and 4 deletions
--- a/frontend/src/app/components/ord-data/ord-data.component.html
+++ b/frontend/src/app/components/ord-data/ord-data.component.html
@@ -0,0 +1,65 @@
+@if (minted) {
+  <ng-container i18n="ord.mint-n-runes">
+    <span>Mint</span>
+    <span class="amount"> {{ minted >= 100000 ? (minted | amountShortener:undefined:undefined:true) : minted }} </span>
+    <ng-container *ngTemplateOutlet="runeName; context: { $implicit: runestone.mint.toString() }"></ng-container>
+  </ng-container>
+}
+@if (runestone?.etching?.supply) {
+  @if (runestone?.etching.premine > 0) {
+    <ng-container i18n="ord.premine-n-runes">
+      <span>Premine</span>
+      <span class="amount"> {{ runestone.etching.premine >= 100000 ? (toNumber(runestone.etching.premine) | amountShortener:undefined:undefined:true) : runestone.etching.premine }} </span>
+      {{ runestone.etching.symbol }}
+      <span class="name">{{ runestone.etching.spacedName }}</span>
+      <span> ({{ toNumber(runestone.etching.premine) / toNumber(runestone.etching.supply) * 100 | amountShortener:0}}% of total supply)</span>
+    </ng-container>
+  } @else {
+    <ng-container i18n="ord.etch-rune">
+      <span>Etching of</span>
+      {{ runestone.etching.symbol }}
+      <span class="name">{{ runestone.etching.spacedName }}</span>
+    </ng-container>
+  }
+}
+@if (transferredRunes?.length && type === 'vout') {
+  <div *ngFor="let rune of transferredRunes">
+    <ng-container i18n="ord.transfer-rune">
+      <span>Transfer</span>
+      <ng-container *ngTemplateOutlet="runeName; context: { $implicit: rune.key }"></ng-container>
+    </ng-container>
+  </div>
+}
+
+@if (inscriptions?.length && type === 'vin') {
+  <div *ngFor="let contentType of inscriptionsData | keyvalue">
+    <div>
+      @if (contentType.key !== 'undefined') {
+        <span class="badge badge-ord mr-1">{{ contentType.value.count > 1 ? contentType.value.count + " " : "" }}{{ contentType.value?.tag || contentType.key }}</span>
+      } @else {
+        <span class="badge badge-ord mr-1" i18n="unknown">Unknown</span>
+      }
+      <span class="badge badge-ord" *ngIf="contentType.value.totalSize > 0">{{ contentType.value.totalSize | bytes:2:'B':undefined:true }}</span>
+      <a *ngIf="contentType.value.delegate" [routerLink]="['/tx' | relativeUrl, contentType.value.delegate]">
+        <span i18n="ord.source-inscription">Source inscription</span>
+      </a>
+    </div>
+    <pre *ngIf="contentType.value.json" class="name" style="white-space: pre-wrap; word-break: break-word;">{{ contentType.value.json | json }}</pre>
+    <pre *ngIf="contentType.value.text" class="name" style="white-space: pre-wrap; word-break: break-word;">{{ contentType.value.text }}</pre>
+    </div>
+}
+
+@if (!runestone && type === 'vout') {
+  <div class="skeleton-loader" style="width: 50%;"></div>
+}
+
+@if ((runestone && !minted && !runestone.etching?.supply && !transferredRunes?.length && type === 'vout') || (!inscriptions?.length && type === 'vin')) {
+  <i i18n="error.decoding-data">Error decoding data</i>
+}
+
+<ng-template #runeName let-id>
+  {{ runeInfo[id]?.etching.symbol || '' }}
+  <a [routerLink]="id !== '1:0' ? ['/tx' | relativeUrl, runeInfo[id]?.txid] : null" [class.rune-link]="id !== '1:0'" [class.disabled]="id === '1:0'">
+    <span class="name">{{ runeInfo[id]?.etching.spacedName }}</span>
+  </a>
+</ng-template>
--- a/frontend/src/app/components/ord-data/ord-data.component.scss
+++ b/frontend/src/app/components/ord-data/ord-data.component.scss
@@ -0,0 +1,35 @@
+.amount {
+	font-weight: bold;
+}
+
+a.rune-link {
+	color: inherit;
+	&:hover {
+		text-decoration: underline;
+		text-decoration-color: var(--transparent-fg);	
+	}
+}
+
+a.disabled {
+	text-decoration: none;
+}
+
+.name {
+	color: var(--transparent-fg);
+	font-weight: 700;
+}
+
+.badge-ord {
+	background-color: var(--grey);
+	position: relative;
+	top: -2px;
+	font-size: 81%;
+	&.primary {
+		background-color: var(--primary);
+	}
+}
+
+pre {
+	margin-top: 5px;
+	max-height: 200px;
+}
--- a/frontend/src/app/components/ord-data/ord-data.component.ts
+++ b/frontend/src/app/components/ord-data/ord-data.component.ts
@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Runestone, Etching } from '../../shared/ord/rune.utils';
+import { Inscription } from '../../shared/ord/inscription.utils';
+
+@Component({
+  selector: 'app-ord-data',
+  templateUrl: './ord-data.component.html',
+  styleUrls: ['./ord-data.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class OrdDataComponent implements OnChanges {
+  @Input() inscriptions: Inscription[];
+  @Input() runestone: Runestone;
+  @Input() runeInfo: { [id: string]: { etching: Etching; txid: string } };
+  @Input() type: 'vin' | 'vout';
+
+  toNumber = (value: bigint): number => Number(value);
+
+  // Inscriptions
+  inscriptionsData: { [key: string]: { count: number, totalSize: number, text?: string; json?: JSON; tag?: string; delegate?: string } };
+  // Rune mints
+  minted: number;
+  // Rune transfers
+  transferredRunes: { key: string; etching: Etching; txid: string }[] = [];
+
+  constructor() { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.runestone && this.runestone) {
+      if (this.runestone.mint && this.runeInfo[this.runestone.mint.toString()]) {
+        const mint = this.runestone.mint.toString();
+        const terms = this.runeInfo[mint].etching.terms;
+        const amount = terms?.amount;
+        const divisibility = this.runeInfo[mint].etching.divisibility;
+        if (amount) {
+          this.minted = this.getAmount(amount, divisibility);
+        }
+      }
+
+      this.runestone.edicts.forEach(edict => {
+        if (this.runeInfo[edict.id.toString()]) {
+          this.transferredRunes.push({ key: edict.id.toString(), ...this.runeInfo[edict.id.toString()] });
+        }
+      });
+    }
+
+    if (changes.inscriptions && this.inscriptions) {
+
+      if (this.inscriptions?.length) {
+        this.inscriptionsData = {};
+        this.inscriptions.forEach((inscription) => {
+          // General: count, total size, delegate
+          const key = inscription.content_type_str || 'undefined';
+          if (!this.inscriptionsData[key]) {
+            this.inscriptionsData[key] = { count: 0, totalSize: 0 };
+          }
+          this.inscriptionsData[key].count++;
+          this.inscriptionsData[key].totalSize += inscription.body_length;
+          if (inscription.delegate_txid && !this.inscriptionsData[key].delegate) {
+            this.inscriptionsData[key].delegate = inscription.delegate_txid;
+          }
+
+          // Text / JSON data
+          if ((key.includes('text') || key.includes('json')) && !inscription.is_cropped && !this.inscriptionsData[key].text && !this.inscriptionsData[key].json) {
+            const decoder = new TextDecoder('utf-8');
+            const text = decoder.decode(inscription.body);
+            try {
+              this.inscriptionsData[key].json = JSON.parse(text);
+              if (this.inscriptionsData[key].json['p']) {
+                this.inscriptionsData[key].tag = this.inscriptionsData[key].json['p'].toUpperCase();
+              }
+            } catch (e) {
+              this.inscriptionsData[key].text = text;
+            }
+          }
+        });
+      }
+    }
+  }
+
+  getAmount(amount: bigint, divisibility: number): number {
+    const divisor = BigInt(10) ** BigInt(divisibility);
+    const result = amount / divisor;
+
+    return result <= BigInt(Number.MAX_SAFE_INTEGER) ? Number(result) : Number.MAX_SAFE_INTEGER;
+  }
+}
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -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'"></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'"></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">
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -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);
+	}
+}
--- a/frontend/src/app/components/transactions-list/transactions-list.component.ts
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts
@@ -6,11 +6,14 @@ import { Outspend, Transaction, Vin, Vout } from '../../interfaces/electrs.inter
 import { ElectrsApiService } from '../../services/electrs-api.service';
 import { environment } from '../../../environments/environment';
 import { AssetsService } from '../../services/assets.service';
-import { filter, map, tap, switchMap, shareReplay, catchError } from 'rxjs/operators';
+import { filter, map, tap, switchMap, catchError } from 'rxjs/operators';
 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 '../../shared/ord/inscription.utils';
+import { Etching, Runestone } from '../../shared/ord/rune.utils';

@Component({
  selector: 'app-transactions-list',
@@ -50,12 +53,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 +244,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 +395,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();