Decode inscription / rune data client-side

frontend/src/app/components/ord-data/ord-data.component.html

@@ -0,0 +1,75 @@
+@if (error) {
+  <div>
+    <i>Error fetching data (code {{ error.status }})</i>
+  </div>
+} @else {
+  @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.unwrap().toString() }"></ng-container>
+    </ng-container>
+  }
+  @if (totalSupply > -1) {
+    @if (premined > 0) {
+      <ng-container i18n="ord.premine-n-runes">
+        <span>Premine</span>
+        <span class="amount"> {{ premined >= 100000 ? (premined | amountShortener:undefined:undefined:true) : premined }} </span>
+        {{ etchedSymbol }}
+        <span class="name">{{ etchedName }}</span>
+        <span> ({{ premined / totalSupply * 100 | amountShortener:0}}% of total supply)</span>
+      </ng-container>
+      } @else {
+      <ng-container i18n="ord.etch-rune">
+        <span>Etching of</span>
+        {{ etchedSymbol }}
+        <span class="name">{{ etchedName }}</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 (runestone && !runestone?.etching && !runestone?.mint && !transferredRunes?.length && type === 'vout') {
+    <div>
+      <i>No content in this runestone</i>
+    </div>
+  } -->
+
+  @if (inscriptions?.length && type === 'vin') {
+    <div *ngFor="let contentType of inscriptionsData | keyvalue">
+      <div>
+        <span class="badge badge-ord mr-1">{{ contentType.value.count > 1 ? contentType.value.count + " " : "" }}{{ contentType.value?.tag || contentType.key }}</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 (!inscriptions?.length && type === 'vin') {
+    <div>
+      <i>Error decoding inscription data</i>
+    </div>
+  }
+}
+
+<ng-template #runeName let-id>
+  {{ runeInfo[id]?.etching.symbol.isSome() ? runeInfo[id]?.etching.symbol.unwrap() : '' }}
+  <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]?.name }}</span>
+  </a>
+</ng-template>