Add Nostr miniApp

app/package.json

@@ -40,12 +40,14 @@
     "base32.js": "^0.1.0",
     "cropperjs": "^1.6.2",
     "crypto-browserify": "^3.12.1",
+    "nostr-tools": "^2.10.1",
     "process": "^0.11.10",
     "qrcode": "^1.5.4",
     "rxjs": "~7.8.1",
     "stream": "^0.0.3",
     "stream-browserify": "^3.0.0",
-    "tslib": "^2.7.0"
+    "tslib": "^2.7.0",
+    "uuid": "^11.0.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.2.8",

app/src/app/app.routes.ts

@@ -422,4 +422,10 @@ export const routes: Routes = [
     title: 'Management',
     data: { hide: true, icon: 'manage_accounts' },
   },
+  {
+    path: 'app/nostr',
+    loadComponent: () => import('./apps/app/nostr/nostr.component').then((c) => c.NostrComponent),
+    title: 'Nostr client',
+    data: { hide: false, icon: 'favorite' },
+  },
 ];

app/src/app/apps/app/nostr/nostr.component.html

@@ -0,0 +1,27 @@
+<div class="events-container">
+  <h2>Real-Time Nostr Events</h2>
+
+  @if (loading) {
+  <div class="loading-indicator">
+    <mat-spinner></mat-spinner>
+  </div>
+  } @else { @if (events.length > 0) { @for (item of events; track item) {
+  <mat-card class="event-card mat-elevation-z4" style="margin-bottom: 16px">
+    <mat-card-header>
+      <img mat-card-avatar *ngIf="metadata!.picture" [src]=" metadata!.picture || '/avatar-placeholder.png'" alt="Profile Picture" />
+      <mat-card-title>{{ metadata!.name || 'Anonymous' }}</mat-card-title>
+      <mat-card-subtitle>{{ item.created_at * 1000 | ago }}</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <p>{{ item.content }}</p>
+    </mat-card-content>
+
+    <mat-card-actions>
+      <button mat-button color="primary">Details</button>
+    </mat-card-actions>
+  </mat-card>
+  } } @else {
+  <p>No events available.</p>
+  } }
+</div>

app/src/app/apps/app/nostr/nostr.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NostrComponent } from './nostr.component';
+
+describe('NostrComponent', () => {
+  let component: NostrComponent;
+  let fixture: ComponentFixture<NostrComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NostrComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NostrComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app/src/app/apps/app/nostr/nostr.component.ts

@@ -0,0 +1,95 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { NostrEvent, Filter } from 'nostr-tools';
+import { EventService } from '../../../services/nostr/event.service';
+import { Subscription } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { AgoPipe } from '../../../shared/pipes/ago.pipe';
+
+@Component({
+  selector: 'app-nostr',
+  templateUrl: './nostr.component.html',
+  styleUrls: ['./nostr.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatCardModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTooltipModule,
+    MatProgressSpinnerModule,
+    RouterModule,
+    AgoPipe
+  ]
+})
+export class NostrComponent implements OnInit, OnDestroy {
+  public events: NostrEvent[] = [];
+  public metadata: { name: string; picture: string } | null = null;
+  public loading = true;
+
+  private readonly pubKey = '5f432a9f39b58ff132fc0a4c8af10d42efd917d8076f68bb7f2f91ed7d4f6a41';
+  private eventSubscriptionId: string | null = null;
+  private eventsSubscription: Subscription | null = null;
+
+  constructor(private readonly eventService: EventService) { }
+
+  ngOnInit(): void {
+    this.subscribeToEvents();
+    this.fetchMetadata(this.pubKey);
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeFromEvents();
+  }
+
+  private subscribeToEvents(): void {
+    const filter: Filter = {
+      kinds: [1],
+      authors: [this.pubKey],
+      limit: 10,
+    };
+
+    this.eventSubscriptionId = this.eventService.addEventSubscription([filter], (event: NostrEvent) => {
+      this.events = [event, ...this.events].sort((a, b) => b.created_at - a.created_at);
+    });
+
+    this.eventsSubscription = this.eventService.events$.subscribe(eventMap => {
+      console.log('Event subscriptions updated:', Array.from(eventMap.values()));
+    });
+
+    this.loading = false;
+  }
+
+  private async fetchMetadata(pubkey: string): Promise<void> {
+    const filter: Filter = { kinds: [0], authors: [pubkey] };
+    this.eventService.addEventSubscription([filter], (metadataEvent: NostrEvent) => {
+      try {
+        this.metadata = JSON.parse(metadataEvent.content);
+      } catch (error) {
+        console.error('Error parsing metadata:', error);
+      }
+    });
+  }
+
+  private unsubscribeFromEvents(): void {
+    if (this.eventSubscriptionId) {
+      this.eventService.removeEventSubscriptionById(this.eventSubscriptionId);
+    }
+    this.eventsSubscription?.unsubscribe();
+  }
+
+  public clearEvents(): void {
+    this.events = [];
+    this.eventService.clearAllEventSubscriptions();
+    console.log('Cleared all event subscriptions and local events list');
+  }
+}