Add credential to sign with credential

example-web/my-app/src/App.js

@@ -2,7 +2,7 @@ import logo from "./ACME_Corporation.png";
 import Button from "@mui/material/Button";
 import "./App.css";
 
-const extensionId = "dfhkgnnnbadadbljpjnpifpbaemcgpfa";
+const extensionId = "fklmfbmpaimbgjplbambkdjphdadbmed";
 
 function App() {
   const handleRequestIdentifier = () => {

example-web/my-app/src/index.js

@@ -14,7 +14,7 @@ window.addEventListener(
     }
     if (event.data.type && event.data.type === "signify-signature") {
 
-      alert("Signed headers received\n"+ JSON.stringify(event.data.data.headers, null, 2));
+      alert("Signed headers received\n"+ JSON.stringify(event.data.data, null, 2));
     }
   },
   false

manifest.json

@@ -25,9 +25,7 @@
     {
       "matches": ["<all_urls>"],
       "run_at": "document_end",
-      "js": ["src/pages/content/index.tsx"],
-      "css": ["contentStyle.css"]
-    }
+      "js": ["src/pages/content/index.tsx"]    }
   ],
   "web_accessible_resources": [
     {

src/components/credentialCard.tsx

@@ -31,6 +31,9 @@ export function CredentialCard({ credential }: ICredential): JSX.Element {
         <p className="font-normal text-md text-gray">
           {credential.schema.description}
         </p>
+        <p className="font-bold text-gray-dark">Isuee:{" "}
+        <span className="font-normal text-gray">{credential.issueeName}</span>
+        </p>
       </div>
       <div className="flex flex-row justify-between">
         <div className="">

src/components/identifierCard.tsx

@@ -27,9 +27,9 @@ export function IdentifierCard({ aid }): JSX.Element {
         </svg>
       </div>
       <div className="">
-        <p className="font-bold text-gray-dark">AID:</p>
-        <p className="font-normal text-gray max-w-[200px] break-words">
-          {obfuscateString(aid.prefix)}
+        <p className="font-bold text-gray-dark">AID:{" "}
+        <span className="font-normal text-gray max-w-[200px] break-words">
+          {obfuscateString(aid.prefix)}</span>
         </p>
       </div>
 

src/pages/background/index.ts

@@ -50,15 +50,20 @@ chrome.runtime.onMessage.addListener(function (
         message.subtype === "get-signed-headers"
       ) {
         const origin = sender.tab.url!;
+        console.log(message.data.signin)
+
         const signedHeaders = await signifyService.signHeaders(
-          message.data.signin.identifier.name,
+          message.data.signin.identifier? message.data.signin.identifier.name : message.data.signin.credential.issueeName,
           origin
         );
         let jsonHeaders: { [key: string]: string } = {};
         for (const pair of signedHeaders.entries()) {
           jsonHeaders[pair[0]] = pair[1];
         }
-        sendResponse({ data: { headers: jsonHeaders } });
+        sendResponse({ data: { 
+          headers: jsonHeaders,
+          credential: message.data.signin.credential? message.data.signin.credential: null
+        } });
       }
 
       if (
@@ -181,7 +186,19 @@ chrome.runtime.onMessage.addListener(function (
       message.type === "fetch-resource" &&
       message.subtype === "credentials"
     ) {
-      const credentials = await signifyService.listCredentials();
+      var credentials = await signifyService.listCredentials();
+      const indentifiers = await signifyService.listIdentifiers();
+      console.log(indentifiers.aids)
+      // Add holder name to credential
+      credentials?.forEach((credential) => {
+        const issueePrefix = credential.sad.a.i
+        const aidIssuee = indentifiers.aids.find(aid => {
+          return aid.prefix === issueePrefix
+        })
+        credential.issueeName = aidIssuee.name
+      });
+
+
       sendResponse({ data: { credentials: credentials ?? [] } });
     }
   })();

src/pages/content/index.tsx

@@ -32,10 +32,22 @@ window.addEventListener(
             type: "fetch-resource",
             subtype: "tab-signin",
           });
+
+          let filteredSignins:any[] = [];
+          console.log(event.data.type)
+          tabSigninResp?.data?.signins.forEach((signin:any) => {
+            if (signin.identifier && (event.data.type===TAB_STATE.SELECT_IDENTIFIER || event.data.type===TAB_STATE.SELECT_ID_CRED)){
+              filteredSignins.push(signin)
+            }
+            if (signin.credential && (event.data.type===TAB_STATE.SELECT_CREDENTIAL || event.data.type===TAB_STATE.SELECT_ID_CRED)){
+              filteredSignins.push(signin)
+            }
+          })
+
           insertDialog(
             data.isConnected,
             data.tabUrl,
-            tabSigninResp?.data?.signins,
+            filteredSignins,
             event.data.type,
             tabSigninResp?.data?.autoSigninObj
           );