Dashboard: Add tracking for fund wallet modal

Author: MananTank

apps/dashboard/src/@/analytics/report.ts

@@ -467,3 +467,39 @@ export function reportAssetPageview(properties: {
 }) {
   posthog.capture("asset pageview", properties);
 }
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the usage of fund wallet modal
+ * - To create a funnel "fund wallet modal opened" -> "fund wallet buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletOpened() {
+  posthog.capture("fund wallet opened");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of successful fund wallet buys
+ * - To create a funnel "fund wallet modal opened" -> "fund wallet buy successful" to understand the conversion rate
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletSuccessful() {
+  posthog.capture("fund wallet successful");
+}
+
+/**
+ * ### Why do we need to report this event?
+ * - To track the number of failed fund wallet buys
+ * - To track the errors that users encounter when trying to buy from a fund wallet modal
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ */
+export function reportFundWalletFailed(params: { errorMessage: string }) {
+  posthog.capture("fund wallet failed", params);
+}

apps/dashboard/src/@/components/blocks/fund-wallets-modal/index.tsx

@@ -9,6 +9,10 @@ import type { ThirdwebClient } from "thirdweb";
 import { defineChain } from "thirdweb/chains";
 import { CheckoutWidget, useActiveWalletChain } from "thirdweb/react";
 import { z } from "zod";
+import {
+  reportFundWalletFailed,
+  reportFundWalletSuccessful,
+} from "@/analytics/report";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { TokenSelector } from "@/components/blocks/TokenSelector";
 import { Button } from "@/components/ui/button";
@@ -252,6 +256,14 @@ function FundWalletModalContent(props: FundWalletModalProps) {
               className="!w-full !max-w-full !min-w-0 !rounded-b-none !border-none"
               theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
               name={props.checkoutWidgetTitle}
+              onSuccess={() => {
+                reportFundWalletSuccessful();
+              }}
+              onError={(error) => {
+                reportFundWalletFailed({
+                  errorMessage: error.message,
+                });
+              }}
             />
           </div>
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx

@@ -17,6 +17,7 @@ import { toast } from "sonner";
 import { getAddress, type ThirdwebClient } from "thirdweb";
 import { isAddress, shortenAddress } from "thirdweb/utils";
 import { z } from "zod";
+import { reportFundWalletOpened } from "@/analytics/report";
 import { FundWalletModal } from "@/components/blocks/fund-wallets-modal";
 import { TWTable } from "@/components/blocks/TWTable";
 import { WalletAddress } from "@/components/blocks/wallet-address";
@@ -268,6 +269,7 @@ export const BackendWalletsTable: React.FC<BackendWalletsTableProps> = ({
             onClick: (wallet) => {
               setSelectedBackendWallet(wallet);
               setReceiveOpen(true);
+              reportFundWalletOpened();
             },
             text: "Fund wallet",
           },