feat: introduce amplitude (#440)

* feat: introduce amplitude

package.json

@@ -14,6 +14,7 @@
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^2.0.0",
     "@anchor-protocol/anchor.js": "^5.1.1",
     "@ledgerhq/hw-transport-web-ble": "^6.27.1",
     "@mui/icons-material": "^5.8.0",

src/app/sections/LatestTx.tsx

@@ -16,6 +16,7 @@ import { useThemeAnimation } from "data/settings/Theme"
 import { useNetworkName } from "data/wallet"
 import { Button, FinderLink, LinkButton } from "components/general"
 import { Modal, LoadingCircular } from "components/feedback"
+import { createAmplitudeClient } from "utils/analytics/setupAmplitude"
 import { Flex } from "components/layout"
 import TxMessage from "../containers/TxMessage"
 import styles from "./LatestTx.module.scss"
@@ -30,6 +31,7 @@ enum Status {
 }
 
 const TxIndicator = ({ txhash }: { txhash: string }) => {
+  const amplitude = createAmplitudeClient()
   const { t } = useTranslation()
   const navigate = useNavigate()
   const animation = useThemeAnimation()
@@ -56,6 +58,10 @@ const TxIndicator = ({ txhash }: { txhash: string }) => {
     status === Status.SUCCESS && onSuccess?.()
   }, [status, onSuccess])
 
+  useEffect(() => {
+    amplitude.trackEvent(`Station-Web-Transaction`, { status, txhash })
+  }, [status, amplitude, txhash])
+
   /* render component */
   const icon = {
     [Status.LOADING]: <LoadingCircular size={36} thickness={2} />,

src/data/queries/tx.ts

@@ -38,7 +38,6 @@ export const useTxInfo = ({ txhash, queryKeys, chainID }: LatestTx) => {
         queryKeys?.forEach((queryKey) => {
           queryClient.invalidateQueries(queryKey)
         })
-
         queryClient.invalidateQueries(queryKey.History)
         queryClient.invalidateQueries(queryKey.bank.balance)
         queryClient.invalidateQueries(queryKey.tx.create)

src/index.tsx

@@ -6,7 +6,8 @@ import { RecoilRoot } from "recoil"
 import { getChainOptions } from "@terra-money/wallet-controller"
 import { WalletProvider } from "@terra-money/wallet-provider"
 import "tippy.js/dist/tippy.css"
-import { initSentry } from "utils/sentry/setupSentry"
+import { initSentry } from "utils/analytics/setupSentry"
+import { createAmplitudeClient } from "utils/analytics/setupAmplitude"
 
 import "config/lang"
 import { BRIDGE } from "config/constants"
@@ -25,6 +26,7 @@ import InitQueryClient from "app/InitQueryClient"
 
 const connectorOpts = { bridge: BRIDGE }
 initSentry()
+createAmplitudeClient()
 
 getChainOptions().then((chainOptions) =>
   render(

src/utils/analytics/setupAmplitude.ts

@@ -0,0 +1,41 @@
+import * as amplitude from "@amplitude/analytics-browser"
+
+// move to cloudflare env variable
+// this value is NOT secret - it is a client API key.
+// export const AMPLITUDE_API_KEY = process.env.REACT_APP_AMPLITUDE_API_KEY
+export const AMPLITUDE_API_KEY = "cfb5a9de7d2840a3af747c4294b10416"
+
+// Add hook/detection for users to opt out of tracking
+export const DONT_TRACK = false
+
+// Create generic interface
+interface IAmplitudeClient {
+  trackEvent: (eventLabel: string, eventOptions?: Record<string, any>) => void
+}
+
+// empty tracker
+export class NullAmplitudeClient implements IAmplitudeClient {
+  trackEvent(eventLabel: string, eventOptions?: Record<string, any>): void {}
+}
+
+// live tracker
+export class AmplitudeClient implements IAmplitudeClient {
+  constructor(apiKey: string) {
+    amplitude.init(apiKey)
+  }
+
+  trackEvent(eventLabel: string, eventOptions?: Record<string, any>): void {
+    amplitude.track(eventLabel, eventOptions)
+  }
+}
+
+// build client
+export const createAmplitudeClient = (): IAmplitudeClient => {
+  // if the key isn't found or if the user has opted out of tracking, return a null client
+  if (!AMPLITUDE_API_KEY || DONT_TRACK) {
+    return new NullAmplitudeClient()
+  }
+
+  // otherwise, return a live client
+  return new AmplitudeClient(AMPLITUDE_API_KEY)
+}