Track registration flow

next.config.js

@@ -1,8 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { withSentryConfig } = require("@sentry/nextjs");
 
-/** @type {import('next').NextConfig} */
 const nextConfig = {
+  sentry: {
+    hideSourceMaps: true,
+  },
   reactStrictMode: false,
   swcMinify: true,
   compiler: {
@@ -24,26 +26,13 @@ const nextConfig = {
       },
     ],
   },
-  sentry: {
-    // Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`
-    // for client-side builds. (This will be the default starting in
-    // `@sentry/nextjs` version 8.0.0.) See
-    // https://webpack.js.org/configuration/devtool/ and
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
-    // for more information.
-  },
 };
 
 const sentryWebpackPluginOptions = {
-  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  silent: true,
-  // the following options are set automatically, and overriding them is not
-  // recommended:
-  //   release, url, org, project, authToken, configFile, stripPrefix,
-  //   urlPrefix, include, ignore
-
-  silent: true, // Suppresses all logs
-  // For all available options, see:
-  // https://github.com/getsentry/sentry-webpack-plugin#options.
 };
 
-module.export = withSentryConfig(nextConfig, sentryWebpackPluginOptions);
+module.exports =
+  process.env.NEXT_IS_ENABLE_USER_TRACKING === "true"
+    ? withSentryConfig(nextConfig, sentryWebpackPluginOptions)
+    : nextConfig;

pages/_app.tsx

@@ -35,7 +35,7 @@ export default function App({ Component, pageProps }: AppProps) {
     const handleRouteChangeComplete = (url: string) => {
       const pathname = url.split("?")[0];
 
-      amplitude.track("View page", {
+      amplitude.track("view page", {
         pathname,
       });
     };

pages/complete/index.tsx

@@ -1,3 +1,4 @@
+import * as amplitude from "@amplitude/analytics-browser";
 import Image from "next/image";
 import styled from "styled-components";
 
@@ -44,6 +45,8 @@ export default function CompletePage() {
       );
 
       if (!result.code || result.code === 0) {
+        amplitude.track("complete registration");
+
         const addresses = await queryAddressesFromTwitterName(twitterUserName);
         setRegisteredAddressed(addresses.data.addresses);
         setIsSuccess(true);
@@ -54,6 +57,8 @@ export default function CompletePage() {
   };
 
   const onClickShareButton = () => {
+    amplitude.track("click share button");
+
     const { twitterUsername } = router.query;
 
     const shareMessage = `👨‍🚀 To Interchain... And Beyond!%0a%0aHey frens, I just minted my name for the interchain on @icns_xyz: ${twitterUsername}%0a%0aClaim yours now ▶`;

pages/index.tsx

@@ -1,3 +1,5 @@
+import * as amplitude from "@amplitude/analytics-browser";
+
 // NextJs
 import Image from "next/image";
 
@@ -24,6 +26,8 @@ export default function Home() {
   const [isModalOpen, setModalOpen] = useState(false);
 
   const onClickConnectWalletButton = async () => {
+    amplitude.track("click connect wallet button");
+
     setModalOpen(true);
   };
 

pages/verification/index.tsx

@@ -1,3 +1,5 @@
+import * as amplitude from "@amplitude/analytics-browser";
+
 // React
 import { useEffect, useState } from "react";
 
@@ -260,6 +262,7 @@ export default function VerificationPage() {
   };
 
   const onClickRegistration = async () => {
+    amplitude.track("click register button");
     try {
       const { state, code } = checkTwitterAuthQueryParameter(
         window.location.search,