analytics

src/views/dialogs/DepositDialog.tsx

@@ -13,8 +13,6 @@ export const DepositDialog = ({ setIsOpen }: ElementProps) => {
   const stringGetter = useStringGetter();
   const { isMobile } = useBreakpoints();
 
-  const closeDialog = () => setIsOpen?.(false);
-
   return (
     <Dialog
       isOpen
@@ -22,7 +20,7 @@ export const DepositDialog = ({ setIsOpen }: ElementProps) => {
       title={stringGetter({ key: STRING_KEYS.DEPOSIT })}
       placement={isMobile ? DialogPlacement.FullScreen : DialogPlacement.Default}
     >
-      <DepositDialogContent onDeposit={closeDialog} />
+      <DepositDialogContent />
     </Dialog>
   );
 };

src/views/dialogs/DepositDialog/DepositDialogContent.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { TransferInputField, TransferType } from '@/constants/abacus';
+import { AnalyticsEvent } from '@/constants/analytics';
 import { isMainnet } from '@/constants/networks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -9,6 +10,7 @@ import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm';
 import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm';
 
 import abacusStateManager from '@/lib/abacus';
+import { track } from '@/lib/analytics';
 
 type ElementProps = {
   onDeposit?: () => void;
@@ -34,9 +36,19 @@ export const DepositDialogContent = ({ onDeposit }: ElementProps) => {
   return (
     <Styled.Content>
       {isMainnet || !showFaucet ? (
-        <DepositForm onDeposit={onDeposit} />
+        <DepositForm
+          onDeposit={(event) => {
+            track(AnalyticsEvent.TransferDeposit, event);
+            onDeposit?.();
+          }}
+        />
       ) : (
-        <TestnetDepositForm onDeposit={onDeposit} />
+        <TestnetDepositForm
+          onDeposit={() => {
+            track(AnalyticsEvent.TransferFaucet);
+            onDeposit?.();
+          }}
+        />
       )}
       {!isMainnet && (
         <Styled.TextToggle onClick={() => setShowFaucet(!showFaucet)}>

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -259,8 +259,6 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         };
         const txHash = await signerWagmi.sendTransaction(tx);
 
-        onDeposit?.();
-
         if (txHash) {
           addTransferNotification({
             txHash: txHash,
@@ -272,6 +270,12 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           });
           abacusStateManager.clearTransferInputValues();
           setFromAmount('');
+
+          onDeposit?.({
+            chainId: chainIdStr || undefined,
+            tokenAddress: sourceToken?.address || undefined,
+            tokenSymbol: sourceToken?.symbol || undefined,
+          });
         }
       } catch (error) {
         log('DepositForm/onSubmit', error);

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -56,6 +56,8 @@ import { getNobleChainId } from '@/lib/squid';
 import { TokenSelectMenu } from './TokenSelectMenu';
 import { WithdrawButtonAndReceipt } from './WithdrawForm/WithdrawButtonAndReceipt';
 import { validateCosmosAddress } from '@/lib/addressUtils';
+import { track } from '@/lib/analytics';
+import { AnalyticsEvent } from '@/constants/analytics';
 
 export const WithdrawForm = () => {
   const stringGetter = useStringGetter();
@@ -183,11 +185,12 @@ export const WithdrawForm = () => {
           );
           if (txHash) {
             const nobleChainId = getNobleChainId();
+            const toChainId = Boolean(exchange) ? nobleChainId : chainIdStr || undefined;
             addTransferNotification({
               txHash: txHash,
               type: TransferNotificationTypes.Withdrawal,
               fromChainId: !isCctp ? selectedDydxChainId : nobleChainId,
-              toChainId: Boolean(exchange) ? nobleChainId : chainIdStr || undefined,
+              toChainId,
               toAmount: debouncedAmountBN.toNumber(),
               triggeredAt: Date.now(),
               isCctp,
@@ -195,6 +198,12 @@ export const WithdrawForm = () => {
             });
             abacusStateManager.clearTransferInputValues();
             setWithdrawAmount('');
+
+            track(AnalyticsEvent.TransferWithdraw, {
+              chainId: toChainId,
+              tokenAddress: toToken?.address || undefined,
+              tokenSymbol: toToken?.symbol || undefined,
+            });
           }
         }
       } catch (error) {
@@ -222,10 +231,11 @@ export const WithdrawForm = () => {
       debouncedAmountBN,
       chainIdStr,
       toAddress,
-      screenAddresses,
-      stringGetter,
       selectedDydxChainId,
       exchange,
+      toToken,
+      screenAddresses,
+      stringGetter,
     ]
   );
 
@@ -380,6 +390,10 @@ export const WithdrawForm = () => {
     summary,
   ]);
 
+  const isInvalidNobleAddress = Boolean(
+    exchange && toAddress && !validateCosmosAddress(toAddress, 'noble')
+  );
+
   const isDisabled =
     !!errorMessage ||
     !toToken ||
@@ -387,9 +401,8 @@ export const WithdrawForm = () => {
     !toAddress ||
     debouncedAmountBN.isNaN() ||
     debouncedAmountBN.isZero() ||
-    isLoading;
-
-  const isInvalidNobleAddress = exchange && toAddress && !validateCosmosAddress(toAddress, 'noble');
+    isLoading ||
+    isInvalidNobleAddress;
 
   return (
     <Styled.Form onSubmit={onSubmit}>