feat: matomo config (#586)

* fix: open terms and package.json details

* fix: open github commit from current version

* feat: set matomo env vars

* feat: parse matomo project id

* feat: add trackEvents

ui/summit-2024/.env.example

@@ -14,18 +14,19 @@ VITE_DISCORD_CHANNEL_URL=https://discord.gg/WyB6QSVh
 ## Discord bot URL for Wallet verification
 VITE_DISCORD_BOT_URL=https://discord.com/channels/1255818615886843945/1255820482180284448
 
-## Matomo Base URL
+## Matomo
 VITE_MATOMO_BASE_URL=http://localhost:8080
+VITE_MATOMO_PROJECT_ID=1
 
 # Config vars
 ## Cardano Network Target. Possible values: MAINNET or PREPROD
 VITE_TARGET_NETWORK=PREPROD
 
 ## ID of the running event on chain
-VITE_EVENT_ID="CF_SUMMIT_2024_8BCC"
+VITE_EVENT_ID=CF_SUMMIT_2024_12BAF-LOCAL
 
 ## List of supported wallets
-VITE_SUPPORTED_WALLETS=flint,eternl,nami,typhon,yoroi,nufi,gerowallet,lace
+VITE_SUPPORTED_WALLETS=eternl,nami,typhon,yoroi,nufi,gerowallet,lace
 
 ## Controls the visibility of the winners of the voting
 VITE_SHOW_WINNERS=false
@@ -34,4 +35,4 @@ VITE_SHOW_WINNERS=false
 VITE_SHOW_HYDRA_TALLY=false
 
 ## Using dummy data
-VITE_USING_FIXTURES=false
+VITE_USING_FIXTURES=true

ui/summit-2024/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "vite-project",
+  "name": "cardano-ballot",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

ui/summit-2024/src/common/constants/env.ts

@@ -15,6 +15,10 @@ const MATOMO_BASE_URL =
   window._env_?.VITE_MATOMO_BASE_URL ||
   import.meta.env.VITE_MATOMO_BASE_URL ||
   "none";
+const MATOMO_PROJECT_ID =
+  window._env_?.VITE_MATOMO_PROJECT_ID ||
+  import.meta.env.VITE_MATOMO_PROJECT_ID ||
+  "0";
 const DISCORD_CHANNEL_URL =
   window._env_?.VITE_DISCORD_CHANNEL_URL ||
   import.meta.env.VITE_DISCORD_CHANNEL_URL;
@@ -55,6 +59,7 @@ export const env = {
   APP_VERSION,
   SUPPORTED_WALLETS,
   MATOMO_BASE_URL,
+  MATOMO_PROJECT_ID,
   FRONTEND_URL,
   COMMIT_HASH,
   DISCORD_CHANNEL_URL,

ui/summit-2024/src/components/ConnectWalletModal/ConnectWalletModal.tsx

@@ -16,6 +16,7 @@ import { setConnectedWallet } from "../../store/reducers/userCache";
 import { ToastType } from "../common/Toast/Toast.types";
 import { initialConnectedWallet } from "../../store/reducers/userCache/initialState";
 import { clearUserInSessionStorage } from "../../utils/session";
+import { useMatomo } from "@datapunt/matomo-tracker-react";
 
 const ConnectWalletModal = (props: ConnectWalletProps) => {
   const dispatch = useAppDispatch();
@@ -45,7 +46,7 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
   } = useCardano({
     limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK),
   });
-
+  const { trackEvent } = useMatomo();
   const isMobile = useIsPortrait();
 
   const onConnectWalletError = (e: Error) => {
@@ -103,6 +104,11 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
               `${name} Wallet connected successfully`,
             );
             props.handleCloseConnectWalletModal();
+            trackEvent({
+              category: "connect-keri-wallet",
+              action: "click-event",
+              name: "idw_p2p",
+            });
           } else {
             eventBus.publish(
               EventName.ShowToast,
@@ -129,6 +135,11 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
                   `${name} Wallet connected successfully`,
                 );
                 props.handleCloseConnectWalletModal();
+                trackEvent({
+                  category: "connect-cardano-wallet",
+                  action: "click-event",
+                  name: name,
+                });
               }
             },
             (e: Error) => {
@@ -181,6 +192,11 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
         );
         eventBus.publish(EventName.CloseConnectWalletModal);
         eventBus.publish(EventName.ShowToast, "Wallet connected successfully");
+        trackEvent({
+          category: "connect-cardano-wallet",
+          action: "click-event",
+          name: walletName,
+        });
       },
       onConnectError,
     );
@@ -211,6 +227,11 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
                     address: keriIdentifier.id,
                   }),
                 );
+                trackEvent({
+                  category: "connect-keri-wallet",
+                  action: "click-event",
+                  name: "idw_p2p",
+                });
               } else {
                 eventBus.publish(
                   EventName.ShowToast,

ui/summit-2024/src/components/Footer/Footer.tsx

@@ -11,12 +11,37 @@ import { env } from "../../common/constants/env";
 import discordLogo from "../../assets/discord.svg";
 import { i18n } from "../../i18n";
 import { eventBus, EventName } from "../../utils/EventBus";
+import { useMatomo } from "@datapunt/matomo-tracker-react";
 
 const Footer = () => {
+  const { trackEvent } = useMatomo();
+
   const handleOpenTerms = () => {
-    console.log("handleOpenTerms");
     eventBus.publish(EventName.OpenTermsModal);
+    trackEvent({
+      category: "open-terms-from-footer",
+      action: "click-event",
+    });
+  };
+
+  const handleJoinDiscord = () => {
+    window.open(env.DISCORD_SUPPORT_CHANNEL_URL, "_blank");
+    trackEvent({
+      category: "click-join-discord",
+      action: "click-event",
+    });
+  };
+
+  const handleOpenGithubCommit = () => {
+    window.open(
+      `https://github.com/cardano-foundation/cf-cardano-ballot/commit/${env.APP_VERSION}`,
+    );
+    trackEvent({
+      category: "click-open-github-commit",
+      action: "click-event",
+    });
   };
+
   return (
     <>
       <Box
@@ -80,14 +105,15 @@ const Footer = () => {
                   display: "flex",
                 }}
               >
-                <Typography onClick={() => handleOpenTerms()}>
+                <Typography>
                   <Link
                     sx={{
                       color: "text.primary",
                       textDecoration: "underline",
                       marginRight: 1,
                       cursor: "pointer",
                     }}
+                    onClick={() => handleOpenTerms()}
                   >
                     {i18n.t("footer.menu.termsAndConditions")}
                   </Link>
@@ -98,11 +124,20 @@ const Footer = () => {
                       marginRight: 1,
                       cursor: "pointer",
                     }}
+                    onClick={() => handleOpenTerms()}
                   >
                     {i18n.t("footer.menu.privacyPolicy")}
                   </Link>
                   <span>
-                    Version {env.APP_VERSION}(
+                    <span
+                      style={{
+                        cursor: "pointer",
+                      }}
+                      onClick={() => handleOpenGithubCommit()}
+                    >
+                      Version {env.APP_VERSION}
+                    </span>
+                    (
                     <Link
                       href="https://status.voting.summit.cardano.org/"
                       target="_blank"
@@ -135,19 +170,15 @@ const Footer = () => {
               >
                 <Tooltip title="Get support" placement="top">
                   <IconButton
-                    onClick={() =>
-                      window.open(env.DISCORD_SUPPORT_CHANNEL_URL, "_blank")
-                    }
+                    onClick={() => handleJoinDiscord()}
                     sx={{ p: 0, color: "secondary.main", marginRight: "40px" }}
                   >
                     <SupportIcon sx={{ color: "text.primary" }} />
                   </IconButton>
                 </Tooltip>
                 <Tooltip title="Join our Discord" placement="top">
                   <IconButton
-                    onClick={() =>
-                      window.open(env.DISCORD_SUPPORT_CHANNEL_URL, "_blank")
-                    }
+                    onClick={() => handleJoinDiscord()}
                     sx={{ p: 0, color: "secondary.main" }}
                   >
                     <img

ui/summit-2024/src/components/VerifyWalletModal/VerifyWalletModal.tsx

@@ -48,14 +48,15 @@ import { ToastType } from "../common/Toast/Toast.types";
 import { CustomInput } from "../common/CustomInput/CustomInput";
 import theme from "../../common/styles/theme";
 import { useCardano } from "@cardano-foundation/cardano-connect-with-wallet";
+import { useMatomo } from "@datapunt/matomo-tracker-react";
 
 // TODO: env.
 const excludedCountries: MuiTelInputCountry[] | undefined = [];
 
 const VerifyWalletModal = () => {
   const connectedWallet = useAppSelector(getConnectedWallet);
   const dispatch = useAppDispatch();
-
+  const { trackEvent } = useMatomo();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [verifyCurrentPaths, setVerifyCurrentPaths] = useState<
@@ -167,6 +168,7 @@ const VerifyWalletModal = () => {
               ToastType.Error,
             );
             setPhoneCodeIsBeenSending(false);
+            trackEvent({ category: "sms-sent-error", action: "backend-event" });
           } else {
             handleSetCurrentPath(VerifyWalletFlow.CONFIRM_CODE);
             dispatch(
@@ -179,6 +181,7 @@ const VerifyWalletModal = () => {
             setPhoneCodeIsSent(true);
             setCheckImNotARobot(false);
             setPhoneCodeIsBeenSending(false);
+            trackEvent({ category: "sms-sent", action: "backend-event" });
           }
         })
         .catch(() => {
@@ -206,6 +209,10 @@ const VerifyWalletModal = () => {
             "Phone number verified successfully",
           );
           setIsOpen(false);
+          trackEvent({
+            category: "phone-number-verified",
+            action: "backend-event",
+          });
         } else {
           setPhoneCodeShowError(true);
           eventBus.publish(
@@ -215,6 +222,10 @@ const VerifyWalletModal = () => {
           );
           setPhoneCodeIsBeenConfirming(false);
           handleSetCurrentPath(VerifyWalletFlow.DID_NOT_RECEIVE_CODE);
+          trackEvent({
+            category: "phone-number-verified-failed",
+            action: "backend-event",
+          });
         }
       })
       .catch(() => {
@@ -250,12 +261,17 @@ const VerifyWalletModal = () => {
         verifyDiscordResult.message || "Error while verifying",
         ToastType.Error,
       );
+      trackEvent({
+        category: "discord-verification-failed",
+        action: "backend-event",
+      });
       return;
     }
     // @ts-ignore
     dispatch(setWalletIsVerified(verifyDiscordResult.verified));
     eventBus.publish(EventName.ShowToast, "Wallet verified successfully");
     handleCloseModal();
+    trackEvent({ category: "discord-verified", action: "backend-event" });
   };
 
   const renderStartVerification = () => {

ui/summit-2024/src/index.tsx

@@ -12,7 +12,7 @@ import { env } from "./common/constants/env";
 
 const instance = createInstance({
   urlBase: env.MATOMO_BASE_URL,
-  siteId: 1,
+  siteId: parseInt(env.MATOMO_PROJECT_ID, 10),
   trackerUrl: `${env.MATOMO_BASE_URL}/matomo.php`,
   srcUrl: `${env.MATOMO_BASE_URL}/matomo.js`,
   disabled: false,

ui/summit-2024/src/pages/Categories/Categories.tsx

@@ -49,6 +49,7 @@ import {
 import { useCardano } from "@cardano-foundation/cardano-connect-with-wallet";
 import { env } from "../../common/constants/env";
 import { formatISODate } from "../../utils/utils";
+import { useMatomo } from "@datapunt/matomo-tracker-react";
 
 interface CategoriesProps {
   embedded?: boolean;
@@ -82,6 +83,7 @@ const Categories: React.FC<CategoriesProps> = ({ embedded }) => {
 
   const session = getUserInSession();
   const dispatch = useAppDispatch();
+  const { trackEvent } = useMatomo();
 
   const showEventDate =
     eventCache.notStarted ||
@@ -308,9 +310,20 @@ const Categories: React.FC<CategoriesProps> = ({ embedded }) => {
           eventBus.publish(EventName.OpenLoginModal);
         }
 
+        trackEvent({
+          category: "vote-failed",
+          action: "click-event",
+          // @ts-ignore
+          name: submitVoteResult.message,
+        });
         return;
       }
       eventBus.publish(EventName.ShowToast, "Vote submitted successfully");
+      trackEvent({
+        category: "vote-successfully",
+        action: "click-event",
+        name: proposalId,
+      });
 
       const updatedVotes = [
         ...userVotes,

ui/summit-2024/src/pages/Home/components/TicketsSection.tsx

@@ -3,12 +3,18 @@ import Logo from "../../../assets/logo.svg";
 import dubaiBg from "@assets/dubai-bg.svg";
 import { CustomButton } from "../../../components/common/CustomButton/CustomButton";
 import theme from "../../../common/styles/theme";
+import { useMatomo } from "@datapunt/matomo-tracker-react";
 
 const TicketsSection = () => {
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const { trackEvent } = useMatomo();
 
   const handleButtonClick = () => {
     window.open("https://summit.cardano.org/registration/", "_blank");
+    trackEvent({
+      category: "open-buy-summit-tickets",
+      action: "click-event",
+    });
   };
 
   return (