TECH-156 - Fix issue with retrieving the credential

src/civic-canister-frontend/.env.local

@@ -1,4 +1,4 @@
-VITE_LOCAL_INTERNET_IDENTITY_CANISTER_ID=be2us-64aaa-aaaaa-qaabq-cai
-VITE_LOCAL_CIVIC_FRONTEND_CANISTER_ID=bkyz2-fmaaa-aaaaa-qaaaq-cai
-VITE_LOCAL_CIVIC_BACKEND_CANISTER_ID=bd3sg-teaaa-aaaaa-qaaba-cai
+VITE_LOCAL_INTERNET_IDENTITY_CANISTER_ID=bd3sg-teaaa-aaaaa-qaaba-cai
+VITE_LOCAL_CIVIC_FRONTEND_CANISTER_ID=bw4dl-smaaa-aaaaa-qaacq-cai
+VITE_LOCAL_CIVIC_BACKEND_CANISTER_ID=bkyz2-fmaaa-aaaaa-qaaaq-cai
 VITE_LOCAL_HOST=localhost:4943

src/civic-canister-frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { Principal } from '@dfinity/principal';
-import { CredentialService, Credential } from './service/CredentialService';
+import { CredentialService } from './service/CredentialService';
 import { PrincipalService } from './service/PrincipalService';
 import { config } from './config';
 

src/relying-canister-frontend/.env.local

@@ -1,4 +1,4 @@
-VITE_LOCAL_INTERNET_IDENTITY_CANISTER_ID=be2us-64aaa-aaaaa-qaabq-cai
-VITE_LOCAL_RELYING_FRONTEND_CANISTER_ID=br5f7-7uaaa-aaaaa-qaaca-cai
-VITE_LOCAL_CIVIC_BACKEND_CANISTER_ID=bd3sg-teaaa-aaaaa-qaaba-cai
+VITE_LOCAL_INTERNET_IDENTITY_CANISTER_ID=bd3sg-teaaa-aaaaa-qaaba-cai
+VITE_LOCAL_RELYING_FRONTEND_CANISTER_ID=be2us-64aaa-aaaaa-qaabq-cai
+VITE_LOCAL_CIVIC_BACKEND_CANISTER_ID=bkyz2-fmaaa-aaaaa-qaaaq-cai
 VITE_LOCAL_HOST=localhost:4943

src/relying-canister-frontend/package.json

@@ -4,6 +4,7 @@
     "@dfinity/candid": "^1.3.0",
     "@dfinity/identity-secp256k1": "^1.3.0",
     "@dfinity/principal": "^1.3.0",
+    "@dfinity/verifiable-credentials": "^0.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/relying-canister-frontend/src/App.tsx

@@ -1,20 +1,16 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { Principal } from '@dfinity/principal';
-import { CredentialService, Credential } from './service/CredentialService';
-import { PrincipalService } from './service/PrincipalService';
-import { config } from './config';
+import { CredentialService } from './service/CredentialService.js';
+import { PrincipalService } from './service/PrincipalService.js';
+import { config } from './config.js';
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [principal, setPrincipal] = useState<Principal | undefined>(undefined);
   const [credentialService, setCredentialService] = useState<CredentialService>();
 
   useEffect(() => {
-    const { civicBackendCanisterId, dummyCivicSampleKey } = config;
-    const service = new CredentialService({
-      civicBackendCanisterId,
-      dummyCivicSampleKey,
-    });
+    const service = new CredentialService(config);
     setCredentialService(service);
   }, []);
 

src/relying-canister-frontend/src/service/CredentialService.ts

@@ -4,45 +4,57 @@ import { Actor, HttpAgent } from "@dfinity/agent";
 import { idlFactory as civic } from "../../../declarations/civic_canister_backend/civic_canister_backend.did.js";
 import { Secp256k1KeyIdentity } from "@dfinity/identity-secp256k1";
 import type { Principal } from "@dfinity/principal";
-
-export interface Credential {
-  id: string;
-  type_: string[];
-  context: string[];
-  issuer: string;
-  claim: any; // Array of claims
-}
+import { requestVerifiablePresentation } from "@dfinity/verifiable-credentials/request-verifiable-presentation";
 
 export type CredentialConfig = {
-  civicBackendCanisterId: string;
+  civicBackendCanisterUrl: string;
   dummyCivicSampleKey: Uint8Array;
+  relyingFrontendCanisterUrl: string;
+  internetIdentityUrl: string;
 }
 
 export class CredentialService {
   private _agent?: HttpAgent;
 
   constructor(private config: CredentialConfig) {}
 
-  private get credentialActor() {
-    if (!this._agent) {
-      const identity = Secp256k1KeyIdentity.fromSecretKey(this.config.dummyCivicSampleKey);
-      this._agent = new HttpAgent({ identity });
-    }
-    this._agent.fetchRootKey();
-    return Actor.createActor(civic, {
-      agent: this._agent,
-      canisterId: this.config.civicBackendCanisterId,
-    });
-  }
-
   // Retrieve all credentials for a given principal
-  async getCredentials(principal: Principal): Promise<Credential[] | null> {
+  async getCredentials(principal: Principal): Promise<void> {
     try {
-      const credentials = await this.credentialActor.get_credentials(principal);
-      return credentials as Credential[];
+      const issuerData = {
+        "origin": this.config.civicBackendCanisterUrl,
+      };
+
+      const credentialData = {
+        credentialSpec: {
+          credentialType: 'VerifiedAdult',
+          arguments: {}
+        },
+        credentialSubject: principal.toText()
+      };
+
+      const onSuccess = (response: any) => 
+        console.log('VC Request Successful:', response);
+
+      const onError = (error: any) =>
+        console.error('VC Request Failed:', error);
+
+      const identityProvider = this.config.internetIdentityUrl;
+
+      const derivationOrigin = undefined;
+
+      const requestParams = {
+        onSuccess,
+        onError,
+        credentialData,
+        issuerData,
+        identityProvider,
+        derivationOrigin
+      };
+
+      requestVerifiablePresentation(requestParams);
     } catch (error) {
       console.error("Error getting credentials:", error);
-      return null;
     }
   }
 }

src/relying-canister-frontend/tsconfig.json

@@ -11,8 +11,8 @@
       "DOM.Iterable",
       "ESNext"
     ],
-    "module": "ESNext",
-    "moduleResolution": "Node",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "noEmit": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,