feat: add matomo

cardano-foundation · Jul 15, 2024 · e75b77d · e75b77d
1 parent 78d8fa8
commit e75b77d
Show file tree

Hide file tree

Showing 14 changed files with 928 additions and 809 deletions.
diff --git a/ui/summit-2024/.env.example b/ui/summit-2024/.env.example
@@ -1,25 +1,28 @@
 # Services URLs
 ## Backend Services URLs
 VITE_VOTING_APP_SERVER_URL="http://localhost:9091"
-VITE_VOTING_LEDGER_FOLLOWER_APP_SERVER_URL="http://localhost:9090/"
-VITE_VOTING_VERIFICATION_APP_SERVER_URL="http://localhost:9092/"
-VITE_USER_VERIFICATION_SERVER_URL="http://localhost:9093/"
+VITE_VOTING_LEDGER_FOLLOWER_APP_SERVER_URL="http://localhost:9090"
+VITE_VOTING_VERIFICATION_APP_SERVER_URL="http://localhost:9092"
+VITE_USER_VERIFICATION_SERVER_URL="http://localhost:9093"
 
 ## Frontend URL
 VITE_FRONTEND_URL="http://localhost:3000/"
 
 ## Discord URL for Wallet verification
-VITE_DISCORD_CHANNEL_URL=
+VITE_DISCORD_CHANNEL_URL=https://discord.gg/WyB6QSVh
 
 ## Discord bot URL for Wallet verification
-VITE_DISCORD_BOT_URL=
+VITE_DISCORD_BOT_URL=https://discord.com/channels/1255818615886843945/1255820482180284448
+
+## Matomo Base URL
+VITE_MATOMO_BASE_URL="http://localhost:8080"
 
 # 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_2023_4BCC"
+VITE_EVENT_ID="CF_SUMMIT_2024_8BCC"
 
 ## List of supported wallets
 VITE_SUPPORTED_WALLETS=flint,eternl,nami,typhon,yoroi,nufi,gerowallet,lace
@@ -31,4 +34,4 @@ VITE_SHOW_WINNERS=false
 VITE_SHOW_HYDRA_TALLY=false
 
 ## Using dummy data
-VITE_USING_FIXTURES=true
+VITE_USING_FIXTURES=false
diff --git a/ui/summit-2024/index.html b/ui/summit-2024/index.html
@@ -16,5 +16,20 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
+    <!-- Matomo -->
+    <script>
+      var _paq = window._paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="//localhost:8080/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '1']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
   </body>
 </html>
diff --git a/ui/summit-2024/package-lock.json b/ui/summit-2024/package-lock.json
diff --git a/ui/summit-2024/package.json b/ui/summit-2024/package.json
@@ -14,6 +14,7 @@
     "@cardano-foundation/cardano-connect-with-wallet": "^0.2.9",
     "@commitlint/cli": "^17.6.6",
     "@commitlint/config-conventional": "^17.6.6",
+    "@datapunt/matomo-tracker-react": "^0.5.1",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",

diff --git a/ui/summit-2024/src/common/constants/env.ts b/ui/summit-2024/src/common/constants/env.ts
@@ -6,6 +6,7 @@ const VOTING_VERIFICATION_APP_SERVER_URL = import.meta.env
 const VOTING_USER_VERIFICATION_SERVER_URL = import.meta.env
   .VITE_USER_VERIFICATION_SERVER_URL;
 const FRONTEND_URL = import.meta.env.VITE_WEB_URL;
+const MATOMO_BASE_URL = import.meta.env.VITE_MATOMO_BASE_URL;
 const DISCORD_CHANNEL_URL = import.meta.env.VITE_DISCORD_CHANNEL_URL;
 const COMMIT_HASH = import.meta.env.VITE_COMMIT_HASH;
 const DISCORD_BOT_URL = import.meta.env.VITE_DISCORD_BOT_URL;
@@ -31,6 +32,7 @@ export const env = {
   EVENT_ID,
   APP_VERSION,
   SUPPORTED_WALLETS,
+  MATOMO_BASE_URL,
   FRONTEND_URL,
   COMMIT_HASH,
   DISCORD_CHANNEL_URL,

diff --git a/ui/summit-2024/src/components/ConnectWalletList/ConnectWalletList.tsx b/ui/summit-2024/src/components/ConnectWalletList/ConnectWalletList.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import {
   Avatar,
   Box,
-  Button,
   Divider,
   IconButton,
   List,

diff --git a/ui/summit-2024/src/components/Footer/Footer.tsx b/ui/summit-2024/src/components/Footer/Footer.tsx
@@ -30,7 +30,7 @@ const Footer = () => {
           alignItems="center"
           sx={{
             marginLeft: {
-              xs: "-1%"
+              xs: "-1%",
             },
           }}
         >

diff --git a/ui/summit-2024/src/components/VerifyWalletModal/VerifyWalletModal.tsx b/ui/summit-2024/src/components/VerifyWalletModal/VerifyWalletModal.tsx
@@ -132,6 +132,8 @@ const VerifyWalletModal = () => {
       setPhoneCodeIsSent(false);
       setPhoneCodeShowError(false);
       setPhone("");
+      setInputSecret("");
+      setDiscordIsConfirming(false);
       setCodes(Array(6).fill(""));
       setVerifyCurrentPaths([VerifyWalletFlow.INTRO]);
     }
@@ -628,7 +630,7 @@ const VerifyWalletModal = () => {
               onClick={() => handleVerifyPhoneCode()}
               fullWidth={true}
               colorVariant="primary"
-              disabled={phoneCodeIsBeenConfirming && codes.includes("")}
+              disabled={phoneCodeIsBeenConfirming || codes.includes("")}
             >
               Confirm
             </CustomButton>
@@ -856,8 +858,8 @@ const VerifyWalletModal = () => {
           colorVariant="primary"
           onClick={() => handleVerifyDiscord()}
           disabled={
-            discordIsConfirming &&
-            inputSecret === "" &&
+            discordIsConfirming ||
+            inputSecret === "" ||
             !validateSecret(inputSecret)
           }
           sx={{
@@ -883,8 +885,11 @@ const VerifyWalletModal = () => {
   };
 
   const handleBack = () => {
+    console.log("handleBack");
     if (verifyCurrentPaths.length >= 2) {
-      return setVerifyCurrentPaths((prev) => prev.slice(1));
+      setVerifyCurrentPaths((prev) => prev.slice(1));
+    } else {
+      reset();
     }
   };
 

diff --git a/ui/summit-2024/src/index.tsx b/ui/summit-2024/src/index.tsx
@@ -3,19 +3,37 @@ import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/material/styles";
+import { MatomoProvider, createInstance } from "@datapunt/matomo-tracker-react";
 import theme from "./common/styles/theme";
 import { AppWrapper } from "./components/AppWrapper/AppWrapper";
 import App from "./App";
 import { store } from "./store";
+import {env} from "./common/constants/env";
+
+const instance = createInstance({
+  urlBase: env.MATOMO_BASE_URL,
+  siteId: 1,
+  trackerUrl: `${env.MATOMO_BASE_URL}/matomo.php`,
+  srcUrl: `${env.MATOMO_BASE_URL}/matomo.js`,
+  disabled: false,
+  heartBeat: {
+    active: true, // optional, default value: true
+    seconds: 10, // optional, default value: `15
+  },
+  linkTracking: true
+});
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Provider store={store}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <AppWrapper>
-          <App />
-        </AppWrapper>
+        {/* @ts-ignore */}
+        <MatomoProvider value={instance}>
+          <AppWrapper>
+            <App />
+          </AppWrapper>
+        </MatomoProvider>
       </ThemeProvider>
     </Provider>
   </React.StrictMode>,

diff --git a/ui/summit-2024/src/pages/BasePage.tsx b/ui/summit-2024/src/pages/BasePage.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode, useEffect } from "react";
+import { useMatomo } from "@datapunt/matomo-tracker-react";
+
+interface PageBaseProps {
+  title: string;
+  children: ReactNode;
+}
+
+const PageBase: React.FC<PageBaseProps> = ({ title, children }) => {
+  const { trackPageView } = useMatomo();
+
+  useEffect(() => {
+    trackPageView({
+      documentTitle: title,
+    });
+  }, [trackPageView]);
+
+  return <div>{children}</div>;
+};
+
+export { PageBase };
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,6 @@ import { useEffect, useState } from "react"; @@
     import {
       Avatar,
       Box,
-      Button,
       Divider,
       IconButton,
       List,
@@ Expand Down @@