fix: print a warning to all wallet elements

Signed-off-by: Mirko Mollik <mirkomollik@gmail.com>

viewer/src/app/app.config.ts

@@ -1,6 +1,5 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter, withRouterConfig } from '@angular/router';
-
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideHttpClient } from '@angular/common/http';

viewer/src/app/wallets/wallets-list/wallets-list.component.html

@@ -42,6 +42,9 @@
               onerror="this.src='assets/default-image.png';"
             />
             <a [routerLink]="['/wallets', element.id]">{{ element.name }}</a>
+            @if(isInvalid(element)) {
+            <mat-icon matTooltip="entry is invalid">warning</mat-icon>
+            }
           </div>
         </td>
       </ng-container>

viewer/src/app/wallets/wallets-list/wallets-list.component.ts

@@ -208,7 +208,8 @@ export class WalletsListComponent implements OnInit, AfterViewInit {
    * Load the filtered wallets
    */
   private async loadWallets() {
-    let values = this.wallets ?? (await this.walletsService.loadWallets());
+    await this.walletsService.getErrors();
+    let values = this.wallets ?? this.walletsService.loadWallets();
     if (this.filter) {
       if (this.filter.type) {
         values = values.filter((wallet) => wallet.type === this.filter!.type);
@@ -270,4 +271,8 @@ export class WalletsListComponent implements OnInit, AfterViewInit {
     });
     return filtered;
   }
+
+  isInvalid(wallet: Wallet) {
+    return this.walletsService.invalidEntry(wallet.id) !== '';
+  }
 }

viewer/src/app/wallets/wallets-show/wallets-show.component.ts

@@ -54,7 +54,8 @@ export class WalletsShowComponent implements OnInit, OnDestroy {
     private snachBar: MatSnackBar
   ) {}
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
+    await this.walletsService.getErrors();
     this.routerSubscription = this.router.events
       .pipe(filter((event) => event instanceof NavigationEnd))
       .subscribe(() => {
@@ -77,7 +78,7 @@ export class WalletsShowComponent implements OnInit, OnDestroy {
         .navigate(['/'])
         .then(() => this.snachBar.open(`${id} not found`));
     }
-    this.invalid = await this.walletsService.validEntry(id);
+    this.invalid = await this.walletsService.invalidEntry(id);
   }
 
   getSupport(value?: string) {

viewer/src/app/wallets/wallets.service.ts

@@ -7,6 +7,11 @@ import { walletData } from './wallets-data';
 import { CaseStudiesService } from '../case-studies/case-studies.service';
 import { DependenciesService } from '../dependencies/dependencies.service';
 
+type ErrorFile = Record<
+  'wallets' | 'case-studies' | 'dependencies',
+  Record<string, Record<string, string>>
+>;
+
 @Injectable({
   providedIn: 'root',
 })
@@ -54,12 +59,19 @@ export class WalletsService {
     },
   ];
 
+  errors!: Record<string, Record<string, string>>;
+
   constructor(
     private httpClient: HttpClient,
     private caseStudiesService: CaseStudiesService,
     private depenciesService: DependenciesService
   ) {}
 
+  async init() {
+    this.errors = await this.getErrors();
+    console.log(this.errors);
+  }
+
   /**
    * Loads the wallets from the assets folder
    * @returns
@@ -164,17 +176,25 @@ export class WalletsService {
    * It will check the error branch of the repo where the error messages are located.
    * @param id name of the wallet
    */
-  validEntry(id: string) {
-    return firstValueFrom(
-      this.httpClient.get<Record<string, string>>(
-        `https://raw.githubusercontent.com/openwallet-foundation/digital-wallet-and-agent-overviews-sig/refs/heads/errors/wallets/${id}.json`
-      )
-    )
-      .then((res) =>
-        Object.keys(res)
-          .map((key) => `${key}: ${res[key]}`)
-          .join(', ')
-      )
-      .catch(() => undefined);
+  invalidEntry(id: string) {
+    if (!this.errors[id]) return '';
+    return Object.keys(this.errors[id])
+      .map((key) => `${key}: ${this.errors[id][key]}`)
+      .join(', ');
+  }
+
+  /**
+   * Get the errors from the error file
+   * @returns
+   */
+  getErrors(): Promise<Record<string, Record<string, string>>> {
+    //TODO: right now this has to be called with every call to get the errors. This should be fixed.
+    return this.errors
+      ? Promise.resolve(this.errors)
+      : firstValueFrom(
+          this.httpClient.get<ErrorFile>(
+            `https://raw.githubusercontent.com/openwallet-foundation/digital-wallet-and-agent-overviews-sig/refs/heads/errors/errors.json`
+          )
+        ).then((res) => (this.errors = res.wallets));
   }
 }