Add Amplitude integration (#312)

Author: cprussin

package-lock.json

@@ -11,6 +11,7 @@
     "postinstall": "graz generate -g"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^2.8.1",
     "@codesandbox/sandpack-react": "^2.6.1",
     "@cosmjs/cosmwasm-stargate": "^0.31.0",
     "@headlessui/react": "^1.7.14",

package.json

@@ -6,13 +6,15 @@ import "nextra-theme-docs/style.css";
 import { ReactNode, useEffect, useState } from "react";
 import { WagmiConfig, createConfig } from "wagmi";
 import { arbitrum, avalanche, mainnet, sepolia } from "wagmi/chains";
+import * as amplitude from "@amplitude/analytics-browser";
 import { CosmosChains, GlobalContextProvider } from "../contexts/GlobalContext";
 import "../styles/styles.css";
 import TagManager from "react-gtm-module";
 
 const tagManagerArgs = {
   gtmId: "GTM-MN3TWRGJ",
 };
+const AMPLITUDE_API_KEY = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY;
 
 const chains = [arbitrum, mainnet, avalanche, sepolia];
 
@@ -39,6 +41,11 @@ export default function Nextra({ Component, pageProps }: NextraAppProps) {
   useEffect(() => {
     TagManager.initialize(tagManagerArgs);
   }, []);
+  useEffect(() => {
+    if (AMPLITUDE_API_KEY) {
+      amplitude.init(AMPLITUDE_API_KEY);
+    }
+  });
 
   // Make the global context available to every page.
   return (