feat: add amplitude to proposal to store code page

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#321](https://github.com/alleslabs/celatone-frontend/pull/321) Add amplitude to proposal to store code page
 - [#274](https://github.com/alleslabs/celatone-frontend/pull/274) Add proposal to store code page
 - [#279](https://github.com/alleslabs/celatone-frontend/pull/279) Add instantiate permission to msg store code, change error display design, and upgrade cosmjs to version 0.30.1
 

src/lib/components/ConnectWalletAlert.tsx

@@ -11,24 +11,26 @@ import type { AlertProps } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import type { MouseEventHandler } from "react";
 
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import { AmpTrackUseClickWallet } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
 
 interface ConnectWalletAlertProps extends AlertProps {
   title?: string;
   subtitle?: string;
+  page?: string;
 }
 
 export const ConnectWalletAlert = ({
   title,
   subtitle,
+  page,
   ...alertProps
 }: ConnectWalletAlertProps) => {
   const { address, connect } = useWallet();
 
   const onClickConnect: MouseEventHandler = async (e) => {
-    AmpTrack(AmpEvent.USE_CLICK_WALLET);
+    AmpTrackUseClickWallet(page, "alert");
     e.preventDefault();
     await connect();
   };

src/lib/components/StickySidebar.tsx

@@ -17,10 +17,12 @@ import {
 } from "lib/app-provider";
 import type { Network } from "lib/data";
 import { getChainNameByNetwork } from "lib/data";
+import { AmpTrackUseRightHelperPanel } from "lib/services/amplitude";
 
 import { CustomIcon } from "./icon";
 
 export interface SidebarMetadata {
+  page: string;
   title: string;
   description: React.ReactElement;
   toNetwork?: boolean;
@@ -70,8 +72,15 @@ export const StickySidebar = ({
   const selectChain = useSelectChain();
   const { isMainnet } = useCurrentNetwork();
   const { network } = useCurrentNetwork();
-  const { title, description, toNetwork, toPagePath, toPageTitle, toPage } =
-    metadata[network];
+  const {
+    title,
+    description,
+    toNetwork,
+    toPagePath,
+    toPageTitle,
+    toPage,
+    page,
+  } = metadata[network];
   const hasAction = toPage;
   return (
     <Box flex="4" px={8} position="relative" {...boxProps}>
@@ -105,17 +114,21 @@ export const StickySidebar = ({
               </Text>
               {toNetwork && (
                 <ToPage
-                  onClick={() =>
+                  onClick={() => {
+                    AmpTrackUseRightHelperPanel(page, "change-network");
                     selectChain(
                       getChainNameByNetwork(isMainnet ? "testnet" : "mainnet")
-                    )
-                  }
+                    );
+                  }}
                   title={isMainnet ? "Switch To Testnet" : "Switch To Mainnet"}
                 />
               )}
               {toPage && toPagePath && toPageTitle && (
                 <ToPage
-                  onClick={() => navigate({ pathname: toPagePath })}
+                  onClick={() => {
+                    AmpTrackUseRightHelperPanel(page, `to-${toPagePath}`);
+                    navigate({ pathname: toPagePath });
+                  }}
                   title={toPageTitle}
                 />
               )}

src/lib/components/upload/InstantiatePermissionRadio.tsx

@@ -1,19 +1,25 @@
 import { Text, Box, Radio, RadioGroup, Button, Flex } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
+import { useEffect } from "react";
 import type { Control, UseFormSetValue, UseFormTrigger } from "react-hook-form";
 import { useController, useFieldArray, useWatch } from "react-hook-form";
 
 import { AddressInput } from "../AddressInput";
 import { AssignMe } from "../AssignMe";
 import { CustomIcon } from "lib/components/icon";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import {
+  AmpEvent,
+  AmpTrack,
+  AmpTrackUseInstantiatePermission,
+} from "lib/services/amplitude";
 import type { Addr, UploadSectionState } from "lib/types";
 import { AccessType } from "lib/types";
 
 interface InstantiatePermissionRadioProps {
   control: Control<UploadSectionState>;
   setValue: UseFormSetValue<UploadSectionState>;
   trigger: UseFormTrigger<UploadSectionState>;
+  page?: string;
 }
 
 interface PermissionRadioProps {
@@ -32,6 +38,7 @@ export const InstantiatePermissionRadio = ({
   control,
   setValue,
   trigger,
+  page,
 }: InstantiatePermissionRadioProps) => {
   const { address: walletAddress } = useWallet();
 
@@ -52,6 +59,19 @@ export const InstantiatePermissionRadio = ({
     name: "addresses",
   });
 
+  useEffect(() => {
+    const emptyAddressesLength = addresses.filter(
+      (addr) => addr.address.trim().length === 0
+    ).length;
+    if (page)
+      AmpTrackUseInstantiatePermission(
+        page,
+        permission,
+        emptyAddressesLength,
+        addresses.length - emptyAddressesLength
+      );
+  }, [addresses, page, permission]);
+
   return (
     <RadioGroup
       name="instantiatePermission"

src/lib/pages/proposal/constants.tsx

@@ -1,9 +1,13 @@
+import { Text } from "@chakra-ui/react";
 import Link from "next/link";
 
 import type { SidebarDetails } from "lib/components/StickySidebar";
+import { AmpTrackUseRightHelperPanel } from "lib/services/amplitude";
 
+const whitelistPage = "proposal-whitelist";
 export const SIDEBAR_WHITELIST_DETAILS: SidebarDetails = {
   mainnet: {
+    page: whitelistPage,
     title: "What is whitelisted address?",
     description: (
       <span>
@@ -24,6 +28,7 @@ export const SIDEBAR_WHITELIST_DETAILS: SidebarDetails = {
     toPageTitle: "Submit Proposal To Store Code",
   },
   testnet: {
+    page: whitelistPage,
     title: "Do I need to open proposal to whitelisting in testnet?",
     description: (
       <span>
@@ -40,13 +45,16 @@ export const SIDEBAR_WHITELIST_DETAILS: SidebarDetails = {
   },
   // TODO: fill localnet information
   localnet: {
+    page: whitelistPage,
     title: "",
     description: <span />,
   },
 };
 
+const storeCodePage = "proposal-store-code";
 export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
   mainnet: {
+    page: storeCodePage,
     title: "Why do I need to submit proposal?",
     description: (
       <span>
@@ -64,14 +72,22 @@ export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
     toNetwork: true,
   },
   testnet: {
+    page: storeCodePage,
     title: "Do I need to submit Proposal to store code in testnet?",
     description: (
       <span>
         On the Osmosis testnet, you can store code without submitting a proposal
         by using
-        <Link href="/deploy">
+        <Link
+          href="/deploy"
+          onClick={() =>
+            AmpTrackUseRightHelperPanel(storeCodePage, "to-/deploy")
+          }
+        >
           {" "}
-          <span style={{ color: "#D8BEFC" }}>Deploy Contract</span>
+          <Text as="span" color="lilac.main">
+            Deploy Contract
+          </Text>
         </Link>
         <br />
         <br />
@@ -89,6 +105,7 @@ export const SIDEBAR_STORE_CODE_DETAILS: SidebarDetails = {
   },
   // TODO: fill localnet information
   localnet: {
+    page: storeCodePage,
     title: "",
     description: <span />,
   },

src/lib/pages/proposal/store-code/index.tsx

@@ -12,6 +12,7 @@ import {
 import { Sha256 } from "@cosmjs/crypto";
 import type { Coin, StdFee } from "@cosmjs/stargate";
 import { useWallet } from "@cosmos-kit/react";
+import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 
@@ -46,7 +47,13 @@ import {
   MAX_PROPOSAL_TITLE_LENGTH,
 } from "lib/data";
 import { useTxBroadcast } from "lib/providers/tx-broadcast";
-import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+import {
+  AmpEvent,
+  AmpTrack,
+  AmpTrackUseDepositFill,
+  AmpTrackUseSubmitProposal,
+  AmpTrackUseUnpin,
+} from "lib/services/amplitude";
 import { useGovParams } from "lib/services/proposalService";
 import type {
   Addr,
@@ -79,7 +86,8 @@ const defaultValues: StoreCodeProposalState = {
   codeHash: "",
 };
 
-// TODO - add amp track
+const page = "proposal-store-code";
+
 const StoreCodeProposal = () => {
   const {
     appHumanAddress: { example: exampleHumanAddress },
@@ -137,6 +145,12 @@ const StoreCodeProposal = () => {
   } = watch();
   const { wasmFile, permission, addresses } = uploadSectionWatch();
 
+  // Amp
+  const router = useRouter();
+  useEffect(() => {
+    if (router.isReady) AmpTrack(AmpEvent.TO_PROPOSAL_TO_STORE_CODE);
+  }, [router.isReady]);
+
   const { variant, description, icon } = getAlert(
     initialDeposit.amount,
     minDeposit?.formattedAmount,
@@ -251,6 +265,14 @@ const StoreCodeProposal = () => {
 
   const proceed = useCallback(async () => {
     if (!wasmFile) return null;
+
+    AmpTrackUseSubmitProposal(page, {
+      initialDeposit: initialDeposit.amount,
+      minDeposit: minDeposit?.formattedAmount,
+      addressesCount: addresses.length,
+      permission: AccessType[permission],
+    });
+
     const submitStoreCodeProposalMsg = async () => {
       return composeStoreCodeProposalMsg({
         proposer: walletAddress as HumanAddr,
@@ -437,7 +459,10 @@ const StoreCodeProposal = () => {
                 {/* Unpin code  */}
                 <Flex direction="row" alignItems="center" gap={1}>
                   <Checkbox
-                    onChange={(e) => setValue("unpinCode", e.target.checked)}
+                    onChange={(e) => {
+                      AmpTrackUseUnpin(page, e.target.checked);
+                      setValue("unpinCode", e.target.checked);
+                    }}
                   >
                     {PROPOSAL_STORE_CODE_TEXT.unpinLabel}
                   </Checkbox>
@@ -501,6 +526,7 @@ const StoreCodeProposal = () => {
                   control={uploadSectionControl}
                   setValue={uploadSectionSetValue}
                   trigger={uploadSectionTrigger}
+                  page={page}
                 />
 
                 {/* Deposit  */}
@@ -531,6 +557,10 @@ const StoreCodeProposal = () => {
                         color="honeydew.main"
                         onClick={() => {
                           if (!minDeposit) return;
+                          AmpTrackUseDepositFill(
+                            page,
+                            minDeposit.formattedAmount
+                          );
                           setValue(
                             "initialDeposit.amount",
                             minDeposit.formattedAmount