Ability to add agent url on config screen

package.json

@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.6.2",
+    "react-tooltip": "^5.26.2",
     "styled-components": "^6.1.8",
     "webextension-polyfill": "^0.10.0"
   },

src/_locales/en.json

@@ -4,6 +4,7 @@
   "account.onboard.cta": "Don't have a KERIA agent?",
   "account.settings": "Settings",
   "account.support": "support",
+  "action.back": "Back",
   "action.clickToRemove": "click to remove",
   "action.connect": "Connect",
   "action.create": "Create",
@@ -15,9 +16,12 @@
   "action.select": "Select",
   "action.toProceed": "to proceed",
   "action.toSelectOther": "to select other",
+  "config.agentUrl.label": "Agent Url:",
+  "config.agentUrl.placeholder": "Enter agent url",
   "config.error.enterUrl": "Enter a valid url",
-  "config.error.invalidUrl": "Invalid url, Vendor configuration not found",
+  "config.error.invalidVendorUrl": "Invalid url, Vendor configuration not found",
   "config.error.setUrl": "Vendor url is not set",
+  "config.error.vendorData.agentUrls": "response missing agent urls, contact support",
   "config.language.label": "Language",
   "config.vendorUrl.label": "Vendor Url:",
   "config.vendorUrl.placeholder": "Enter vendor url",

src/_locales/es-419.json

@@ -4,6 +4,7 @@
   "account.onboard.cta": "¿No tienes un agente KERIA?",
   "account.settings": "Ajustes",
   "account.support": "soporte",
+  "action.back": "Atrás",
   "action.clickToRemove": "haga clic para eliminar",
   "action.connect": "Conectar",
   "action.create": "Crear",
@@ -15,9 +16,12 @@
   "action.select": "Seleccionar",
   "action.toProceed": "para proceder",
   "action.toSelectOther": "seleccionar otro",
+  "config.agentUrl.label": "URL del agente:",
+  "config.agentUrl.placeholder": "Ingrese la URL del agente",
   "config.error.enterUrl": "Introduce una URL válida",
-  "config.error.invalidUrl": "URL no válida, configuración del proveedor no encontrada",
+  "config.error.invalidVendorUrl": "URL no válida, configuración del proveedor no encontrada",
   "config.error.setUrl": "La URL del proveedor no está configurada",
+  "config.error.vendorData.agentUrls": "URL de agentes faltantes de respuesta, comuníquese con el soporte",
   "config.language.label": "Idioma",
   "config.vendorUrl.label": "URL del proveedor:",
   "config.vendorUrl.placeholder": "Ingrese la URL del proveedor",

src/_locales/es.json

@@ -4,6 +4,7 @@
   "account.onboard.cta": "¿No tienes un agente KERIA?",
   "account.settings": "Ajustes",
   "account.support": "soporte",
+  "action.back": "Atrás",
   "action.clickToRemove": "haga clic para eliminar",
   "action.connect": "Conectar",
   "action.create": "Crear",
@@ -15,9 +16,12 @@
   "action.select": "Seleccionar",
   "action.toProceed": "para proceder",
   "action.toSelectOther": "seleccionar otro",
+  "config.agentUrl.label": "URL del agente:",
+  "config.agentUrl.placeholder": "Ingrese la URL del agente",
   "config.error.enterUrl": "Introduce una URL válida",
-  "config.error.invalidUrl": "URL no válida, configuración del proveedor no encontrada",
+  "config.error.invalidVendorUrl": "URL no válida, configuración del proveedor no encontrada",
   "config.error.setUrl": "La URL del proveedor no está configurada",
+  "config.error.vendorData.agentUrls": "URL de agentes faltantes de respuesta, comuníquese con el soporte",
   "config.language.label": "Idioma",
   "config.vendorUrl.label": "URL del proveedor:",
   "config.vendorUrl.placeholder": "Ingrese la URL del proveedor",

src/components/createIdentifierCard.tsx

@@ -74,6 +74,7 @@ export function CreateIdentifierCard(props): JSX.Element {
         <div className=" flex flex-row justify-center mt-2">
           <Button
             handleClick={onCreateIdentifier}
+            isLoading={props.isLoading}
             className="text-white flex flex-row font-medium rounded-full text-sm px-5 py-2"
           >
             <p className="font-medium text-md">

src/components/identifierCard.tsx

@@ -1,5 +1,6 @@
 import { obfuscateString } from "@pages/background/utils";
 import { useIntl } from "react-intl";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 import { Card, Text, Subtext } from "@components/ui";
 
 interface IIdentifier {}
@@ -34,18 +35,42 @@ export function IdentifierCard({ aid }): JSX.Element {
             />
           </svg>
         </div>
-        <div className="">
+        <div>
           <Text className="font-bold" $color="heading">
             {formatMessage({ id: "identifier.aid.label" })}{" "}
-            <Subtext
-              className="font-normal max-w-[200px] break-words"
-              $color="text"
-            >
-              {obfuscateString(aid.prefix)}
-            </Subtext>
+            <span data-tooltip-id={aid.prefix}>
+              <Subtext
+                className="cursor-pointer font-normal max-w-[200px] break-words"
+                $color="text"
+              >
+                {obfuscateString(aid.prefix)}
+              </Subtext>
+            </span>
           </Text>
         </div>
-
+        <ReactTooltip id={aid.prefix} clickable>
+          <div className="flex flex-row gap-x-1">
+            <p>{aid.prefix}</p>
+            <button
+              onClick={() => {
+                navigator.clipboard.writeText(aid.prefix);
+              }}
+            >
+              <svg
+                className="w-3 h-3"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+              >
+                <path
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
+                />
+              </svg>
+            </button>
+          </div>
+        </ReactTooltip>
         {/* COMMENTED OUT FOR THE DEMO
       <div className="flex flex-row justify-between">
         <div className="">

src/components/identifierList.tsx

@@ -24,7 +24,7 @@ export function IdentifierList(): JSX.Element {
 
   const initialFetchIdentifiers = async () => {
     setIsLoading(true);
-    fetchIdentifiers();
+    await fetchIdentifiers();
     setIsLoading(false);
   };
 
@@ -55,11 +55,6 @@ export function IdentifierList(): JSX.Element {
 
   return (
     <>
-      {isLoading ? (
-        <div className="flex flex-row justify-center items-center">
-          <Loader size={6} />
-        </div>
-      ) : null}
       <div className=" flex flex-row-reverse">
         <Button
           handleClick={() => setShowDrawer(true)}
@@ -68,6 +63,11 @@ export function IdentifierList(): JSX.Element {
           <>{`+ ${formatMessage({ id: "action.createNew" })}`}</>
         </Button>
       </div>
+      {isLoading ? (
+        <div className="flex flex-row justify-center items-center">
+          <Loader size={6} />
+        </div>
+      ) : null}
       <Drawer
         isOpen={showDrawer}
         handleClose={() => setShowDrawer(false)}

src/components/selectCredential.tsx

@@ -53,7 +53,7 @@ export function SelectCredential(): JSX.Element {
             <CredentialCard credential={credential} />
             <Button
               handleClick={() => createSigninWithCredential(credential)}
-              className="absolute right-0 bottom-0 text-white font-medium rounded-full text-xs px-2 py-1 "
+              className="absolute right-[2px] bottom-[2px] text-white font-medium rounded-full text-xs px-2 py-1 "
             >
               <>{`${formatMessage({ id: "action.select" })} >`}</>
             </Button>

src/components/selectIdentifier.tsx

@@ -15,11 +15,13 @@ export function SelectIdentifier(): JSX.Element {
   const { formatMessage } = useIntl();
 
   const fetchIdentifiers = async () => {
+    setIsLoading(true);
     const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
       type: "fetch-resource",
       subtype: "identifiers",
     });
     console.log("data", data);
+    setIsLoading(false);
     setAids(data.aids);
   };
 
@@ -66,11 +68,6 @@ export function SelectIdentifier(): JSX.Element {
 
   return (
     <>
-      {isLoading ? (
-        <div className="flex flex-row justify-center items-center">
-          <Loader size={6} />
-        </div>
-      ) : null}
       <div className=" flex flex-row-reverse">
         <Button
           handleClick={() => setShowDrawer(true)}
@@ -79,6 +76,11 @@ export function SelectIdentifier(): JSX.Element {
           <>{`+ ${formatMessage({ id: "action.createNew" })}`}</>
         </Button>
       </div>
+      {isLoading ? (
+        <div className="flex flex-row justify-center items-center">
+          <Loader size={6} />
+        </div>
+      ) : null}
       <Drawer
         isOpen={showDrawer}
         handleClose={() => setShowDrawer(false)}
@@ -100,7 +102,7 @@ export function SelectIdentifier(): JSX.Element {
             <IdentifierCard aid={aid} />
             <Button
               handleClick={() => createSigninWithIdentifiers(aid)}
-              className=" absolute right-0 bottom-0 text-white font-medium rounded-full text-xs px-2 py-1"
+              className=" absolute right-[2px] bottom-[2px] text-white font-medium rounded-full text-xs px-2 py-1"
             >
               <>{`${formatMessage({ id: "action.select" })} >`}</>
             </Button>

src/components/ui/dropdown/dropdown.tsx

@@ -5,6 +5,7 @@ const DropdownWrapper = styled.div`
   position: relative;
   display: inline-block;
   width: 100%;
+  z-index: ${({ zIndex }) => 50 + (zIndex ?? 0)};
 `;
 
 const DropdownButton = styled.button`
@@ -42,7 +43,7 @@ const DropdownItem = styled.li`
   }
 `;
 
-export const Dropdown = ({ selectedOption, options, onSelect }) => {
+export const Dropdown = ({ selectedOption, options, onSelect, zIndex }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleDropdownClick = () => {
@@ -55,7 +56,7 @@ export const Dropdown = ({ selectedOption, options, onSelect }) => {
   };
 
   return (
-    <DropdownWrapper>
+    <DropdownWrapper zIndex={zIndex}>
       <DropdownButton onClick={handleDropdownClick}>
         {selectedOption?.label}
       </DropdownButton>

src/config/vendor.json

@@ -0,0 +1,26 @@
+{
+  "title": "Keria",
+  "logo": "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png",
+  "icon": "https://cdn-icons-png.flaticon.com/128/3291/3291695.png",
+  "agentUrl": "https://keria-dev.rootsid.cloud/admin",
+  "onboardingUrl": "https://github.com/signup",
+  "docsUrl": "https://docs.github.com",
+  "supportUrl": "https://support.github.com",
+  "theme": {
+    "colors": {
+      "primary": "#078007",
+      "secondary": "#0b5c6d",
+      "error": "red",
+      "heading": "#5e2b8f",
+      "text": "grey",
+      "subtext": "#fae8e8",
+      "white": "#ffffff",
+      "black": "#373e49",
+      "bodyBg": "#ffffff",
+      "bodyBorder": "#9A6C2E",
+      "bodyColor": "#9A6C2E",
+      "cardColor": "#249624",
+      "cardBg": "#ebebf5"
+    }
+  }
+}