Swap actions analytics (#581)

* Added event for click on swap from explore

* added analytics event for swap submit on form

* review fixes

src/app/pages/Explore.selectors.ts

@@ -1,6 +1,7 @@
 export enum ExploreSelectors {
   ReceiveButton = 'Explore/ReceiveButton',
   SendButton = 'Explore/SendButton',
+  SwapButton = 'Explore/SwapButton',
   AssetsTab = 'Explore/AssetsTab',
   DelegationTab = 'Explore/DelegationTab',
   ActivityTab = 'Explore/ActivityTab',

src/app/pages/Explore.tsx

@@ -15,6 +15,7 @@ import { ReactComponent as SwapIcon } from 'app/icons/swap.svg';
 import PageLayout from 'app/layouts/PageLayout';
 import Activity from 'app/templates/activity/Activity';
 import AssetInfo from 'app/templates/AssetInfo';
+import { TestIDProps } from 'lib/analytics';
 import { T, t } from 'lib/i18n/react';
 import {
   getAssetSymbol,
@@ -113,6 +114,7 @@ const Explore: FC<ExploreProps> = ({ assetSlug }) => {
             }}
             disabled={!canSend}
             tippyProps={tippyPropsMock}
+            testID={ExploreSelectors.SwapButton}
           />
           <ActionButton
             label={<T id="send" />}
@@ -133,15 +135,23 @@ const Explore: FC<ExploreProps> = ({ assetSlug }) => {
 
 export default Explore;
 
-type ActionButtonProps = {
+interface ActionButtonProps extends TestIDProps {
   label: React.ReactNode;
   Icon: FunctionComponent<SVGProps<SVGSVGElement>>;
   to: To;
   disabled?: boolean;
   tippyProps?: Partial<TippyProps>;
-};
+}
 
-const ActionButton: FC<ActionButtonProps> = ({ label, Icon, to, disabled, tippyProps = {} }) => {
+const ActionButton: FC<ActionButtonProps> = ({
+  label,
+  Icon,
+  to,
+  disabled,
+  tippyProps = {},
+  testID,
+  testIDProperties
+}) => {
   const buttonRef = useTippy<HTMLButtonElement>(tippyProps);
   const commonButtonProps = useMemo(
     () => ({
@@ -166,7 +176,11 @@ const ActionButton: FC<ActionButtonProps> = ({ label, Icon, to, disabled, tippyP
     }),
     [disabled, Icon, label]
   );
-  return disabled ? <button ref={buttonRef} {...commonButtonProps} /> : <Link to={to} {...commonButtonProps} />;
+  return disabled ? (
+    <button ref={buttonRef} {...commonButtonProps} />
+  ) : (
+    <Link testID={testID} testIDProperties={testIDProperties} to={to} {...commonButtonProps} />
+  );
 };
 
 const Delegation: FC = () => (

src/app/templates/SwapForm/SwapForm.selectors.ts

@@ -0,0 +1,3 @@
+export enum SwapFormSelectors {
+  SwapSubmit = 'SwapForm/SwapSubmit'
+}

src/app/templates/SwapForm/SwapForm.tsx

@@ -32,6 +32,7 @@ import { HistoryAction, navigate } from 'lib/woozie';
 import { SwapExchangeRate } from './SwapExchangeRate/SwapExchangeRate';
 import { SwapFormValue, SwapInputValue, useSwapFormDefaultValue } from './SwapForm.form';
 import styles from './SwapForm.module.css';
+import { SwapFormSelectors } from './SwapForm.selectors';
 import { feeInfoTippyProps } from './SwapForm.tippy';
 import { SlippageToleranceInput } from './SwapFormInput/SlippageToleranceInput/SlippageToleranceInput';
 import { slippageToleranceInputValidationFn } from './SwapFormInput/SlippageToleranceInput/SlippageToleranceInput.validation';
@@ -346,6 +347,7 @@ export const SwapForm: FC = () => {
         }}
         loading={isSubmitting}
         onClick={handleSubmitButtonClick}
+        testID={SwapFormSelectors.SwapSubmit}
       >
         <T id="swap" />
       </FormSubmitButton>

src/lib/woozie/Link.tsx

@@ -10,8 +10,9 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, Test
   replace?: boolean;
 }
 
-const Link: FC<LinkProps> = ({ to, replace, ...rest }) => {
+const Link: FC<LinkProps> = ({ to, replace, testID, testIDProperties, ...rest }) => {
   const lctn = useLocation();
+  const { trackEvent } = useAnalytics();
 
   const { pathname, search, hash, state } = useMemo(() => createLocationUpdates(to, lctn), [to, lctn]);
 
@@ -20,10 +21,11 @@ const Link: FC<LinkProps> = ({ to, replace, ...rest }) => {
   const href = useMemo(() => (USE_LOCATION_HASH_AS_URL ? `${window.location.pathname}#${url}` : url), [url]);
 
   const handleNavigate = useCallback(() => {
+    testID !== undefined && trackEvent(testID, AnalyticsEventCategory.PageOpened, testIDProperties);
     const action =
       replace || url === createUrl(lctn.pathname, lctn.search, lctn.hash) ? HistoryAction.Replace : HistoryAction.Push;
     changeState(action, state, url);
-  }, [replace, state, url, lctn]);
+  }, [replace, state, url, lctn, testID, testIDProperties, trackEvent]);
 
   return <LinkAnchor {...rest} href={href} onNavigate={handleNavigate} />;
 };