More refactoring

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

@@ -1,10 +1,8 @@
-import { useState } from "react";
 import logo from "./ACME_Corporation.png";
 import Button from "@mui/material/Button";
 import "./App.css";
 
 function App() {
-  const [password, setPassword] = useState("");
 
   const handleRequestIdentifier = () => {
     window.postMessage({ type: "init-req-identifier" }, "*");
@@ -14,47 +12,18 @@ function App() {
     window.postMessage({ type: "init-req-credential" }, "*");
   };
 
-  const handleLogout = () => {
-    localStorage.removeItem("token");
-  };
-
-  const handleAutoAuth = () => {
-    localStorage.setItem("token", password);
-  };
-
-  const storageToken = localStorage.getItem("token");
-
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} alt="logo" />
-        <input
-          id="aid-input"
-          type="password"
-          style={{ visibility: "hidden" }}
-          onChange={(e) => {
-            console.log(e);
-            setPassword(e.target.value);
-          }}
-        />
         <div className="flex flex-row gap-x-2 mt-2">
           <Button variant="contained" onClick={handleRequestIdentifier}>
             Authenticate with AID
           </Button>
-          {/* <Button variant="contained" onClick={handleRequestCredential}>
+          <Button variant="contained" onClick={handleRequestCredential}>
             Authenticate with Credential
-          </Button> */}
-        </div>
-        {storageToken ? null : (
-          <Button
-            id="login-btn"
-            style={{ visibility: "hidden" }}
-            variant="contained"
-            onClick={handleAutoAuth}
-          >
-            Auth with AID
           </Button>
-        )}
+        </div>
       </header>
     </div>
   );

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

@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-// import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-// reportWebVitals();

src/pages/background/index.ts

@@ -32,16 +32,15 @@ chrome.runtime.onMessage.addListener(function (
         message.subtype === "check-agent-connection"
       ) {
         const isConnected = await signifyService.isConnected();
-        sendResponse({ data: { isConnected, meta: { tab: sender?.tab } } });
+        sendResponse({ data: { isConnected, tabUrl: sender?.tab.url } });
       }
 
       if (
         message.type === "authentication" &&
         message.subtype === "get-signed-headers"
       ) {
         const origin = sender.tab.url!;
-        // TODO  method and path should be passed from web page
-        const signedHeaders = await signifyService.signHeaders(message.data.signin.identifier.name, "GET", "/", origin);
+        const signedHeaders = await signifyService.signHeaders(message.data.signin.identifier.name, origin);
         let jsonHeaders: { [key: string]: string; } = {};
         for (const pair of signedHeaders.entries()) {
           jsonHeaders[pair[0]] = pair[1];
@@ -66,7 +65,7 @@ chrome.runtime.onMessage.addListener(function (
         message.subtype === "check-agent-connection"
       ) {
         const isConnected = await signifyService.isConnected();
-        sendResponse({ data: { isConnected, meta: { tab: sender?.tab } } });
+        sendResponse({ data: { isConnected } });
       }
 
       if (
@@ -95,19 +94,19 @@ chrome.runtime.onMessage.addListener(function (
 
     if (message.type === "tab" && message.subtype === "get-tab-state") {
       const currentDomain = await getCurrentDomain();
-      const appData = await webappService.getAppData(currentDomain?.origin);
+      const appData = await webappService.getAppData(currentDomain!.origin);
       sendResponse({ data: appData });
     }
 
     if (message.type === "tab" && message.subtype === "set-app-state") {
       const currentDomain = await getCurrentDomain();
-      await webappService.setAppData(currentDomain.origin, message.data);
-      const appData = await webappService.getAppData(currentDomain.origin);
+      await webappService.setAppData(currentDomain!.origin, message.data);
+      const appData = await webappService.getAppData(currentDomain!.origin);
       sendResponse({ data: appData });
     }
 
     if (message.type === "create-resource" && message.subtype === "signin") {
-      const signins = await browserStorageService.getValue("signins");
+      const signins = await browserStorageService.getValue("signins") as any[];
       const currentDomain = await getCurrentDomain();
 
       const { identifier, credential } = message.data;
@@ -116,7 +115,7 @@ chrome.runtime.onMessage.addListener(function (
         credential,
         createdAt: new Date().getTime(),
         updatedAt: new Date().getTime(),
-        domain: currentDomain.origin,
+        domain: currentDomain!.origin,
       };
       if (signins && signins?.length) {
         await browserStorageService.setValue("signins", [

src/pages/background/services/signify.ts

@@ -54,7 +54,7 @@ const Signify = () => {
     await userService.removePasscode();
   };
 
-  const signHeaders = async (aidName: string, method:string, path:string, origin: string) => {
+  const signHeaders = async (aidName: string, origin: string) => {
     const hab = await _client?.identifiers().get(aidName);
     const keeper = _client?.manager!.get(hab);
 
@@ -72,17 +72,17 @@ const Signify = () => {
     headers.set('Origin', origin);
 
     const fields = [
-      '@method',
-      '@path',
+      // '@method',
+      // '@path',
       'signify-resource',
       'signify-timestamp',
       'origin'
     ];
 
     const signed_headers = authenticator.sign(
       headers,
-      method,
-      path,
+      "",
+      "",
       fields
     ); 
 

src/pages/background/utils.ts

@@ -13,7 +13,7 @@ export const isValidUrl = (str: string) => {
   }
 };
 
-export const getCurrentTab = () => {
+export const getCurrentTab = (): Promise<chrome.tabs.Tab> => {
   return new Promise((resolve) => {
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       resolve(tabs[0]);
@@ -23,7 +23,7 @@ export const getCurrentTab = () => {
 
 export const getCurrentDomain = async () => {
   const currentTab = await getCurrentTab();
-  return currentTab ? new URL(currentTab?.url) : null;
+  return currentTab ? new URL(currentTab.url!) : null;
 };
 
 export const obfuscateString = (inputString: string) => {

src/pages/content/index.tsx

@@ -16,27 +16,22 @@ window.addEventListener(
       switch (event.data.type) {
         case "init-req-identifier":
         case "init-req-credential":
-          // const manifest = chrome.runtime.getManifest();
-          const loginBtn = document.getElementById("login-btn");
           const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
             type: "authentication",
             subtype: "check-agent-connection",
           });
-          if (loginBtn) {
-            const tabSigninResp = await chrome.runtime.sendMessage<
-              IMessage<void>
-            >({
-              type: "fetch-resource",
-              subtype: "tab-signin",
-            });
-            insertDialog({
-              ...data,
-              signins: tabSigninResp?.data?.signins,
-              eventType: event.data.type,
-            });
-          } else {
-            removeDialog();
-          }
+          const tabSigninResp = await chrome.runtime.sendMessage<
+            IMessage<void>
+          >({
+            type: "fetch-resource",
+            subtype: "tab-signin",
+          });
+          insertDialog(
+            data.isConnected,
+            data.tabUrl,
+            tabSigninResp?.data?.signins,
+            "init-req-identifier"
+          );
           break;
       }
     }
@@ -67,17 +62,17 @@ chrome.runtime.onMessage.addListener(async function (
         type: "fetch-resource",
         subtype: "tab-signin",
       });
-      insertDialog({
-        ...data,
-        signins: tabSigninResp?.data?.signins,
-        eventType: "init-req-identifier",
-      });
+      insertDialog(
+        data.isConnected,
+        data.tabUrl,
+        tabSigninResp?.data?.signins,
+        "init-req-identifier"
+      );
     }
   }
 });
 
-function insertDialog(data: any) {
-  console.log("inserting dialog");
+function insertDialog(isConnected: boolean, tabUrl: string, signins: any, eventType: string) {
   const div = document.createElement("div");
   div.id = "__root";
   document.body.appendChild(div);
@@ -86,10 +81,10 @@ function insertDialog(data: any) {
   const root = createRoot(rootContainer!);
   root.render(
     <Dialog
-      isConnected={data.isConnected}
-      tab={data?.meta?.tab}
-      signins={data.signins}
-      eventType={data.eventType}
+      isConnected={isConnected}
+      tabUrl={tabUrl}
+      signins={signins}
+      eventType={eventType}
     />
   );
 }

src/pages/dialog/Dialog.tsx

@@ -4,10 +4,10 @@ import { PopupPrompt } from "./popupPrompt";
 import { SigninItem } from "./signin";
 
 export default function Dialog({
-  isConnected,
-  tab,
-  signins,
-  eventType,
+  isConnected = false,
+  tabUrl = "",
+  signins = [],
+  eventType = "",
 }): JSX.Element {
   const logo = chrome.runtime.getURL("src/assets/img/128_keri_logo.png");
   const [showPopupPrompt, setShowPopupPrompt] = useState(false);
@@ -65,14 +65,14 @@ export default function Dialog({
           <img src={logo} className="h-8" alt="logo" />
           <p className="text-2xl font-bold text-green">Sign in with KERI</p>
         </div>
-        {!signins?.length && isConnected ? (
+        {!signins.length || !isConnected ? (
           <p className="mt-2 text-sm text-green max-w-[280px] font-bold">
-            <span className="">{tab?.url}</span> is requesting an{" "}
-            {eventType === "init-req-identifier" ? "ID" : "credential"}
+            <span className="">{tabUrl}</span> requests authentication with{" "}
+            {eventType === "init-req-identifier" ? "AID" : "credential"}
           </p>
         ) : null}
 
-        {signins?.length && isConnected ? (
+        {signins.length && isConnected ? (
           <>
             {signins?.map((signin) => (
               <SigninItem signin={signin} />

src/pages/dialog/signin.tsx

@@ -1,7 +1,6 @@
-import { APP_STATE } from "@pages/popup/constants";
-import { sign } from "crypto";
 
-export const SigninItem = ({ signin }): JSX.Element => {
+// TODO do not pass the full signins stored object (only AID name, schema name, web url)
+export const SigninItem = ({ signin }: { signin: any }): JSX.Element => {
   const handleClick = async () => {
     const headers = await chrome.runtime.sendMessage({
       type: "authentication",