Fix UI issues with analytics

src/app/atoms/Button.tsx

@@ -1,23 +1,34 @@
 import * as React from "react";
 
-import { AnalyticsEventCategory, TestIDProps, useAnalytics } from "lib/analytics";
+import {
+  AnalyticsEventCategory,
+  TestIDProps,
+  useAnalytics,
+} from "lib/analytics";
 
-interface Props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TestIDProps {
-}
+interface Props
+  extends React.DetailedHTMLProps<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    >,
+    TestIDProps {}
 
-export const Button = React.forwardRef<HTMLButtonElement, Props>(({
-    testID,
-    testIDProperties,
-    onClick,
-    ...props
-  }, ref) => {
+export const Button = React.forwardRef<HTMLButtonElement, Props>(
+  ({ testID, testIDProperties, onClick, ...props }, ref) => {
     const { trackEvent } = useAnalytics();
 
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-      testID !== undefined && trackEvent(testID, AnalyticsEventCategory.ButtonPress, testIDProperties);
+    const handleClick = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      testID !== undefined &&
+        trackEvent(
+          testID,
+          AnalyticsEventCategory.ButtonPress,
+          testIDProperties
+        );
 
-      onClick !== undefined && onClick(e);
-    }
-    return <button ref={ref} onClick={handleClick} {...props} />
+      return onClick !== undefined && onClick(e);
+    };
+    return <button ref={ref} onClick={handleClick} {...props} />;
   }
 );

src/app/layouts/PageLayout/Header/AccountDropdown.tsx

@@ -222,9 +222,13 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
       <div className="my-2">
         {actions.map(({ key, Icon, i18nKey, linkTo, onClick }) => {
           const handleClick = () => {
-            trackEvent(AccountDropdownSelectors.ActionButton, AnalyticsEventCategory.ButtonPress, { type: key });
-            onClick();
-          }
+            trackEvent(
+              AccountDropdownSelectors.ActionButton,
+              AnalyticsEventCategory.ButtonPress,
+              { type: key }
+            );
+            return onClick();
+          };
 
           const baseProps = {
             key,

src/app/templates/AdditionalFeeInput.tsx

@@ -120,7 +120,7 @@ const AdditionalFeeInput: FC<AdditionalFeeInputProps> = (props) => {
       AdditionalFeeInputSelectors.FeeButton,
       AnalyticsEventCategory.ButtonPress
     );
-    onChange !== undefined && onChange(event);
+    return onChange !== undefined && onChange(event);
   };
 
   return (

src/lib/analytics/use-form-analytics.hook.ts

@@ -1,16 +1,24 @@
+import { useMemo } from "react";
+
 import { AnalyticsEventCategory } from "./analytics-event.enum";
 import { useAnalytics } from "./use-analytics.hook";
 
 export const useFormAnalytics = (formName: string) => {
   const { trackEvent } = useAnalytics();
 
-  const trackSubmit = (properties?: object) => trackEvent(formName, AnalyticsEventCategory.FormSubmit, properties);
-  const trackSubmitSuccess = (properties?: object) => trackEvent(formName, AnalyticsEventCategory.FormSubmitSuccess, properties);
-  const trackSubmitFail = (properties?: object) => trackEvent(formName, AnalyticsEventCategory.FormSubmitFail, properties);
-
-  return {
-    trackSubmit,
-    trackSubmitSuccess,
-    trackSubmitFail
-  };
-}
+  return useMemo(
+    () => ({
+      trackSubmit: (properties?: object) =>
+        trackEvent(formName, AnalyticsEventCategory.FormSubmit, properties),
+      trackSubmitSuccess: (properties?: object) =>
+        trackEvent(
+          formName,
+          AnalyticsEventCategory.FormSubmitSuccess,
+          properties
+        ),
+      trackSubmitFail: (properties?: object) =>
+        trackEvent(formName, AnalyticsEventCategory.FormSubmitFail, properties),
+    }),
+    [formName, trackEvent]
+  );
+};