Changes to show multiple VC

digitalcredentials · Jul 11, 2024 · 86aa8d3 · 86aa8d3
1 parent c013e57
commit 86aa8d3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/lib/credentials.ts b/lib/credentials.ts
@@ -46,7 +46,7 @@ export async function post({ vp }: CredentialPayload): Promise<StoreCredentialRe
   //  signature on the VP).
 
   const Credentials = await dbCredentials.open();
-  const credential = _extractCredential(vp);
+  const credential = _extractCredential(vp)[0];
   const publicId = publicIdFrom(holder, credential);
 
   await Credentials.insert({
@@ -76,10 +76,10 @@ export function publicIdFrom (holder: string, credential: VerifiableCredential):
   return uuidv4();
 }
 
-function _extractCredential(vp: VerifiablePresentation): VerifiableCredential {
+function _extractCredential(vp: VerifiablePresentation): VerifiableCredential[] {
   return Array.isArray(vp.verifiableCredential)
-    ? vp.verifiableCredential[0]
-    : vp.verifiableCredential;
+    ? vp.verifiableCredential
+    : [vp.verifiableCredential];
 }
 
 /**

diff --git a/pages/credentials/[publicCredentialId].tsx b/pages/credentials/[publicCredentialId].tsx
@@ -14,26 +14,45 @@ import { BottomBar } from 'components/BottomBar/BottomBar';
 import { extractCredentialsFrom, VerifiableObject } from 'lib/verifiableObject';
 import { LoadingError } from 'components/LoadingError/LoadingError';
 
+interface CredentialVerificationProps {
+  credential: VerifiableCredential;
+}
+
+const CredentialVerification: React.FC<CredentialVerificationProps> = ({
+  credential,
+}) => {
+  const verificationContext = useVerification(credential);
+
+  return (
+    <div className={styles.verifyContainer}>
+      <VerificationContext.Provider value={verificationContext}>
+        <Container>
+          <CredentialCard credential={credential} />
+          <VerificationCard />
+        </Container>
+      </VerificationContext.Provider>
+    </div>
+  );
+};
+
 // @see https://nextjs.org/docs/basic-features/data-fetching/client-side#client-side-data-fetching-with-swr
 // think this needed to be changed because of ts https://stackoverflow.com/questions/64199630/problem-with-typescript-while-making-request-to-swr
 const fetcher = (input: RequestInfo, init: RequestInit, ...args: any[]) => fetch(input, init).then((res) => res.json());
 
 const CredentialPage: NextPage = () => {
   // On page load, the credential is undefined, and is loaded and set
   // asynchronously from server-side API via `useSWR` hook
-  const [credential, setCredential] = useState<VerifiableCredential | undefined>(undefined);
+  const [credentials, setCredentials] = useState<VerifiableCredential[]>([]);
   const [isDark, setIsDark] = useState(false);
 
-  const credentialContext = useVerification(credential as VerifiableCredential);
-
   const router = useRouter();
   const { publicCredentialId } = router.query;
 
   const extract = (data: {vp: VerifiableObject}) => {
     if (data !== undefined) {
       const vp = data.vp;
       const creds = extractCredentialsFrom(vp);
-      setCredential(creds![0])
+      setCredentials(creds || []);
     }
   }
 
@@ -46,22 +65,17 @@ const CredentialPage: NextPage = () => {
       <BottomBar isDark={isDark}/>
     </div>);
   }
-  if (!credential) {
+  if (credentials.length === 0) {
     return <div>Loading...</div>;
   }
 
   return (
     <div className={styles.container}>
       <TopBar hasLogo={true} isDark={isDark} setIsDark={setIsDark} />
-      <div className={styles.verifyContainer}>
-        <VerificationContext.Provider value={credentialContext}>
-          <Container>
-            <CredentialCard credential={credential} />
-            <VerificationCard />
-          </Container>
-        </VerificationContext.Provider>
-      </div>
-      <BottomBar isDark={isDark}/>
+      {credentials.map((credential, index) => (
+        <CredentialVerification credential={credential} key={index} />
+      ))}
+      <BottomBar isDark={isDark} />
     </div>
   )
 }