fix: remove init-req* event and replace with TAB_STATE

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

@@ -3,27 +3,29 @@ import Button from "@mui/material/Button";
 import "./App.css";
 
 function App() {
-
   const handleRequestIdentifier = () => {
-    window.postMessage({ type: "init-req-identifier" }, "*");
+    window.postMessage({ type: "select-identifier" }, "*");
   };
 
   const handleRequestCredential = () => {
-    window.postMessage({ type: "init-req-credential" }, "*");
+    window.postMessage({ type: "select-credential" }, "*");
   };
 
   const handleSyncRequest = () => {
     // TODO extension Id harcoded just for testing, need to find a way to get it dynamically
-    chrome.runtime.sendMessage("fklmfbmpaimbgjplbambkdjphdadbmed", {data: "test"},
-      function(response) {
-        if (!response.success)
-          console.log(response.data)
-          alert("Signed headers received\n"+ JSON.stringify(response.data.headers, null, 2));
-      });
+    chrome.runtime.sendMessage(
+      "fklmfbmpaimbgjplbambkdjphdadbmed",
+      { data: "test" },
+      function (response) {
+        if (!response.success) console.log(response.data);
+        alert(
+          "Signed headers received\n" +
+            JSON.stringify(response.data.headers, null, 2)
+        );
+      }
+    );
   };
 
-
-
   return (
     <div className="App">
       <header className="App-header">

src/components/signinList.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { TAB_STATE } from "@pages/popup/constants";
 import { SigninCard } from "@components/signinCard";
 import { Loader } from "@components/loader";
 import { IMessage } from "@pages/background/types";
@@ -31,7 +32,7 @@ export function SigninList(): JSX.Element {
         chrome.tabs.sendMessage(tabs[0].id!, {
           type: "tab",
           subtype: "reload-state",
-          eventType: "init-req-identifier",
+          eventType: TAB_STATE.SELECT_IDENTIFIER,
         });
       });
     }
@@ -53,7 +54,7 @@ export function SigninList(): JSX.Element {
         chrome.tabs.sendMessage(tabs[0].id!, {
           type: "tab",
           subtype: "reload-state",
-          eventType: "init-req-identifier",
+          eventType: TAB_STATE.SELECT_IDENTIFIER,
         });
       });
     }

src/pages/content/index.tsx

@@ -17,8 +17,8 @@ window.addEventListener(
     console.log("Content script received from web page: " + event.data.type);
     if (event.data.type) {
       switch (event.data.type) {
-        case "init-req-identifier":
-        case "init-req-credential":
+        case TAB_STATE.SELECT_IDENTIFIER:
+        case TAB_STATE.SELECT_CREDENTIAL:
           setTabState(TAB_STATE.DEFAULT);
           const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
             type: "authentication",
@@ -45,7 +45,7 @@ window.addEventListener(
   false
 );
 
-// Handle messages from background script
+// Handle messages from background script and popup
 chrome.runtime.onMessage.addListener(async function (
   message,
   sender,

src/pages/dialog/Dialog.tsx

@@ -15,11 +15,7 @@ export default function Dialog({
   const [showPopupPrompt, setShowPopupPrompt] = useState(false);
 
   const getEventTypeAppState = () => {
-    return eventType === "init-req-identifier"
-      ? TAB_STATE.SELECT_IDENTIFIER
-      : eventType === "init-req-credential"
-      ? TAB_STATE.SELECT_CREDENTIAL
-      : TAB_STATE.DEFAULT;
+    return eventType ?? TAB_STATE.DEFAULT;
   };
 
   const handleClick = () => {
@@ -71,7 +67,7 @@ export default function Dialog({
         {!signins.length || !isConnected ? (
           <p className="mt-2 text-sm text-green max-w-[280px] font-bold">
             <span className="">{tabUrl}</span> requests authentication with{" "}
-            {eventType === "init-req-identifier" ? "AID" : "credential"}
+            {eventType === TAB_STATE.SELECT_IDENTIFIER ? "AID" : "credential"}
           </p>
         ) : null}
 
@@ -89,7 +85,7 @@ export default function Dialog({
                 <img src={logo} className="h-4" alt="logo" />
               </span>{" "}
               to select other{" "}
-              {eventType === "init-req-identifier" ? "AID" : "credential"}{" "}
+              {eventType === TAB_STATE.SELECT_IDENTIFIER ? "AID" : "credential"}{" "}
             </button>
           </>
         ) : null}