Add CHAPI button to front page.

digitalcredentials · Jan 16, 2025 · 6068ec4 · 6068ec4
1 parent 6540c9f
commit 6068ec4
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@digitalcredentials/vc-status-list": "^9.0.0",
     "@digitalcredentials/vpqr": "^2.2.1",
     "axios": "^1.7.7",
+    "credential-handler-polyfill": "^4.0.0",
     "jsonld-signatures": "^11.3.0",
     "luxon": "^3.0.1",
     "material-icons": "^1.11.4",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,7 +1,8 @@
 import type { NextPage } from 'next'
+import * as polyfill from 'credential-handler-polyfill'
 import styles from './index.module.css'
 import { Button } from 'components/Button/Button'
-import { useEffect, useState,  } from 'react'
+import { useEffect, useState  } from 'react'
 import { ScanModal } from 'components/ScanModal/ScanModal'
 import { CredentialCard } from 'components/CredentialCard/CredentialCard'
 import { Container } from 'components/Container/Container'
@@ -33,8 +34,13 @@ const Home: NextPage = () => {
   useEffect(() => {
     document.documentElement.lang = "en";
     document.title = "VerifierPlus Home page";
+
+    polyfill.loadOnce()
+      .then(_ => { console.log('CHAPI polyfill loaded.') })
+      .catch(e => { console.error('Error loading CHAPI polyfill:', e) })
+
     const handlePopstate = () => {
-      if (window.location.hash === '/') {  
+      if (window.location.hash === '/') {
         setCredential(undefined);
         setWasMulti(false);
       } else {
@@ -99,6 +105,33 @@ const Home: NextPage = () => {
     setIsOpen(!isOpen);
   }
 
+  async function requestVcOnClick() {
+    const credentialQuery = {
+      web: {
+        VerifiablePresentation: {
+          query: [
+            {
+              type: 'QueryByExample',
+              reason: 'VerifierPlus is requesting any credential for verification.',
+              type: ['VerifiableCredential']
+            }
+          ]
+        }
+      }
+    } as CredentialRequestOptions
+
+    const chapiResult = await navigator.credentials.get(credentialQuery) as any
+
+    if(!chapiResult?.data) {
+      console.log('no credentials received');
+    }
+
+    console.log(chapiResult);
+
+    const { data: vp } = chapiResult
+    setCredential(vp)
+  }
+
   async function getJSONFromURL(url: string) {
     try {
       let response = await fetch(url);
@@ -185,19 +218,14 @@ const Home: NextPage = () => {
         </div>
         <div>
           <p className={styles.descriptionBlock}>
-            VerifierPlus allows users to verify any <Link href='faq#supported'>supported</Link> digital academic credential.
+            VerifierPlus allows users to verify any <Link href='faq#supported'>supported</Link> digital academic
+            credential.
             This site is hosted by
-             the <a href='https://digitalcredentials.mit.edu/'>Digital Credentials Consortium</a>
-             , a network of leading international universities designing an open
-              infrastructure for digital academic credentials. <Link href='faq#trust'>Why trust us?</Link>
+            the <a href='https://digitalcredentials.mit.edu/'>Digital Credentials Consortium</a>
+            , a network of leading international universities designing an open
+            infrastructure for digital academic credentials. <Link href='faq#trust'>Why trust us?</Link>
           </p>
         </div>
-        <Button
-          icon={<span className="material-icons">qr_code_scanner</span>}
-          className={styles.scan}
-          text='Scan QR Code'
-          onClick={ScanButtonOnClick}
-        />
 
         {scanError && (
           <div className={styles.errorContainer}>
@@ -210,6 +238,15 @@ const Home: NextPage = () => {
           </div>
         )}
 
+        <div>
+          <Button
+            icon={<span className="material-icons">wallet</span>}
+            className={styles.scan}
+            text='Request Credential from Wallet'
+            onClick={requestVcOnClick}
+          />
+        </div>
+
         <div className={styles.textAreaContainer}>
           <div className={styles.floatingTextarea}>
             <textarea
@@ -233,20 +270,31 @@ const Home: NextPage = () => {
               JSON cannot be parsed
             </p>
           </div>
-      )}
+        )}
 
         <div
           className={styles.dndUpload}
           onDrop={handleFileDrop}
-          onDragOver={(e) => { e.preventDefault(); }}
-          >
-            <div className={styles.dndUploadText}>
-              Drag and drop a file here or <label className={styles.fileUpload}>
-                <input type='file' onChange={handleBrowse} />
-                <span className={styles.browseLink}>browse</span>
-              </label>
-            </div>
-            <span className={styles.supportText}>Supports JSON</span>
+          onDragOver={(e) => {
+            e.preventDefault();
+          }}
+        >
+          <div className={styles.dndUploadText}>
+            Drag and drop a file here or <label className={styles.fileUpload}>
+            <input type='file' onChange={handleBrowse}/>
+            <span className={styles.browseLink}>browse</span>
+          </label>
+          </div>
+          <span className={styles.supportText}>Supports JSON</span>
+        </div>
+
+        <div style={{marginTop: '1em'}}>
+          <Button
+            icon={<span className="material-icons">qr_code_scanner</span>}
+            className={styles.scan}
+            text='Scan QR Code'
+            onClick={ScanButtonOnClick}
+          />
         </div>
 
         {fileError && (
@@ -258,8 +306,8 @@ const Home: NextPage = () => {
               Json cannot be parsed
             </p>
           </div>
-      )}
-        <ScanModal isOpen={isOpen} setIsOpen={setIsOpen} onScan={onScan} setErrorMessage={setScanError} />
+        )}
+        <ScanModal isOpen={isOpen} setIsOpen={setIsOpen} onScan={onScan} setErrorMessage={setScanError}/>
       </div>
       <BottomBar isDark={isDark}/>
     </main>