Merge branch 'mixpanel-improvements' into alpha

frontend/pages/index.js

@@ -935,28 +935,57 @@ const Homepage = () => {
                       variant="outline"
                       colorScheme="blue"
                       leftIcon={<FaDiscord />}
-                      w="300px"
+                      w="280px"
+                      onClick={() => {
+                        if (mixpanel.get_distinct_id()) {
+                          mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                            full_url: router.nextRouter.asPath,
+                            buttonName: `Check out our GitHub repository and join our community on
+                            Discord > Join our Discord`,
+                          });
+                        }
+                      }}
                     >
                       Join our Discord
                     </RouteButton>
                     <RouteButton
+                      // mt={3}
+                      // p={8}
                       placeSelf="center"
                       href={`https://github.com/bugout-dev/moonstream`}
                       size="lg"
                       variant="outline"
                       colorScheme="blue"
-                      w="300px"
+                      w="280px"
+                      onClick={() => {
+                        if (mixpanel.get_distinct_id()) {
+                          mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                            full_url: router.nextRouter.asPath,
+                            buttonName: `Check out our GitHub repository and join our community on
+                            Discord > git clone moonstream`,
+                          });
+                        }
+                      }}
                       leftIcon={<FaGithubSquare />}
                     >
                       git clone moonstream
                     </RouteButton>
                   </Flex>
                   <Button
-                    mt={3}
+                    // mt={3}
                     placeSelf="center"
                     w={["100%", "100%", "fit-content", null]}
-                    maxW={["250px", null, "fit-content"]}
-                    onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
+                    maxW={["280px", null, "fit-content"]}
+                    onClick={() => {
+                      if (mixpanel.get_distinct_id()) {
+                        mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                          full_url: router.nextRouter.asPath,
+                          buttonName: `Check out our GitHub repository and join our community on
+                          Discord > sign up`,
+                        });
+                      }
+                      toggleModal({ type: MODAL_TYPES.SIGNUP });
+                    }}
                     size="lg"
                     variant="solid"
                     colorScheme="orange"

frontend/src/components/SplitWithImage.js

@@ -17,6 +17,9 @@ import React, { useContext } from "react";
 import UIContext from "../core/providers/UIProvider/context";
 import { FaDiscord, FaGithubSquare } from "react-icons/fa";
 import RouteButton from "../components/RouteButton";
+import mixpanel from "mixpanel-browser";
+import MIXPANEL_EVENTS from "../core/providers/AnalyticsProvider/constants";
+import { useRouter } from "../core/hooks";
 
 const Feature = ({ text, icon, iconBg, bullets }) => {
   return (
@@ -72,6 +75,8 @@ const SplitWithImage = ({
   imgBoxShadow,
   py,
 }) => {
+  const router = useRouter();
+
   var buttonSize = useBreakpointValue({
     base: { single: "sm", double: "xs" },
     sm: { single: "md", double: "sm" },
@@ -186,6 +191,14 @@ const SplitWithImage = ({
                   w={["100%", "100%", "fit-content", null]}
                   maxW={["250px", null, "fit-content"]}
                   href={socialButton.url}
+                  onClick={() => {
+                    if (mixpanel.get_distinct_id()) {
+                      mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, {
+                        full_url: router.nextRouter.asPath,
+                        buttonName: `splitWithImage > ${badge} > ${socialButton.title}`,
+                      });
+                    }
+                  }}
                   mt={[0, 0, null, 16]}
                   size={socialButton ? buttonSize.double : buttonSize.single}
                   variant="outline"