From c6b075f516fd7dfcd000325a7cdae1431f5ec833 Mon Sep 17 00:00:00 2001
From: Connor Prussin <connor@prussin.net>
Date: Thu, 20 Jun 2024 16:20:57 -0700
Subject: [PATCH] Add amplitude autocapture plugin to capture button events

---
 package-lock.json | 33 +++++++++++++++++++++++++++++++++
 package.json      |  1 +
 pages/_app.tsx    |  2 ++
 3 files changed, 36 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 12c36c27..b5af743b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@amplitude/analytics-browser": "^2.8.1",
+        "@amplitude/plugin-autocapture-browser": "^0.9.2",
         "@codesandbox/sandpack-react": "^2.6.1",
         "@cosmjs/cosmwasm-stargate": "^0.31.0",
         "@headlessui/react": "^1.7.14",
@@ -134,6 +135,21 @@
       "resolved": "https://registry.npmjs.org/@amplitude/analytics-types/-/analytics-types-2.5.1.tgz",
       "integrity": "sha512-xGuLiHRLv5z3RSAHiICjzHK4TjUZJ7aHr/jM0XhSgD/V1YdmG/s8y1UAWGI2Stsxm2x0DWNOyEpjYkGohlnXtA=="
     },
+    "node_modules/@amplitude/plugin-autocapture-browser": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@amplitude/plugin-autocapture-browser/-/plugin-autocapture-browser-0.9.2.tgz",
+      "integrity": "sha512-SwhPHTf+MxcA9xiSCp6+1ZX2IZrdDQdn0fWVp2Pn+unP6IWTJpLl9dmjbbx3Ov21fjZK4UYQW9fFGml+CLTcSA==",
+      "dependencies": {
+        "@amplitude/analytics-client-common": ">=1 <3",
+        "@amplitude/analytics-types": ">=1 <3",
+        "tslib": "^2.4.1"
+      }
+    },
+    "node_modules/@amplitude/plugin-autocapture-browser/node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+    },
     "node_modules/@amplitude/plugin-page-view-tracking-browser": {
       "version": "2.2.13",
       "resolved": "https://registry.npmjs.org/@amplitude/plugin-page-view-tracking-browser/-/plugin-page-view-tracking-browser-2.2.13.tgz",
@@ -23059,6 +23075,23 @@
       "resolved": "https://registry.npmjs.org/@amplitude/analytics-types/-/analytics-types-2.5.1.tgz",
       "integrity": "sha512-xGuLiHRLv5z3RSAHiICjzHK4TjUZJ7aHr/jM0XhSgD/V1YdmG/s8y1UAWGI2Stsxm2x0DWNOyEpjYkGohlnXtA=="
     },
+    "@amplitude/plugin-autocapture-browser": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@amplitude/plugin-autocapture-browser/-/plugin-autocapture-browser-0.9.2.tgz",
+      "integrity": "sha512-SwhPHTf+MxcA9xiSCp6+1ZX2IZrdDQdn0fWVp2Pn+unP6IWTJpLl9dmjbbx3Ov21fjZK4UYQW9fFGml+CLTcSA==",
+      "requires": {
+        "@amplitude/analytics-client-common": ">=1 <3",
+        "@amplitude/analytics-types": ">=1 <3",
+        "tslib": "^2.4.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+          "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+        }
+      }
+    },
     "@amplitude/plugin-page-view-tracking-browser": {
       "version": "2.2.13",
       "resolved": "https://registry.npmjs.org/@amplitude/plugin-page-view-tracking-browser/-/plugin-page-view-tracking-browser-2.2.13.tgz",
diff --git a/package.json b/package.json
index 4268be82..a4e7a796 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.8.1",
+    "@amplitude/plugin-autocapture-browser": "^0.9.2",
     "@codesandbox/sandpack-react": "^2.6.1",
     "@cosmjs/cosmwasm-stargate": "^0.31.0",
     "@headlessui/react": "^1.7.14",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 4870556e..4b4a7763 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,6 +7,7 @@ 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 { autocapturePlugin } from "@amplitude/plugin-autocapture-browser";
 import { CosmosChains, GlobalContextProvider } from "../contexts/GlobalContext";
 import "../styles/styles.css";
 import TagManager from "react-gtm-module";
@@ -44,6 +45,7 @@ export default function Nextra({ Component, pageProps }: NextraAppProps) {
   useEffect(() => {
     if (AMPLITUDE_API_KEY) {
       amplitude.init(AMPLITUDE_API_KEY);
+      amplitude.add(autocapturePlugin());
     }
   });