@learncard/react 2.7.0 → 2.7.2

package/dist/esm/{VCCard-b0347a85.js → VCCard-18e042c5.js}

@@ -14,7 +14,7 @@ import './stem.svg';
 import './trade.svg';
 import './types.esm-8f6a5623.js';
 import './CaretRightFilled.svg';
-import { V as VCDisplayCard2 } from './VCDisplayCard2-b0f44405.js';
+import { V as VCDisplayCard2 } from './VCDisplayCard2-8f8ad746.js';
 import './id-sleeve.png';
 
 var __async = (__this, __arguments, generator) => {
@@ -84,4 +84,4 @@ const VCCard = ({
 };
 
 export { VCCard as V };
-//# sourceMappingURL=VCCard-b0347a85.js.map
+//# sourceMappingURL=VCCard-18e042c5.js.map

package/dist/esm/{VCCard-b0347a85.js.map → VCCard-18e042c5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCCard-b0347a85.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/init';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\nimport {\n    VCDisplayCard2,\n    CredentialIconType,\n} from '../VCDisplayCard2';\n\nimport { MediaMetadata, VideoMetadata } from '../../types';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n    version?: '1' | '2';\n\n    /* Only used for version 2 */\n    subjectImageComponent?: React.ReactNode;\n    // convertTagsToSkills?: (tags: string[]) => { [skill: string]: string[] };\n    handleXClick?: () => void;\n    getFileMetadata?: (url: string) => MediaMetadata;\n    getVideoMetadata?: (url: string) => VideoMetadata;\n    onMediaAttachmentClick?: (url: string) => void;\n    bottomRightIcon?: CredentialIconType;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({\n    credential,\n    issueeOverride,\n    className = '',\n    version = '1',\n    subjectImageComponent,\n    // convertTagsToSkills,\n    handleXClick,\n    getFileMetadata,\n    getVideoMetadata,\n    onMediaAttachmentClick,\n    bottomRightIcon,\n}) => {\n    const [loading, setLoading] = useState(true);\n    const [vcVerification, setVCVerification] = useState<VerificationItem[]>([]);\n\n    useEffect(() => {\n        const verify = async () => {\n            const wallet = await initLearnCard();\n            const verification = await wallet.invoke.verifyCredential(credential, {}, true);\n            setVCVerification(verification);\n            setLoading(false);\n        };\n\n        verify();\n    }, [credential]);\n\n    if (version === '1') {\n        return (\n            <VCDisplayCard\n                credential={credential}\n                issueeOverride={issueeOverride}\n                className={className}\n                loading={loading}\n                verification={vcVerification}\n            />\n        );\n    }\n    return (\n        <VCDisplayCard2\n            credential={credential}\n            issueeOverride={issueeOverride}\n            verificationInProgress={loading}\n            verificationItems={vcVerification}\n            subjectImageComponent={subjectImageComponent}\n            // convertTagsToSkills={convertTagsToSkills}\n            handleXClick={handleXClick}\n            getFileMetadata={getFileMetadata}\n            getVideoMetadata={getVideoMetadata}\n            onMediaAttachmentClick={onMediaAttachmentClick}\n            bottomRightIcon={bottomRightIcon}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":["this"],"mappings":"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"}
+{"version":3,"file":"VCCard-18e042c5.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/init';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\nimport {\n    VCDisplayCard2,\n    CredentialIconType,\n} from '../VCDisplayCard2';\n\nimport { MediaMetadata, VideoMetadata } from '../../types';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n    version?: '1' | '2';\n\n    /* Only used for version 2 */\n    subjectImageComponent?: React.ReactNode;\n    // convertTagsToSkills?: (tags: string[]) => { [skill: string]: string[] };\n    handleXClick?: () => void;\n    getFileMetadata?: (url: string) => MediaMetadata;\n    getVideoMetadata?: (url: string) => VideoMetadata;\n    onMediaAttachmentClick?: (url: string) => void;\n    bottomRightIcon?: CredentialIconType;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({\n    credential,\n    issueeOverride,\n    className = '',\n    version = '1',\n    subjectImageComponent,\n    // convertTagsToSkills,\n    handleXClick,\n    getFileMetadata,\n    getVideoMetadata,\n    onMediaAttachmentClick,\n    bottomRightIcon,\n}) => {\n    const [loading, setLoading] = useState(true);\n    const [vcVerification, setVCVerification] = useState<VerificationItem[]>([]);\n\n    useEffect(() => {\n        const verify = async () => {\n            const wallet = await initLearnCard();\n            const verification = await wallet.invoke.verifyCredential(credential, {}, true);\n            setVCVerification(verification);\n            setLoading(false);\n        };\n\n        verify();\n    }, [credential]);\n\n    if (version === '1') {\n        return (\n            <VCDisplayCard\n                credential={credential}\n                issueeOverride={issueeOverride}\n                className={className}\n                loading={loading}\n                verification={vcVerification}\n            />\n        );\n    }\n    return (\n        <VCDisplayCard2\n            credential={credential}\n            issueeOverride={issueeOverride}\n            verificationInProgress={loading}\n            verificationItems={vcVerification}\n            subjectImageComponent={subjectImageComponent}\n            // convertTagsToSkills={convertTagsToSkills}\n            handleXClick={handleXClick}\n            getFileMetadata={getFileMetadata}\n            getVideoMetadata={getVideoMetadata}\n            onMediaAttachmentClick={onMediaAttachmentClick}\n            bottomRightIcon={bottomRightIcon}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":["this"],"mappings":"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"}

package/dist/esm/{VCDisplayCard2-b0f44405.js → VCDisplayCard2-8f8ad746.js}

@@ -2,8 +2,8 @@ import React, { useRef, useEffect, useState, createContext, Component, Children,
 import './index-4fa491c1.js';
 import { a as VCVerificationCheckWithSpinner } from './VCVerificationCheck-80249524.js';
 import DefaultFace from './default-face.jpeg';
-import { a as getColorForVerificationStatus, j as format$1, h as getNameFromProfile, i as getImageFromProfile, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills, b as getInfoFromCredential } from './credential.helpers-c06a1aa8.js';
-import { g as getBaseUrl, V as VideoIcon, d as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, e as capitalize, X, E as ExclamationPoint, A as AcuteCheckmark, I as InfoIcon, f as LeftArrow, h as SkillsBox, i as AlignmentsBox, t as truncateWithEllipsis, P as PersonBadge, j as VerifiedBadge, U as UnknownVerifierBadge, R as RedFlag, b as CertificateDisplayCard } from './CertificateDisplayCard-b3c93952.js';
+import { a as getColorForVerificationStatus, j as format$1, h as getNameFromProfile, b as getInfoFromCredential, i as getImageFromProfile, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills } from './credential.helpers-c06a1aa8.js';
+import { g as getBaseUrl, d as VideoIcon, e as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, f as capitalize, X, E as ExclamationPoint, A as AcuteCheckmark, I as InfoIcon, h as LeftArrow, i as SkillsBox, j as AlignmentsBox, t as truncateWithEllipsis, V as VERIFIER_STATES$1, k as VerifierStateBadgeAndText, P as PersonBadge, l as VerifiedBadge, U as UnknownVerifierBadge, R as RedFlag, b as CertificateDisplayCard } from './CertificateDisplayCard-3b19363c.js';
 import { L as Lightbox } from './Lightbox-a1aab9ea.js';
 import { V as VerificationStatusEnum } from './types.esm-8f6a5623.js';
 import { I as IDIcon, Q as QRCodeIcon, A as AwardRibbon } from './QRCodeIcon-e9569804.js';
@@ -282,12 +282,12 @@ const MediaAttachmentsBox = ({
       }, title));
     } else {
       innerContent = /* @__PURE__ */ React.createElement("div", {
-        className: "absolute top-0 left-0 right-0 bottom-0 h-min"
+        className: "absolute top-0 left-0 right-0 bottom-0 h-full w-full flex items-center justify-center"
       }, /* @__PURE__ */ React.createElement("img", {
-        className: "rounded-[15px]",
+        className: "rounded-[15px] object-cover h-full w-full",
         src: media.url
       }), /* @__PURE__ */ React.createElement(Camera, {
-        className: "relative bottom-[30px] left-[10px] z-10"
+        className: "absolute bottom-[10px] left-[10px] z-10"
       }));
     }
     const className = `media-attachment ${media.type} w-[49%] pt-[49%] overflow-hidden relative`;
@@ -580,6 +580,7 @@ const VC2BackFace = ({
 };
 
 const VC2FrontFaceInfo = ({
+  credential,
   issuee,
   issuer,
   subjectDID,
@@ -588,12 +589,16 @@ const VC2FrontFaceInfo = ({
   customBodyCardComponent,
   createdAt,
   imageUrl,
-  customThumbComponent
+  customThumbComponent,
+  trustedAppRegistry
 }) => {
   const issuerName = truncateWithEllipsis(getNameFromProfile(issuer != null ? issuer : ""), 25);
   const issueeName = truncateWithEllipsis(getNameFromProfile(issuee != null ? issuee : ""), 25);
   const issuerImage = getImageFromProfile(issuer != null ? issuer : "");
   const issueeImage = getImageFromProfile(issuee != null ? issuee : "");
+  const { credentialSubject } = getInfoFromCredential(credential, "MMM dd, yyyy", {
+    uppercaseDate: false
+  });
   const getImageElement = (imageUrl2, alt, overrideComponent) => {
     if (overrideComponent)
       return overrideComponent;
@@ -605,6 +610,18 @@ const VC2FrontFaceInfo = ({
   };
   const issueeImageEl = getImageElement(issueeImage, "Issuee image", subjectImageComponent);
   const issuerImageEl = getImageElement(issuerImage, "Issuer image", issuerImageComponent);
+  const issuerDid = typeof credential.issuer === "string" ? credential.issuer : credential.issuer.id;
+  let verifierState;
+  if ((credentialSubject == null ? void 0 : credentialSubject.id) === issuerDid && issuerDid && issuerDid !== "did:example:123") {
+    verifierState = VERIFIER_STATES$1.selfVerified;
+  } else {
+    const appRegistryEntry = trustedAppRegistry == null ? void 0 : trustedAppRegistry.find((registryEntry) => registryEntry.did === issuerDid);
+    if (appRegistryEntry) {
+      verifierState = appRegistryEntry.isTrusted ? VERIFIER_STATES$1.trustedVerifier : VERIFIER_STATES$1.untrustedVerifier;
+    } else {
+      verifierState = VERIFIER_STATES$1.unknownVerifier;
+    }
+  }
   return /* @__PURE__ */ React.createElement("section", {
     className: "vc-front-face w-full px-[15px] flex flex-col items-center gap-[15px]"
   }, imageUrl && !customThumbComponent && /* @__PURE__ */ React.createElement("img", {
@@ -623,6 +640,8 @@ const VC2FrontFaceInfo = ({
   }, issueeImageEl), /* @__PURE__ */ React.createElement("div", {
     className: "vc-issuer-image h-[30px] w-[30px] rounded-full overflow-hidden absolute bottom-[-12px] right-[-12px]"
   }, issuerImageEl)), /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col gap-[13px]"
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "vc-issue-details mt-[10px] flex flex-col items-center font-montserrat text-[14px] leading-[20px]"
   }, /* @__PURE__ */ React.createElement("span", {
     className: "created-at text-grayscale-700"
@@ -630,7 +649,9 @@ const VC2FrontFaceInfo = ({
     className: "issued-by text-grayscale-900 font-[500]"
   }, "by ", /* @__PURE__ */ React.createElement("strong", {
     className: "font-[700]"
-  }, issuerName))))));
+  }, issuerName))), /* @__PURE__ */ React.createElement(VerifierStateBadgeAndText, {
+    verifierState
+  })))));
 };
 
 /*! @license Rematrix v0.2.2
@@ -1194,6 +1215,7 @@ const VCDisplayCard2 = ({
   }, isFront && /* @__PURE__ */ React.createElement(v, {
     flipId: "face"
   }, /* @__PURE__ */ React.createElement(VC2FrontFaceInfo, {
+    credential,
     issuee,
     subjectDID,
     issuer,
@@ -1203,7 +1225,8 @@ const VCDisplayCard2 = ({
     customBodyCardComponent,
     customThumbComponent,
     createdAt: createdAt != null ? createdAt : "",
-    imageUrl
+    imageUrl,
+    trustedAppRegistry
   })), !isFront && /* @__PURE__ */ React.createElement(v, {
     flipId: "face"
   }, /* @__PURE__ */ React.createElement(VC2BackFace, {
@@ -1260,4 +1283,4 @@ const VCDisplayCard2 = ({
 };
 
 export { VCDisplayCard2 as V, VCDisplayCardSkillsCount as a, VCIDDisplayCard as b };
-//# sourceMappingURL=VCDisplayCard2-b0f44405.js.map
+//# sourceMappingURL=VCDisplayCard2-8f8ad746.js.map