Feat: replace custom radio selector by selectable card

src/components/identifierCard.tsx

@@ -1,3 +1,4 @@
+import { obfuscateString } from "@pages/background/utils";
 interface IIdentifier {}
 
 export function IdentifierCard({ aid }): JSX.Element {
@@ -26,9 +27,9 @@ export function IdentifierCard({ aid }): JSX.Element {
         </svg>
       </div>
       <div className="">
-        <p className="font-bold text-gray-dark">ID:</p>
+        <p className="font-bold text-gray-dark">AID:</p>
         <p className="font-normal text-gray max-w-[200px] break-words">
-          {aid.prefix}
+          {obfuscateString(aid.prefix)}
         </p>
       </div>
       <div className="flex flex-row justify-between">

src/components/selectCredential.tsx

@@ -1,13 +1,10 @@
 import { useState, useEffect } from "react";
-import { CustomRadio } from "@components/customRadio";
 import { CredentialCard } from "@components/credentialCard";
 import { IMessage } from "@pages/background/types";
 import { APP_STATE } from "@pages/popup/constants";
 
 export function SelectCredential(): JSX.Element {
   const [credentials, setCredentials] = useState([]);
-  const [selectedCredential, setSelectedCredential] = useState(null);
-
   const fetchCredentials = async () => {
     const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
       type: "fetch-resource",
@@ -16,12 +13,12 @@ export function SelectCredential(): JSX.Element {
     setCredentials(data.credentials);
   };
 
-  const createSigninWithCredential = async () => {
+  const createSigninWithCredential = async (credential) => {
     const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
       type: "create-resource",
       subtype: "signin",
       data: {
-        credential: selectedCredential,
+        credential,
       },
     });
     await chrome.runtime.sendMessage({
@@ -42,25 +39,18 @@ export function SelectCredential(): JSX.Element {
     <>
       {credentials.map((credential, index) => (
         <div key={index} className="my-2 mx-4">
-          <CustomRadio
-            id={credential?.schema?.title}
-            checked={
-              selectedCredential?.schema?.title === credential?.schema?.title
-            }
-            onClick={() => setSelectedCredential(credential)}
-            component={<CredentialCard credential={credential} />}
-          />
+          <div className=" relative opacity-80 hover:opacity-100">
+            <CredentialCard credential={credential} />
+            <button
+              type="button"
+              onClick={() => createSigninWithCredential(credential)}
+              className=" absolute right-0 bottom-0 text-white bg-green font-medium rounded-full text-xs px-2 py-1 text-center me-2 mb-2"
+            >
+              {"Select >"}
+            </button>
+          </div>
         </div>
       ))}
-      <button
-        disabled={!selectedCredential}
-        onClick={createSigninWithCredential}
-        className={`fixed bottom-0 right-4 text-white ${
-          selectedCredential ? "bg-green" : " bg-gray"
-        } focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2`}
-      >
-        Select
-      </button>
     </>
   );
 }

src/components/selectIdentifier.tsx

@@ -1,13 +1,10 @@
 import { useState, useEffect } from "react";
-import { CustomRadio } from "@components/customRadio";
 import { IdentifierCard } from "@components/identifierCard";
 import { IMessage } from "@pages/background/types";
 import { APP_STATE } from "@pages/popup/constants";
 
 export function SelectIdentifier(): JSX.Element {
   const [aids, setAids] = useState([]);
-  const [selectedAid, setSelectedAid] = useState(null);
-
   const fetchIdentifiers = async () => {
     const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
       type: "fetch-resource",
@@ -17,12 +14,12 @@ export function SelectIdentifier(): JSX.Element {
     setAids(data.aids);
   };
 
-  const createSigninWithIdentifiers = async () => {
+  const createSigninWithIdentifiers = async (aid) => {
     const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
       type: "create-resource",
       subtype: "signin",
       data: {
-        identifier: selectedAid,
+        identifier: aid,
       },
     });
     await chrome.runtime.sendMessage({
@@ -52,23 +49,18 @@ export function SelectIdentifier(): JSX.Element {
     <>
       {aids.map((aid, index) => (
         <div key={index} className="my-2 mx-4">
-          <CustomRadio
-            id={aid.name}
-            checked={selectedAid?.prefix === aid?.prefix}
-            onClick={() => setSelectedAid(aid)}
-            component={<IdentifierCard aid={aid} />}
-          />
+          <div className=" relative opacity-80 hover:opacity-100">
+            <IdentifierCard aid={aid} />
+            <button
+              type="button"
+              onClick={() => createSigninWithIdentifiers(aid)}
+              className=" absolute right-0 bottom-0 text-white bg-green font-medium rounded-full text-xs px-2 py-1 text-center me-2 mb-2"
+            >
+              {"Select >"}
+            </button>
+          </div>
         </div>
       ))}
-      <button
-        disabled={!selectedAid}
-        onClick={createSigninWithIdentifiers}
-        className={`fixed bottom-0 right-4 text-white ${
-          selectedAid ? "bg-green" : " bg-gray"
-        } focus:outline-none font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2`}
-      >
-        Select
-      </button>
     </>
   );
 }

src/pages/background/utils.ts

@@ -25,3 +25,17 @@ export const getCurrentDomain = async () => {
   const currentTab = await getCurrentTab();
   return currentTab ? new URL(currentTab?.url) : null;
 };
+
+export const obfuscateString = (inputString: string) => {
+  const prefixLength = 12;
+  const suffixLength = 8;
+
+  if (inputString.length <= prefixLength + suffixLength) {
+    return inputString;
+  }
+
+  const prefix = inputString.slice(0, prefixLength);
+  const suffix = inputString.slice(-suffixLength);
+
+  return `${prefix}...${suffix}`;
+}

src/pages/dialog/Dialog.tsx

@@ -12,24 +12,35 @@ export default function Dialog({
   const logo = chrome.runtime.getURL("src/assets/img/128_keri_logo.png");
   const [showPopupPrompt, setShowPopupPrompt] = useState(false);
 
-  const setAppState = async () => {
+  const setAppState = async (state: string) => {
     await chrome.runtime.sendMessage({
       type: "tab",
       subtype: "set-app-state",
       data: {
-        appState:
-          eventType === "init-req-identifier"
-            ? APP_STATE.SELECT_IDENTIFIER
-            : eventType === "init-req-credential"
-            ? APP_STATE.SELECT_CREDENTIAL
-            : APP_STATE.DEFAULT,
+        appState: state,
       },
     });
   };
 
+  const getEventTypeAppState = () => {
+    return eventType === "init-req-identifier"
+      ? APP_STATE.SELECT_IDENTIFIER
+      : eventType === "init-req-credential"
+      ? APP_STATE.SELECT_CREDENTIAL
+      : APP_STATE.DEFAULT;
+  };
+
+  const handleClick = () => {
+    setAppState(getEventTypeAppState());
+    setShowPopupPrompt(true);
+  };
+
   useEffect(() => {
     if (!signins?.length) {
-      setAppState();
+      setAppState(getEventTypeAppState());
+      setShowPopupPrompt(true);
+    } else if (!isConnected) {
+      setAppState(APP_STATE.DEFAULT);
       setShowPopupPrompt(true);
     }
   }, []);
@@ -66,7 +77,10 @@ export default function Dialog({
             {signins?.map((signin) => (
               <SigninItem signin={signin} />
             ))}
-            <div className="text-green font-bold text-sm cursor-pointer">
+            <button
+              onClick={handleClick}
+              className="text-green font-bold text-sm cursor-pointer"
+            >
               Open{" "}
               <span className="inline-block">
                 <img src={logo} className="h-4" alt="logo" />
@@ -75,7 +89,7 @@ export default function Dialog({
               {eventType === "init-req-identifier"
                 ? "identifier"
                 : "credential"}{" "}
-            </div>
+            </button>
           </>
         ) : null}
       </div>

src/pages/dialog/signin.tsx

@@ -40,7 +40,7 @@ export const SigninItem = ({ signin }): JSX.Element => {
       <button
         type="button"
         onClick={handleClick}
-        className="text-white bg-green font-medium rounded-full text-sm px-2 py-1 text-center me-2 mb-2"
+        className="text-white self-end bg-green font-medium rounded-full text-sm px-2 py-1 text-center"
       >
         Sign in
       </button>

src/pages/popup/Popup.tsx

@@ -7,7 +7,8 @@ import { Main } from "@components/main";
 
 const url = "https://keria-dev.rootsid.cloud/admin";
 const boot_url = "https://keria-dev.rootsid.cloud";
-const password = "j2H9kCTbGybPkrTs9cGQA";
+const password = "CdsUqv_8-F5otMp5feNpps";
+const password2 = "j2H9kCTbGybPkrTs9cGQA";
 
 interface IConnect {
   passcode?: string;