New agents added, data from existing agents transformed to match current schema

viewer/angular.json

@@ -92,5 +92,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

viewer/e2e/.gitignore

@@ -0,0 +1,2 @@
+# Compiled e2e tests output
+build/

viewer/e2e/tests/app.test.ts

@@ -0,0 +1,16 @@
+
+import * as assert from 'assert';
+import {describe, it} from 'node:test';
+
+import {setupBrowserHooks, getBrowserState} from './utils';
+
+describe('App test', function () {
+  setupBrowserHooks();
+  it('is running', async function () {
+    const {page} = getBrowserState();
+    const element = await page.locator('::-p-text(viewer)').wait();
+
+    assert.ok(element);
+
+  });
+});

viewer/e2e/tests/utils.ts

@@ -0,0 +1,48 @@
+
+import {before, beforeEach, after, afterEach} from 'node:test';
+
+import * as puppeteer from 'puppeteer';
+
+const baseUrl = process.env['baseUrl'] ?? 'http://localhost:4200/';
+let browser: puppeteer.Browser;
+let page: puppeteer.Page;
+
+export function setupBrowserHooks(path = ''): void {
+
+  before(async () => {
+    browser = await puppeteer.launch();
+  });
+
+
+  beforeEach(async () => {
+    page = await browser.newPage();
+    await page.goto(`${baseUrl}${path}`);
+  });
+
+  afterEach(async () => {
+    await page?.close();
+  });
+
+
+  after(async () => {
+    await browser?.close();
+  });
+
+}
+
+export function getBrowserState(): {
+  browser: puppeteer.Browser;
+  page: puppeteer.Page;
+  baseUrl: string;
+} {
+  if (!browser) {
+    throw new Error(
+      'No browser state found! Ensure `setupBrowserHooks()` is called.'
+    );
+  }
+  return {
+    browser,
+    page,
+    baseUrl,
+  };
+}

viewer/e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "rootDir": "tests/",
+    "outDir": "build/",
+    "types": ["node"]
+  },
+  "include": ["tests/**/*.ts"]
+}

viewer/scripts/merge-wallets.mjs

@@ -1,6 +1,20 @@
 import { readdirSync, readFileSync, writeFileSync } from 'fs';
 
+// url for the folder containing the wallet files in the GitHub repo
+const commitHistoryBase = 'https://github.com/openwallet-foundation/digital-wallet-and-agent-overviews-sig/commits/main/wallets/'
+
 // function to merge all the individual wallet files into a single file
 const files = readdirSync('../wallets');
-const wallets = files.map(file => JSON.parse(readFileSync(`../wallets/${file}`)));
+// const wallets = files.map(file => JSON.parse(readFileSync(`../wallets/${file}`)));
+const wallets = []
+for (const file of files) {
+  try {
+    const json = JSON.parse(readFileSync(`../wallets/${file}`))
+    json.commitHistory = commitHistoryBase + file
+    wallets.push(json)
+  }
+  catch(e) {
+    console.warn(`Error parsing ${file}: ${e}`)
+  }
+}
 writeFileSync('src/assets/wallets.json', JSON.stringify(wallets, null, 2));

viewer/src/app/info/info.component.html

@@ -8,6 +8,15 @@ <h1 mat-dialog-title>Info</h1>
     The goal is to create a set of overviews that can be used to understand the
     digital wallet and agent landscape.
   </p>
+  <p>
+    With filters, you can use the overview to find for example
+    <a href="./#%7B%22credentialProfiles%22:%5B%22EBSI%22%5D%7D">
+      agents claiming EBSI compliance</a>,
+    <a href="./#%7B%22capability%22:%5B%22issuer%22%5D%2C%22issuanceProtocols%22:%5B%22OpenID4VCI%22%5D%7D">
+      issuer agents supporting <code>OID4VCI</code></a> or
+    <a href="./#%7B%22capability%22:%5B%22holder%22%5D%2C%22type%22:%5B%22edge%22%5D%2C%22credentialFormats%22:%5B%22LDP-VC%22%5D%7D">
+      mobile wallets supporting the <code>LDP-VC</code> credential format</a>.
+  </p>
   <p>
     If you want to contact the authors or join the upcoming meetings click
     <a

viewer/src/app/types.ts

@@ -50,6 +50,8 @@ export interface Wallet {
   statusManagements?: string[];
   // which trust management from the trust management comparison SIG are supported
   trustManagements?: string[];
+  // link to Github to see the commit history of the file (generated by scripts/merge-wallets.mjs)
+  commitHistory?: string
 }
 export interface Definition {
   description: string;

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

@@ -202,8 +202,8 @@
   </section>
 </div>
 <mat-paginator
-  [pageSizeOptions]="[10, 20, 50]"
-  [pageSize]="50"
+  [pageSizeOptions]="[10, 20, 50, 100]"
+  [pageSize]="100"
   showFirstLastButtons
   aria-label="Select page of periodic elements"
 >

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

@@ -1,5 +1,6 @@
 .logo {
-  height: 40px;
+  max-height: 40px;
+  max-width: 120px;
 }
 
 .link-list {
@@ -17,9 +18,18 @@
 }
 
 .mat-mdc-cell {
+  border-right: 1px solid;
+  border-right-color: var(--mat-table-row-item-outline-color);
   font-size: 14px;
   min-height: 48px;
   text-align: center;
-  border-right: 1px solid;
-  border-right-color: var(--mat-table-row-item-outline-color);
 }
+
+.mat-mdc-cell.cdk-column-name {
+  text-align: left;
+}
+
+.mat-mdc-row:hover .mat-mdc-cell {
+  background-color: whitesmoke;
+}
+

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

@@ -18,6 +18,15 @@ <h1>{{ wallet.name }}</h1>
           >Contact provider</a
         >
       </div>
+      <div fxLayout="row" fxLayoutGap="16px">
+        <p><a
+          *ngIf="wallet.urlWebsite"
+          class="website"
+          target="_blank"
+          [href]="wallet.urlWebsite"
+          >{{ wallet.urlWebsite }}</a
+        ></p>
+      </div>
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
         <a
           *ngIf="wallet.urlGooglePlayStore"
@@ -49,7 +58,23 @@ <h1>{{ wallet.name }}</h1>
   <mat-divider></mat-divider>
   <div fxLayout="row" fxLayoutAlign="space-between start">
     <mat-list>
-      <mat-list-item>
+      <mat-list-item [matTooltip]="walletsService.getTooltip('type')">
+        <div matListItemTitle><b>Type</b></div>
+        <span matListItemLine>{{ wallet.type }}</span>
+      </mat-list-item>
+      <mat-list-item [matTooltip]="walletsService.getTooltip('capability')">
+        <div matListItemTitle><b>Capabilities</b></div>
+        <span matListItemLine>{{
+          wallet.capability?.join(', ')
+        }}</span>
+      </mat-list-item>
+      <mat-list-item [matTooltip]="walletsService.getTooltip('portability')">
+        <div matListItemTitle><b>Portability</b></div>
+        <span matListItemLine>{{ wallet.portability ?? 'unknown' }}</span>
+      </mat-list-item>
+    </mat-list>
+    <mat-list>
+      <mat-list-item [matTooltip]="walletsService.getTooltip('openSource')">
         <div matListItemTitle><b>Open Source</b></div>
         <span matListItemLine *ngIf="!wallet.downloadSource"
           >{{ wallet.openSource }}
@@ -58,41 +83,13 @@ <h1>{{ wallet.name }}</h1>
           matListItemLine
           *ngIf="wallet.downloadSource"
           [href]="wallet.downloadSource"
-          >{{ wallet.openSource }}</a
+          >{{ wallet.downloadSource }}</a
         >
       </mat-list-item>
       <mat-list-item>
-        <div matListItemTitle><b>License</b></div>
+        <div matListItemTitle [matTooltip]="walletsService.getTooltip('license')"><b>License</b></div>
         <span matListItemLine>{{ wallet.license ?? 'unknown' }}</span>
       </mat-list-item>
-      <mat-list-item>
-        <div matListItemTitle><b>Type</b></div>
-        <span matListItemLine>{{ wallet.type }}</span>
-      </mat-list-item>
-      <mat-list-item>
-        <div matListItemTitle><b>Portability</b></div>
-        <span matListItemLine>{{ wallet.portability ?? 'unknown' }}</span>
-      </mat-list-item>
-    </mat-list>
-    <mat-list>
-      <mat-list-item>
-        <div matListItemTitle><b>Holder capability</b></div>
-        <span matListItemLine>{{
-          wallet.capability?.includes('holder') ?? 'unknown'
-        }}</span>
-      </mat-list-item>
-      <mat-list-item>
-        <div matListItemTitle><b>Issuer capability</b></div>
-        <span matListItemLine>{{
-          wallet.capability?.includes('issuer') ?? 'unknown'
-        }}</span>
-      </mat-list-item>
-      <mat-list-item>
-        <div matListItemTitle><b>Verifier capability</b></div>
-        <span matListItemLine>{{
-          wallet.capability?.includes('verifier') ?? 'unknown'
-        }}</span>
-      </mat-list-item>
     </mat-list>
   </div>
   @for (resource of walletsService.resources; track resource) {
@@ -111,4 +108,7 @@ <h2>{{ resource.name }}</h2>
     </mat-list>
   </div>
   }
+  <div id="history">
+    <p>Commit history: <a href="{{wallet.commitHistory}}">{{wallet.commitHistory}}</a></p>
+  </div>
 </div>

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

@@ -11,6 +11,10 @@ a {
   text-decoration: none;
 }
 
+.website {
+  font-size: small;
+}
+
 .company {
   font-weight: bold;
 }
@@ -20,9 +24,23 @@ a:hover {
 }
 
 .logo {
-  max-height: 200px;
-  max-width: 50%;
+  background-color: transparent;
   border-radius: 20px;
   // make a shadow for the box
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  max-height: 200px;
+  max-width: 50%;
+  padding: 10px;
+}
+
+h2 {
+  margin: 1em 0 0 0;
+}
+
+.mdc-list-item.mdc-list-item--with-one-line {
+  height: auto !important;
+}
+
+#history {
+  font-size: small;
 }

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

@@ -9,6 +9,7 @@ import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-wallets-show',
@@ -22,6 +23,7 @@ import { MatListModule } from '@angular/material/list';
     FlexLayoutModule,
     MatIconModule,
     MatListModule,
+    MatTooltipModule,
   ],
   providers: [WalletsService],
   templateUrl: './wallets-show.component.html',