Add listing of dependencies on About page

app/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "app",
-  "version": "0.0.0",
+  "name": "ariton",
+  "version": "0.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

app/src/app/app.service.ts

@@ -3,6 +3,7 @@ import { StorageService } from './storage.service';
 import { CryptoService } from './crypto.service';
 import { IdentityService } from './identity.service';
 import { Web5ConnectResult } from '@web5/api';
+import * as packageInfo from '../../package.json';
 
 export interface AppState {
   selectedAccount: string;
@@ -36,7 +37,17 @@ export class AppService {
 
   firstTime = signal<boolean>(false);
 
-  constructor() { }
+  package = packageInfo;
+
+  dependencies: any;
+
+  constructor() {
+    console.log(`Ariton v${this.package.version} initialized.`);
+    console.log(this.package);
+
+    this.dependencies = Object.entries(this.package.dependencies).map(([key, value]) => ({ name: key, version: value }));
+    console.log(this.dependencies);
+   }
 
   //getState() { 
   //  return this.storage.read('state');

app/src/app/settings/about/about.component.html

@@ -3,7 +3,7 @@ <h1>About Ariton</h1>
 
     <img class="about-logo" src="ariton-icon-dark.svg">
 
-    <p>Version: 0.0.1<br>
+    <p>Version: {{ appService.package.version }}<br>
       by Ariton Team</p>
 
     <p>
@@ -25,4 +25,14 @@ <h1>About Ariton</h1>
     </mat-card-content>
     </mat-card>
 
+    <h2>Packages</h2>
+
+    <p>We a proponents of openess and think it can help improve security 
+      and privacy, so here are the packages we use in this app:</p>
+
+      <div class="packages">
+      @for (package of appService.dependencies; track package) {
+          <span class="package">{{package.name}} ({{package.version}})</span>
+      }
+    </div>
 </div>

app/src/app/settings/about/about.component.scss

@@ -1,3 +1,7 @@
+h2 {
+    margin-top: 3em;
+}
+
 .about {
     display: flex;
     flex-direction: column;
@@ -6,4 +10,15 @@
 
 .about-logo {
     max-width: 128px;
+}
+
+.packages {
+    align-self: flex-start;
+}
+
+.package {
+    display: inline-block;
+    margin-right: 1em;
+    padding: 0.2em;
+    background-color: rgba($color: #000000, $alpha: 0.3);
 }

app/src/app/settings/about/about.component.ts

@@ -1,13 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
+import { AppService } from '../../app.service';
+import { MatListModule } from '@angular/material/list';
 
 @Component({
   selector: 'app-about',
   standalone: true,
-  imports: [MatCardModule],
+  imports: [MatCardModule, MatListModule],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'
 })
 export class AboutComponent {
-
+  appService = inject(AppService);
 }