From ad4717081495f363b794b87b86d6e113b36a181e Mon Sep 17 00:00:00 2001 From: Pakin Rattanasanghirun Date: Wed, 6 Dec 2023 11:52:33 +0700 Subject: [PATCH 1/3] feat(utils): amplitude on publish module and deploy script --- src/lib/amplitude/Amplitude.ts | 2 +- .../amplitude/track-event/trackInteraction.ts | 8 ++++- src/lib/amplitude/types.ts | 14 ++++++++ src/lib/components/dropzone/index.tsx | 4 ++- src/lib/components/upload/UploadCard.tsx | 6 +++- src/lib/layout/Searchbar.tsx | 2 +- src/lib/pages/deploy-script/index.tsx | 14 ++++++-- src/lib/pages/instantiate/instantiate.tsx | 3 +- src/lib/pages/publish-module/completed.tsx | 6 +++- .../components/ModulePublishCard.tsx | 36 ++++++++++++++----- .../publish-module/components/PolicyCard.tsx | 9 ++++- .../components/UploadModuleCard.tsx | 26 ++++++++++++-- .../components/leaflet/index.tsx | 2 ++ src/lib/pages/publish-module/publish.tsx | 27 ++++++++++++-- 14 files changed, 135 insertions(+), 24 deletions(-) diff --git a/src/lib/amplitude/Amplitude.ts b/src/lib/amplitude/Amplitude.ts index 1a67db51a..f73df5cde 100644 --- a/src/lib/amplitude/Amplitude.ts +++ b/src/lib/amplitude/Amplitude.ts @@ -49,7 +49,7 @@ class Amplitude { language: true, platform: true, }, - serverUrl: "/amplitude", + // serverUrl: "/amplitude", }); } diff --git a/src/lib/amplitude/track-event/trackInteraction.ts b/src/lib/amplitude/track-event/trackInteraction.ts index 769caa20f..6f7ea0bdd 100644 --- a/src/lib/amplitude/track-event/trackInteraction.ts +++ b/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, }); diff --git a/src/lib/amplitude/types.ts b/src/lib/amplitude/types.ts index ddb440c45..baffa9a75 100644 --- a/src/lib/amplitude/types.ts +++ b/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", diff --git a/src/lib/components/dropzone/index.tsx b/src/lib/components/dropzone/index.tsx index 39c014408..d9a278efb 100644 --- a/src/lib/components/dropzone/index.tsx +++ b/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]; diff --git a/src/lib/components/upload/UploadCard.tsx b/src/lib/components/upload/UploadCard.tsx index 141ad753a..b907f217f 100644 --- a/src/lib/components/upload/UploadCard.tsx +++ b/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={} size="sm" variant={themeConfig.buttonVariant} - onClick={deleteFile} + onClick={() => { + track(AmpEvent.USE_REMOVE_UPLOAD_FILE); + deleteFile(); + }} > Remove file diff --git a/src/lib/layout/Searchbar.tsx b/src/lib/layout/Searchbar.tsx index 49ef3629d..06b6723d0 100644 --- a/src/lib/layout/Searchbar.tsx +++ b/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 = diff --git a/src/lib/pages/deploy-script/index.tsx b/src/lib/pages/deploy-script/index.tsx index f03173ead..25cd532ae 100644 --- a/src/lib/pages/deploy-script/index.tsx +++ b/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 ( <> @@ -199,7 +206,10 @@ export const DeployScript = () => {