Add Google analytics

Author: GhostWalker562

apps/web/app/(authenticated)/vault/[vaultId]/(dashboard)/layout.tsx

@@ -16,6 +16,7 @@ import { Dialog, DialogTrigger } from "@/components/ui/dialog";
 import ReceiveModal from "@/components/modals/ReceiveModal";
 import PageVaultHeader from "@/components/PageVaultHeader";
 import SendCoinsModal from "@/components/modals/SendCoinsModal";
+import useAnalytics from "@/hooks/useAnalytics";
 
 const tabs = [
   {
@@ -31,6 +32,7 @@ const tabs = [
 ] as const;
 
 export default function VaultLayout({ children }: PropsWithChildren) {
+  const trackEvent = useAnalytics();
   const [isSendCoinsModalOpen, setIsSendCoinsModalOpen] = useState(false);
 
   const pathname = usePathname();
@@ -83,7 +85,10 @@ export default function VaultLayout({ children }: PropsWithChildren) {
             <Button
               size="lg"
               className="px-6"
-              onClick={() => setIsSendCoinsModalOpen(true)}
+              onClick={() => {
+                trackEvent("send_coins_review_draft", {});
+                setIsSendCoinsModalOpen(true);
+              }}
               disabled={!isOwner}
               data-testid="send-coins-button"
             >

apps/web/app/(authenticated)/vault/[vaultId]/proposal/create/page.tsx

@@ -40,8 +40,11 @@ import { Separator } from "@/components/ui/separator";
 import Callout from "@/components/Callout";
 import { getSimulationQueryErrors } from "@/lib/simulations/shared";
 import { jsonStringify } from "@/lib/storage";
+import useAnalytics from "@/hooks/useAnalytics";
 
 export default function CreateProposalPage() {
+  const trackEvent = useAnalytics();
+
   const router = useRouter();
 
   const [page, setPage] = useState<"set-details" | "confirm">("set-details");
@@ -55,10 +58,20 @@ export default function CreateProposalPage() {
     hash,
     signAndSubmitTransaction,
     isPending: isSigningAndSubmitting,
-  } = useSignAndSubmitTransaction();
+  } = useSignAndSubmitTransaction({
+    onSuccess: (data) => {
+      trackEvent("create_proposal", {
+        entry_function_id: entryFunction.value,
+        hash: data.hash,
+      });
+    },
+  });
 
-  const { isSuccess, isLoading: isWaitingForTransaction } =
-    useWaitForTransaction({ hash });
+  const {
+    isSuccess,
+    isError,
+    isLoading: isWaitingForTransaction,
+  } = useWaitForTransaction({ hash });
 
   const { transactionPayload, innerPayload } = useMemo(() => {
     if (!abi.value || !isFormValid.value) {
@@ -105,20 +118,23 @@ export default function CreateProposalPage() {
   });
 
   const createProposal = useCallback(() => {
-    if (!transactionPayload) {
+    if (!transactionPayload || !entryFunction.value) {
       toast.error(`There was an error creating your proposal`);
       return;
     }
 
     signAndSubmitTransaction({ data: transactionPayload });
-  }, [signAndSubmitTransaction, transactionPayload]);
+  }, [signAndSubmitTransaction, transactionPayload, entryFunction.value]);
 
   useEffect(() => {
     if (isSuccess) {
       toast.success("Proposal created");
       router.push(`/vault/${id}/transactions`);
+    } else if (isError) {
+      toast.error("Proposal creation failed");
     }
-  }, [isSuccess, router, vaultAddress, hash, id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSuccess, isError]);
 
   const balanceChanges =
     simulation.data &&

apps/web/app/(authenticated)/vault/[vaultId]/proposal/pending/[sequenceNumber]/page.tsx

@@ -40,8 +40,11 @@ import { PendingTransactionRow } from "@/components/PendingTransactionRow";
 import { useRouter } from "next/navigation";
 import { jsonStringify } from "@/lib/storage";
 import Link from "next/link";
+import useAnalytics from "@/hooks/useAnalytics";
 
 export default function ProposalPage() {
+  const trackEvent = useAnalytics();
+
   const queryClient = useQueryClient();
   const router = useRouter();
 
@@ -78,7 +81,20 @@ export default function ProposalPage() {
     hash: secondaryActionHash,
     signAndSubmitTransaction: signAndSubmitSecondaryAction,
     isPending: isSignAndSubmitSecondaryActionPending,
-  } = useSignAndSubmitTransaction();
+  } = useSignAndSubmitTransaction({
+    onSuccess(data, variables) {
+      trackEvent("vote_proposal", {
+        hash: data.hash,
+        action:
+          "data" in variables &&
+          "function" in variables.data &&
+          variables.data.function ===
+            "0x1::multisig_account::approve_transaction"
+            ? "approve"
+            : "reject",
+      });
+    },
+  });
 
   const {
     isSuccess: isSecondaryActionSuccess,
@@ -111,7 +127,25 @@ export default function ProposalPage() {
     hash: primaryActionHash,
     signAndSubmitTransaction: signAndSubmitPrimaryAction,
     isPending: isSignAndSubmitPrimaryActionPending,
-  } = useSignAndSubmitTransaction();
+  } = useSignAndSubmitTransaction({
+    onSuccess(data, variables) {
+      if ("data" in variables && "function" in variables.data) {
+        if (
+          variables.data.function ===
+          "0x1::multisig_account::execute_transaction"
+        ) {
+          trackEvent("execute_proposal", {
+            hash: data.hash,
+          });
+        } else if (
+          variables.data.function ===
+          "0x1::multisig_account::execute_rejected_transaction"
+        ) {
+          trackEvent("remove_proposal", { hash: data.hash });
+        }
+      }
+    },
+  });
 
   const {
     isSuccess: isPrimaryActionSuccess,

apps/web/app/(authenticated)/vault/[vaultId]/proposal/publish-contract/page.tsx

@@ -43,7 +43,7 @@ import { useRouter } from "next/navigation";
 import { Abis } from "@/lib/abis";
 import { getSimulationQueryErrors } from "@/lib/simulations/shared";
 import { jsonStringify } from "@/lib/storage";
-
+import useAnalytics from "@/hooks/useAnalytics";
 const publishModuleJsonSchema = z.object({
   function_id: z.string(),
   type_args: z.array(z.object({ type: z.string(), value: z.string() })),
@@ -54,6 +54,7 @@ const publishModuleJsonSchema = z.object({
 });
 
 export default function PublishContractPage() {
+  const trackEvent = useAnalytics();
   const queryClient = useQueryClient();
   const router = useRouter();
 
@@ -63,15 +64,6 @@ export default function PublishContractPage() {
 
   const [page, setPage] = useState<"draft" | "confirm">("draft");
 
-  const {
-    hash,
-    signAndSubmitTransaction,
-    isPending: isSigningAndSubmitting,
-  } = useSignAndSubmitTransaction();
-
-  const { isSuccess, isLoading: isWaitingForTransaction } =
-    useWaitForTransaction({ hash });
-
   const { data: jsonData, isError: isJsonError } = useQuery({
     queryKey: ["publish-module", file?.lastModified],
     queryFn: async () => {
@@ -114,6 +106,19 @@ export default function PublishContractPage() {
     }
   }, [jsonData, vaultAddress]);
 
+  const {
+    hash,
+    signAndSubmitTransaction,
+    isPending: isSigningAndSubmitting,
+  } = useSignAndSubmitTransaction({
+    onSuccess: (data) => {
+      trackEvent("create_publish_contract_proposal", { hash: data.hash });
+    },
+  });
+
+  const { isSuccess, isLoading: isWaitingForTransaction } =
+    useWaitForTransaction({ hash });
+
   const createProposal = useCallback(() => {
     if (!transactionPayload) {
       toast.error(`There was an error creating your proposal`);

apps/web/app/(authenticated)/vault/[vaultId]/settings/export/page.tsx

@@ -14,8 +14,9 @@ import { DownloadIcon } from "@radix-ui/react-icons";
 import CodeBlock from "@/components/CodeBlock";
 import { jsonStringify } from "@/lib/storage";
 import CopyButton from "@/components/CopyButton";
-
+import useAnalytics from "@/hooks/useAnalytics";
 export default function ExportSettingsPage() {
+  const trackEvent = useAnalytics();
   const { vaults } = useVaults();
 
   const exportVaultsJSON = jsonStringify(vaults);
@@ -45,7 +46,13 @@ export default function ExportSettingsPage() {
             </div>
             <br />
             <div className="flex gap-2">
-              <Button asChild data-testid="export-vaults-button">
+              <Button
+                asChild
+                data-testid="export-vaults-button"
+                onClick={() => {
+                  trackEvent("download_backup_file", {});
+                }}
+              >
                 <a
                   href={`data:text/json;charset=utf-8,${exportVaultsJSON}`}
                   download="petra-vaults-export.json"

apps/web/app/(authenticated)/vault/[vaultId]/settings/page.tsx

@@ -34,8 +34,11 @@ import {
   AlertDialogDescription,
 } from "@/components/ui/alert-dialog";
 import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import useAnalytics from "@/hooks/useAnalytics";
 
 export default function VaultSettingsPage() {
+  const trackEvent = useAnalytics();
+
   const router = useRouter();
 
   // This is a patch to reset the modal's state when it is closed.
@@ -202,6 +205,7 @@ export default function VaultSettingsPage() {
                   <Button
                     variant="destructive"
                     data-testid="delete-vault-button"
+                    onClick={() => trackEvent("delete_vault_attempt", {})}
                   >
                     <TrashIcon />
                     Remove Vault
@@ -226,6 +230,7 @@ export default function VaultSettingsPage() {
                         variant="destructive"
                         onClick={() => {
                           deleteVault(AccountAddress.from(vaultAddress));
+                          trackEvent("delete_vault_success", {});
                           router.push("/");
                         }}
                         data-testid="confirm-delete-vault-button"

apps/web/app/layout.tsx

@@ -5,6 +5,7 @@ import { Toaster } from "@/components/ui/sonner";
 import AppProviders from "@/context/AppProviders";
 import { ThemeProvider } from "@/context/ThemeProvider";
 import { ReactScan } from "@/components/ReactScan";
+import Analytics from "@/components/background/Analytics";
 
 const workSans = Work_Sans({
   display: "swap",
@@ -48,6 +49,7 @@ export default function RootLayout({
             <Toaster richColors closeButton />
           </ThemeProvider>
         </body>
+        <Analytics />
       </AppProviders>
     </html>
   );

apps/web/components/OnboardingAddOrImport.tsx

@@ -25,8 +25,10 @@ import UploadImportJSONModal from "./modals/UploadImportJSONModal";
 import { Vault } from "@/lib/types/vaults";
 import { useRouter } from "next/navigation";
 import { AccountAddress } from "@aptos-labs/ts-sdk";
+import useAnalytics from "@/hooks/useAnalytics";
 
 export default function OnboardingAddOrImport() {
+  const trackEvent = useAnalytics();
   const router = useRouter();
   const { page, vaultName, importVaultAddress } = useOnboarding();
   const { vaults, importVaults } = useVaults();
@@ -80,13 +82,15 @@ export default function OnboardingAddOrImport() {
             "Your connected account is not an owner of this Multisig account."
           );
         }
+        trackEvent("manual_import_vault", { owners: owners.length });
       } catch {
         toast.error("This account is not a Multisig account");
       }
     },
   });
 
   const handleImportVaults = (vaults: Vault[]) => {
+    trackEvent("backup_import_vault", { vault_count: vaults.length });
     importVaults(vaults);
     router.push(`/`);
     toast.success(
@@ -109,6 +113,7 @@ export default function OnboardingAddOrImport() {
               vaultName.set(values.name);
               importVaultAddress.set("");
               page.set("set-config");
+              trackEvent("set_vault_name", {});
             }}
           />
         </CardContent>
@@ -222,6 +227,7 @@ export default function OnboardingAddOrImport() {
                           variant="link"
                           size="sm"
                           onClick={() => {
+                            trackEvent("select_discovered_vault", {});
                             importVaultAddress.set(e.toString());
                             handleLookUpAndImportAccount(e.toString());
                           }}

apps/web/components/OnboardingImportSetName.tsx

@@ -13,8 +13,10 @@ import useMultisigSignaturesRequired from "@/hooks/useMultisigSignaturesRequired
 import { toast } from "sonner";
 import { AccountAddress } from "@aptos-labs/ts-sdk";
 import { useNetwork } from "@aptos-labs/react";
+import useAnalytics from "@/hooks/useAnalytics";
 
 export default function OnboardingImportSetName() {
+  const trackEvent = useAnalytics();
   const { importVaultAddress, importVault } = useOnboarding();
   const network = useNetwork();
 
@@ -26,6 +28,30 @@ export default function OnboardingImportSetName() {
     address: importVaultAddress.current,
   });
 
+  const handleImportVault = (name: string) => {
+    if (!owners || !signaturesRequired) {
+      toast.error("Failed to fetch owners or signatures required");
+      return;
+    }
+
+    trackEvent("create_imported_vault", {
+      signatures_required: signaturesRequired,
+      owners: owners.length,
+    });
+
+    importVault({
+      type: "framework",
+      name: name,
+      signers: owners.map((e, i) => ({
+        address: AccountAddress.from(e),
+        name: `Owner ${i + 1}`,
+      })),
+      signaturesRequired,
+      address: AccountAddress.from(importVaultAddress.current),
+      network: network.network,
+    });
+  };
+
   if (!importVaultAddress.current) {
     return <div>No vault address found</div>;
   }
@@ -47,24 +73,7 @@ export default function OnboardingImportSetName() {
         <CardContent>
           <VaultImportNameForm
             address={importVaultAddress.current}
-            onSubmit={(e) => {
-              if (!owners || !signaturesRequired) {
-                toast.error("Failed to fetch owners or signatures required");
-                return;
-              }
-
-              importVault({
-                type: "framework",
-                name: e.name,
-                signers: owners.map((e, i) => ({
-                  address: AccountAddress.from(e),
-                  name: `Owner ${i + 1}`,
-                })),
-                signaturesRequired,
-                address: AccountAddress.from(importVaultAddress.current),
-                network: network.network,
-              });
-            }}
+            onSubmit={(e) => handleImportVault(e.name)}
           >
             <div>
               <Label>Owners</Label>