DO NOT MERGE: Feat/temp firefox

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

@@ -8,7 +8,7 @@ import {
   requestCredential,
   requestAidORCred,
   trySettingVendorUrl,
-} from "signify-polaris-web";
+} from "./signify-polaris-web";
 import Button from "@mui/material/Button";
 import Alert from "@mui/material/Alert";
 import CircularProgress from "@mui/material/CircularProgress";

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

@@ -0,0 +1,105 @@
+import { pubsub } from "./pubsub";
+
+var extensionId = "";
+
+window.addEventListener(
+  "message",
+  async (event) => {
+    // Accept messages only from same window
+    if (event.source !== window) {
+      return;
+    }
+
+    if (event.data.type && event.data.type === "signify-extension") {
+      console.log("Content script loaded from polaris-web");
+      extensionId = event.data.data.extensionId;
+      pubsub.publish("signify-extension-loaded", extensionId);
+    }
+
+    if (event.data.type && event.data.type === "signify-signature") {
+      pubsub.publish("signify-signature", event.data.data);
+    }
+  },
+  false
+);
+
+const requestAid = () => {
+  window.postMessage({ type: "select-identifier" }, "*");
+};
+
+const requestCredential = () => {
+  window.postMessage({ type: "select-credential" }, "*");
+};
+
+const requestAidORCred = () => {
+  window.postMessage({ type: "select-aid-or-credential" }, "*");
+};
+
+const requestAutoSignin = async () => {
+  window.postMessage(
+    {
+      type: "fetch-resource",
+      subtype: "auto-signin-signature",
+    },
+    "*"
+  );
+  //   const { data, error } = await chrome.runtime.sendMessage(extensionId, {
+  //     type: "fetch-resource",
+  //     subtype: "auto-signin-signature",
+  //   });
+  //   if (error) {
+  //     window.postMessage({ type: "select-auto-signin" }, "*");
+  //   } else {
+  //     pubsub.publish("signify-signature", data);
+  //   }
+};
+
+const isExtensionInstalled = (func) => {
+  const timeout = setTimeout(() => {
+    func(false);
+  }, 1000);
+  pubsub.subscribe("signify-extension-loaded", (_event, data) => {
+    func(data);
+    clearTimeout(timeout);
+    pubsub.unsubscribe("signify-extension-loaded");
+  });
+};
+
+const trySettingVendorUrl = async (vendorUrl) => {
+  window.postMessage(
+    {
+      type: "vendor-info",
+      subtype: "attempt-set-vendor-url",
+      data: {
+        vendorUrl,
+      },
+    },
+    "*"
+  );
+  //   await chrome.runtime.sendMessage(extensionId, {
+  //     type: "vendor-info",
+  //     subtype: "attempt-set-vendor-url",
+  //     data: {
+  //       vendorUrl,
+  //     },
+  //   });
+};
+
+const subscribeToSignature = (func) => {
+  pubsub.subscribe("signify-signature", (_event, data) => func(data));
+};
+
+const unsubscribeFromSignature = () => {
+  pubsub.unsubscribe("signify-signature");
+};
+
+export {
+  requestAid,
+  requestCredential,
+  requestAidORCred,
+  requestAutoSignin,
+  subscribeToSignature,
+  unsubscribeFromSignature,
+  isExtensionInstalled,
+  trySettingVendorUrl,
+};

example-web/my-app/src/signify-polaris-web/pubsub.js

@@ -0,0 +1,51 @@
+export const pubsub = (() => {
+  const events = {};
+
+  let subscribersId = -1;
+
+  function publish(event, data) {
+    if (!events[event]) {
+      return false;
+    }
+
+    const subscribers = events[event];
+    subscribers.forEach((subscriber) => {
+      subscriber.func(event, data);
+    });
+    return true;
+  }
+
+  function subscribe(event, func) {
+    if (!events[event]) {
+      events[event] = [];
+    }
+
+    subscribersId += 1;
+    const token = subscribersId.toString();
+    events[event].push({
+      token,
+      func,
+    });
+    return token;
+  }
+
+  function unsubscribe(token) {
+    const found = Object.keys(events).some((event) =>
+      events[event].some((subscriber, index) => {
+        const areEqual = subscriber.token === token.toString();
+        if (areEqual) {
+          events[event].splice(index, 1);
+        }
+        return areEqual;
+      })
+    );
+
+    return found ? token : null;
+  }
+
+  return {
+    publish,
+    subscribe,
+    unsubscribe,
+  };
+})();

src/components/credentialCard.tsx

@@ -23,7 +23,7 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element {
   return (
     <Card>
       <>
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row justify-between text-xs">
           <div>
             <Text className="font-bold" $color="heading">
               {credential.schema.title}
@@ -47,7 +47,7 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element {
             />
           </svg>
         </div>
-        <div className="">
+        <div className="text-xs">
           <Text className="font-normal text-md" $color="text">
             {credential.schema.description}
           </Text>
@@ -60,7 +60,7 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element {
             </>
           </Text>
         </div>
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row justify-between text-xs">
           <div className="">
             <Text className="font-bold" $color="heading">
               {formatMessage({ id: "credential.lastUsed.label" })}{" "}

src/components/identifierCard.tsx

@@ -14,7 +14,7 @@ export function IdentifierCard({ aid }: IIdentifierCard): JSX.Element {
   return (
     <Card>
       <>
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row justify-between text-xs">
           <div>
             <Text className="font-bold" $color="heading">
               {formatMessage({ id: "identifier.alias.label" })}{" "}
@@ -39,7 +39,7 @@ export function IdentifierCard({ aid }: IIdentifierCard): JSX.Element {
           </svg>
         </div>
         <div>
-          <Text className="font-bold" $color="heading">
+          <Text className="font-bold text-xs" $color="heading">
             {formatMessage({ id: "identifier.aid.label" })}{" "}
             <span data-tooltip-id={aid.prefix}>
               <Subtext
@@ -52,7 +52,7 @@ export function IdentifierCard({ aid }: IIdentifierCard): JSX.Element {
           </Text>
         </div>
         <ReactTooltip id={aid.prefix} clickable>
-          <div className="flex flex-row gap-x-1">
+          <div className="flex flex-row gap-x-1 text-xs">
             <p>{aid.prefix}</p>
             <button
               onClick={() => {

src/components/sidebar.tsx

@@ -128,7 +128,7 @@ export function Sidebar(props: ISidebar): JSX.Element {
           {SIDEBAR.map((element, index) => (
             <li
               key={index}
-              className={`${
+              className={`text-xs ${
                 props.disabled ? "cursor-not-allowed" : "cursor-pointer"
               }`}
               aria-disabled={props.disabled}
@@ -146,7 +146,7 @@ export function Sidebar(props: ISidebar): JSX.Element {
         </ul>
       </div>
       <ul className="px-3 font-medium">
-        <li className="cursor-pointer">
+        <li className="text-xs cursor-pointer">
           <StyledBottomMenu
             onClick={props.onSignout}
             className={`flex items-center p-2 rounded-lg group`}

src/components/signinCard.tsx

@@ -17,7 +17,7 @@ export function SigninCard({
   return (
     <Card>
       <>
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row justify-between text-xs">
           <div>
             <Text className="font-bold" $color="heading">
               {formatMessage({ id: "signin.website" })}
@@ -42,7 +42,7 @@ export function SigninCard({
           </svg>
         </div>
 
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row justify-between text-xs">
           <div>
             <Text className="font-bold" $color="heading">
               {signin?.identifier
@@ -62,7 +62,7 @@ export function SigninCard({
             </Text>
           </div>
         </div>
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row justify-between text-xs">
           <div>
             <Text className="font-bold" $color="heading">
               {formatMessage({ id: "signin.autoSignin" })}