From 51b29dabbd030ecb59ac6d1cb5c83b644d05eefc Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Wed, 18 Sep 2024 22:05:29 -0600
Subject: [PATCH] Matomo events

---
 .../FindWalletLanguageSelectInput.tsx         |  14 +-
 .../FindWalletsNoResults.tsx                  |  20 +-
 .../WalletSubComponent.tsx                    |  53 ++-
 .../data/WalletFilters.tsx                    | 315 ++++++++++++++++--
 .../FindWalletProductTable/index.tsx          |  15 +-
 src/components/ProductTable/MobileFilters.tsx |  11 +-
 src/components/ProductTable/Table.tsx         |   4 +-
 src/components/ProductTable/index.tsx         |  21 +-
 8 files changed, 411 insertions(+), 42 deletions(-)

diff --git a/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx b/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx
index 4b0081d90f9..35eb68e9e37 100644
--- a/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx
+++ b/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx
@@ -9,8 +9,10 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@/components/ui/Select"
 
+import { getLanguageCodeName } from "@/lib/utils/intl"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getLanguageCountWalletsData } from "@/lib/utils/wallets"
 
 interface FindWalletLanguageSelectInputProps {
@@ -42,6 +44,11 @@ const FindWalletLanguageSelectInput = ({
       <Select
         value={inputState as string}
         onValueChange={(e: Lang) => {
+          trackCustomEvent({
+            eventCategory: "WalletFilterSidebar",
+            eventAction: "Language search",
+            eventName: getLanguageCodeName(e, locale!),
+          })
           updateFilterState(filterIndex, itemIndex, e)
         }}
       >
@@ -68,6 +75,11 @@ const FindWalletLanguageSelectInput = ({
               key={language.langCode}
               className="cursor-pointer text-sm text-primary"
               onClick={() => {
+                trackCustomEvent({
+                  eventCategory: "WalletFilterSidebar",
+                  eventAction: "Language search",
+                  eventName: getLanguageCodeName(language.langCode, locale!),
+                })
                 updateFilterState(filterIndex, itemIndex, language.langCode)
               }}
             >
diff --git a/src/components/FindWalletProductTable/FindWalletsNoResults.tsx b/src/components/FindWalletProductTable/FindWalletsNoResults.tsx
index 26b771d6dcc..6991eeebf3e 100644
--- a/src/components/FindWalletProductTable/FindWalletsNoResults.tsx
+++ b/src/components/FindWalletProductTable/FindWalletsNoResults.tsx
@@ -1,10 +1,28 @@
 import { useTranslation } from "react-i18next"
 
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
 import { Button } from "../ui/buttons/Button"
 
 const FindWalletsNoResults = ({ resetFilters }) => {
   const { t } = useTranslation("page-wallets-find-wallet")
 
+  // Track empty state
+  trackCustomEvent({
+    eventCategory: "Wallet_empty_state",
+    eventAction: "reset",
+    eventName: "triggered",
+  })
+
+  const handleClick = () => {
+    resetFilters()
+    trackCustomEvent({
+      eventCategory: "Wallet_empty_state",
+      eventAction: "reset",
+      eventName: "reset_button_clicked",
+    })
+  }
+
   return (
     <div className="m-24 border-2 border-dashed border-body-light">
       <div className="p-12">
@@ -12,7 +30,7 @@ const FindWalletsNoResults = ({ resetFilters }) => {
           {t("page-find-wallet-empty-results-title")}
         </h3>
         <p>{t("page-find-wallet-empty-results-desc")}</p>
-        <Button variant="ghost" onClick={resetFilters}>
+        <Button variant="ghost" onClick={handleClick}>
           <p>{t("page-find-wallet-reset-filters")}</p>
         </Button>
       </div>
diff --git a/src/components/FindWalletProductTable/WalletSubComponent.tsx b/src/components/FindWalletProductTable/WalletSubComponent.tsx
index c01e43e5518..427980dc2e3 100644
--- a/src/components/FindWalletProductTable/WalletSubComponent.tsx
+++ b/src/components/FindWalletProductTable/WalletSubComponent.tsx
@@ -14,6 +14,7 @@ import InlineLink from "@/components/Link"
 import Tooltip from "@/components/Tooltip"
 
 import { cn } from "@/lib/utils/cn"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getLocaleFormattedDate } from "@/lib/utils/time"
 
 const SocialLink = (props) => (
@@ -33,9 +34,15 @@ const SocialLink = (props) => (
 
 interface WalletSubComponentProps {
   wallet: WalletData
+  filters: FilterOption[]
+  listIdx: number
 }
 
-const WalletSubComponent = ({ wallet }: WalletSubComponentProps) => {
+const WalletSubComponent = ({
+  wallet,
+  filters,
+  listIdx,
+}: WalletSubComponentProps) => {
   const { locale } = useRouter()
   const { t } = useTranslation("page-wallets-find-wallet")
   const walletFiltersOptions: FilterOption[] = WalletFilters()
@@ -53,6 +60,12 @@ const WalletSubComponent = ({ wallet }: WalletSubComponentProps) => {
     wallet.last_updated
   )
 
+  trackCustomEvent({
+    eventCategory: "WalletMoreInfo",
+    eventAction: "More info wallet",
+    eventName: `More info ${wallet.name}`,
+  })
+
   return (
     <div className="flex flex-row gap-2">
       <div className="w-1 md:w-14">
@@ -103,10 +116,7 @@ const WalletSubComponent = ({ wallet }: WalletSubComponentProps) => {
                             {item.filterLabel}{" "}
                             <Tooltip
                               content={
-                                <p className="text-body">
-                                  {/* TODO: Add filter description */}
-                                  {item.description}
-                                </p>
+                                <p className="text-body">{item.description}</p>
                               }
                             >
                               <span className="whitespace-nowrap">
@@ -127,16 +137,43 @@ const WalletSubComponent = ({ wallet }: WalletSubComponentProps) => {
             {t("page-find-wallet-social-links")}
           </h4>
           <div className="flex flex-row gap-4">
-            <SocialLink href={wallet.url} hideArrow>
+            <SocialLink
+              href={wallet.url}
+              hideArrow
+              customEventOptions={{
+                eventCategory: "WalletExternalLinkList",
+                eventAction: "Go to wallet",
+                eventName: `Website: ${wallet.name} ${listIdx}`,
+                eventValue: JSON.stringify(filters),
+              }}
+            >
               <FaGlobe size="2xl" />
             </SocialLink>
             {wallet.discord && (
-              <SocialLink href={wallet.discord} hideArrow>
+              <SocialLink
+                href={wallet.discord}
+                hideArrow
+                customEventOptions={{
+                  eventCategory: "WalletExternalLinkList",
+                  eventAction: "Go to wallet",
+                  eventName: `Discord: ${wallet.name} ${listIdx}`,
+                  eventValue: JSON.stringify(filters),
+                }}
+              >
                 <FaDiscord color="#7289da" size="2xl" />
               </SocialLink>
             )}
             {wallet.twitter && (
-              <SocialLink href={wallet.twitter} hideArrow>
+              <SocialLink
+                href={wallet.twitter}
+                hideArrow
+                customEventOptions={{
+                  eventCategory: "WalletExternalLinkList",
+                  eventAction: "Go to wallet",
+                  eventName: `Twitter: ${wallet.name} ${listIdx}`,
+                  eventValue: JSON.stringify(filters),
+                }}
+              >
                 <FaXTwitter color="#1da1f2" size="2xl" />
               </SocialLink>
             )}
diff --git a/src/components/FindWalletProductTable/data/WalletFilters.tsx b/src/components/FindWalletProductTable/data/WalletFilters.tsx
index 524706b82d0..ae25245d3c7 100644
--- a/src/components/FindWalletProductTable/data/WalletFilters.tsx
+++ b/src/components/FindWalletProductTable/data/WalletFilters.tsx
@@ -28,6 +28,8 @@ import {
 import CheckboxFilterInput from "@/components/ProductTable/FilterInputs/CheckboxFilterInput"
 import SwitchFilterInput from "@/components/ProductTable/FilterInputs/SwitchFilterInput"
 
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
 import { DEFAULT_LOCALE } from "@/lib/constants"
 
 export const WalletFilters = (): FilterOption[] => {
@@ -50,7 +52,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-mobile")}`,
+                    eventName: `mobile ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -74,7 +83,24 @@ export const WalletFilters = (): FilterOption[] => {
                     itemIndex={itemIndex}
                     optionIndex={optionIndex}
                     inputState={inputState}
-                    updateFilterState={updateFilterState}
+                    updateFilterState={(
+                      filterIndex,
+                      itemIndex,
+                      newInputState,
+                      optionIndex
+                    ) => {
+                      trackCustomEvent({
+                        eventCategory: "WalletFilterSidebar",
+                        eventAction: `${t("page-find-wallet-android")}`,
+                        eventName: `android ${newInputState}`,
+                      })
+                      updateFilterState(
+                        filterIndex,
+                        itemIndex,
+                        newInputState,
+                        optionIndex
+                      )
+                    }}
                   />
                 )
               },
@@ -98,7 +124,24 @@ export const WalletFilters = (): FilterOption[] => {
                     itemIndex={itemIndex}
                     optionIndex={optionIndex}
                     inputState={inputState}
-                    updateFilterState={updateFilterState}
+                    updateFilterState={(
+                      filterIndex,
+                      itemIndex,
+                      newInputState,
+                      optionIndex
+                    ) => {
+                      trackCustomEvent({
+                        eventCategory: "WalletFilterSidebar",
+                        eventAction: `${t("page-find-wallet-iOS")}`,
+                        eventName: `iOS ${newInputState}`,
+                      })
+                      updateFilterState(
+                        filterIndex,
+                        itemIndex,
+                        newInputState,
+                        optionIndex
+                      )
+                    }}
                   />
                 )
               },
@@ -118,7 +161,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-desktop")}`,
+                    eventName: `desktop ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -142,7 +192,24 @@ export const WalletFilters = (): FilterOption[] => {
                     itemIndex={itemIndex}
                     optionIndex={optionIndex}
                     inputState={inputState}
-                    updateFilterState={updateFilterState}
+                    updateFilterState={(
+                      filterIndex,
+                      itemIndex,
+                      newInputState,
+                      optionIndex
+                    ) => {
+                      trackCustomEvent({
+                        eventCategory: "WalletFilterSidebar",
+                        eventAction: `${t("page-find-wallet-linux")}`,
+                        eventName: `linux ${newInputState}`,
+                      })
+                      updateFilterState(
+                        filterIndex,
+                        itemIndex,
+                        newInputState,
+                        optionIndex
+                      )
+                    }}
                   />
                 )
               },
@@ -166,7 +233,24 @@ export const WalletFilters = (): FilterOption[] => {
                     itemIndex={itemIndex}
                     optionIndex={optionIndex}
                     inputState={inputState}
-                    updateFilterState={updateFilterState}
+                    updateFilterState={(
+                      filterIndex,
+                      itemIndex,
+                      newInputState,
+                      optionIndex
+                    ) => {
+                      trackCustomEvent({
+                        eventCategory: "WalletFilterSidebar",
+                        eventAction: `${t("page-find-wallet-windows")}`,
+                        eventName: `windows ${newInputState}`,
+                      })
+                      updateFilterState(
+                        filterIndex,
+                        itemIndex,
+                        newInputState,
+                        optionIndex
+                      )
+                    }}
                   />
                 )
               },
@@ -190,7 +274,24 @@ export const WalletFilters = (): FilterOption[] => {
                     itemIndex={itemIndex}
                     optionIndex={optionIndex}
                     inputState={inputState}
-                    updateFilterState={updateFilterState}
+                    updateFilterState={(
+                      filterIndex,
+                      itemIndex,
+                      newInputState,
+                      optionIndex
+                    ) => {
+                      trackCustomEvent({
+                        eventCategory: "WalletFilterSidebar",
+                        eventAction: `${t("page-find-wallet-macOS")}`,
+                        eventName: `macOS ${newInputState}`,
+                      })
+                      updateFilterState(
+                        filterIndex,
+                        itemIndex,
+                        newInputState,
+                        optionIndex
+                      )
+                    }}
                   />
                 )
               },
@@ -210,7 +311,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-browser")}`,
+                    eventName: `browser ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -234,7 +342,24 @@ export const WalletFilters = (): FilterOption[] => {
                     itemIndex={itemIndex}
                     optionIndex={optionIndex}
                     inputState={inputState}
-                    updateFilterState={updateFilterState}
+                    updateFilterState={(
+                      filterIndex,
+                      itemIndex,
+                      newInputState,
+                      optionIndex
+                    ) => {
+                      trackCustomEvent({
+                        eventCategory: "WalletFilterSidebar",
+                        eventAction: `${t("page-find-wallet-chromium")}`,
+                        eventName: `chromium ${newInputState}`,
+                      })
+                      updateFilterState(
+                        filterIndex,
+                        itemIndex,
+                        newInputState,
+                        optionIndex
+                      )
+                    }}
                   />
                 )
               },
@@ -258,7 +383,24 @@ export const WalletFilters = (): FilterOption[] => {
                     itemIndex={itemIndex}
                     optionIndex={optionIndex}
                     inputState={inputState}
-                    updateFilterState={updateFilterState}
+                    updateFilterState={(
+                      filterIndex,
+                      itemIndex,
+                      newInputState,
+                      optionIndex
+                    ) => {
+                      trackCustomEvent({
+                        eventCategory: "WalletFilterSidebar",
+                        eventAction: `${t("page-find-wallet-firefox")}`,
+                        eventName: `firefox ${newInputState}`,
+                      })
+                      updateFilterState(
+                        filterIndex,
+                        itemIndex,
+                        newInputState,
+                        optionIndex
+                      )
+                    }}
                   />
                 )
               },
@@ -278,7 +420,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-hardware")}`,
+                    eventName: `hardware ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -330,7 +479,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-buy-crypto")}`,
+                    eventName: `buy_crypto ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -350,7 +506,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-sell-for-fiat")}`,
+                    eventName: `withdraw_crypto ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -376,7 +539,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-connect-to-dapps")}`,
+                    eventName: `connect_to_dapps ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -396,7 +566,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-nft-support")}`,
+                    eventName: `nft_support ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -416,7 +593,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-staking")}`,
+                    eventName: `staking ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -436,7 +620,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-layer-2")}`,
+                    eventName: `layer_2 ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -456,7 +647,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-swaps")}`,
+                    eventName: `swaps ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -476,7 +674,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-hardware-wallet-support")}`,
+                    eventName: `hardware_support ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -496,7 +701,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-ens-support")}`,
+                    eventName: `ens_support ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -522,7 +734,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-open-source")}`,
+                    eventName: `open_source ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -542,7 +761,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-non-custodial")}`,
+                    eventName: `non_custodial ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -568,7 +794,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-multisig")}`,
+                    eventName: `multisig ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -588,7 +821,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-social-recovery")}`,
+                    eventName: `social_recovery ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -614,7 +854,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-rpc-importing")}`,
+                    eventName: `rpc_importing ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -634,7 +881,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${t("page-find-wallet-token-importing")}`,
+                    eventName: `erc_20_support ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
@@ -654,7 +908,14 @@ export const WalletFilters = (): FilterOption[] => {
                 filterIndex={filterIndex}
                 itemIndex={itemIndex}
                 inputState={inputState}
-                updateFilterState={updateFilterState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `advanced_features`,
+                    eventName: `gas_fee_customization ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
               />
             )
           },
diff --git a/src/components/FindWalletProductTable/index.tsx b/src/components/FindWalletProductTable/index.tsx
index efb6648e58e..d0158c8b2fd 100644
--- a/src/components/FindWalletProductTable/index.tsx
+++ b/src/components/FindWalletProductTable/index.tsx
@@ -8,6 +8,8 @@ import { WalletFilters } from "@/components/FindWalletProductTable/data/WalletFi
 import { WalletPersonaPresets } from "@/components/FindWalletProductTable/data/WalletPersonaPresets"
 import ProductTable from "@/components/ProductTable"
 
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
 import FindWalletsNoResults from "./FindWalletsNoResults"
 import WalletSubComponent from "./WalletSubComponent"
 
@@ -51,6 +53,11 @@ const FindWalletProductTable = ({ wallets }) => {
   // Reset filters
   const resetFilters = () => {
     setFilters(walletFilterOptions)
+    trackCustomEvent({
+      eventCategory: "WalletFilterSidebar",
+      eventAction: "Reset button",
+      eventName: "reset_click",
+    })
   }
 
   return (
@@ -61,7 +68,13 @@ const FindWalletProductTable = ({ wallets }) => {
       presetFilters={walletPersonas}
       resetFilters={resetFilters}
       setFilters={setFilters}
-      subComponent={(wallet) => <WalletSubComponent wallet={wallet} />}
+      subComponent={(wallet, listIdx) => (
+        <WalletSubComponent
+          wallet={wallet}
+          filters={filters}
+          listIdx={listIdx}
+        />
+      )}
       noResultsComponent={() => (
         <FindWalletsNoResults resetFilters={resetFilters} />
       )}
diff --git a/src/components/ProductTable/MobileFilters.tsx b/src/components/ProductTable/MobileFilters.tsx
index 61968683b0b..8e009db772d 100644
--- a/src/components/ProductTable/MobileFilters.tsx
+++ b/src/components/ProductTable/MobileFilters.tsx
@@ -16,6 +16,8 @@ import {
   DrawerTrigger,
 } from "@/components/ui/drawer"
 
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
 interface MobileFiltersProps {
   filters: FilterOption[]
   setFilters: React.Dispatch<React.SetStateAction<FilterOption[]>>
@@ -50,7 +52,14 @@ const MobileFilters = ({
       <Drawer
         direction="left"
         open={mobileFiltersOpen}
-        onOpenChange={setMobileFiltersOpen}
+        onOpenChange={(open) => {
+          setMobileFiltersOpen(open)
+          trackCustomEvent({
+            eventCategory: "MobileFilterToggle",
+            eventAction: "Tap MobileFilterToggle",
+            eventName: `show mobile filters ${open}`,
+          })
+        }}
       >
         <DrawerTrigger className="px-4">
           <Button
diff --git a/src/components/ProductTable/Table.tsx b/src/components/ProductTable/Table.tsx
index 305ca1a15b8..4564431a29e 100644
--- a/src/components/ProductTable/Table.tsx
+++ b/src/components/ProductTable/Table.tsx
@@ -59,7 +59,7 @@ const Table = ({
       </TableHeader>
       <TableBody>
         {table.getRowModel().rows?.length ? (
-          table.getRowModel().rows.map((row) => (
+          table.getRowModel().rows.map((row, idx) => (
             <>
               <TableRow
                 key={row.id}
@@ -81,7 +81,7 @@ const Table = ({
               {row.getIsExpanded() && (
                 <TableRow className={`bg-body-inverse`}>
                   <TableCell colSpan={row.getAllCells().length}>
-                    {subComponent && subComponent(row.original)}
+                    {subComponent && subComponent(row.original, idx)}
                   </TableCell>
                 </TableRow>
               )}
diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx
index 29bfc160d02..866cfc77c01 100644
--- a/src/components/ProductTable/index.tsx
+++ b/src/components/ProductTable/index.tsx
@@ -23,6 +23,8 @@ import PresetFilters from "@/components/ProductTable/PresetFilters"
 import Table from "@/components/ProductTable/Table"
 import { Button } from "@/components/ui/buttons/Button"
 
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
 interface ProductTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
@@ -77,6 +79,11 @@ const ProductTable = ({
   // Update or remove preset filters
   const handleSelectPreset = (idx: number) => {
     if (activePresets.includes(idx)) {
+      trackCustomEvent({
+        eventCategory: "UserPersona",
+        eventAction: `${presetFilters[idx].title}`,
+        eventName: `${presetFilters[idx].title} false`,
+      })
       // Get filters that are true for the preset being removed
       const presetToRemove = presetFilters[idx].presetFilters
       const filtersToRemove = Object.keys(presetToRemove).filter(
@@ -104,6 +111,11 @@ const ProductTable = ({
       setActivePresets(activePresets.filter((item) => item !== idx))
     } else {
       const newActivePresets = activePresets.concat(idx)
+      trackCustomEvent({
+        eventCategory: "UserPersona",
+        eventAction: `${presetFilters[idx].title}`,
+        eventName: `${presetFilters[idx].title} true`,
+      })
       setActivePresets(newActivePresets)
 
       // Apply the filters for the selected preset
@@ -251,7 +263,14 @@ const ProductTable = ({
               <Button
                 variant="ghost"
                 className="block p-0 lg:hidden"
-                onClick={() => setMobileFiltersOpen(true)}
+                onClick={() => {
+                  trackCustomEvent({
+                    eventCategory: "MobileFilterToggle",
+                    eventAction: "Tap MobileFilterToggle - sticky",
+                    eventName: "show mobile filters true",
+                  })
+                  setMobileFiltersOpen(true)
+                }}
               >
                 <p className="text-md">
                   {`${t("table-filters")} (${activeFiltersCount})`}