Merge pull request #532 from alleslabs/feat/new-amplitude-structure

new amplitude structure

CHANGELOG.md

@@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure
 - [#538](https://github.com/alleslabs/celatone-frontend/pull/538) Add empty state in query and execute with json schema
 - [#537](https://github.com/alleslabs/celatone-frontend/pull/537) Change json schema select widget null option wording for readability
 - [#535](https://github.com/alleslabs/celatone-frontend/pull/535) Improve json schema features

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^1.8.0",
+    "@amplitude/marketing-analytics-browser": "^1.0.7",
     "@chain-registry/types": "^0.13.1",
     "@chakra-ui/anatomy": "^2.1.0",
     "@chakra-ui/card": "^2.1.1",

src/lib/amplitude/index.ts

@@ -0,0 +1,3 @@
+export * from "./track-event";
+export * from "./useAmplitudeInit";
+export * from "./types";

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

@@ -0,0 +1,47 @@
+import { track as amplitudeTrack } from "@amplitude/analytics-browser";
+import { useCallback } from "react";
+
+import type { AmpEvent, ActionAmpEvent, SpecialAmpEvent } from "../types";
+
+import { useMandatoryProperties } from "./useMandatoryProperties";
+import { useTrackAction } from "./useTrackAction";
+import { useTrackComponent } from "./useTrackComponent";
+import { useTrackExternal } from "./useTrackExternal";
+import { useTrackInteraction } from "./useTrackInteraction";
+import { useTrackToPage } from "./useTrackToPage";
+import { useTrackTx } from "./useTrackTx";
+
+export const useTrack = () => {
+  const mandatoryProperties = useMandatoryProperties();
+
+  const trackAction = useTrackAction();
+  const trackComponent = useTrackComponent();
+  const trackExternal = useTrackExternal();
+  const trackInteraction = useTrackInteraction();
+  const trackToPage = useTrackToPage();
+  const trackTx = useTrackTx();
+
+  const track = useCallback(
+    (
+      event: Exclude<AmpEvent, ActionAmpEvent | SpecialAmpEvent>,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      properties?: Record<string, any>
+    ) => {
+      amplitudeTrack(event, {
+        ...mandatoryProperties,
+        ...properties,
+      });
+    },
+    [mandatoryProperties]
+  );
+
+  return {
+    track,
+    ...trackAction,
+    ...trackComponent,
+    ...trackExternal,
+    ...trackInteraction,
+    ...trackToPage,
+    ...trackTx,
+  };
+};

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

@@ -0,0 +1,35 @@
+import { fromBech32 } from "@cosmjs/encoding";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+
+import { useCelatoneApp, useNavContext } from "lib/app-provider/contexts";
+import { useCurrentChain, useMobile } from "lib/app-provider/hooks";
+import { StorageKeys } from "lib/data";
+import { sha256Hex, getItem } from "lib/utils";
+
+export const useMandatoryProperties = () => {
+  const { currentChainId } = useCelatoneApp();
+  const { prevPathname } = useNavContext();
+  const { address } = useCurrentChain();
+  const isMobile = useMobile();
+  const router = useRouter();
+
+  // TODO: make utility function
+  const rawAddressHash = address
+    ? sha256Hex(fromBech32(address).data)
+    : "Not Connected";
+
+  return useMemo(
+    () => ({
+      page: router.pathname.replace("/[network]", ""),
+      prevPathname,
+      rawAddressHash,
+      chain: currentChainId,
+      mobile: isMobile,
+      navSidebar: getItem(StorageKeys.NavSidebar, ""),
+      devSidebar: getItem(StorageKeys.DevSidebar, ""),
+      projectSidebar: getItem(StorageKeys.ProjectSidebar, ""),
+    }),
+    [currentChainId, isMobile, prevPathname, router.pathname, rawAddressHash]
+  );
+};

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

@@ -0,0 +1,54 @@
+import { track } from "@amplitude/analytics-browser";
+import { useCallback } from "react";
+
+import type { ActionAmpEvent } from "../types";
+import type { AttachFundsType } from "lib/components/fund/types";
+
+import { useMandatoryProperties } from "./useMandatoryProperties";
+
+export const useTrackAction = () => {
+  const mandatoryProperties = useMandatoryProperties();
+
+  const trackActionWithFunds = useCallback(
+    (
+      event: ActionAmpEvent,
+      funds: number,
+      attachFundsOption: AttachFundsType,
+      method: "json-input" | "schema"
+    ) =>
+      track(event, {
+        ...mandatoryProperties,
+        funds,
+        attachFundsOption,
+        method,
+      }),
+    [mandatoryProperties]
+  );
+
+  const trackAction = useCallback(
+    (event: ActionAmpEvent, method: "json-input" | "schema") =>
+      track(event, {
+        ...mandatoryProperties,
+        method,
+      }),
+    [mandatoryProperties]
+  );
+
+  const trackActionQuery = useCallback(
+    (
+      event: ActionAmpEvent,
+      method: "json-input" | "schema",
+      isInputRequired: boolean
+    ) =>
+      track(event, {
+        ...mandatoryProperties,
+        method,
+        isInputRequired,
+      }),
+    [mandatoryProperties]
+  );
+
+  // TODO: implement custom action here
+
+  return { trackAction, trackActionWithFunds, trackActionQuery };
+};

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

@@ -0,0 +1,20 @@
+import { track } from "@amplitude/analytics-browser";
+import { useCallback } from "react";
+
+import { AmpEvent } from "../types";
+
+import { useMandatoryProperties } from "./useMandatoryProperties";
+
+export const useTrackComponent = () => {
+  const mandatoryProperties = useMandatoryProperties();
+
+  const trackInvalidState = useCallback(
+    (title: string) =>
+      track(AmpEvent.INVALID_STATE, { ...mandatoryProperties, title }),
+    [mandatoryProperties]
+  );
+
+  return {
+    trackInvalidState,
+  };
+};

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

@@ -0,0 +1,61 @@
+import { track } from "@amplitude/analytics-browser";
+import { useCallback } from "react";
+
+import { AmpEvent } from "../types";
+import type { Dict } from "lib/types";
+
+import { useMandatoryProperties } from "./useMandatoryProperties";
+
+export const useTrackExternal = () => {
+  const mandatoryProperties = useMandatoryProperties();
+
+  const trackMintScan = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (type: string, properties?: Dict<string, any>, section?: string) => {
+      track(AmpEvent.MINTSCAN, {
+        ...mandatoryProperties,
+        type,
+        properties,
+        section,
+      });
+    },
+    [mandatoryProperties]
+  );
+
+  const trackWebsite = useCallback(
+    (url: string, section?: string) =>
+      track(AmpEvent.WEBSITE, {
+        ...mandatoryProperties,
+        url,
+        section,
+      }),
+    [mandatoryProperties]
+  );
+
+  const trackSocial = useCallback(
+    (url: string, section?: string) =>
+      track(AmpEvent.SOCIAL, {
+        ...mandatoryProperties,
+        url,
+        section,
+      }),
+    [mandatoryProperties]
+  );
+
+  const trackCelatone = useCallback(
+    (url: string, section?: string) =>
+      track(AmpEvent.CELATONE, {
+        ...mandatoryProperties,
+        url,
+        section,
+      }),
+    [mandatoryProperties]
+  );
+
+  return {
+    trackMintScan,
+    trackWebsite,
+    trackSocial,
+    trackCelatone,
+  };
+};