Merge pull request #121 from HunnySajid/feat/misc-updates

Feat/misc updates
WebOfTrust · Mar 5, 2024 · 6d2e770 · 6d2e770
2 parents 46a690c + 1b3fab4
commit 6d2e770
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 33 deletions.
diff --git a/src/components/createIdentifierCard.tsx b/src/components/createIdentifierCard.tsx
@@ -22,19 +22,13 @@ export function CreateIdentifierCard(
   useEffect(() => {
     setNameError(props.error);
   }, [props.error]);
-  const onBlurName = () => {
-    if (!name) {
-      setNameError(emptyNameError);
-    } else {
-      setNameError("");
-    }
-  };
 
   const handleRemoveWhiteSpace = () => {
     setName(removeWhiteSpace(name));
     setNameError("");
   };
-  const onCreateIdentifier = async () => {
+  const onCreateIdentifier = async (e?: React.SyntheticEvent) => {
+    e?.preventDefault();
     let hasError = false;
     if (!name) {
       setNameError(emptyNameError);
@@ -45,6 +39,7 @@ export function CreateIdentifierCard(
           {formatMessage({ id: "identifier.error.noWhiteSpace" })}{" "}
           <button
             className=" underline cursor-pointer"
+            type="button"
             onClick={handleRemoveWhiteSpace}
           >
             {formatMessage({ id: "action.clickToRemove" })}
@@ -54,12 +49,18 @@ export function CreateIdentifierCard(
       hasError = true;
     }
 
-    if (!hasError) props.handleCreateIdentifier(name);
+    if (!hasError) {
+      setNameError("");
+      props.handleCreateIdentifier(name);
+    }
   };
 
   return (
     <>
-      <div className=" max-w-xs m-4 flex flex-col gap-y-4">
+      <form
+        onSubmit={onCreateIdentifier}
+        className=" max-w-xs m-4 flex flex-col gap-y-4"
+      >
         <div>
           <input
             type="text"
@@ -71,7 +72,6 @@ export function CreateIdentifierCard(
             required
             value={name}
             onChange={(e) => setName(e.target.value)}
-            onBlur={onBlurName}
           />
           {nameError ? (
             isValidElement(nameError) ? (
@@ -83,6 +83,7 @@ export function CreateIdentifierCard(
         </div>
         <div className=" flex flex-row justify-center mt-2">
           <Button
+            type="submit"
             handleClick={onCreateIdentifier}
             isLoading={props.isLoading}
             className="text-white flex flex-row font-medium rounded-full text-sm px-5 py-2"
@@ -92,7 +93,7 @@ export function CreateIdentifierCard(
             </p>
           </Button>
         </div>
-      </div>
+      </form>
     </>
   );
 }
diff --git a/src/components/identifierCard.tsx b/src/components/identifierCard.tsx
@@ -51,7 +51,7 @@ export function IdentifierCard({ aid }: IIdentifierCard): JSX.Element {
             </span>
           </Text>
         </div>
-        <ReactTooltip id={aid.prefix} clickable>
+        <ReactTooltip id={aid.prefix} clickable delayShow={500}>
           <div className="flex flex-row gap-x-1 text-xs">
             <p>{aid.prefix}</p>
             <button

diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx
@@ -2,7 +2,8 @@ import { styled } from "styled-components";
 import { Loader } from "@components/ui";
 
 interface IButton {
-  handleClick: () => void;
+  type?: "button" | "reset" | "submit" | undefined;
+  handleClick?: () => void;
   isLoading?: boolean;
   className?: string;
   children?: JSX.Element | any;
@@ -15,7 +16,11 @@ const StyledButton = styled.button`
 
 export function Button(props: IButton): JSX.Element {
   return (
-    <StyledButton onClick={props.handleClick} className={props.className}>
+    <StyledButton
+      type={props.type}
+      onClick={props.handleClick}
+      className={props.className}
+    >
       {props.isLoading ? <Loader size={4} /> : null}
       {props.children}
     </StyledButton>

diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts
@@ -64,6 +64,7 @@ chrome.runtime.onMessage.addListener(function (
             const resp = await (await fetch(vendorUrl)).json();
             if (resp?.agentUrl) {
               await configService.setAgentUrl(resp?.agentUrl);
+              await configService.setHasOnboarded(true)
             }
             await configService.setData(resp);
             if (resp?.icon) {

diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
@@ -76,14 +76,9 @@ export default function Popup(): JSX.Element {
 
   useEffect(() => {
     checkIfVendorDataExists();
+    checkInitialConnection();
   }, []);
 
-  useEffect(() => {
-    if (vendorData) {
-      checkInitialConnection();
-    }
-  }, [vendorData]);
-
   const handleConnect = async (passcode: string) => {
     setIsLoading(true);
     const agentUrl = await configService.getAgentUrl();

diff --git a/src/screens/config/config.tsx b/src/screens/config/config.tsx
@@ -102,18 +102,6 @@ export function Config(props: any): JSX.Element {
 
   return (
     <>
-      {hasOnboarded ? (
-        <div className="text-xs flex flex-row justify-between px-2">
-          <button
-            onClick={handleBack}
-            className="cursor-pointer underline font-medium"
-          >
-            {formatMessage({ id: "action.back" })}
-          </button>
-        </div>
-      ) : (
-        <></>
-      )}
       <div className="px-4 relative mb-2">
         <p className="text-sm font-bold">
           {formatMessage({ id: "config.vendorUrl.label" })}
@@ -170,6 +158,20 @@ export function Config(props: any): JSX.Element {
           onSelect={(option) => changeLocale(option.value)}
         />
       </div>
+      {hasOnboarded ? (
+        <div className="text-xs flex flex-row justify-center px-4 mt-3">
+          <Button
+            handleClick={handleBack}
+            className="text-white flex flex-row focus:outline-none font-medium rounded-full text-sm px-3 py-[2px]"
+          >
+            <p className="font-medium text-md">
+              {formatMessage({ id: "action.save" })}
+            </p>
+          </Button>
+        </div>
+      ) : (
+        <></>
+      )}
     </>
   );
 }