From 65f080d5268b7365a0a0f428ddc340fca6a19d8d Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Tue, 8 Oct 2024 11:24:17 +0900
Subject: [PATCH] FIx error handling logic in ord-data

---
 .../ord-data/ord-data.component.html          | 104 ++++++++----------
 .../components/ord-data/ord-data.component.ts |   2 -
 .../transactions-list.component.html          |   4 +-
 3 files changed, 50 insertions(+), 60 deletions(-)

diff --git a/frontend/src/app/components/ord-data/ord-data.component.html b/frontend/src/app/components/ord-data/ord-data.component.html
index 696e7ea17..97dbc0d9d 100644
--- a/frontend/src/app/components/ord-data/ord-data.component.html
+++ b/frontend/src/app/components/ord-data/ord-data.component.html
@@ -1,64 +1,56 @@
-@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.toString() }"></ng-container>
+@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 (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 (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>
-        <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') {
+@if (inscriptions?.length && type === 'vin') {
+  <div *ngFor="let contentType of inscriptionsData | keyvalue">
     <div>
-      <i>Error decoding inscription data</i>
+      <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 ((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>
diff --git a/frontend/src/app/components/ord-data/ord-data.component.ts b/frontend/src/app/components/ord-data/ord-data.component.ts
index 233b8d243..ccc77bce6 100644
--- a/frontend/src/app/components/ord-data/ord-data.component.ts
+++ b/frontend/src/app/components/ord-data/ord-data.component.ts
@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { HttpErrorResponse } from '@angular/common/http';
 import { Runestone, Etching } from '../../shared/ord/rune.utils';
 
 export interface Inscription {
@@ -20,7 +19,6 @@ export class OrdDataComponent implements OnChanges {
   @Input() inscriptions: Inscription[];
   @Input() runestone: Runestone;
   @Input() runeInfo: { [id: string]: { etching: Etching; txid: string } };
-  @Input() error: HttpErrorResponse;
   @Input() type: 'vin' | 'vout';
 
   toNumber = (value: bigint): number => Number(value);
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index 26187ecde..217eab7d7 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -103,7 +103,7 @@
               }">
                 <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>
+                  <app-ord-data [inscriptions]="showOrdData[tx.txid + '-vin-' + vindex]['inscriptions']" [type]="'vin'"></app-ord-data>
                 </td>
               </tr>
               <tr *ngIf="(showDetails$ | async) === true">
@@ -297,7 +297,7 @@
                 '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>
+                    <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">