Add Amplitude

.pnp.cjs

@@ -28,6 +28,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
         [null, {\
           "packageLocation": "./",\
           "packageDependencies": [\
+            ["@amplitude/analytics-browser", "npm:1.6.6"],\
             ["@keplr-wallet/common", "npm:0.11.23"],\
             ["@keplr-wallet/cosmos", "npm:0.11.23"],\
             ["@keplr-wallet/proto-types", "npm:0.11.23"],\
@@ -71,6 +72,72 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "SOFT"\
         }]\
       ]],\
+      ["@amplitude/analytics-browser", [\
+        ["npm:1.6.6", {\
+          "packageLocation": "./.yarn/cache/@amplitude-analytics-browser-npm-1.6.6-d1c69ae672-a43eb0dab5.zip/node_modules/@amplitude/analytics-browser/",\
+          "packageDependencies": [\
+            ["@amplitude/analytics-browser", "npm:1.6.6"],\
+            ["@amplitude/analytics-client-common", "npm:0.5.0"],\
+            ["@amplitude/analytics-core", "npm:0.11.0"],\
+            ["@amplitude/analytics-types", "npm:0.14.0"],\
+            ["@amplitude/ua-parser-js", "npm:0.7.31"],\
+            ["tslib", "npm:2.4.1"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
+      ["@amplitude/analytics-client-common", [\
+        ["npm:0.5.0", {\
+          "packageLocation": "./.yarn/cache/@amplitude-analytics-client-common-npm-0.5.0-07e963d4fd-eebf391f64.zip/node_modules/@amplitude/analytics-client-common/",\
+          "packageDependencies": [\
+            ["@amplitude/analytics-client-common", "npm:0.5.0"],\
+            ["@amplitude/analytics-connector", "npm:1.4.6"],\
+            ["@amplitude/analytics-core", "npm:0.11.0"],\
+            ["@amplitude/analytics-types", "npm:0.14.0"],\
+            ["tslib", "npm:2.4.1"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
+      ["@amplitude/analytics-connector", [\
+        ["npm:1.4.6", {\
+          "packageLocation": "./.yarn/cache/@amplitude-analytics-connector-npm-1.4.6-d9e949e37c-0a2acfa54e.zip/node_modules/@amplitude/analytics-connector/",\
+          "packageDependencies": [\
+            ["@amplitude/analytics-connector", "npm:1.4.6"],\
+            ["@amplitude/ua-parser-js", "npm:0.7.31"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
+      ["@amplitude/analytics-core", [\
+        ["npm:0.11.0", {\
+          "packageLocation": "./.yarn/cache/@amplitude-analytics-core-npm-0.11.0-e8af53e9ab-be98d2614b.zip/node_modules/@amplitude/analytics-core/",\
+          "packageDependencies": [\
+            ["@amplitude/analytics-core", "npm:0.11.0"],\
+            ["@amplitude/analytics-types", "npm:0.14.0"],\
+            ["tslib", "npm:2.4.1"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
+      ["@amplitude/analytics-types", [\
+        ["npm:0.14.0", {\
+          "packageLocation": "./.yarn/cache/@amplitude-analytics-types-npm-0.14.0-7b5c807dc5-23972f7869.zip/node_modules/@amplitude/analytics-types/",\
+          "packageDependencies": [\
+            ["@amplitude/analytics-types", "npm:0.14.0"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
+      ["@amplitude/ua-parser-js", [\
+        ["npm:0.7.31", {\
+          "packageLocation": "./.yarn/cache/@amplitude-ua-parser-js-npm-0.7.31-540ed0892d-c72e7c8656.zip/node_modules/@amplitude/ua-parser-js/",\
+          "packageDependencies": [\
+            ["@amplitude/ua-parser-js", "npm:0.7.31"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["@babel/code-frame", [\
         ["npm:7.18.6", {\
           "packageLocation": "./.yarn/cache/@babel-code-frame-npm-7.18.6-25229a7e34-195e2be317.zip/node_modules/@babel/code-frame/",\
@@ -4367,6 +4434,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "packageLocation": "./",\
           "packageDependencies": [\
             ["icns-frontend", "workspace:."],\
+            ["@amplitude/analytics-browser", "npm:1.6.6"],\
             ["@keplr-wallet/common", "npm:0.11.23"],\
             ["@keplr-wallet/cosmos", "npm:0.11.23"],\
             ["@keplr-wallet/proto-types", "npm:0.11.23"],\

package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@amplitude/analytics-browser": "^1.6.6",
     "@keplr-wallet/common": "^0.11.23",
     "@keplr-wallet/cosmos": "^0.11.23",
     "@keplr-wallet/proto-types": "^0.11.23",

pages/_app.tsx

@@ -1,7 +1,8 @@
+import * as amplitude from "@amplitude/analytics-browser";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { DefaultTheme, ThemeProvider } from "styled-components";
 import ErrorBoundary from "../components/error-boundary";
 
@@ -17,6 +18,10 @@ const defaultPageTheme: DefaultTheme = {
   bgGridColor: "rgba(51, 51, 51, 0.3)",
 };
 
+if (process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY !== undefined) {
+  amplitude.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY);
+}
+
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
 
@@ -26,6 +31,25 @@ export default function App({ Component, pageProps }: AppProps) {
 
   const origin = typeof window !== "undefined" ? window.location.origin : "";
 
+  useEffect(() => {
+    const handleRouteChangeComplete = (url: string) => {
+      const pathname = url.split("?")[0];
+
+      amplitude.track("View page", {
+        pathname,
+      });
+    };
+
+    handleRouteChangeComplete(router.pathname);
+    router.events.on("routeChangeStart", handleRouteChangeComplete);
+
+    // If the component is unmounted, unsubscribe
+    // from the event with the `off` method:
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChangeComplete);
+    };
+  }, []);
+
   return (
     <ThemeProvider theme={pageTheme}>
       <Head>

yarn.lock

@@ -5,6 +5,64 @@ __metadata:
   version: 6
   cacheKey: 8
 
+"@amplitude/analytics-browser@npm:^1.6.6":
+  version: 1.6.6
+  resolution: "@amplitude/analytics-browser@npm:1.6.6"
+  dependencies:
+    "@amplitude/analytics-client-common": ^0.5.0
+    "@amplitude/analytics-core": ^0.11.0
+    "@amplitude/analytics-types": ^0.14.0
+    "@amplitude/ua-parser-js": ^0.7.31
+    tslib: ^2.3.1
+  checksum: a43eb0dab51b77ef2529f4be6eee90e90a43d3e7d1d54da4edf33cea476889328f22aa238590420a8568a913174b1cab55b3d6a1a76d3c4e6aebe25a0e8c02b8
+  languageName: node
+  linkType: hard
+
+"@amplitude/analytics-client-common@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "@amplitude/analytics-client-common@npm:0.5.0"
+  dependencies:
+    "@amplitude/analytics-connector": ^1.4.5
+    "@amplitude/analytics-core": ^0.11.0
+    "@amplitude/analytics-types": ^0.14.0
+    tslib: ^2.3.1
+  checksum: eebf391f64fc5287ddb3a1f23c78fff9c63e7f1dd96dd5466d9549d08c24764b6a49d0c0d1552d3784902be00108913b6669699fffefd7f623a0db9854ce8d94
+  languageName: node
+  linkType: hard
+
+"@amplitude/analytics-connector@npm:^1.4.5":
+  version: 1.4.6
+  resolution: "@amplitude/analytics-connector@npm:1.4.6"
+  dependencies:
+    "@amplitude/ua-parser-js": 0.7.31
+  checksum: 0a2acfa54e02b405e1b66ec522aa5802f938f525ad0e81a864f9370b53a3a18f166962d891a5372c12938ec7c3fbbb3453304261845bd57e5617963c8285c2dc
+  languageName: node
+  linkType: hard
+
+"@amplitude/analytics-core@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@amplitude/analytics-core@npm:0.11.0"
+  dependencies:
+    "@amplitude/analytics-types": ^0.14.0
+    tslib: ^2.3.1
+  checksum: be98d2614bbb22dfae03dfc4f79766ffb71c9f6b0b2fe88ea1b3ea4beae0f69f4d3add0a1dd6f0658300e14ca7d61d45d42f356653c19ba7cf87bcc9443cb7f1
+  languageName: node
+  linkType: hard
+
+"@amplitude/analytics-types@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "@amplitude/analytics-types@npm:0.14.0"
+  checksum: 23972f7869b1020d86a6b1d427b003e6bfed6ffae37dd755a86b7d78310568b381b0b7d8970ba468894efb6d775e3b885ed8ac4548d6c15413ed02548dfa9d00
+  languageName: node
+  linkType: hard
+
+"@amplitude/ua-parser-js@npm:0.7.31, @amplitude/ua-parser-js@npm:^0.7.31":
+  version: 0.7.31
+  resolution: "@amplitude/ua-parser-js@npm:0.7.31"
+  checksum: c72e7c8656dd77a6c2ece9e3817929022aeadf731470e53fecddce03232d87977fd5b09d76c570a2a5bed97f5dd463fe6379aac7a6c4b2d2393f14486d385eec
+  languageName: node
+  linkType: hard
+
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/code-frame@npm:7.18.6"
@@ -3487,6 +3545,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "icns-frontend@workspace:."
   dependencies:
+    "@amplitude/analytics-browser": ^1.6.6
     "@keplr-wallet/common": ^0.11.23
     "@keplr-wallet/cosmos": ^0.11.23
     "@keplr-wallet/proto-types": ^0.11.23
@@ -6003,7 +6062,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1":
+"tslib@npm:^2.0.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.4.1":
   version: 2.4.1
   resolution: "tslib@npm:2.4.1"
   checksum: 19480d6e0313292bd6505d4efe096a6b31c70e21cf08b5febf4da62e95c265c8f571f7b36fcc3d1a17e068032f59c269fab3459d6cd3ed6949eafecf64315fca