From 48848726d4098baf26052101235129759c83c1d2 Mon Sep 17 00:00:00 2001
From: moo-onthelawn <70078372+moo-onthelawn@users.noreply.github.com>
Date: Fri, 19 Jul 2024 15:28:32 -0400
Subject: [PATCH] feat(analytics): add tracking for trade input size toggle
 (#830)

---
 src/constants/analytics.ts                    |  5 ++++
 src/constants/trade.ts                        |  2 ++
 src/views/forms/TradeForm/TradeSizeInputs.tsx | 26 ++++++++++++++-----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/constants/analytics.ts b/src/constants/analytics.ts
index a3b44d9ca..1c5536a70 100644
--- a/src/constants/analytics.ts
+++ b/src/constants/analytics.ts
@@ -9,6 +9,7 @@ import type { SupportedLocales } from './localization';
 import type { DydxNetwork } from './networks';
 import { TransferNotificationTypes } from './notifications';
 import type { TradeTypes } from './trade';
+import { TradeToggleSizeInput } from './trade';
 import type { DydxAddress, EvmAddress, WalletConnectionType, WalletType } from './wallets';
 
 export type AnalyticsEventTrackMeta<T extends AnalyticsEventTypes> = {
@@ -197,6 +198,10 @@ export const AnalyticsEvents = unionize(
     TradeOrderTypeSelected: ofType<{
       type: TradeTypes;
     }>(),
+    TradeAmountToggleClick: ofType<{
+      newInput: TradeToggleSizeInput;
+      market: string;
+    }>(),
     TradePlaceOrder: ofType<
       HumanReadablePlaceOrderPayload & {
         isClosePosition: boolean;
diff --git a/src/constants/trade.ts b/src/constants/trade.ts
index 44beb9f74..516f84e24 100644
--- a/src/constants/trade.ts
+++ b/src/constants/trade.ts
@@ -119,6 +119,8 @@ export enum TradeSizeInput {
   Usdc = 'size.usdcSize',
 }
 
+export type TradeToggleSizeInput = TradeSizeInput.Size | TradeSizeInput.Usdc;
+
 export enum TradeBoxKeys {
   LimitPrice = 'price.limitPrice',
   TrailingPercent = 'price.trailingPercent',
diff --git a/src/views/forms/TradeForm/TradeSizeInputs.tsx b/src/views/forms/TradeForm/TradeSizeInputs.tsx
index cc7918eef..5e9eb8f99 100644
--- a/src/views/forms/TradeForm/TradeSizeInputs.tsx
+++ b/src/views/forms/TradeForm/TradeSizeInputs.tsx
@@ -4,6 +4,7 @@ import { shallowEqual } from 'react-redux';
 import styled from 'styled-components';
 
 import { TradeInputField } from '@/constants/abacus';
+import { AnalyticsEvents } from '@/constants/analytics';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { TOKEN_DECIMALS, USD_DECIMALS } from '@/constants/numbers';
@@ -35,6 +36,7 @@ import { getSelectedLocale } from '@/state/localizationSelectors';
 import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
+import { track } from '@/lib/analytics';
 import { MustBigNumber } from '@/lib/numbers';
 
 import { MarketLeverageInput } from './MarketLeverageInput';
@@ -108,13 +110,23 @@ export const TradeSizeInputs = () => {
     });
   };
 
-  const onUsdcToggle = useCallback((isPressed: boolean) => {
-    setShowUSDCInput(isPressed);
-    abacusStateManager.setTradeValue({
-      field: TradeInputField.lastInput,
-      value: isPressed ? TradeInputField.usdcSize.rawValue : TradeInputField.size.rawValue,
-    });
-  }, []);
+  const onUsdcToggle = useCallback(
+    (isPressed: boolean) => {
+      setShowUSDCInput(isPressed);
+      abacusStateManager.setTradeValue({
+        field: TradeInputField.lastInput,
+        value: isPressed ? TradeInputField.usdcSize.rawValue : TradeInputField.size.rawValue,
+      });
+
+      track(
+        AnalyticsEvents.TradeAmountToggleClick({
+          newInput: isPressed ? TradeSizeInput.Usdc : TradeSizeInput.Size,
+          market: id ?? '',
+        })
+      );
+    },
+    [id]
+  );
 
   const inputToggleButton = () => {
     const slotTooltip =