fixed classnames and moved onSucess inside of handleSubmit

packages/atoms/connect/ConnectButton.tsx

@@ -13,21 +13,19 @@ import type { AtomsGlobalConfigProps } from "../types";
 interface ConnectButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   buttonText?: string;
   icon?: JSX.Element;
-  handleClick: () => void;
   onSuccess?: () => void;
   onError: () => void;
 }
 
 export function ConnectButton({
   buttonText,
-  handleClick,
+  onClick,
   onSuccess,
   onError,
   className,
   icon,
 }: ConnectButtonProps & AtomsGlobalConfigProps) {
   const [isProcessing, setIsProcessing] = useState<boolean>(false);
-  const [isSuccess, setIsSuccess] = useState<boolean>(false);
   const [errMsg, setErrMsg] = useState<string>("");
 
   function handleSubmit(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
@@ -35,22 +33,20 @@ export function ConnectButton({
 
     try {
       setIsProcessing(true);
-      setIsSuccess(true);
-      handleClick();
+      onClick && onClick(e);
+
+      // if user wants to handle onSuccess inside handleClick then it makes no sense to have a separate handler
+      // otherwise only if the user explicitly passes an onSuccess handler this gets triggered
+      if (onSuccess) {
+        onSuccess();
+      }
     } catch (error) {
       setIsProcessing(false);
-      setIsSuccess(false);
       onError();
       setErrMsg(error?.message);
     }
 
     setIsProcessing(false);
-
-    // if user wants to handle onSuccess inside handleClick then it makes no sense to have a separate handler
-    // otherwise only if the user explicitly passes an onSuccess handler this gets triggered
-    if (isSuccess && onSuccess) {
-      onSuccess();
-    }
   }
 
   return (
@@ -59,13 +55,11 @@ export function ConnectButton({
         className={cn(
           "bg-default text-default dark:text-muted dark:bg-muted relative inline-flex h-9 items-center whitespace-nowrap rounded-md px-4 py-2.5 text-sm font-medium !shadow-none transition-colors disabled:cursor-not-allowed",
           className
-            ? className
-            : "bg-default text-default dark:text-muted dark:bg-muted relative inline-flex h-9 items-center whitespace-nowrap rounded-md px-4 py-2.5 text-sm font-medium !shadow-none transition-colors disabled:cursor-not-allowed"
         )}
         type="button"
         disabled={!isProcessing}
         onClick={(event) => handleSubmit(event)}>
-        {!!icon && icon}
+        {icon && icon}
         {buttonText || "Install App"}
       </Button>
       {!!errMsg && <span>{errMsg}</span>}