feat(frontend/shared): add support for reading certifications of profile

frontend/src/app/modules/profiles/components/certificates/certificates.component.html

@@ -6,16 +6,15 @@ <h2 class="d-flex justify-content-between align-items-center mb-3">Certificates<
       *ngFor="let certificate of certificates">
       <div class="d-flex align-items-center">
         <div class="flex-shrink-0">
-          <mat-icon class="text-dark">{{ certificate?.icon }}</mat-icon>
+          <mat-icon class="text-dark">{{ certificate?.image }}</mat-icon>
         </div>
         <div class="flex-grow-1 ms-3">
           <h6>{{ certificate?.name }}</h6>
-          <small class="text-Light text-end">{{ certificate?.achievement }} </small>
           <small class="text-Light text-end d-block">{{ certificate?.date | date }} </small>
         </div>
       </div>
       <div class="certificatesItemIcon">
-        <mat-icon class="text-black">{{ certificate?.icon }}</mat-icon>
+        <mat-icon class="text-black">{{ certificate?.image }}</mat-icon>
       </div>
     </mat-card>
   </ng-container>

frontend/src/app/modules/profiles/components/certificates/certificates.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 
-import { Certificate } from './../../../../modules/profiles/interfaces';
+import { Certificate } from '@shared/interfaces';
 
 @Component({
   selector: 'app-certificates',

frontend/src/app/modules/profiles/components/profile-body/profile-body.component.ts

@@ -108,6 +108,9 @@ export class ProfileBodyComponent implements OnInit {
       distinct()
     );
 
+    this.profileData$
+      .pipe(switchMap(profile => this.my3secHubContractService.getCertificates(parseInt(profile.id))))
+      .subscribe(a => console.log(a));
     this.loadingService.waitForObservables([this.profileData$, this.organizations$, this.projects$]);
   }
 

frontend/src/app/modules/profiles/interfaces/index.ts

@@ -1,5 +1,4 @@
 export * from './skill.interface';
-export * from './certificate.interface';
 export * from './profile-energy-data.interface';
 export * from './endorse-dialog-data.interface';
 export * from './endorse-item.interface';

frontend/src/app/modules/profiles/interfaces/profile.interface.ts

@@ -1,6 +1,7 @@
 import { ProfileMetadata } from 'app/shared/interfaces';
 
-import { Certificate } from './certificate.interface';
+import { Certificate } from '@shared/interfaces/certificate.interface';
+
 import { ProfileEnergyData } from './profile-energy-data.interface';
 import { Project } from './project.interface';
 import { Skill } from './skill.interface';

frontend/src/app/shared/interfaces/certificate.interface.ts

@@ -3,3 +3,10 @@ export interface CertificateMetadata {
   description: string;
   image: string;
 }
+
+export interface Certificate extends CertificateMetadata {
+  id: number;
+  profileId: number;
+  organizationAddress: string;
+  date?: Date;
+}

frontend/src/app/shared/services/certificate-contract.service.ts

@@ -0,0 +1,25 @@
+import { environment } from 'environments/environment';
+import { ethers, providers } from 'ethers';
+import { Observable, from } from 'rxjs';
+
+import { Injectable } from '@angular/core';
+
+import { CertificateNFT, CertificateNFT__factory } from '@vaimee/my3sec-contracts/dist';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CertificateContractService {
+  private contractAddress = environment.contracts.certificateNFT;
+  private contract: CertificateNFT;
+
+  constructor() {
+    const provider = new ethers.providers.Web3Provider(window.ethereum as providers.ExternalProvider, 'any');
+    const signer = provider.getSigner();
+    this.contract = CertificateNFT__factory.connect(this.contractAddress, signer);
+  }
+
+  public getCertificateMetadataURI(certificateId: number): Observable<string> {
+    return from(this.contract.tokenURI(certificateId));
+  }
+}

frontend/src/app/shared/services/my3sec-hub-contract.service.ts

@@ -7,8 +7,9 @@ import { Injectable } from '@angular/core';
 
 import { MetamaskService } from '@auth/services/metamask.service';
 
-import { Events__factory, My3SecHub, My3SecHub__factory } from '@vaimee/my3sec-contracts/dist';
+import { Events, Events__factory, My3SecHub, My3SecHub__factory } from '@vaimee/my3sec-contracts/dist';
 import { DataTypes } from '@vaimee/my3sec-contracts/dist/contracts/My3SecHub';
+import { CertificateIssuedEvent } from '@vaimee/my3sec-contracts/dist/contracts/common/libraries/Events';
 
 @Injectable({
   providedIn: 'root',
@@ -17,11 +18,13 @@ export class My3secHubContractService {
   private contractAddress = environment.contracts.my3secHub;
 
   private contract: My3SecHub;
+  private events: Events;
 
   constructor(private metamaskService: MetamaskService) {
     const provider = new ethers.providers.Web3Provider(window.ethereum as providers.ExternalProvider, 'any');
     const signer = provider.getSigner();
     this.contract = My3SecHub__factory.connect(this.contractAddress, signer);
+    this.events = Events__factory.connect(this.contractAddress, signer);
   }
 
   public getDefaultProfile(account: string): Observable<DataTypes.ProfileViewStructOutput> {
@@ -46,6 +49,11 @@ export class My3secHubContractService {
     );
   }
 
+  public getCertificates(profileId: number): Observable<CertificateIssuedEvent[]> {
+    const filter = this.events.filters.CertificateIssued(null, profileId);
+    return from(this.events.queryFilter(filter));
+  }
+
   public createProfile(metadataURI: string): Observable<number> {
     return from(this.contract.createProfile({ metadataURI })).pipe(
       switchMap(this.wait),

frontend/src/app/shared/services/profile.service.ts

@@ -16,10 +16,11 @@ import { Injectable } from '@angular/core';
 
 import { MetamaskService } from '@auth/services/metamask.service';
 
-import { Profile, ProfileMetadata } from '@shared/interfaces';
+import { Certificate, CertificateMetadata, Profile, ProfileMetadata } from '@shared/interfaces';
 
 import { EndorserItem } from '@profiles/interfaces';
 
+import { CertificateContractService } from './certificate-contract.service';
 import { EnergyWalletContractService } from './energy-wallet-contract.service';
 import { IpfsService } from './ipfs.service';
 import { My3secHubContractService } from './my3sec-hub-contract.service';
@@ -31,6 +32,7 @@ export class ProfileService {
   constructor(
     private my3secHub: My3secHubContractService,
     private energyWalletContract: EnergyWalletContractService,
+    private certificateContract: CertificateContractService,
     private ipfsService: IpfsService,
     private metamaskService: MetamaskService
   ) {}
@@ -163,6 +165,23 @@ export class ProfileService {
     );
   }
 
+  public getCertificates(profileId: number): Observable<Certificate> {
+    return this.my3secHub.getCertificates(profileId).pipe(
+      concatMap(certificates => certificates),
+      switchMap(event => {
+        return this.certificateContract.getCertificateMetadataURI(event.args.certificateId.toNumber()).pipe(
+          switchMap(data => this.ipfsService.retrieveJSON<CertificateMetadata>(data)),
+          map(metadata => ({
+            ...metadata,
+            id: event.args.certificateId.toNumber(),
+            organizationAddress: event.args.from,
+            profileId: event.args.profileId.toNumber(),
+          }))
+        );
+      })
+    );
+  }
+
   public getUserId(): Observable<number> {
     return this.my3secHub.getDefaultProfile(this.metamaskService.userAddress).pipe(map(({ id }) => id.toNumber()));
   }