fix: make vendor data optional and use default

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

@@ -32,6 +32,31 @@
   color: #61dafb;
 }
 
+.auth-btn-container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.auth-heading {
+  font-size: 1.125rem/* 18px */;
+  line-height: 1.75rem/* 28px */;
+  font-weight: 700;
+}
+
+.signify-data {
+  width: 100%;
+  display: block;
+  padding: 0.625rem;
+  color: black;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-radius: 0.5rem;
+  border-width: 1px;
+
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

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

@@ -50,17 +50,17 @@ function App() {
       <header className="App-header">
         {signifyData ? (
           <div className="Welcome">
-            <div className="">
+            <div>
               <h3>Welcome!</h3>
-              <label htmlFor="message" className="">
+              <label htmlFor="message">
                 Signed in with{" "}
                 {parsedSignifyData?.credential ? "Credential" : "AID"}
               </label>
               <textarea
                 id="message"
                 rows="16"
                 defaultValue={signifyData}
-                className="w-full block p-2.5 text-black text-sm rounded-lg border border-gray-300"
+                className="signify-data"
                 placeholder="Write your thoughts here..."
               ></textarea>
             </div>
@@ -70,9 +70,28 @@ function App() {
           </div>
         ) : (
           <>
-            <img src={logo} alt="logo" />
-            <div className="flex flex-col gap-y-2 mt-2">
-              <p className=" text-lg font-bold">Authenticate with</p>
+            {/* <img src={logo} alt="logo" /> */}
+            <div className="auth-btn-container">
+              <Button
+                href="https://drive.google.com/drive/folders/1VmBAs3ba6qWT1I9y1Uk7hxvU_i-TKQTN?usp=sharing"
+                target="_blank"
+                size="md"
+                variant="contained"
+              >
+                Download Extension
+              </Button>
+              <Button
+                target="_blank"
+                href="https://www.loom.com/share/2b4208bf57de4eb89b0950865497a817?sid=faa098d8-4e8a-4938-9ba5-6f3780983d09"
+                size="md"
+                variant="contained"
+                onClick={requestAid}
+              >
+                See Video
+              </Button>
+            </div>
+            <div className="auth-btn-container">
+              <p className="auth-heading">Authenticate with</p>
               <Button variant="contained" color="success" onClick={requestAid}>
                 AID
               </Button>

src/_locales/en.json

@@ -11,6 +11,7 @@
   "action.createNew": "Create New",
   "action.delete": "Delete",
   "action.disconnect": "Disconnect",
+  "action.load": "Load",
   "action.open": "Open",
   "action.save": "Save",
   "action.select": "Select",

src/_locales/es-419.json

@@ -11,6 +11,7 @@
   "action.createNew": "Crear nuevo",
   "action.delete": "Borrar",
   "action.disconnect": "Desconectar",
+  "action.load": "Carga",
   "action.open": "Abrir",
   "action.save": "Guardar",
   "action.select": "Seleccionar",

src/_locales/es.json

@@ -11,6 +11,7 @@
   "action.createNew": "Crear nuevo",
   "action.delete": "Borrar",
   "action.disconnect": "Desconectar",
+  "action.load": "Carga",
   "action.open": "Abrir",
   "action.save": "Guardar",
   "action.select": "Seleccionar",

src/config/vendor.json

@@ -1,26 +1,23 @@
 {
   "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",
+  "onboardingUrl": "https://github.com/WebOfTrust/signify-browser-extension",
+  "docsUrl": "https://github.com/WebOfTrust/signify-browser-extension",
+  "supportUrl": "https://github.com/WebOfTrust/signify-browser-extension",
   "theme": {
     "colors": {
       "primary": "#078007",
-      "secondary": "#0b5c6d",
-      "error": "red",
+      "secondary": "#04323b",
+      "error": "#e60d0d",
       "heading": "#5e2b8f",
       "text": "grey",
-      "subtext": "#fae8e8",
+      "subtext": "#ffffff",
       "white": "#ffffff",
       "black": "#373e49",
       "bodyBg": "#ffffff",
       "bodyBorder": "#9A6C2E",
       "bodyColor": "#9A6C2E",
       "cardColor": "#249624",
-      "cardBg": "#ebebf5"
+      "cardBg": "#ffffff"
     }
   }
 }

src/pages/background/services/config.ts

@@ -1,10 +1,12 @@
 import { browserStorageService } from "@pages/background/services/browser-storage";
+import { default as defaultVendor } from "@src/config/vendor.json";
 
 const CONFIG_ENUMS = {
   VENDOR_URL: "vendor-url",
   VENDOR_DATA: "vendor-data",
   VENDOR_LANG: "vendor-lang",
   AGENT_URL: "agent-url",
+  HAS_ONBOARDED: "has-onboarded",
 };
 
 const Config = () => {
@@ -23,9 +25,11 @@ const Config = () => {
   };
 
   const getData = async (): Promise<any> => {
-    return (await browserStorageService.getValue(
+    const _vendor = await browserStorageService.getValue(
       CONFIG_ENUMS.VENDOR_DATA
-    )) as any;
+    );
+
+    return _vendor ?? defaultVendor;
   };
 
   const removeData = async () => {
@@ -56,16 +60,22 @@ const Config = () => {
     await browserStorageService.setValue(CONFIG_ENUMS.AGENT_URL, token);
   };
 
+  const setHasOnboarded = async (value: boolean) => {
+    await browserStorageService.setValue(CONFIG_ENUMS.HAS_ONBOARDED, value);
+  };
+
   const getAgentAndVendorInfo = async (): Promise<any> => {
     const resp = await browserStorageService.getValues([
       CONFIG_ENUMS.AGENT_URL,
       CONFIG_ENUMS.VENDOR_URL,
-      CONFIG_ENUMS.VENDOR_DATA
+      CONFIG_ENUMS.VENDOR_DATA,
+      CONFIG_ENUMS.HAS_ONBOARDED
     ]);
     return {
       vendorUrl: resp[CONFIG_ENUMS.VENDOR_URL],
       agentUrl: resp[CONFIG_ENUMS.AGENT_URL],
-      vendorData: resp[CONFIG_ENUMS.VENDOR_DATA]
+      vendorData: resp[CONFIG_ENUMS.VENDOR_DATA],
+      hasOnboarded: resp[CONFIG_ENUMS.HAS_ONBOARDED]
     };
   };
 
@@ -80,6 +90,7 @@ const Config = () => {
     setLanguage,
     getAgentUrl,
     setAgentUrl,
+    setHasOnboarded,
     getAgentAndVendorInfo
   };
 };

src/pages/background/utils.ts

@@ -41,14 +41,24 @@ export const obfuscateString = (inputString: string) => {
   return `${prefix}...${suffix}`;
 };
 
-export const removeSlash = (site:string) => {
+export const removeSlash = (site: string) => {
   return site.replace(/\/$/, "");
 };
 
 export const hasWhiteSpace = (s: string) => {
-  return s.indexOf(' ') >= 0;
-}
+  return s.indexOf(" ") >= 0;
+};
 
-export const removeWhiteSpace = (s: string, replace="") => {
+export const removeWhiteSpace = (s: string, replace = "") => {
   return s.replace(/\s/g, replace);
-}
+};
+
+export const setActionIcon = async (iconUrl: string) => {
+  const imageBlob = await fetch(iconUrl).then((r) => r.blob());
+  const bitmap = await createImageBitmap(imageBlob);
+  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+  const context = canvas.getContext("2d");
+  context?.drawImage(bitmap, 0, 0);
+  const imageData = context?.getImageData(0, 0, bitmap.width, bitmap.height);
+  chrome.action.setIcon({ imageData: imageData });
+};

src/pages/dialog/Dialog.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { ThemeProvider, styled } from "styled-components";
 import { useIntl } from "react-intl";
-import { default as defaultVendor } from "@src/config/vendor.json";
+// import { default as defaultVendor } from "@src/config/vendor.json";
 import { Text, Subtext } from "@components/ui";
 import { TAB_STATE } from "@pages/popup/constants";
 import { PopupPrompt } from "./popupPrompt";
@@ -76,12 +76,14 @@ export default function Dialog({
   };
 
   return (
-    <ThemeProvider theme={vendorData?.theme ?? defaultVendor.theme}>
+    <ThemeProvider theme={vendorData?.theme}>
+      {" "}
+      // ?? defaultVendor.theme
       <div className="absolute top-10 right-10 w-[320px] max-h-[540px] overflow-auto pt-7">
         {showPopupPrompt ? (
           <PopupPrompt
             message={
-              <Text className="text-sm" $color="bodyColor">
+              <Text className="text-sm" $color="subtext">
                 {formatMessage({ id: "action.open" })}{" "}
                 <span className="inline-block">
                   <img src={logo} className="h-4" alt="logo" />
@@ -98,7 +100,44 @@ export default function Dialog({
         >
           {"x"}
         </button>
-        {vendorData ? (
+        <StyledMain className="items-center justify-center rounded text-center p-3">
+          <div className="flex flex-row gap-x-2 mb-2">
+            <img src={logo} className="h-8" alt="logo" />
+            <Text className="text-2xl font-bold" $color="bodyColor">
+              {formatMessage({ id: "signin.with" })} {vendorData?.title}
+            </Text>
+          </div>
+          {showRequestAuthPrompt ? (
+            <Text
+              className="mt-2 text-sm max-w-[280px] font-bold"
+              $color="bodyColor"
+            >
+              <Subtext className="" $color="">
+                {tabUrl}
+              </Subtext>{" "}
+              {formatMessage({ id: "signin.requestAuth" })}{" "}
+              {formatMessage({ id: getTextKeyByEventType() })}
+            </Text>
+          ) : (
+            <>
+              {signins?.map((signin) => (
+                <SigninItem signin={signin} />
+              ))}
+              <div
+                onClick={handleClick}
+                className="font-bold text-sm cursor-pointer"
+              >
+                {formatMessage({ id: "action.open" })}{" "}
+                <span className="inline-block">
+                  <img src={logo} className="h-4" alt="logo" />
+                </span>{" "}
+                {formatMessage({ id: "action.toSelectOther" })}{" "}
+                {formatMessage({ id: getTextKeyByEventType() })}
+              </div>
+            </>
+          )}
+        </StyledMain>
+        {/* {vendorData ? (
           <StyledMain className="items-center justify-center rounded text-center p-3">
             <div className="flex flex-row gap-x-2 mb-2">
               <img src={logo} className="h-8" alt="logo" />
@@ -145,7 +184,7 @@ export default function Dialog({
               </p>
             </div>
           </div>
-        )}
+        )} */}
       </div>
     </ThemeProvider>
   );

src/pages/dialog/popupPrompt.tsx

@@ -6,7 +6,7 @@ interface IPopupPrompt {
 
 const StyledContainer = styled.div`
   background-color: ${({ theme }) => theme?.colors?.secondary};
-  color: ${({ theme }) => theme?.colors?.bodyColor};
+  color: ${({ theme }) => theme?.colors?.subtext};
 `;
 
 export const PopupPrompt = ({ message }: IPopupPrompt): JSX.Element => {

src/pages/popup/Popup.tsx

@@ -29,7 +29,7 @@ const StyledLoader = styled.div`
 `;
 
 export default function Popup(): JSX.Element {
-  const [vendorData, setVendorData] = useState();
+  const [vendorData, setVendorData] = useState(defaultVendor);
   const [showConfig, setShowConfig] = useState(false);
 
   const [isConnected, setIsConnected] = useState(false);
@@ -44,7 +44,7 @@ export default function Popup(): JSX.Element {
       setVendorData(resp.vendorData);
     }
 
-    if (!resp.agentUrl || !resp.vendorData) {
+    if (!resp.agentUrl || !resp.hasOnboarded) {
       setShowConfig(true);
     }
   };
@@ -118,9 +118,10 @@ export default function Popup(): JSX.Element {
     checkConnection();
   };
 
+  const logo = vendorData?.logo ?? "/128_keri_logo.png";
   return (
     <LocaleProvider>
-      <ThemeProvider theme={vendorData?.theme ?? defaultVendor?.theme}>
+      <ThemeProvider theme={vendorData?.theme}>
         <GlobalStyles />
         <div>
           {isCheckingInitialConnection ? (
@@ -134,7 +135,7 @@ export default function Popup(): JSX.Element {
               {isConnected ? (
                 <Main
                   handleDisconnect={handleDisconnect}
-                  logo={vendorData?.logo}
+                  logo={logo}
                   title={vendorData?.title}
                 />
               ) : (
@@ -143,7 +144,7 @@ export default function Popup(): JSX.Element {
                     signinError={connectError}
                     handleConnect={handleConnect}
                     isLoading={isLoading}
-                    logo={vendorData?.logo}
+                    logo={logo}
                     title={vendorData?.title}
                     afterSetUrl={checkIfVendorDataExists}
                     vendorData={vendorData}