feat(analytics): integrates amplitude

also hides analytic reporters behind a single interface

apps/api/src/deployment/repositories/deployment-setting/deployment-setting.repository.ts

@@ -59,7 +59,7 @@ export class DeploymentSettingRepository extends BaseRepository<Table, Deploymen
         .leftJoin(UserWallets, eq(Users.id, UserWallets.userId))
         .where(and(...clauses))
         .limit(options.limit)
-        .orderBy(desc(this.table.id), desc(UserWallets.address));
+        .orderBy(desc(this.table.id));
 
       lastId = last(items)?.id;
 

apps/deploy-web/.env.local.sample

@@ -39,4 +39,9 @@ GITHUB_CLIENT_SECRET=GITHUB_CLIENT_SECRET
 BITBUCKET_CLIENT_SECRET=BITBUCKET_CLIENT_SECRET
 GITLAB_CLIENT_SECRET=GITLAB_CLIENT_SECRET
 NEXT_PUBLIC_TURNSTILE_ENABLED=false
-NEXT_PUBLIC_TURNSTILE_SITE_KEY=0x4AAAAAAA5S2ADjyKnHmdzo
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=0x4AAAAAAA5S2ADjyKnHmdzo
+
+NEXT_PUBLIC_GA_MEASUREMENT_ID="G-LFRGN2J2RV"
+NEXT_PUBLIC_GA_ENABLED=false
+NEXT_PUBLIC_AMPLITUDE_API_KEY="8ce0df927918618753a0e838fca0bcc6"
+NEXT_PUBLIC_AMPLITUDE_ENABLED=true

apps/deploy-web/env/.env.production

@@ -27,4 +27,7 @@ BASE_API_TESTNET_URL=$NEXT_PUBLIC_BASE_API_TESTNET_URL
 BASE_API_SANDBOX_URL=$NEXT_PUBLIC_BASE_API_SANDBOX_URL
 
 NEXT_PUBLIC_SENTRY_ENABLED="true"
-NEXT_PUBLIC_GA_MEASUREMENT_ID="G-LFRGN2J2RV"
+NEXT_PUBLIC_GA_MEASUREMENT_ID="G-LFRGN2J2RV"
+NEXT_PUBLIC_GA_ENABLED=true
+NEXT_PUBLIC_AMPLITUDE_API_KEY="9fc9f72a72d7a0f4f2fc1a862a0d30af"
+NEXT_PUBLIC_AMPLITUDE_ENABLED=true

apps/deploy-web/env/.env.sample

@@ -22,7 +22,11 @@ NEXT_PUBLIC_API_BASE_URL=
 NEXT_PUBLIC_SENTRY_APPLICATION_KEY=
 NEXT_PUBLIC_SENTRY_DSN=
 NEXT_PUBLIC_SENTRY_SERVER_NAME=
+
 NEXT_PUBLIC_GA_MEASUREMENT_ID=
+NEXT_PUBLIC_GA_ENABLED=
+NEXT_PUBLIC_AMPLITUDE_API_KEY=
+NEXT_PUBLIC_AMPLITUDE_ENABLED=
 
 BASE_API_MAINNET_URL=
 BASE_API_TESTNET_URL=

apps/deploy-web/env/.env.staging

@@ -27,3 +27,8 @@ BASE_API_TESTNET_URL=$NEXT_PUBLIC_BASE_API_TESTNET_URL
 BASE_API_SANDBOX_URL=$NEXT_PUBLIC_BASE_API_SANDBOX_URL
 
 NEXT_PUBLIC_SENTRY_ENABLED="true"
+
+NEXT_PUBLIC_GA_MEASUREMENT_ID="G-LFRGN2J2RV"
+NEXT_PUBLIC_GA_ENABLED=false
+NEXT_PUBLIC_AMPLITUDE_API_KEY="5349a702ca2fe7a7af1027c9019baf9f"
+NEXT_PUBLIC_AMPLITUDE_ENABLED=true

apps/deploy-web/jest.config.ts

@@ -9,7 +9,7 @@ const styleMockPath = "<rootDir>/../../node_modules/next/dist/build/jest/__mocks
 const getConfig = createJestConfig({
   testEnvironment: "jsdom",
   collectCoverageFrom: ["<rootDir>/src/**/*.{js,ts,tsx}"],
-  testMatch: ["<rootDir>/tests/unit/**/*.spec.{tsx,ts}"],
+  testMatch: ["<rootDir>/tests/unit/**/*.spec.{tsx,ts}", "<rootDir>/src/**/*.spec.{tsx,ts}"],
   transform: {
     "\\.tsx?$": ["ts-jest", { tsconfig: "<rootDir>/tsconfig.json" }]
   },

apps/deploy-web/next.config.js

@@ -145,7 +145,15 @@ const moduleExports = {
         permanent: false
       }
     ];
-  }
+  },
+  rewrites: async () => ({
+    fallback: [
+      {
+        source: "/api/analytics",
+        destination: "https://api2.amplitude.com/2/httpapi"
+      }
+    ]
+  })
 };
 
 const sentryWebpackPluginOptions = {

apps/deploy-web/package.json

@@ -14,8 +14,8 @@
     "lint": "eslint .",
     "release": "release-it",
     "start": "next start",
-    "test:cov": "DEPLOYMENT_ENV=staging jest --coverage",
-    "test:unit": "DEPLOYMENT_ENV=staging jest",
+    "test:cov": "NODE_ENV=test DEPLOYMENT_ENV=staging jest --coverage",
+    "test:unit": "NODE_ENV=test DEPLOYMENT_ENV=staging jest",
     "type-check": "tsc"
   },
   "dependencies": {
@@ -26,6 +26,7 @@
     "@akashnetwork/logging": "*",
     "@akashnetwork/network-store": "*",
     "@akashnetwork/ui": "*",
+    "@amplitude/analytics-browser": "^2.11.11",
     "@auth0/nextjs-auth0": "^3.5.0",
     "@cosmjs/encoding": "^0.32.4",
     "@cosmjs/proto-signing": "^0.32.4",

apps/deploy-web/src/components/authorizations/AllowanceModal.tsx

@@ -6,14 +6,13 @@ import { Alert, Form, FormField, FormInput, Popup } from "@akashnetwork/ui/compo
 import { EncodeObject } from "@cosmjs/proto-signing";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { addYears, format } from "date-fns";
-import { event } from "nextjs-google-analytics";
 import { z } from "zod";
 
 import { LinkTo } from "@src/components/shared/LinkTo";
 import { UAKT_DENOM } from "@src/config/denom.config";
 import { useWallet } from "@src/context/WalletProvider";
 import { useDenomData } from "@src/hooks/useWalletBalance";
-import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
+import { analyticsService } from "@src/services/analytics/analytics.service";
 import { AllowanceType } from "@src/types/grant";
 import { aktToUakt, coinToDenom } from "@src/utils/priceUtils";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
@@ -68,8 +67,8 @@ export const AllowanceModal: React.FunctionComponent<Props> = ({ editingAllowanc
     const response = await signAndBroadcastTx(messages);
 
     if (response) {
-      event(AnalyticsEvents.AUTHORIZE_SPEND, {
-        category: AnalyticsCategory.DEPLOYMENTS,
+      analyticsService.track("authorize_spend", {
+        category: "deployments",
         label: "Authorize wallet to spend on deployment deposits"
       });
 

apps/deploy-web/src/components/authorizations/GrantModal.tsx

@@ -19,15 +19,14 @@ import {
 } from "@akashnetwork/ui/components";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { addYears, format } from "date-fns";
-import { event } from "nextjs-google-analytics";
 import { z } from "zod";
 
 import { LinkTo } from "@src/components/shared/LinkTo";
 import { UAKT_DENOM } from "@src/config/denom.config";
 import { useWallet } from "@src/context/WalletProvider";
 import { getUsdcDenom, useUsdcDenom } from "@src/hooks/useDenom";
 import { useDenomData } from "@src/hooks/useWalletBalance";
-import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
+import { analyticsService } from "@src/services/analytics/analytics.service";
 import { GrantType } from "@src/types/grant";
 import { denomToUdenom } from "@src/utils/mathHelpers";
 import { aktToUakt, coinToDenom } from "@src/utils/priceUtils";
@@ -89,8 +88,8 @@ export const GrantModal: React.FunctionComponent<Props> = ({ editingGrant, addre
     const response = await signAndBroadcastTx([message]);
 
     if (response) {
-      event(AnalyticsEvents.AUTHORIZE_SPEND, {
-        category: AnalyticsCategory.DEPLOYMENTS,
+      analyticsService.track("authorize_spend", {
+        category: "deployments",
         label: "Authorize wallet to spend on deployment deposits"
       });
 

apps/deploy-web/src/components/deployments/DeploymentDepositModal.tsx

@@ -21,7 +21,6 @@ import {
 } from "@akashnetwork/ui/components";
 import { zodResolver } from "@hookform/resolvers/zod";
 import compareAsc from "date-fns/compareAsc";
-import { event } from "nextjs-google-analytics";
 import { useSnackbar } from "notistack";
 import { z } from "zod";
 
@@ -32,7 +31,7 @@ import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useDenomData, useWalletBalance } from "@src/hooks/useWalletBalance";
 import { useGranteeGrants } from "@src/queries/useGrantsQuery";
-import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
+import { analyticsService } from "@src/services/analytics/analytics.service";
 import { denomToUdenom, udenomToDenom } from "@src/utils/mathHelpers";
 import { coinToUDenom } from "@src/utils/priceUtils";
 import { LinkTo } from "../shared/LinkTo";
@@ -188,8 +187,8 @@ export const DeploymentDepositModal: React.FunctionComponent<DeploymentDepositMo
         return;
       }
 
-      event(AnalyticsEvents.USE_DEPOSITOR, {
-        category: AnalyticsCategory.DEPLOYMENTS,
+      analyticsService.track("use_depositor", {
+        category: "deployments",
         label: "Use depositor to deposit in deployment"
       });
     } else if (depositData && amount > depositData?.balance) {

apps/deploy-web/src/components/deployments/DeploymentDetail.tsx

@@ -7,16 +7,15 @@ import { ArrowLeft } from "iconoir-react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { NextSeo } from "next-seo";
-import { event } from "nextjs-google-analytics";
 
 import { useCertificate } from "@src/context/CertificateProvider";
 import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useDeploymentDetail } from "@src/queries/useDeploymentQuery";
 import { useDeploymentLeaseList } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
+import { analyticsService } from "@src/services/analytics/analytics.service";
 import { extractRepositoryUrl, isCiCdImageInYaml } from "@src/services/remote-deploy/remote-deployment-controller.service";
-import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
 import { RouteStep } from "@src/types/route-steps.type";
 import { getDeploymentLocalData } from "@src/utils/deploymentLocalDataUtils";
 import { UrlService } from "@src/utils/urlUtils";
@@ -134,9 +133,10 @@ export const DeploymentDetail: FC<DeploymentDetailProps> = ({ dseq }) => {
       router.replace(UrlService.deploymentDetails(dseq));
     }
 
-    event(`${AnalyticsEvents.NAVIGATE_TAB}${value}`, {
-      category: AnalyticsCategory.DEPLOYMENTS,
-      label: `Navigate tab ${value} in deployment detail`
+    analyticsService.track(`navigate_tab`, {
+      category: "deployments",
+      label: `Navigate tab ${value} in deployment detail`,
+      tab: value
     });
   };
 

apps/deploy-web/src/components/deployments/DeploymentDetailTopBar.tsx

@@ -5,7 +5,6 @@ import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import { formatDuration, intervalToDuration } from "date-fns";
 import { Edit, MoreHoriz, NavArrowLeft, Refresh, Upload, XmarkSquare } from "iconoir-react";
 import { useRouter } from "next/navigation";
-import { event } from "nextjs-google-analytics";
 
 import { CustomDropdownLinkItem } from "@src/components/shared/CustomDropdownLinkItem";
 import { browserEnvConfig } from "@src/config/browser-env.config";
@@ -16,7 +15,7 @@ import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConf
 import { usePreviousRoute } from "@src/hooks/usePreviousRoute";
 import { useUser } from "@src/hooks/useUser";
 import { useDeploymentSettingQuery } from "@src/queries/deploymentSettingsQuery";
-import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
+import { analyticsService } from "@src/services/analytics/analytics.service";
 import { DeploymentDto } from "@src/types/deployment";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { UrlService } from "@src/utils/urlUtils";
@@ -66,8 +65,8 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
       removeLeases();
       loadDeploymentDetail();
 
-      event(AnalyticsEvents.CLOSE_DEPLOYMENT, {
-        category: AnalyticsCategory.DEPLOYMENTS,
+      analyticsService.track("close_deployment", {
+        category: "deployments",
         label: "Close deployment in deployment detail"
       });
     }
@@ -90,8 +89,8 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
     if (response) {
       loadDeploymentDetail();
 
-      event(AnalyticsEvents.DEPLOYMENT_DEPOSIT, {
-        category: AnalyticsCategory.DEPLOYMENTS,
+      analyticsService.track("deployment_deposit", {
+        category: "deployments",
         label: "Deposit deployment in deployment detail"
       });
     }

apps/deploy-web/src/components/deployments/DeploymentListRow.tsx

@@ -18,14 +18,13 @@ import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import isValid from "date-fns/isValid";
 import { Edit, InfoCircle, MoreHoriz, NavArrowRight, Plus, Upload, WarningCircle, WarningTriangle, XmarkSquare } from "iconoir-react";
 import { useRouter } from "next/navigation";
-import { event } from "nextjs-google-analytics";
 
 import { useWallet } from "@src/context/WalletProvider";
 import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 import { getShortText } from "@src/hooks/useShortText";
 import { useDenomData } from "@src/hooks/useWalletBalance";
 import { useAllLeases } from "@src/queries/useLeaseQuery";
-import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
+import { analyticsService } from "@src/services/analytics/analytics.service";
 import { NamedDeploymentDto } from "@src/types/deployment";
 import { ApiProviderList } from "@src/types/provider";
 import { udenomToDenom } from "@src/utils/mathHelpers";
@@ -137,8 +136,8 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
     if (response) {
       refreshDeployments();
 
-      event(AnalyticsEvents.DEPLOYMENT_DEPOSIT, {
-        category: AnalyticsCategory.DEPLOYMENTS,
+      analyticsService.track("deployment_deposit", {
+        category: "deployments",
         label: "Deposit to deployment from list"
       });
     }
@@ -162,8 +161,8 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
 
       refreshDeployments();
 
-      event(AnalyticsEvents.CLOSE_DEPLOYMENT, {
-        category: AnalyticsCategory.DEPLOYMENTS,
+      analyticsService.track("close_deployment", {
+        category: "deployments",
         label: "Close deployment from list"
       });
     }

apps/deploy-web/src/components/deployments/DeploymentLogs.tsx

@@ -7,7 +7,6 @@ import { useTheme as useMuiTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { Download, MoreHoriz } from "iconoir-react";
 import { editor } from "monaco-editor";
-import { event } from "nextjs-google-analytics";
 
 import { CustomDropdownLinkItem } from "@src/components/shared/CustomDropdownLinkItem";
 import { LinearLoadingSkeleton } from "@src/components/shared/LinearLoadingSkeleton";
@@ -20,7 +19,7 @@ import { useProviderWebsocket } from "@src/hooks/useProviderWebsocket";
 import { useThrottledCallback } from "@src/hooks/useThrottle";
 import { useLeaseStatus } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
-import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
+import { analyticsService } from "@src/services/analytics/analytics.service";
 import { LeaseDto } from "@src/types/deployment";
 import { LeaseSelect } from "./LeaseSelect";
 
@@ -222,8 +221,8 @@ export const DeploymentLogs: React.FunctionComponent<Props> = ({ leases, selecte
       const isLogs = selectedLogsMode === "logs";
       await downloadLogs(providerInfo, selectedLease.dseq, selectedLease.gseq, selectedLease.oseq, isLogs);
 
-      event(AnalyticsEvents.DOWNLOADED_LOGS, {
-        category: AnalyticsCategory.DEPLOYMENTS,
+      analyticsService.track("downloaded_logs", {
+        category: "deployments",
         label: isLogs ? "Downloaded deployment logs" : "Downloaded deployment events"
       });
 

apps/deploy-web/src/components/deployments/ManifestUpdate.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from "react";
 import { Alert, Button, CustomTooltip, Snackbar, Spinner } from "@akashnetwork/ui/components";
 import { InfoCircle, WarningCircle } from "iconoir-react";
 import yaml from "js-yaml";
-import { event } from "nextjs-google-analytics";
 import { useSnackbar } from "notistack";
 
 import { DynamicMonacoEditor } from "@src/components/shared/DynamicMonacoEditor";
@@ -14,8 +13,8 @@ import { useCertificate } from "@src/context/CertificateProvider";
 import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useProviderList } from "@src/queries/useProvidersQuery";
+import { analyticsService } from "@src/services/analytics/analytics.service";
 import networkStore from "@src/store/networkStore";
-import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
 import { DeploymentDto, LeaseDto } from "@src/types/deployment";
 import { ApiProviderList } from "@src/types/provider";
 import { deploymentData } from "@src/utils/deploymentData";
@@ -172,8 +171,8 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({
           await sendManifest(providerInfo as ApiProviderList, mani);
         }
 
-        event(AnalyticsEvents.UPDATE_DEPLOYMENT, {
-          category: AnalyticsCategory.DEPLOYMENTS,
+        analyticsService.track("update_deployment", {
+          category: "deployments",
           label: "Update deployment"
         });
 

apps/deploy-web/src/components/deployments/ShellDownloadModal.tsx

@@ -3,11 +3,10 @@ import { useRef } from "react";
 import { useForm } from "react-hook-form";
 import { Alert, Form, FormField, FormInput, Popup } from "@akashnetwork/ui/components";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { event } from "nextjs-google-analytics";
 import { z } from "zod";
 
 import { useBackgroundTask } from "@src/context/BackgroundTaskProvider";
-import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
+import { analyticsService } from "@src/services/analytics/analytics.service";
 
 const formSchema = z.object({
   filePath: z
@@ -38,8 +37,8 @@ export const ShellDownloadModal = ({ selectedLease, onCloseClick, selectedServic
   const onSubmit = async ({ filePath }) => {
     downloadFileFromShell(providerInfo, selectedLease.dseq, selectedLease.gseq, selectedLease.oseq, selectedService, filePath);
 
-    event(AnalyticsEvents.DOWNLOADED_SHELL_FILE, {
-      category: AnalyticsCategory.DEPLOYMENTS,
+    analyticsService.track("downloaded_shell_file", {
+      category: "deployments",
       label: "Download file from shell"
     });
 

apps/deploy-web/src/components/layout/CustomGoogleAnalytics.tsx

@@ -13,5 +13,5 @@ export default function GoogleAnalytics() {
       nonInteraction: true // avoids affecting bounce rate.
     });
   });
-  return <>{!!browserEnvConfig.NEXT_PUBLIC_GA_MEASUREMENT_ID && <GAnalytics trackPageViews />}</>;
+  return <>{!!browserEnvConfig.NEXT_PUBLIC_GA_ENABLED && <GAnalytics trackPageViews />}</>;
 }