Modify content to match new schema (#57)

* updated content to comply with new schema Signed-off-by: Samuel Rinnetmäki <samuel@iki.fi> * added new agents Signed-off-by: Samuel Rinnetmäki <samuel@iki.fi> * addded examples Signed-off-by: Samuel Rinnetmäki <samuel@iki.fi> * slightly modified styles, added default paging of 100 items Signed-off-by: Samuel Rinnetmäki <samuel@iki.fi> * added tooltips, modified layout and styling, added commit history Signed-off-by: Samuel Rinnetmäki <samuel@iki.fi> * added commit history Signed-off-by: Samuel Rinnetmäki <samuel@iki.fi> * temp file to get Jekyll going... Signed-off-by: Samuel Rinnetmäki <samuel@iki.fi> * No longer needed Signed-off-by: Samuel Rinnetmäki <samuel@iki.fi> --------- Signed-off-by: Samuel Rinnetmäki <samuel@iki.fi>
openwallet-foundation · Apr 17, 2024 · 84fe2af · 84fe2af
1 parent 51a4dad
commit 84fe2af
Show file tree

Hide file tree

Showing 71 changed files with 722 additions and 724 deletions.
diff --git a/viewer/scripts/merge-wallets.mjs b/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));
diff --git a/viewer/src/app/info/info.component.html b/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

diff --git a/viewer/src/app/types.ts b/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;

diff --git a/viewer/src/app/wallets-list/wallets-list.component.html b/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"
 >

diff --git a/viewer/src/app/wallets-list/wallets-list.component.scss b/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;
+}
+
diff --git a/viewer/src/app/wallets-show/wallets-show.component.html b/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>
diff --git a/viewer/src/app/wallets-show/wallets-show.component.scss b/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;
 }
diff --git a/viewer/src/app/wallets-show/wallets-show.component.ts b/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',