Merge pull request #1639 from blockscout/mixpanel-events-in-dapps

Add mixpanel events to operations in dapps

lib/mixpanel/utils.ts

@@ -74,9 +74,15 @@ Type extends EventTypes.WALLET_CONNECT ? {
   'Source': 'Header' | 'Smart contracts' | 'Swap button';
   'Status': 'Started' | 'Connected';
 } :
-Type extends EventTypes.WALLET_ACTION ? {
-  'Action': 'Open' | 'Address click';
-} :
+Type extends EventTypes.WALLET_ACTION ? (
+  {
+    'Action': 'Open' | 'Address click';
+  } | {
+    'Action': 'Send Transaction' | 'Sign Message' | 'Sign Typed Data';
+    'Address': string | undefined;
+    'AppId': string;
+  }
+) :
 Type extends EventTypes.CONTRACT_INTERACTION ? {
   'Method type': 'Read' | 'Write';
   'Method name': string;

ui/marketplace/useMarketplaceWallet.tsx

@@ -4,6 +4,7 @@ import type { Account, SignTypedDataParameters } from 'viem';
 import { useAccount, useSendTransaction, useSwitchNetwork, useNetwork, useSignMessage, useSignTypedData } from 'wagmi';
 
 import config from 'configs/app';
+import * as mixpanel from 'lib/mixpanel/index';
 
 type SendTransactionArgs = {
   chainId?: number;
@@ -20,7 +21,7 @@ export type SignTypedDataArgs<
   TPrimaryType extends string = string,
 > = SignTypedDataParameters<TTypedData, TPrimaryType, Account>;
 
-export default function useMarketplaceWallet() {
+export default function useMarketplaceWallet(appId: string) {
   const { address } = useAccount();
   const { chain } = useNetwork();
   const { sendTransactionAsync } = useSendTransaction();
@@ -28,6 +29,13 @@ export default function useMarketplaceWallet() {
   const { signTypedDataAsync } = useSignTypedData();
   const { switchNetworkAsync } = useSwitchNetwork({ chainId: Number(config.chain.id) });
 
+  const logEvent = useCallback((event: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_ACTION>['Action']) => {
+    mixpanel.logEvent(
+      mixpanel.EventTypes.WALLET_ACTION,
+      { Action: event, Address: address, AppId: appId },
+    );
+  }, [ address, appId ]);
+
   const switchNetwork = useCallback(async() => {
     if (Number(config.chain.id) !== chain?.id) {
       await switchNetworkAsync?.();
@@ -37,14 +45,16 @@ export default function useMarketplaceWallet() {
   const sendTransaction = useCallback(async(transaction: SendTransactionArgs) => {
     await switchNetwork();
     const tx = await sendTransactionAsync(transaction);
+    logEvent('Send Transaction');
     return tx.hash;
-  }, [ sendTransactionAsync, switchNetwork ]);
+  }, [ sendTransactionAsync, switchNetwork, logEvent ]);
 
   const signMessage = useCallback(async(message: string) => {
     await switchNetwork();
     const signature = await signMessageAsync({ message });
+    logEvent('Sign Message');
     return signature;
-  }, [ signMessageAsync, switchNetwork ]);
+  }, [ signMessageAsync, switchNetwork, logEvent ]);
 
   const signTypedData = useCallback(async(typedData: SignTypedDataArgs) => {
     await switchNetwork();
@@ -52,8 +62,9 @@ export default function useMarketplaceWallet() {
       typedData.domain.chainId = Number(typedData.domain.chainId);
     }
     const signature = await signTypedDataAsync(typedData);
+    logEvent('Sign Typed Data');
     return signature;
-  }, [ signTypedDataAsync, switchNetwork ]);
+  }, [ signTypedDataAsync, switchNetwork, logEvent ]);
 
   return {
     address,

ui/pages/MarketplaceApp.tsx

@@ -97,13 +97,12 @@ const MarketplaceAppContent = ({ address, data, isPending }: Props) => {
 };
 
 const MarketplaceApp = () => {
-  const { address, sendTransaction, signMessage, signTypedData } = useMarketplaceWallet();
-  useAutoConnectWallet();
-
   const fetch = useFetch();
   const apiFetch = useApiFetch();
   const router = useRouter();
   const id = getQueryParamString(router.query.id);
+  const { address, sendTransaction, signMessage, signTypedData } = useMarketplaceWallet(id);
+  useAutoConnectWallet();
 
   const query = useQuery<unknown, ResourceError<unknown>, MarketplaceAppOverview>({
     queryKey: [ 'marketplace-dapps', id ],