feat: implement ICP verfiable Credential with Dacade as relying party

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: "20.0.0"
+          node-version: "22.6.0"
           cache: "yarn"
 
       - name: Install dependencies

.nvmrc

@@ -1 +1 @@
-v20.14.0
+v22.6.0

package.json

@@ -14,6 +14,12 @@
   },
   "dependencies": {
     "@coingecko/cryptoformat": "^0.5.4",
+    "@dfinity/agent": "^2.0.0",
+    "@dfinity/auth-client": "^2.0.0",
+    "@dfinity/candid": "^2.0.0",
+    "@dfinity/identity": "^2.0.0",
+    "@dfinity/principal": "^2.0.0",
+    "@dfinity/verifiable-credentials": "0.0.4",
     "@reduxjs/toolkit": "^1.9.3",
     "@stefanprobst/remark-extract-toc": "^2.2.0",
     "@sumsub/websdk": "^1.4.0",

public/locales/bg/common.json

@@ -372,6 +372,7 @@
   "profile.achievement.award": "Awarded to",
   "profile.achievement.issued": "Issued by",
   "profile.achievement.comment": "Comment",
+  "profile.achievement.complete-certificate": "Получете сертификат ICP",
   "notifications.emails.unsubscribe.confirm.title": "Confirm unsubscribing to email notifications",
   "notifications.emails.unsubscribe.confirm.text": "You will no longer receive email notifications from <strong>{{appName}}</strong>.",
   "notifications.emails.unsubscribe.button.confirm": "Confirm",

public/locales/en/common.json

@@ -404,6 +404,7 @@
   "profile.achievement.award": "Awarded to",
   "profile.achievement.issued": "Issued by",
   "profile.achievement.comment": "Comment",
+  "profile.achievement.complete-certificate": "Get ICP Certificate",
   "profile.edit.wallet.current.address": "Current address",
   "profile.edit.wallet.new.address": "New address",
   "profile.edit.wallet.error.matches-existing": "New address matches the existing one",

public/locales/es/common.json

@@ -372,6 +372,7 @@
   "profile.achievement.award": "Awarded to",
   "profile.achievement.issued": "Issued by",
   "profile.achievement.comment": "Comment",
+  "profile.achievement.complete-certificate": "Obtener Certificado ICP",
   "email-verification.title": "Verify your email address",
   "email-verification.subtitle": "You are almost there! We sent an email to",
   "email-verification.message": "Just click on the link in that email to complete your signup.<br/>If you don't see the email, check your spam folder.",

public/locales/hr/common.json

@@ -372,6 +372,7 @@
   "profile.achievement.award": "Awarded to",
   "profile.achievement.issued": "Issued by",
   "profile.achievement.comment": "Comment",
+  "profile.achievement.complete-certificate": "Dobijte ICP certifikat",
   "notifications.emails.unsubscribe.confirm.title": "Confirm unsubscribing to email notifications",
   "notifications.emails.unsubscribe.confirm.text": "You will no longer receive email notifications from <strong>{{appName}}</strong>.",
   "notifications.emails.unsubscribe.button.confirm": "Confirm",

src/components/sections/profile/achievements/LinkField.tsx

@@ -38,7 +38,7 @@ export default function AchievementLinkField({ link }: AchievementLinkFieldProps
 
   return (
     <div className="border relative p-2 rounded">
-      <p className="text-gray-500 line-clamp-1 break-all flex-1 text-sm md:text-base overflow-hidden" onClick={copy}>
+      <p className="text-gray-500 line-clamp-1 break-all flex-1 text-sm md:text-base cursor-pointer overflow-hidden" onClick={copy}>
         {link}
       </p>
       <div className="bg-gradient-to-l input-background absolute h-full w-40 top-0 flex justify-end items-center pr-2 right-0">

src/components/sections/profile/communities/List.tsx

@@ -47,7 +47,7 @@ export default function SubmissionList(): ReactElement {
                 <SubmissionCard
                   key={submission.id}
                   stats
-                  link={navigation.community.submissionPath(submission.id, submission.challenge.id, community?.slug)}
+                  link={navigation.community.submissionPath(submission.id, submission.challenge?.id, community?.slug)}
                   submission={submission}
                   last={i === submissions.length - 1}
                 />

src/components/sections/profile/overview/Achievements.tsx

@@ -26,18 +26,20 @@ export default function ProfileOverviewAchievements(): ReactElement {
             <AchievementCard key={`profile-achievement-${index}`} data={achievement} />
           ))}
         </div>
-        {showAll ? (
-          <button  onClick={() => setShowAll(false)} className="text-brand bg-transparent pt-4 flex items-center gap-1.5 cursor-pointer">
-            {" "}
-            <Less />
-            <span>See Less</span>
-          </button>
-        ) : (
-          <button  onClick={() => setShowAll(true)} className="text-brand bg-transparent pt-4 flex items-center gap-1.5 cursor-pointer">
-            {" "}
-            <Plus />
-            <span>See All</span>
-          </button>
+        {achievements.length > 4 && (
+          <>
+            {showAll ? (
+              <button onClick={() => setShowAll(false)} className="text-brand bg-transparent pt-4 flex items-center gap-1.5 cursor-pointer">
+                <Less />
+                <span>See Less</span>
+              </button>
+            ) : (
+              <button onClick={() => setShowAll(true)} className="text-brand bg-transparent pt-4 flex items-center gap-1.5 cursor-pointer">
+                <Plus />
+                <span>See All</span>
+              </button>
+            )}
+          </>
         )}
       </ProfileOverviewSection>
     );

src/hooks/useIcpAuth.ts

@@ -0,0 +1,100 @@
+import { canisterId, createActor } from "@/utilities/icp/issuerFactory";
+import { Identity } from "@dfinity/agent";
+import { AuthClient } from "@dfinity/auth-client";
+import { Principal } from "@dfinity/principal";
+import { useCallback, useEffect } from "react";
+
+type Auth = {
+  client: AuthClient;
+  isAuthenticated: boolean;
+  identity: Identity;
+  principal: Principal;
+  principalText: string;
+};
+
+declare global {
+  interface Window {
+    auth: Auth;
+    issuerCanister: any;
+  }
+}
+
+export const MAX_TTL = BigInt(7 * 24 * 60 * 60 * 1000 * 1000 * 1000);
+
+/**
+ * For production ready we shall use https://identity.ic0.app/ as identity provider
+ */
+export const IDENTITY_PROVIDER = "https://identity.ic0.app/";
+const useIcpAuth = () => {
+  useEffect(() => {
+    if (!window) return;
+    async function initializeContract() {
+      const authClient = await AuthClient.create();
+      window.auth = {} as any;
+      window.auth.client = authClient;
+      window.auth.isAuthenticated = await authClient.isAuthenticated();
+      window.auth.identity = authClient.getIdentity();
+      window.auth.principal = authClient.getIdentity()?.getPrincipal();
+      window.auth.principalText = authClient.getIdentity()?.getPrincipal().toText();
+      window.issuerCanister = createActor(canisterId ?? "", {
+        agentOptions: {
+          host: "https://icp0.io",
+          identity: authClient.getIdentity(),
+        },
+      });
+    }
+
+    initializeContract();
+  }, []);
+
+  const popupCenter = useCallback((): string | undefined => {
+    const AUTH_POPUP_WIDTH = 576;
+    const AUTH_POPUP_HEIGHT = 625;
+
+    if (typeof window === "undefined" || !window.top) {
+      return undefined;
+    }
+
+    const { innerWidth, innerHeight, screenX, screenY } = window;
+
+    const y = innerHeight / 2 + screenY - AUTH_POPUP_HEIGHT / 2;
+    const x = innerWidth / 2 + screenX - AUTH_POPUP_WIDTH / 2;
+
+    return `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=${AUTH_POPUP_WIDTH}, height=${AUTH_POPUP_HEIGHT}, top=${y}, left=${x}`;
+  }, []);
+
+  async function login(callback: (principal: string) => void) {
+    if (!window) return;
+    const authClient = window.auth.client;
+
+    const isAuthenticated = await authClient.isAuthenticated();
+    if (!isAuthenticated) {
+      await authClient?.login({
+        maxTimeToLive: MAX_TTL,
+        identityProvider: IDENTITY_PROVIDER,
+        windowOpenerFeatures: popupCenter(),
+        onSuccess: async () => {
+          window.auth.isAuthenticated = await authClient.isAuthenticated();
+          const principal = await authClient.getIdentity()?.getPrincipal().toText();
+          callback(principal);
+        },
+      });
+    } else {
+      const principal = await authClient.getIdentity()?.getPrincipal().toText();
+      callback(principal);
+    }
+  }
+
+  async function logout() {
+    if (!window) return;
+    const authClient = window.auth.client;
+    authClient.logout();
+  }
+
+  return {
+    login,
+    logout,
+  };
+};
+
+export default useIcpAuth;

src/pages/achievements/[id].tsx

@@ -14,13 +14,14 @@ import Head from "next/head";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useRouter } from "next/router";
 import { useDispatch } from "@/hooks/useTypedDispatch";
-import { findCertificate } from "@/store/services/profile/certificate.service";
+import { completeIcpCertificate, findCertificate } from "@/store/services/profile/certificate.service";
 import { useTranslation } from "next-i18next";
 import Logo from "@/icons/logo.svg";
 import MintCertificate from "@/components/sections/profile/modals/MintCertificate";
 import { Certificate } from "@/types/certificate";
 import { User } from "@/types/bounty";
 import { IRootState } from "@/store";
+import useIcpAuth from "@/hooks/useIcpAuth";
 
 /**
  * interface for Achievement multiSelector
@@ -45,6 +46,8 @@ const Achievement = () => {
   const [showMintCertificate, setShowMintCertificate] = useState(false);
   const dispatch = useDispatch();
   const { locale, query } = useRouter();
+  const { login } = useIcpAuth();
+  const [addCourseToCompletionPending, setAddCourseToCompletionPending] = useState(false);
 
   const findCertificateById = useCallback(async () => {
     await dispatch(findCertificate({ id: query.id as string }));
@@ -96,14 +99,38 @@ const Achievement = () => {
     return user.id === achievement?.user_id;
   }, [user, achievement]);
 
-  const mintable = useMemo(() => {
-    return achievement?.community?.can_mint_certificates;
+  const isICPSubmission = useMemo(() => {
+    return achievement?.community.name === "Internet Computer";
   }, [achievement]);
 
+  const mintable = useMemo(() => {
+    return achievement?.community?.can_mint_certificates || isICPSubmission;
+  }, [achievement, isICPSubmission]);
+
   const isNotCertificateIcon = useMemo(() => {
     return !achievement?.metadata?.image?.includes("/img/certificates/");
   }, [achievement]);
 
+  const addCourseCompletionToTheIssuerCanister = useCallback(async () => {
+    if (!achievement?.metadata) return;
+    const { name } = achievement?.metadata;
+    if (!window.issuerCanister) return;
+    try {
+      setAddCourseToCompletionPending(true);
+      await window.issuerCanister.add_course_completion(name.toLowerCase().replaceAll(" ", "-"));
+      await dispatch(completeIcpCertificate({ id: achievement.id }));
+    } catch (err) {
+      console.error("Failed to complete course: ", err);
+    } finally {
+      setAddCourseToCompletionPending(false);
+    }
+  }, [achievement?.id, achievement?.metadata, dispatch, findCertificateById]);
+
+  const onMint = () => {
+    if (isICPSubmission) return login(() => addCourseCompletionToTheIssuerCanister());
+    setShowMintCertificate(true);
+  };
+
   return (
     <>
       <Head>
@@ -160,11 +187,23 @@ const Achievement = () => {
                       <div className="w-full flex">
                         {!achievementMinted && belongsToCurrentUser && <MintCertificate show={showMintCertificate} close={() => setShowMintCertificate(false)} />}
 
-                        {belongsToCurrentUser && !minted && (
-                          <ArrowButton target="__blank" variant="primary" className="flex ml-auto mt-5" onClick={() => setShowMintCertificate(true)}>
+                        {belongsToCurrentUser && !minted && !isICPSubmission && (
+                          <ArrowButton target="__blank" variant="outline-primary" className="flex ml-auto mt-5" onClick={onMint}>
                             Mint certificate
                           </ArrowButton>
                         )}
+                        {belongsToCurrentUser && !achievement.completed && isICPSubmission && (
+                          <ArrowButton
+                            target="__blank"
+                            variant="outline-primary"
+                            className="flex ml-auto mt-5"
+                            disabled={addCourseToCompletionPending}
+                            loading={addCourseToCompletionPending}
+                            onClick={onMint}
+                          >
+                            Record Course Completion
+                          </ArrowButton>
+                        )}
                       </div>
                     </div>
                   )}

src/store/services/profile/certificate.service.ts

@@ -42,6 +42,21 @@ const certificateService = createApi({
       },
     }),
 
+    complete: builder.mutation({
+      query: ({ id }: { id: string }) => ({
+        url: "certificates/complete",
+        method: "POST",
+        body: {
+          certificateId: id,
+        },
+      }),
+
+      onQueryStarted: async (_, { dispatch, queryFulfilled }) => {
+        const { data } = await queryFulfilled;
+        dispatch(setCurrentCertificate(data));
+      },
+    }),
+
     mint: builder.mutation({
       query: ({ id, address, signature }) => ({
         url: "certificates/mint",
@@ -55,7 +70,6 @@ const certificateService = createApi({
 
       onQueryStarted: async (_, { dispatch, queryFulfilled, getState }) => {
         const { data } = await queryFulfilled;
-        console.log("This is the returned thing", data);
         if (data.certificate) {
           const state: any = getState();
           const currentCertificate = state.profileCertificate.current;
@@ -97,5 +111,7 @@ export const mintCertificate = ({ id, address, signature }: MintCertificateArgs)
     signature,
   });
 
+export const completeIcpCertificate = ({ id }: { id: string }) => certificateService.endpoints.complete.initiate({ id });
+
 export const { useFetchAllCertificatesQuery, useFindCertificateQuery } = certificateService;
 export default certificateService;

src/types/certificate.d.ts

@@ -19,6 +19,7 @@ export interface Certificate {
   submission: Submission;
   minting: Minting;
   user: User;
+  completed: boolean;
 }
 
 /**