Storage Service, Integrate Signify calls for identifiers and credentials

src/components/appbar.tsx

@@ -0,0 +1,21 @@
+import logo from "@assets/img/128_keri_logo.png";
+
+interface IAppbar {}
+
+export function Appbar(props: IAppbar): JSX.Element {
+  return (
+    <nav className="bg-white border-gray-200 dark:bg-gray-900 p-2">
+      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+        <a
+          href="https://github.com/WebOfTrust/signify-browser-extension"
+          className="flex items-center space-x-3 rtl:space-x-reverse"
+        >
+          <img src={logo} className="h-8" alt="logo" />
+          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+            KERI
+          </span>
+        </a>
+      </div>
+    </nav>
+  );
+}

src/components/credentialCard.tsx

@@ -0,0 +1,83 @@
+interface ICredential {
+  credential: any;
+}
+
+export function CredentialCard({ credential }: ICredential): JSX.Element {
+  return (
+    <div className="m-auto max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow text-gray-900">
+      <div className="mb-2 flex flex-row justify-between">
+        <div>
+          <p className="font-bold text-lg text-gray-dark">
+            {credential.schema.title}
+          </p>
+          <p className="font-normal text-md text-gray">
+            {credential.schema.credentialType}
+          </p>
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          className="w-6 h-6"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"
+          />
+        </svg>
+      </div>
+
+      <div className="mb-2">
+        {/* <p className="font-bold text-lg text-gray-dark">Name</p> */}
+        <p className="font-normal text-md text-gray">
+          {credential.schema.description}
+        </p>
+      </div>
+      <div className="mb-2 flex flex-row justify-between">
+        <div className="">
+          <p className="font-bold text-gray text-lg">November 08, 2023</p>
+        </div>
+        {credential.status?.et === "iss" ? (
+          <div className="flex flex-col items-center text-green">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              className="w-6 h-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"
+              />
+            </svg>
+            <p>Valid</p>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center text-red">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              className="w-6 h-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m6 4.125 2.25 2.25m0 0 2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+              />
+            </svg>
+            <p>Revoked</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/credentialList.tsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import { CredentialCard } from "@components/credentialCard";
+import { IMessage } from "@pages/background/types";
+
+export function CredentialList(): JSX.Element {
+  const [credentials, setCredentials] = useState([]);
+  const fetchCredentials = async () => {
+    const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+      type: "fetch-resource",
+      subtype: "credentials",
+    });
+    console.log("credentials", data);
+    setCredentials(data.credentials);
+  };
+
+  useEffect(() => {
+    fetchCredentials();
+  }, []);
+
+  return (
+    <>
+      {credentials.map((credential, index) => (
+        <div key={index} className="my-2 mx-4">
+          <CredentialCard credential={credential} />
+        </div>
+      ))}
+    </>
+  );
+}

src/components/identifierCard.tsx

@@ -0,0 +1,45 @@
+interface IIdentifier {}
+
+export function IdentifierCard({ aid }): JSX.Element {
+  return (
+    <div className="m-auto max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow text-gray-900">
+      <div className="mb-3 flex flex-row justify-between">
+        <div>
+          <p className=" mb-1 font-bold text-gray-dark">Alias:</p>
+          <p className="font-normal text-gray">{aid.name}</p>
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          className="w-6 h-6"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
+          />
+        </svg>
+      </div>
+
+      <div className="mb-3">
+        <p className=" mb-1 font-bold text-gray-dark">ID:</p>
+        <p className="font-normal text-gray">{aid.prefix}</p>
+      </div>
+      <div className="mb-3 flex flex-row justify-between">
+        <div className="">
+          <p className=" mb-1 font-bold text-gray-dark">
+            Credentials Received:
+          </p>
+          <p className="font-normal text-gray">13</p>
+        </div>
+        <div className="">
+          <p className=" mb-1 font-bold text-gray-dark">Last Used:</p>
+          <p className="font-normal text-gray">November 08, 2023</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/identifierList.tsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import { IdentifierCard } from "@components/identifierCard";
+import { IMessage } from "@pages/background/types";
+
+export function IdentifierList(): JSX.Element {
+  const [aids, setAids] = useState([]);
+  const fetchIdentifiers = async () => {
+    const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+      type: "fetch-resource",
+      subtype: "identifiers",
+    });
+    console.log("data", data);
+    setAids(data.aids);
+  };
+
+  useEffect(() => {
+    fetchIdentifiers();
+  }, []);
+
+  return (
+    <>
+      {aids.map((aid, index) => (
+        <div key={index} className="my-2 mx-4">
+          <IdentifierCard aid={aid} />
+        </div>
+      ))}
+    </>
+  );
+}

src/components/main.tsx

@@ -1,78 +1,42 @@
-import { userService } from "@pages/background/services/user";
+import { useState } from "react";
+import { Appbar } from "@components/appbar";
+import { Sidebar } from "@components/sidebar";
+import { IdentifierList } from "@components/identifierList";
+import { CredentialList } from "@components/credentialList";
+import { SigninCard } from "@components/signinCard";
 
 interface IMain {
-  handleSignout: () => void;
+  handleDisconnect: () => void;
 }
 
 export function Main(props: IMain): JSX.Element {
+  const [activeSidebar, setActiveSidebar] = useState("Identifiers");
+  const renderItems = () => {
+    switch (activeSidebar) {
+      case "Credentials":
+        return <CredentialList />;
+      case "Sign Ins":
+        return <SigninCard />;
+
+      default:
+        return <IdentifierList />;
+    }
+  };
+
   return (
-    <main>
-      <aside
-        id="default-sidebar"
-        className="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0"
-        aria-label="Sidebar"
-      >
-        <div className="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
-          <ul className="space-y-2 font-medium">
-            <li>
-              <a
-                href="#"
-                className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
-              >
-                <svg
-                  className="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 22 21"
-                >
-                  <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z" />
-                  <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
-                </svg>
-                <span className="ms-3">Identifiers</span>
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
-              >
-                <svg
-                  className="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 18 18"
-                >
-                  <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z" />
-                </svg>
-                <span className="ms-3 whitespace-nowrap">Credentials</span>
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
-              >
-                <svg
-                  className="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z" />
-                </svg>
-                <span className="ms-3 whitespace-nowrap">Sign in</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </aside>
-      <div className="p-4 sm:ml-64">
-        <button onClick={props.handleSignout}>Logout</button>
-        <div className="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700">
-          <div className="grid grid-cols-3 gap-4 mb-4">Hello World</div>
+    <main className="">
+      {/* <Appbar /> */}
+      <Sidebar
+        active={activeSidebar}
+        onClickLink={setActiveSidebar}
+        onSignout={props.handleDisconnect}
+      />
+      <div className="rounded p-2 sm:ml-48 sm:mt-4 bg-gray-dark text-gray-light mr-4">
+        <div className="">
+          <p className="text-xl capitalize font-bold">{activeSidebar}</p>
+          <div className="bg-black py-8 rounded-3xl m-5 max-h-[576px] overflow-auto">
+            {renderItems()}
+          </div>
         </div>
       </div>
     </main>