feat(analytics): add tracking for trade input size toggle (#830)

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;

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',

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 =