feat(utils): add amplitude for module interaction page

CHANGELOG.md

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

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

@@ -2,7 +2,8 @@ import big from "big.js";
 
 import { amp } from "../Amplitude";
 import { AmpEvent } from "../types";
-import type { Option, Token } from "lib/types";
+import type { MoveAccountAddr, Option, Token } from "lib/types";
+import { isHexModuleAddress, isHexWalletAddress } from "lib/utils";
 
 export const trackUseMainSearch = (isClick: boolean, section?: string) =>
   amp.track(AmpEvent.USE_MAIN_SEARCH, {
@@ -38,10 +39,15 @@ export const trackUseUnsupportedToken = (section?: string) =>
     section,
   });
 
-export const trackUseCopier = (type: string, section?: string) =>
+export const trackUseCopier = (
+  type: string,
+  section?: string,
+  subSection?: string
+) =>
   amp.track(AmpEvent.USE_COPIER, {
     type,
     section,
+    subSection,
   });
 
 export const trackUseExpand = ({
@@ -59,6 +65,7 @@ export const trackUseExpand = ({
     | "unsupported_pool"
     | "module_function_accordion"
     | "module_struct_accordion"
+    | "module_interaction_selected_function_card"
     | "pool_tx_msg";
   info?: object;
   section?: string;
@@ -176,3 +183,15 @@ export const trackUseView = (view: string) =>
 
 export const trackUseToggle = (name: string, isActive: boolean) =>
   amp.track(AmpEvent.USE_TOGGLE, { name, isActive });
+
+export const trackUseModuleSelectionInputFill = (
+  address: MoveAccountAddr,
+  manualModuleName: boolean,
+  manualFunctionName: boolean
+) =>
+  amp.track(AmpEvent.USE_MODULE_SELECTION_INPUT_FILL, {
+    address: !!address,
+    isHex: isHexWalletAddress(address) || isHexModuleAddress(address),
+    manualModuleName,
+    manualFunctionName,
+  });

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

@@ -34,3 +34,18 @@ export const trackToAdminUpdate = (contract: boolean) =>
   amp.track(AmpEvent.TO_ADMIN_UPDATE, {
     contract,
   });
+
+export const trackToModuleInteraction = (
+  address: boolean,
+  moduleName: boolean,
+  isVerify: boolean,
+  functionName: boolean,
+  functionType?: string
+) =>
+  amp.track(AmpEvent.TO_MODULE_INTERACTION, {
+    address,
+    moduleName,
+    isVerify,
+    functionName,
+    functionType,
+  });

src/lib/amplitude/types.ts

@@ -62,6 +62,7 @@ export enum AmpEvent {
   TO_PROPOSAL_TO_STORE_CODE = "To Proposal To Store Code",
   TO_PROPOSAL_TO_WHITELIST = "To Proposal To Whitelist",
   TO_MODULE_DETAIL = "To Module Detail",
+  TO_MODULE_INTERACTION = "To Module Interaction",
   // ACTIONS
   ACTION_UPLOAD = "Action Upload",
   ACTION_INSTANTIATE = "Action Instantiate",
@@ -73,6 +74,8 @@ export enum AmpEvent {
   ACTION_RESEND = "Action Resend",
   ACTION_FAUCET = "Action Faucet",
   ACTION_ATTACH_JSON = "Action Attach Json",
+  ACTION_MOVE_VIEW = "Action Move View",
+  ACTION_MOVE_EXECUTE = "Action Move Execute",
   // INTERACTS
   USE_SELECT_NETWORK = "Use Select Network",
   USE_CLICK_WALLET = "Use Click Wallet",
@@ -143,6 +146,13 @@ export enum AmpEvent {
   USE_MAIN_CTA = "Use Main CTA",
   USE_MODULE_FUNCTION_CTA = "Use Module Function CTA",
   USE_BREADCRUMB = "Use Breadcrumb",
+  USE_MODULE_SELECTION_DRAWER = "Use Module Selection Drawer",
+  USE_MODULE_SELECTION_INPUT_FILL = "Use Module Selection Input Fill",
+  USE_MODULE_SELECTION_INPUT = "Use Module Selection Input",
+  USE_SEE_MODULE_BUTTON = "Use See Module Button",
+  USE_MODULE_SELECTION_FUNCTION = "Use Module Selection Function",
+  USE_MODULE_SELECTION_MODULE = "Use Module Selection Module",
+  USE_FUNCTION_SELECTION = "Use Function Selection",
   // TX
   TX_SUCCEED = "Tx Succeed",
   TX_FAILED = "Tx Failed",
@@ -168,6 +178,7 @@ export type SpecialAmpEvent =
   | AmpEvent.TO_INSTANTIATE
   | AmpEvent.TO_MIGRATE
   | AmpEvent.TO_ADMIN_UPDATE
+  | AmpEvent.TO_MODULE_INTERACTION
   | AmpEvent.USE_MAIN_SEARCH
   | AmpEvent.USE_TAB
   | AmpEvent.USE_RADIO

src/lib/components/copy/CopyButton.tsx

@@ -13,6 +13,7 @@ interface CopyButtonProps extends ButtonProps {
   hasIcon?: boolean;
   buttonText?: string;
   amptrackSection?: string;
+  amptrackSubSection?: string;
   iconGap?: number;
 }
 
@@ -25,6 +26,7 @@ export const CopyButton = ({
   variant = "outline-accent",
   buttonText = "Copy",
   amptrackSection,
+  amptrackSubSection,
   ml,
   iconGap,
   ...buttonProps
@@ -41,7 +43,10 @@ export const CopyButton = ({
         size={size}
         float="right"
         onClick={() =>
-          track(AmpEvent.USE_COPY_BUTTON, { section: amptrackSection })
+          track(AmpEvent.USE_COPY_BUTTON, {
+            section: amptrackSection,
+            subSection: amptrackSubSection,
+          })
         }
         {...buttonProps}
         borderRadius={size === "xs" ? 6 : 8}

src/lib/components/modal/MoveCodeSnippet.tsx

@@ -306,6 +306,7 @@ ${daemonName} tx move execute $MODULE_ADDRESS \\
                         <CopyButton
                           value={item.snippet}
                           amptrackSection="code_snippet"
+                          amptrackSubSection={item.name}
                         />
                       </Box>
                     </Box>

src/lib/components/modal/WasmCodeSnippet.tsx

@@ -266,6 +266,7 @@ execute();
                         <CopyButton
                           value={item.snippet}
                           amptrackSection="code_snippet"
+                          amptrackSubSection={item.name}
                         />
                       </Box>
                     </Box>

src/lib/pages/interact/component/FunctionSelectPanel.tsx

@@ -115,6 +115,7 @@ export const FunctionSelectPanel = ({
   return (
     <div>
       <InputWithIcon
+        action="Function Select Panel Search"
         iconPosition="start"
         value={keyword}
         onChange={(e) => setKeyword(e.target.value)}

src/lib/pages/interact/component/SelectedFunctionCard.tsx

@@ -1,6 +1,7 @@
 import { Button, Divider, Flex } from "@chakra-ui/react";
 import { useState } from "react";
 
+import { trackUseExpand } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
 import { MotionBox } from "lib/components/MotionBox";
@@ -66,7 +67,13 @@ export const SelectedFunctionCard = ({ fn }: SelectedFunctionCardProps) => {
               transform={expand ? "rotate(180deg)" : "rotate(0)"}
             />
           }
-          onClick={() => setExpand((prev) => !prev)}
+          onClick={() => {
+            trackUseExpand({
+              action: expand ? "collapse" : "expand",
+              component: "module_interaction_selected_function_card",
+            });
+            setExpand((prev) => !prev);
+          }}
         >
           {expand ? "View Less" : "View More"}
         </Button>

src/lib/pages/interact/component/common/FunctionAccordion.tsx

@@ -7,6 +7,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 
+import { AmpEvent, track } from "lib/amplitude";
 import { CountBadge, FunctionCard } from "lib/components/module";
 import type { ExposedFunction, Option } from "lib/types";
 
@@ -47,7 +48,12 @@ export const FunctionAccordion = ({
               key={fn.name}
               variant={selectedFn?.name === fn.name ? "selected" : "common"}
               exposedFn={fn}
-              onFunctionSelect={setSelectedFn}
+              onFunctionSelect={() => {
+                track(AmpEvent.USE_FUNCTION_SELECTION, {
+                  functionType: fn.is_view ? "view" : "Execute",
+                });
+                setSelectedFn(fn);
+              }}
             />
           ))
         ) : (

src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx

@@ -2,6 +2,7 @@ import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Heading } from "@chakra-ui/react";
 import type { Dispatch, SetStateAction } from "react";
 
+import { AmpEvent, track } from "lib/amplitude";
 import { MotionBox } from "lib/components/MotionBox";
 import type { Option } from "lib/types";
 
@@ -54,7 +55,10 @@ export const InteractionTypeSwitch = ({
           }}
           initial="inactive"
           animate={currentTab === tab ? "active" : "inactive"}
-          onClick={() => onTabChange(tab)}
+          onClick={() => {
+            track(AmpEvent.USE_SUBTAB, { currentTab: tab });
+            onTabChange(tab);
+          }}
           zIndex={1}
           textAlign="center"
         >

src/lib/pages/interact/component/drawer/ModuleSelectDrawerTrigger.tsx

@@ -1,6 +1,7 @@
 import type { ButtonProps } from "@chakra-ui/react";
 import { Button } from "@chakra-ui/react";
 
+import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 
 type TriggerVariant = "select-module" | "change-module";
@@ -26,7 +27,16 @@ export const ModuleSelectDrawerTrigger = ({
   buttonText = "Select Module",
   onOpen,
 }: ModuleSelectDrawerTriggerProps) => (
-  <Button {...buttonStyles[triggerVariant]} ml="auto" onClick={onOpen}>
+  <Button
+    {...buttonStyles[triggerVariant]}
+    ml="auto"
+    onClick={() => {
+      track(AmpEvent.USE_MODULE_SELECTION_DRAWER, {
+        label: buttonText,
+      });
+      onOpen();
+    }}
+  >
     {buttonText}
   </Button>
 );

src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo, useState } from "react";
 
 import { ModuleEmptyState, NoImageEmptyState } from "../../common";
 import type { ModuleSelectFunction } from "../types";
+import { AmpEvent, track } from "lib/amplitude";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { CountBadge } from "lib/components/module/CountBadge";
 import { FunctionCard } from "lib/components/module/FunctionCard";
@@ -73,6 +74,9 @@ export const ModuleFunctionBody = ({
   const onFunctionSelect = useCallback(
     (fn: ExposedFunction) => {
       if (module) {
+        track(AmpEvent.USE_MODULE_SELECTION_FUNCTION, {
+          functionType: fn.is_view ? "view" : "Execute",
+        });
         handleModuleSelect(module, fn);
         closeModal();
       }
@@ -95,6 +99,7 @@ export const ModuleFunctionBody = ({
             {module.moduleName}
           </Heading>
           <InputWithIcon
+            action="Module Selection Drawer Function Search"
             iconPosition="start"
             value={keyword}
             onChange={(e) => setKeyword(e.target.value)}

src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx

@@ -8,6 +8,7 @@ import type {
   ModuleSelectFunction,
   SelectedAddress,
 } from "../types";
+import { AmpEvent, track } from "lib/amplitude";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { CountBadge } from "lib/components/module/CountBadge";
 import { ModuleCard } from "lib/components/module/ModuleCard";
@@ -95,6 +96,7 @@ export const ModuleSelectMainBody = ({
       )}
       <GridItem area="panel" overflow="hidden">
         <InputWithIcon
+          action="Module Selection Drawer Module Search"
           iconPosition="start"
           value={keyword}
           onChange={(e) => setKeyword(e.target.value)}
@@ -134,6 +136,7 @@ export const ModuleSelectMainBody = ({
           size="md"
           onClick={() => {
             if (selectedModule) {
+              track(AmpEvent.USE_MODULE_SELECTION_MODULE);
               handleModuleSelect(selectedModule);
               closeModal();
             }

src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx

@@ -7,6 +7,7 @@ import type {
   DisplayMode,
   ModuleSelectFunction,
 } from "../types";
+import { trackUseModuleSelectionInputFill } from "lib/amplitude";
 import { useExampleAddresses } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
 import { useFormatAddresses } from "lib/hooks/useFormatAddresses";
@@ -86,9 +87,10 @@ export const ModuleSelectorInput = ({
     (event: KeyboardEvent<HTMLInputElement>) => {
       if (event.key === "Enter") {
         handleSubmit();
+        trackUseModuleSelectionInputFill(addr, !!moduleName, !!functionName);
       }
     },
-    [handleSubmit]
+    [functionName, handleSubmit, moduleName, addr]
   );
 
   return (
@@ -116,7 +118,14 @@ export const ModuleSelectorInput = ({
       <Flex gap={2}>
         <Button
           variant="primary"
-          onClick={handleSubmit}
+          onClick={() => {
+            handleSubmit();
+            trackUseModuleSelectionInputFill(
+              addr,
+              !!moduleName,
+              !!functionName
+            );
+          }}
           isDisabled={!keyword.length || isFetching}
           isLoading={isFetching}
         >

src/lib/pages/interact/component/form/ExecuteArea.tsx

@@ -5,6 +5,7 @@ import { MsgExecute as MsgExecuteModule } from "@initia/initia.js";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
+import { AmpEvent, track } from "lib/amplitude";
 import {
   useFabricateFee,
   useSimulateFeeQuery,
@@ -185,7 +186,10 @@ export const ExecuteArea = ({
           <SubmitButton
             text="Execute"
             isLoading={processing}
-            onSubmit={proceed}
+            onSubmit={() => {
+              track(AmpEvent.ACTION_MOVE_EXECUTE);
+              proceed();
+            }}
             isDisabled={isButtonDisabled}
           />
         </Flex>

src/lib/pages/interact/component/form/ViewArea.tsx

@@ -11,6 +11,7 @@ import {
 import dynamic from "next/dynamic";
 import { useState } from "react";
 
+import { AmpEvent, track } from "lib/amplitude";
 import { AbiForm } from "lib/components/abi";
 import { SubmitButton } from "lib/components/button";
 import { CustomIcon } from "lib/components/icon";
@@ -94,7 +95,10 @@ export const ViewArea = ({
           <SubmitButton
             text="View"
             isLoading={isLoading}
-            onSubmit={handleQuery}
+            onSubmit={() => {
+              track(AmpEvent.ACTION_MOVE_VIEW);
+              handleQuery();
+            }}
             isDisabled={isButtonDisabled}
           />
         </Flex>