Add input_amount to events

src/components/Nabla/useSwapForm.tsx

@@ -15,6 +15,7 @@ import { storageService } from '../../services/storage/local';
 import schema, { SwapFormValues } from './schema';
 import { getCaseSensitiveNetwork } from '../../helpers/networks';
 import { useNetwork } from '../../contexts/network';
+import { useFormStoreActions } from '../../stores/formStore';
 
 type SwapSettings = {
   from: string;
@@ -40,6 +41,7 @@ export const useSwapForm = () => {
   const [isTokenSelectModalVisible, setIsTokenSelectModalVisible] = useState(false);
   const [tokenSelectModalType, setTokenModalType] = useState<TokenSelectType>('from');
   const { selectedNetwork, setSelectedNetwork } = useNetwork();
+  const { setFromAmount } = useFormStoreActions();
 
   const initialState = useMemo(() => {
     const searchParams = new URLSearchParams(window.location.search);
@@ -129,7 +131,9 @@ export const useSwapForm = () => {
 
   const fromAmount: Big | undefined = useMemo(() => {
     try {
-      return new Big(fromAmountString);
+      const fromAmount = new Big(fromAmountString);
+      setFromAmount(fromAmount);
+      return fromAmount;
     } catch {
       return undefined;
     }

src/contexts/events.tsx

@@ -11,6 +11,7 @@ import { getNetworkId, isNetworkEVM, Networks } from '../helpers/networks';
 import { LocalStorageKeys } from '../hooks/useLocalStorage';
 import { storageService } from '../services/storage/local';
 import { useNetwork } from './network';
+import { useFromAmount } from '../stores/formStore';
 
 declare global {
   interface Window {
@@ -34,6 +35,7 @@ const UNIQUE_EVENT_TYPES: TrackableEvent['event'][] = [
 
 export interface AmountTypeEvent {
   event: `amount_type`;
+  input_amount: string;
 }
 
 export interface ClickDetailsEvent {
@@ -43,7 +45,9 @@ export interface ClickDetailsEvent {
 export interface WalletConnectEvent {
   event: 'wallet_connect';
   wallet_action: 'connect' | 'disconnect' | 'change';
+  input_amount?: string;
   account_address?: string;
+  network_selected?: string;
 }
 
 export interface OfframpingParameters {
@@ -105,6 +109,7 @@ export interface NetworkChangeEvent {
 
 export interface FormErrorEvent {
   event: 'form_error';
+  input_amount: string;
   error_message:
     | 'insufficient_balance'
     | 'insufficient_liquidity'
@@ -149,6 +154,7 @@ const useEvents = () => {
   const previousChainId = useRef<number | undefined>(undefined);
   const firstRender = useRef(true);
   const { selectedNetwork } = useNetwork();
+  const fromAmount = useFromAmount();
 
   const scheduledQuotes = useRef<
     | {
@@ -279,12 +285,16 @@ const useEvents = () => {
         event: 'wallet_connect',
         wallet_action: 'disconnect',
         account_address: previous,
+        input_amount: fromAmount ? fromAmount.toString() : '0',
+        network_selected: getNetworkId(selectedNetwork).toString(),
       });
     } else if (wasChanged) {
       trackEvent({
         event: 'wallet_connect',
         wallet_action: wasConnected ? 'change' : 'connect',
         account_address: address,
+        input_amount: fromAmount ? fromAmount.toString() : '0',
+        network_selected: getNetworkId(selectedNetwork).toString(),
       });
     }
 

src/hooks/nabla/useTokenAmountOut.ts

@@ -126,7 +126,11 @@ export function useTokenOutAmount({
       },
       parseError: (error) => {
         const insufficientLiquidityMessage = () => {
-          trackEvent({ event: 'form_error', error_message: 'insufficient_liquidity' });
+          trackEvent({
+            event: 'form_error',
+            error_message: 'insufficient_liquidity',
+            input_amount: amountIn ? amountIn : '0',
+          });
           return 'Insufficient liquidity for this exchange. Please try a smaller amount or try again later.';
         };
 

src/pages/swap/index.tsx

@@ -1,5 +1,5 @@
 import Big from 'big.js';
-import { useEffect, useMemo, useRef, useState, useCallback, FormEvent } from 'react';
+import { useEffect, useMemo, useRef, useState, useCallback, FormEvent, useDeferredValue } from 'react';
 import { ApiPromise } from '@polkadot/api';
 import { motion } from 'framer-motion';
 
@@ -71,6 +71,7 @@ import satoshipayLogo from '../../assets/logo/satoshipay.svg';
 export const SwapPage = () => {
   const formRef = useRef<HTMLDivElement | null>(null);
   const feeComparisonRef = useRef<FeeComparisonRef>(null);
+  const fromAmountRef = useRef<Big | undefined>(undefined);
   const pendulumNode = usePendulumNode();
   const trackQuote = useRef(false);
   const [api, setApi] = useState<ApiPromise | null>(null);
@@ -268,6 +269,10 @@ export const SwapPage = () => {
     [toToken.fiat.assetIcon, toToken.fiat.symbol, form, tokenOutAmount.isLoading, openTokenSelectModal],
   );
 
+  useEffect(() => {
+    fromAmountRef.current = fromAmount;
+  }, [fromAmount]);
+
   const WithdrawNumericInput = useMemo(
     () => (
       <>
@@ -278,7 +283,12 @@ export const SwapPage = () => {
           onClick={() => openTokenSelectModal('from')}
           onChange={() => {
             // User interacted with the input field
-            trackEvent({ event: 'amount_type' });
+            setTimeout(() => {
+              trackEvent({
+                event: 'amount_type',
+                input_amount: fromAmountRef.current ? fromAmountRef.current.toString() : '0',
+              });
+            }, 3000);
             // This also enables the quote tracking events
             trackQuote.current = true;
           }}
@@ -287,15 +297,19 @@ export const SwapPage = () => {
         <UserBalance token={fromToken} onClick={(amount: string) => form.setValue('fromAmount', amount)} />
       </>
     ),
-    [form, fromToken, openTokenSelectModal, trackEvent],
+    [form, fromAmount, fromToken, openTokenSelectModal, trackEvent],
   );
 
   function getCurrentErrorMessage() {
     if (isDisconnected) return;
 
     if (typeof userInputTokenBalance === 'string') {
       if (Big(userInputTokenBalance).lt(fromAmount ?? 0) && walletAccount) {
-        trackEvent({ event: 'form_error', error_message: 'insufficient_balance' });
+        trackEvent({
+          event: 'form_error',
+          error_message: 'insufficient_balance',
+          input_amount: fromAmount ? fromAmount.toString() : '0',
+        });
         return `Insufficient balance. Your balance is ${userInputTokenBalance} ${fromToken?.assetSymbol}.`;
       }
     }
@@ -307,14 +321,22 @@ export const SwapPage = () => {
       const minAmountUnits = multiplyByPowerOfTen(Big(toToken.minWithdrawalAmountRaw), -toToken.decimals);
 
       if (maxAmountUnits.lt(amountOut)) {
-        trackEvent({ event: 'form_error', error_message: 'more_than_maximum_withdrawal' });
+        trackEvent({
+          event: 'form_error',
+          error_message: 'more_than_maximum_withdrawal',
+          input_amount: fromAmount ? fromAmount.toString() : '0',
+        });
         return `Maximum withdrawal amount is ${stringifyBigWithSignificantDecimals(maxAmountUnits, 2)} ${
           toToken.fiat.symbol
         }.`;
       }
 
       if (!config.test.overwriteMinimumTransferAmount && minAmountUnits.gt(amountOut)) {
-        trackEvent({ event: 'form_error', error_message: 'less_than_minimum_withdrawal' });
+        trackEvent({
+          event: 'form_error',
+          error_message: 'less_than_minimum_withdrawal',
+          input_amount: fromAmount ? fromAmount.toString() : '0',
+        });
         return `Minimum withdrawal amount is ${stringifyBigWithSignificantDecimals(minAmountUnits, 2)} ${
           toToken.fiat.symbol
         }.`;

src/stores/formStore.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import Big from 'big.js';
+import { InputTokenDetails, OutputTokenDetails } from '../constants/tokenConfig';
+
+interface FormState {
+  fromAmount?: Big;
+  fromToken?: InputTokenDetails;
+  toToken?: OutputTokenDetails;
+}
+
+interface FormStoreActions {
+  setFromAmount: (amount?: Big) => void;
+  setFromToken: (token?: InputTokenDetails) => void;
+  setToToken: (token?: OutputTokenDetails) => void;
+}
+
+type FormStore = FormState & {
+  actions: FormStoreActions;
+};
+
+const useFormStore = create<FormStore>((set) => ({
+  fromAmount: undefined,
+  fromToken: undefined,
+  toToken: undefined,
+
+  actions: {
+    setFromAmount: (amount?: Big) => set({ fromAmount: amount }),
+    setFromToken: (token?: InputTokenDetails) => set({ fromToken: token }),
+    setToToken: (token?: OutputTokenDetails) => set({ toToken: token }),
+  },
+}));
+
+export const useFromAmount = () => useFormStore((state) => state.fromAmount);
+export const useFromToken = () => useFormStore((state) => state.fromToken);
+export const useToToken = () => useFormStore((state) => state.toToken);
+
+export const useFormStoreActions = () => useFormStore((state) => state.actions);