Added instructions for testing with the Google Digital Credentials API (

#48) * Added instructions for testing with the Google Digital Credentials API
docknetwork · Nov 26, 2024 · 5927cff · 5927cff
1 parent fca4fe6
commit 5927cff
Show file tree

Hide file tree

Showing 4 changed files with 485 additions and 89 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",

diff --git a/pages/mdl.js b/pages/mdl.js
@@ -2,6 +2,8 @@ import Head from 'next/head';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { Check } from 'lucide-react';
 
 import { Separator } from 'components/ui/separator';
 import { Button } from 'components/ui/button';
@@ -10,7 +12,6 @@ import { apiGetLocal, postRequestLocal } from 'utils/request';
 import { dockUrl } from 'utils/constants';
 
 const baseUrl = process.env.NEXT_PUBLIC_DOCK_API_URL;
-
 const mdlProofRequest = {
   name: 'Proof request',
   nonce: '-vz4qxeHjbmcjvfVBKJ1PywWnLawwxLi50CVTrOAGmw=',
@@ -239,6 +240,7 @@ function OID4VPProofRequest({ title, desc, proofRequestSetupObject, onPres, setE
 }
 
 export default function Home() {
+  const [showInstructions, setShowInstructions] = useState(false);
   const [res, setRes] = useState();
   const [error, setError] = useState();
 
@@ -261,8 +263,83 @@ export default function Home() {
             <h1 className="Header">
               <span className="mr-2">|</span> MDL Demo
             </h1>
+            <p className="text-justify mt-5">
+              Use this page to test out mDL presentations.
+              <br />
+              Currently this page supports the Google Digital Credentials API implementation on
+              Android.
+              <br />
+            </p>
+
+            <p className="text-justify mt-5">
+              <Collapsible.Root
+                open={showInstructions}
+                onOpenChange={setShowInstructions}
+                className="CollapsibleRoot">
+                <div className="text-justify mt-5">
+                  <Collapsible.Trigger asChild>
+                    <Button>
+                      {showInstructions ? '- Hide Instructions' : '+ View Instructions'}
+                    </Button>
+                  </Collapsible.Trigger>
+                </div>
+                <Collapsible.Content>
+                  <div className="text-left mt-5">
+                    <div className="text-left mt-5 text-lg">Device Requirements</div>
+                    <ol className="pl-5 list-disc">
+                      <li>Android device</li>
+                      <li>Google Play services 23.40 (or later)</li>
+                      <li>Chrome 128 (or later)</li>
+                      <li>Enable the flag at chrome://flags#web-identity-digital-credentials</li>
+                      <li>Ensure your device allows installs from, &quot;Unknown Sources&quot;</li>
+                    </ol>
+                  </div>
+
+                  <div className="text-left mt-5">
+                    <div className="text-left mt-5 text-lg">Setup the Google IC Wallet</div>
+                    <ol className="pl-5 list-disc">
+                      <li>
+                        Download and install the apk from
+                        <a
+                          href="https://drive.google.com/file/d/1VVuN1b43FY8dpYsMDtYsQEbyabwcIrh6/view?usp=sharing"
+                          download>
+                          Google Drive
+                        </a>
+                      </li>
+                      <li>Run the IC Wallet app</li>
+                      <li>
+                        Add a new credential by clicking the, &quot;Add Self Signed Document&quot;
+                        button and accepting the defaults
+                      </li>
+                    </ol>
+                  </div>
+
+                  <div className="text-left mt-5">
+                    <div className="text-left mt-5 text-lg">Test it out</div>
+
+                    <ol className="pl-5 list-disc">
+                      <li>Open Chrome on your Android device</li>
+                      <li>
+                        Navigate to&nbsp;
+                        <a href="https://bank-demo.dock.io/mdl" target="_blank" rel="noreferrer">
+                          https://bank-demo.dock.io/mdl
+                        </a>
+                      </li>
+                      <li>Try out the sample proof requests</li>
+                      <li>
+                        If successful, a Verified message will display and the response will be
+                        shown below
+                      </li>
+                    </ol>
+                  </div>
+                </Collapsible.Content>
+              </Collapsible.Root>
+            </p>
           </div>
         </div>
+        <div className="mt-10 mb-10">
+          <Separator />
+        </div>
         <div className="pt-5 grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 sm:grid-cols-1 gap-4 text-center">
           <OID4VPProofRequest
             proofRequestSetupObject={mdlProofRequest}