implement matomo tracking updates

Author: wackerow

src/components/Buttons/Button.tsx

@@ -6,6 +6,7 @@ import {
 } from "@chakra-ui/react"
 
 import { scrollIntoView } from "../../utils/scrollIntoView"
+import { type MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"
 
 export const checkIsSecondary = (props: {
   variant?: string
@@ -33,15 +34,15 @@ export interface IProps extends ButtonProps {
    * `NOTE`: Does not apply to the `Solid` or `Link` variants
    */
   isSecondary?: boolean
+  customEventOptions?: MatomoEventOptions
 }
 
 const Button = forwardRef<IProps, "button">((props, ref) => {
-  const { toId, onClick, isSecondary, ...rest } = props
+  const { toId, onClick, isSecondary, customEventOptions, ...rest } = props
 
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (toId) {
-      scrollIntoView(toId)
-    }
+    toId && scrollIntoView(toId)
+    customEventOptions && trackCustomEvent(customEventOptions)
 
     onClick?.(e)
   }

src/components/FindWallet/WalletTable/index.tsx

@@ -427,11 +427,13 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
             <Wallet
               onClick={() => {
                 updateMoreInfo(wallet.key)
-                trackCustomEvent({
-                  eventCategory: "WalletMoreInfo",
-                  eventAction: `More info wallet`,
-                  eventName: `More info ${wallet.name} ${wallet.moreInfo}`,
-                })
+                // Log "more info" event only on expanding
+                wallet.moreInfo &&
+                  trackCustomEvent({
+                    eventCategory: "WalletMoreInfo",
+                    eventAction: `More info wallet`,
+                    eventName: `More info ${wallet.name}`,
+                  })
               }}
             >
               <Td lineHeight="revert">
@@ -473,7 +475,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
                           customEventOptions={{
                             eventCategory: "WalletExternalLinkList",
                             eventAction: `Go to wallet`,
-                            eventName: `${wallet.name} ${idx}`,
+                            eventName: `Website: ${wallet.name} ${idx}`,
                             eventValue: JSON.stringify(filters),
                           }}
                         >
@@ -486,7 +488,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
                             customEventOptions={{
                               eventCategory: "WalletExternalLinkList",
                               eventAction: `Go to wallet`,
-                              eventName: `${wallet.name} ${idx}`,
+                              eventName: `Twitter: ${wallet.name} ${idx}`,
                               eventValue: JSON.stringify(filters),
                             }}
                           >
@@ -504,7 +506,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
                             customEventOptions={{
                               eventCategory: "WalletExternalLinkList",
                               eventAction: `Go to wallet`,
-                              eventName: `${wallet.name} ${idx}`,
+                              eventName: `Discord: ${wallet.name} ${idx}`,
                               eventValue: JSON.stringify(filters),
                             }}
                           >