Start updating profile

src/app/components/profile/profile.component.html

@@ -18,7 +18,7 @@
             <div class="-mt-26 rounded-full lg:-mt-22">
                 <img
                     class="ring-bg-card h-32 w-32 rounded-full ring-4"
-                    src="images/avatars/male-04.jpg"
+                    [src]="metadata?.picture"
                     alt="User avatar"
                 />
             </div>
@@ -27,8 +27,8 @@
             <div
                 class="mt-4 flex flex-col items-center lg:ml-8 lg:mt-0 lg:items-start"
             >
-                <div class="text-lg font-bold leading-none">Display Name</div>
-                <div class="text-secondary">London, UK</div>
+                <div class="text-lg font-bold leading-none">{{metadata?.name || 'Unknown User'}}</div>
+                <div class="text-secondary">{{metadata?.username || 'username'}}</div>
             </div>
 
             <!-- Separator -->
@@ -72,11 +72,7 @@
             <angor-card class="flex w-full max-w-80 flex-col p-8">
                 <div class="text-2xl font-semibold leading-tight">About Me</div>
                 <div class="mt-4">
-                    I’m a friendly kitchen assistant who suffers from a severe
-                    phobia of buttons.
-                    <br /><br />
-                    Brother of Elijah Jay Watkins, who has phobia of buttons and
-                    trust issues.
+                   {{metadata?.about || ''}}
                 </div>
                 <hr class="my-6 w-full border-t" />
                 <div class="flex flex-col">

src/app/components/profile/profile.component.ts

@@ -2,6 +2,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { NgClass } from '@angular/common';
 import {
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     ViewEncapsulation,
 } from '@angular/core';
@@ -12,8 +13,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { AngorCardComponent } from '@angor/components/card';
+import { AngorConfigService } from '@angor/services/config';
+import { NostrService } from 'app/services/nostr.service';
+import { SignerService } from 'app/services/signer.service';
 
 @Component({
     selector: 'profile',
@@ -36,8 +40,41 @@ import { AngorCardComponent } from '@angor/components/card';
     ],
 })
 export class ProfileComponent {
-    /**
-     * Constructor
-     */
-    constructor() {}
+    user: any;
+    isLoading: boolean = true;
+    errorMessage: string | null = null;
+    metadata: any;
+
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _router: Router,
+        private _angorConfigService: AngorConfigService,
+        private _nostrService: NostrService,
+        private _signerService: SignerService
+    ) { }
+    ngOnInit(): void {
+        this.loadUserProfile();
+    }
+    private async loadUserProfile(): Promise<void> {
+        this.isLoading = true;
+        this.errorMessage = null;
+        const publicKey = this._signerService.getPublicKey();
+
+        if (!publicKey) {
+            this.errorMessage = 'No public key found. Please log in again.';
+            this.isLoading = false;
+            return;
+        }
+
+        try {
+            const metadata = await this._nostrService.fetchMetadata(publicKey);
+            this.metadata = metadata;
+        } catch (error) {
+            console.error('Failed to load profile data:', error);
+            this.errorMessage = 'Failed to load profile data. Please try again later.';
+        } finally {
+            this.isLoading = false;
+            this._changeDetectorRef.markForCheck();  // Trigger change detection to update the view
+        }
+    }
 }