feat(utils): amplitude on publish module and deploy script

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#652](https://github.com/alleslabs/celatone-frontend/pull/652) feat: amp publish module and deploy script
 - [#637](https://github.com/alleslabs/celatone-frontend/pull/637) feat: amp module interaction and code snippet property
 - [#633](https://github.com/alleslabs/celatone-frontend/pull/633) feat: amp module detail and breadcrumb
 

src/lib/amplitude/track-event/trackInteraction.ts

@@ -2,12 +2,18 @@ import big from "big.js";
 
 import { amp } from "../Amplitude";
 import { AmpEvent } from "../types";
+import type { SearchResultType } from "lib/services/searchService";
 import type { MoveAccountAddr, Option, Token } from "lib/types";
 import { isHexModuleAddress, isHexWalletAddress } from "lib/utils";
 
-export const trackUseMainSearch = (isClick: boolean, section?: string) =>
+export const trackUseMainSearch = (
+  isClick: boolean,
+  type?: SearchResultType,
+  section?: string
+) =>
   amp.track(AmpEvent.USE_MAIN_SEARCH, {
     isClick,
+    type,
     section,
   });
 

src/lib/amplitude/types.ts

@@ -64,6 +64,7 @@ export enum AmpEvent {
   TO_MODULE_DETAIL = "To Module Detail",
   TO_MODULE_INTERACTION = "To Module Interaction",
   TO_PUBLISH_MODULE = "To Publish Module",
+  TO_DEPLOY_SCRIPT = "To Deploy Script",
   // ACTIONS
   ACTION_UPLOAD = "Action Upload",
   ACTION_INSTANTIATE = "Action Instantiate",
@@ -77,6 +78,8 @@ export enum AmpEvent {
   ACTION_ATTACH_JSON = "Action Attach Json",
   ACTION_MOVE_VIEW = "Action Move View",
   ACTION_MOVE_EXECUTE = "Action Move Execute",
+  ACTION_MOVE_PUBLISH = "Action Move Publish",
+  ACTION_EXECUTE_SCRIPT = "Action Execute Script",
   // INTERACTS
   USE_SELECT_NETWORK = "Use Select Network",
   USE_CLICK_WALLET = "Use Click Wallet",
@@ -153,6 +156,17 @@ export enum AmpEvent {
   USE_MODULE_SELECTION_FUNCTION = "Use Module Selection Function",
   USE_MODULE_SELECTION_MODULE = "Use Module Selection Module",
   USE_FUNCTION_SELECTION = "Use Function Selection",
+  USE_PUBLISH_POLICY_SELECTION = "Use Publish Policy Selection",
+  USE_ADD_MODULE_UPLOAD_BOX = "Use Add Module Upload Box",
+  USE_REMOVE_MODULE_UPLOAD_BOX = "Use Remove Module Upload Box",
+  USE_UPLOAD_FILE = "Use Upload File",
+  USE_REMOVE_UPLOAD_FILE = "Use Remove Upload File",
+  USE_VIEW_CONDITION = "Use View Condition",
+  USE_UPLOAD_CARD_MOVE_UP = "Use Upload Card Move Up",
+  USE_UPLOAD_CARD_MOVE_DOWN = "Use Upload Card Move Down",
+  USE_PUBLISH_MORE_MODULE_BUTTON = "Use Publish More Module Button",
+  USE_PUBLISHED_MODULE_ACTION = "Use Publish Module Action",
+
   // TX
   TX_SUCCEED = "Tx Succeed",
   TX_FAILED = "Tx Failed",

src/lib/components/dropzone/index.tsx

@@ -5,6 +5,7 @@ import { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 
 import { UploadIcon } from "../icon";
+import { AmpEvent, track } from "lib/amplitude";
 import { useMoveConfig, useWasmConfig } from "lib/app-provider";
 
 import type { DropzoneFileType } from "./config";
@@ -26,9 +27,10 @@ export function DropZone({
   const move = useMoveConfig({ shouldRedirect: false });
   const onDrop = useCallback(
     (file: File[]) => {
+      track(AmpEvent.USE_UPLOAD_FILE, { fileType });
       setFile(file[0]);
     },
-    [setFile]
+    [fileType, setFile]
   );
 
   const config = DROPZONE_CONFIG[fileType];

src/lib/components/upload/UploadCard.tsx

@@ -1,6 +1,7 @@
 import { Button, Flex, Text } from "@chakra-ui/react";
 import big from "big.js";
 
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon, UploadIcon } from "lib/components/icon";
 import type { Nullable, Option } from "lib/types";
 
@@ -84,7 +85,10 @@ export const UploadCard = ({
             leftIcon={<CustomIcon name="delete" boxSize={3} />}
             size="sm"
             variant={themeConfig.buttonVariant}
-            onClick={deleteFile}
+            onClick={() => {
+              track(AmpEvent.USE_REMOVE_UPLOAD_FILE);
+              deleteFile();
+            }}
           >
             Remove file
           </Button>

src/lib/layout/Searchbar.tsx

@@ -266,7 +266,7 @@ const Searchbar = () => {
 
   const handleSelectResult = useCallback(
     (type?: SearchResultType, isClick = false) => {
-      trackUseMainSearch(isClick);
+      trackUseMainSearch(isClick, type);
       const routeOptions = getRouteOptions(type);
       if (routeOptions) {
         const queryValues =

src/lib/pages/deploy-script/index.tsx

@@ -1,7 +1,9 @@
 import { Flex, Heading, Text } from "@chakra-ui/react";
 import type { StdFee } from "@cosmjs/stargate";
-import { useCallback, useMemo, useState } from "react";
+import { useRouter } from "next/router";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useCurrentChain,
   useFabricateFee,
@@ -38,6 +40,7 @@ const DEFAULT_FILE_STATE: FileState = {
 };
 
 export const DeployScript = () => {
+  const router = useRouter();
   const { address } = useCurrentChain();
   const fabricateFee = useFabricateFee();
   const deployScriptTx = useDeployScriptTx();
@@ -130,6 +133,10 @@ export const DeployScript = () => {
     inputData,
   ]);
 
+  useEffect(() => {
+    if (router.isReady) track(AmpEvent.TO_DEPLOY_SCRIPT);
+  }, [router.isReady]);
+
   return (
     <>
       <WasmPageContainer>
@@ -199,7 +206,10 @@ export const DeployScript = () => {
       <Footer
         isLoading={processing}
         disabled={!enableDeploy || Boolean(simulateError) || isSimulating}
-        executeScript={proceed}
+        executeScript={() => {
+          track(AmpEvent.ACTION_EXECUTE_SCRIPT);
+          proceed();
+        }}
       />
     </>
   );

src/lib/pages/instantiate/instantiate.tsx

@@ -373,7 +373,8 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
 
   useEffect(() => {
     if (router.isReady) trackToInstantiate(!!msgQuery, !!codeIdQuery);
-  }, [router.isReady, msgQuery, codeIdQuery]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
 
   return (
     <>

src/lib/pages/publish-module/completed.tsx

@@ -2,6 +2,7 @@ import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 import { capitalize } from "lodash";
 import plur from "plur";
 
+import { AmpEvent, track } from "lib/amplitude";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TxReceiptRender } from "lib/components/tx";
@@ -61,7 +62,10 @@ export const PublishCompleted = ({
       mt={6}
       rightIcon={<CustomIcon name="chevron-right" boxSize={3} />}
       w="full"
-      onClick={resetState}
+      onClick={() => {
+        track(AmpEvent.USE_PUBLISH_MORE_MODULE_BUTTON);
+        resetState();
+      }}
     >
       Publish more modules
     </Button>

src/lib/pages/publish-module/components/ModulePublishCard.tsx

@@ -1,6 +1,7 @@
 import { Button, Flex, Grid, Heading, Text } from "@chakra-ui/react";
 
 import type { Module } from "../formConstants";
+import { AmpEvent, track } from "lib/amplitude";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { CountBadge } from "lib/components/module";
@@ -78,44 +79,61 @@ export const ModulePublishCard = ({ module }: ModulePublishCardProps) => {
         <Button
           rightIcon={<CustomIcon name="launch" boxSize={3} color="text.main" />}
           variant="outline-white"
-          onClick={() =>
+          onClick={() => {
+            track(AmpEvent.USE_PUBLISHED_MODULE_ACTION, {
+              label: "See Module",
+            });
             openNewTab({
               pathname: `/modules/${decodeRes?.abi.address}/${decodeRes?.abi.name}`,
               query: {},
-            })
-          }
+            });
+          }}
         >
           See Module
         </Button>
         <Button
           leftIcon={<CustomIcon name="query" boxSize={3} color="text.main" />}
           variant="outline-white"
-          onClick={() =>
+          onClick={() => {
+            track(AmpEvent.USE_PUBLISHED_MODULE_ACTION, {
+              label: "View",
+              viewCount:
+                module.decodeRes?.abi.exposed_functions.filter(
+                  (fn) => fn.is_view
+                ).length ?? 0,
+            });
             openNewTab({
               pathname: "/interact",
               query: {
                 address: decodeRes?.abi.address,
                 moduleName: decodeRes?.abi.name,
                 functionType: "view",
               },
-            })
-          }
+            });
+          }}
         >
           View
         </Button>
         <Button
           leftIcon={<CustomIcon name="execute" boxSize={3} color="text.main" />}
           variant="outline-white"
-          onClick={() =>
+          onClick={() => {
+            track(AmpEvent.USE_PUBLISHED_MODULE_ACTION, {
+              label: "Execute",
+              executeCount:
+                module.decodeRes?.abi.exposed_functions.filter(
+                  (fn) => !fn.is_view
+                ).length ?? 0,
+            });
             openNewTab({
               pathname: "/interact",
               query: {
                 address: decodeRes?.abi.address,
                 moduleName: decodeRes?.abi.name,
                 functionType: "execute",
               },
-            })
-          }
+            });
+          }}
         >
           Execute
         </Button>

src/lib/pages/publish-module/components/PolicyCard.tsx

@@ -3,6 +3,7 @@ import { Grid, Flex, Text } from "@chakra-ui/react";
 import { capitalize } from "lodash";
 import { MdRadioButtonChecked, MdRadioButtonUnchecked } from "react-icons/md";
 
+import { AmpEvent, track } from "lib/amplitude";
 import type { UpgradePolicy } from "lib/types";
 
 import { Leaflet } from "./leaflet";
@@ -49,7 +50,13 @@ export const PolicyCard = ({
 }: PolicyCardProps) => {
   const isChecked = value === selected;
   return (
-    <RadioCard onClick={onSelect} checked={isChecked}>
+    <RadioCard
+      onClick={() => {
+        track(AmpEvent.USE_PUBLISH_POLICY_SELECTION, { upgradePolicy: value });
+        onSelect();
+      }}
+      checked={isChecked}
+    >
       <Flex flexDirection="column">
         <Text variant="body1">{capitalize(value)}</Text>
         <Text variant="body2" textColor="text.dark" fontWeight={600}>

src/lib/pages/publish-module/components/UploadModuleCard.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from "react";
 
 import type { Module, PublishStatus } from "../formConstants";
 import { statusResolver } from "../utils";
+import { AmpEvent, track } from "lib/amplitude";
 import { useCurrentChain } from "lib/app-provider";
 import { ComponentLoader } from "lib/components/ComponentLoader";
 import { DropZone } from "lib/components/dropzone";
@@ -121,7 +122,14 @@ export const UploadModuleCard = ({
         >
           <Tooltip label="Move up" variant="primary-light">
             <IconButton
-              onClick={() => moveEntry(index, index - 1)}
+              onClick={() => {
+                track(AmpEvent.USE_UPLOAD_CARD_MOVE_UP, {
+                  currentPosition: index + 1,
+                  newPosition: index,
+                  currentBoxAmount: modules.length,
+                });
+                moveEntry(index, index - 1);
+              }}
               aria-label="move-up"
               variant="ghost"
               size="sm"
@@ -132,7 +140,14 @@ export const UploadModuleCard = ({
           </Tooltip>
           <Tooltip label="Move down" variant="primary-light">
             <IconButton
-              onClick={() => moveEntry(index, index + 1)}
+              onClick={() => {
+                track(AmpEvent.USE_UPLOAD_CARD_MOVE_DOWN, {
+                  currentPosition: index + 1,
+                  newPosition: index + 2,
+                  currentBoxAmount: modules.length,
+                });
+                moveEntry(index, index + 1);
+              }}
               aria-label="move-down"
               variant="ghost"
               size="sm"
@@ -143,7 +158,12 @@ export const UploadModuleCard = ({
           </Tooltip>
           <Tooltip label="Remove item" variant="primary-light">
             <IconButton
-              onClick={removeEntry}
+              onClick={() => {
+                track(AmpEvent.USE_REMOVE_MODULE_UPLOAD_BOX, {
+                  currentBoxAmount: modules.length - 1,
+                });
+                removeEntry();
+              }}
               aria-label="remove"
               variant="ghost"
               size="sm"

src/lib/pages/publish-module/components/leaflet/index.tsx

@@ -17,6 +17,7 @@ import {
   GridItem,
 } from "@chakra-ui/react";
 
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 
 import { metadata } from "./metadata";
@@ -148,6 +149,7 @@ export const Leaflet = () => {
         cursor="pointer"
         _hover={{ textDecoration: "underline" }}
         onClick={(e) => {
+          track(AmpEvent.USE_VIEW_CONDITION);
           e.stopPropagation();
           onOpen();
         }}