contract events

lib/mixpanel/utils.ts

@@ -8,6 +8,9 @@ export enum EventTypes {
   PRIVATE_TAG = 'Private tag',
   VERIFY_ADDRESS = 'Verify address',
   VERIFY_TOKEN = 'Verify token',
+  WALLET_CONNECT = 'Wallet connect',
+  CONTRACT_INTERACTION = 'Contract interaction',
+  CONTRACT_VERIFICATION = 'Contract verification',
 }
 
 /* eslint-disable @typescript-eslint/indent */
@@ -55,5 +58,16 @@ Type extends EventTypes.VERIFY_ADDRESS ? (
 Type extends EventTypes.VERIFY_TOKEN ? {
   'Action': 'Form opened' | 'Submit';
 } :
+Type extends EventTypes.WALLET_CONNECT ? {
+  'Status': 'Started' | 'Connected';
+} :
+Type extends EventTypes.CONTRACT_INTERACTION ? {
+  'Method type': 'Read' | 'Write';
+  'Method name': string;
+} :
+Type extends EventTypes.CONTRACT_VERIFICATION ? {
+  'Method': string;
+  'Status': 'Method selected' | 'Finished';
+} :
 undefined;
 /* eslint-enable @typescript-eslint/indent */

ui/address/contract/ContractConnectWallet.tsx

@@ -4,11 +4,11 @@ import React from 'react';
 import { useAccount, useDisconnect } from 'wagmi';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as mixpanel from 'lib/mixpanel/index';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 const ContractConnectWallet = () => {
   const { open, isOpen } = useWeb3Modal();
-  const { address, isDisconnected } = useAccount();
   const { disconnect } = useDisconnect();
   const isMobile = useIsMobile();
   const [ isModalOpening, setIsModalOpening ] = React.useState(false);
@@ -17,12 +17,19 @@ const ContractConnectWallet = () => {
     setIsModalOpening(true);
     await open();
     setIsModalOpening(false);
+    mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Status: 'Started' });
   }, [ open ]);
 
+  const handleAccountConnected = React.useCallback(({ isReconnected }: { isReconnected: boolean }) => {
+    !isReconnected && mixpanel.logEvent(mixpanel.EventTypes.WALLET_CONNECT, { Status: 'Connected' });
+  }, []);
+
   const handleDisconnect = React.useCallback(() => {
     disconnect();
   }, [ disconnect ]);
 
+  const { address, isDisconnected } = useAccount({ onConnect: handleAccountConnected });
+
   const content = (() => {
     if (isDisconnected || !address) {
       return (

ui/address/contract/ContractMethodCallable.tsx

@@ -8,6 +8,7 @@ import type { MethodFormFields, ContractMethodCallResult } from './types';
 import type { SmartContractMethodInput, SmartContractMethod } from 'types/api/contract';
 
 import arrowIcon from 'icons/arrows/down-right.svg';
+import * as mixpanel from 'lib/mixpanel/index';
 
 import ContractMethodField from './ContractMethodField';
 
@@ -105,8 +106,14 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
       .catch((error) => {
         setResult(error?.error || error?.data || (error?.reason && { message: error.reason }) || error);
         setLoading(false);
+      })
+      .finally(() => {
+        mixpanel.logEvent(mixpanel.EventTypes.CONTRACT_INTERACTION, {
+          'Method type': isWrite ? 'Write' : 'Read',
+          'Method name': 'name' in data ? data.name : 'Fallback',
+        });
       });
-  }, [ onSubmit, data, inputs ]);
+  }, [ inputs, onSubmit, data, isWrite ]);
 
   return (
     <Box>

ui/contractVerification/ContractVerificationForm.tsx

@@ -12,6 +12,7 @@ import { route } from 'nextjs-routes';
 import useApiFetch from 'lib/api/useApiFetch';
 import delay from 'lib/delay';
 import useToast from 'lib/hooks/useToast';
+import * as mixpanel from 'lib/mixpanel/index';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 
@@ -23,7 +24,7 @@ import ContractVerificationStandardInput from './methods/ContractVerificationSta
 import ContractVerificationVyperContract from './methods/ContractVerificationVyperContract';
 import ContractVerificationVyperMultiPartFile from './methods/ContractVerificationVyperMultiPartFile';
 import ContractVerificationVyperStandardInput from './methods/ContractVerificationVyperStandardInput';
-import { prepareRequestBody, formatSocketErrors, getDefaultValues } from './utils';
+import { prepareRequestBody, formatSocketErrors, getDefaultValues, METHOD_LABELS } from './utils';
 
 interface Props {
   method?: SmartContractVerificationMethod;
@@ -38,6 +39,7 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
   });
   const { control, handleSubmit, watch, formState, setError, reset } = formApi;
   const submitPromiseResolver = React.useRef<(value: unknown) => void>();
+  const methodNameRef = React.useRef<string>();
 
   const apiFetch = useApiFetch();
   const toast = useToast();
@@ -80,6 +82,12 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
       isClosable: true,
     });
 
+    mixpanel.logEvent(
+      mixpanel.EventTypes.CONTRACT_VERIFICATION,
+      { Status: 'Finished', Method: methodNameRef.current || '' },
+      { send_immediately: true },
+    );
+
     window.location.assign(route({ pathname: '/address/[hash]', query: { hash, tab: 'contract' } }));
   }, [ hash, setError, toast ]);
 
@@ -135,6 +143,10 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
   useUpdateEffect(() => {
     if (methodValue) {
       reset(getDefaultValues(methodValue, config));
+
+      const methodName = METHOD_LABELS[methodValue];
+      mixpanel.logEvent(mixpanel.EventTypes.CONTRACT_VERIFICATION, { Status: 'Method selected', Method: methodName });
+      methodNameRef.current = methodName;
     }
   // !!! should run only when method is changed
   }, [ methodValue ]);