Dashboard: Add tracking for fund wallet modal (#7800)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the analytics tracking for the `FundWalletModal` component by adding new reporting functions and integrating them into the wallet funding process.

### Detailed summary
- Added `reportFundWalletOpened` function to track when the fund wallet modal is opened.
- Integrated `reportFundWalletOpened` call in `BackendWalletsTable` when the fund wallet button is clicked.
- Added `reportFundWalletSuccessful` and `reportFundWalletFailed` functions to track successful and failed fund wallet transactions.
- Integrated success and error reporting in the `FundWalletModal` component.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Added analytics tracking for opening the fund wallet modal, successful wallet funding, and failed wallet funding attempts, including error reporting.
  * Enhanced the fund wallet experience with event reporting on user actions for improved insights.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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",
           },