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/637) 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,17 @@ export const trackUseUnsupportedToken = (section?: string) =>
     section,
   });
 
-export const trackUseCopier = (type: string, section?: string) =>
+export const trackUseCopier = (
+  type: string,
+  section?: string,
+  subSection?: string,
+  info?: string
+) =>
   amp.track(AmpEvent.USE_COPIER, {
     type,
     section,
+    subSection,
+    info,
   });
 
 export const trackUseExpand = ({
@@ -59,6 +67,8 @@ export const trackUseExpand = ({
     | "unsupported_pool"
     | "module_function_accordion"
     | "module_struct_accordion"
+    | "module_interaction_function_accordion"
+    | "module_interaction_selected_function_card"
     | "pool_tx_msg";
   info?: object;
   section?: string;
@@ -176,3 +186,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,8 @@ 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",
+  TO_PUBLISH_MODULE = "To Publish Module",
   // ACTIONS
   ACTION_UPLOAD = "Action Upload",
   ACTION_INSTANTIATE = "Action Instantiate",
@@ -73,6 +75,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 +147,12 @@ 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_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
@@ -193,4 +204,5 @@ export type SpecialAmpEvent =
   | AmpEvent.USE_VIEW
   | AmpEvent.USE_TOGGLE
   | AmpEvent.USE_CONTRACT_STATES_LOAD_MORE
-  | AmpEvent.USE_CONTRACT_STATES_DOWNLOAD;
+  | AmpEvent.USE_CONTRACT_STATES_DOWNLOAD
+  | AmpEvent.USE_MODULE_SELECTION_INPUT_FILL;

src/lib/components/copy/CopyButton.tsx

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

src/lib/components/modal/MoveCodeSnippet.tsx

@@ -249,7 +249,9 @@ ${daemonName} tx move execute $MODULE_ADDRESS \\
         ml={ml}
         gap={1}
         onClick={() => {
-          track(AmpEvent.USE_CONTRACT_SNIPPET);
+          track(AmpEvent.USE_CONTRACT_SNIPPET, {
+            functionType: fn.is_view ? "view" : "Execute",
+          });
           onOpen();
         }}
       >
@@ -306,6 +308,8 @@ ${daemonName} tx move execute $MODULE_ADDRESS \\
                         <CopyButton
                           value={item.snippet}
                           amptrackSection="code_snippet"
+                          amptrackSubSection={item.name}
+                          amptrackInfo={fn.is_view ? "view" : "Execute"}
                         />
                       </Box>
                     </Box>

src/lib/components/modal/WasmCodeSnippet.tsx

@@ -211,7 +211,7 @@ execute();
         ml={ml}
         gap={1}
         onClick={() => {
-          track(AmpEvent.USE_CONTRACT_SNIPPET);
+          track(AmpEvent.USE_CONTRACT_SNIPPET, { actionType: type });
           onOpen();
         }}
       >
@@ -266,6 +266,8 @@ execute();
                         <CopyButton
                           value={item.snippet}
                           amptrackSection="code_snippet"
+                          amptrackSubSection={item.name}
+                          amptrackInfo={type}
                         />
                       </Box>
                     </Box>

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

@@ -62,6 +62,7 @@ const RenderFunctions = ({
         )}
         selectedFn={selectedFn}
         setSelectedFn={setSelectedFn}
+        amptrackTab={tab}
       />
       {tab === InteractionTabs.EXECUTE_MODULE && (
         <FunctionAccordion
@@ -72,6 +73,7 @@ const RenderFunctions = ({
           )}
           selectedFn={selectedFn}
           setSelectedFn={setSelectedFn}
+          amptrackTab={tab}
         />
       )}
     </Accordion>
@@ -115,6 +117,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, trackUseExpand } from "lib/amplitude";
 import { CountBadge, FunctionCard } from "lib/components/module";
 import type { ExposedFunction, Option } from "lib/types";
 
@@ -17,6 +18,7 @@ interface FunctionAccordionProps {
   isEmpty: boolean;
   triggerText: string;
   selectedFn: Option<ExposedFunction>;
+  amptrackTab: string;
   setSelectedFn: (fn: ExposedFunction) => void;
 }
 
@@ -26,36 +28,55 @@ export const FunctionAccordion = ({
   triggerText,
   selectedFn,
   setSelectedFn,
+  amptrackTab,
 }: FunctionAccordionProps) => (
   <AccordionItem bg="background.main" py={1}>
-    <h6>
-      <AccordionButton>
-        <Flex align="center" justify="space-between" gap={2}>
-          <Text variant="body2" color="text.dark">
-            {triggerText}
-          </Text>
-          <CountBadge count={filteredFns.length} variant="common" />
-        </Flex>
-        <AccordionIcon color="gray.600" ml="auto" />
-      </AccordionButton>
-    </h6>
-    <AccordionPanel py={3} px={0}>
-      <Flex flexDirection="column" gap={1}>
-        {filteredFns.length ? (
-          filteredFns.map((fn) => (
-            <FunctionCard
-              key={fn.name}
-              variant={selectedFn?.name === fn.name ? "selected" : "common"}
-              exposedFn={fn}
-              onFunctionSelect={setSelectedFn}
-            />
-          ))
-        ) : (
-          <NoImageEmptyState
-            desc={isEmpty ? "No function" : "No matching function found"}
-          />
-        )}
-      </Flex>
-    </AccordionPanel>
+    {({ isExpanded }) => (
+      <>
+        <h6>
+          <AccordionButton
+            onClick={() => {
+              trackUseExpand({
+                action: isExpanded ? "collapse" : "expand",
+                component: "module_interaction_function_accordion",
+                info: { Tab: amptrackTab },
+                section: triggerText,
+              });
+            }}
+          >
+            <Flex align="center" justify="space-between" gap={2}>
+              <Text variant="body2" color="text.dark">
+                {triggerText}
+              </Text>
+              <CountBadge count={filteredFns.length} variant="common" />
+            </Flex>
+            <AccordionIcon color="gray.600" ml="auto" />
+          </AccordionButton>
+        </h6>
+        <AccordionPanel py={3} px={0}>
+          <Flex flexDirection="column" gap={1}>
+            {filteredFns.length ? (
+              filteredFns.map((fn) => (
+                <FunctionCard
+                  key={fn.name}
+                  variant={selectedFn?.name === fn.name ? "selected" : "common"}
+                  exposedFn={fn}
+                  onFunctionSelect={() => {
+                    track(AmpEvent.USE_FUNCTION_SELECTION, {
+                      functionType: fn.is_view ? "view" : "Execute",
+                    });
+                    setSelectedFn(fn);
+                  }}
+                />
+              ))
+            ) : (
+              <NoImageEmptyState
+                desc={isEmpty ? "No function" : "No matching function found"}
+              />
+            )}
+          </Flex>
+        </AccordionPanel>
+      </>
+    )}
   </AccordionItem>
 );

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>
 );