chore: move onClick handlers to functions

Author: nhsz

src/components/FindWallet/LanguageSupportFilter.tsx

@@ -54,6 +54,16 @@ export const LanguageSupportFilter = () => {
     })
   }
 
+  const handleTopLanguageClick = (language) => {
+    setSupportedLanguage(language.code)
+
+    trackCustomEvent({
+      eventCategory: "WalletFilterSidebar",
+      eventAction: `Language search`,
+      eventName: getLanguageCodeName(language.code, locale!),
+    })
+  }
+
   return (
     <AccordionItem
       background="background.highlight"
@@ -123,18 +133,7 @@ export const LanguageSupportFilter = () => {
                       color="primary.base"
                       size="sm"
                       cursor="pointer"
-                      onClick={() => {
-                        setSupportedLanguage(language.code)
-
-                        trackCustomEvent({
-                          eventCategory: "WalletFilterSidebar",
-                          eventAction: `Language search`,
-                          eventName: getLanguageCodeName(
-                            language.code,
-                            locale!
-                          ),
-                        })
-                      }}
+                      onClick={handleTopLanguageClick}
                     >
                       {language.langName}
                     </Text>

src/components/FindWallet/MobileFiltersButton.tsx

@@ -33,6 +33,16 @@ export const MobileFiltersButton = ({
   // Context API
   const { supportedLanguage } = useContext(WalletSupportedLanguageContext)
 
+  const handleClick = () => {
+    showMobileSidebar ? onClose() : onOpen()
+
+    trackCustomEvent({
+      eventCategory: "MobileFilterToggle",
+      eventAction: `Tap MobileFilterToggle`,
+      eventName: `show mobile filters ${!showMobileSidebar}`,
+    })
+  }
+
   return (
     <Box
       position="sticky"
@@ -56,14 +66,7 @@ export const MobileFiltersButton = ({
             circle: { stroke: "primary.base" },
           },
         }}
-        onClick={() => {
-          showMobileSidebar ? onClose() : onOpen()
-          trackCustomEvent({
-            eventCategory: "MobileFilterToggle",
-            eventAction: `Tap MobileFilterToggle`,
-            eventName: `show mobile filters ${!showMobileSidebar}`,
-          })
-        }}
+        onClick={handleClick}
       >
         <Box>
           <Text align="start">{t("page-find-wallet-filters")}</Text>

src/components/FindWallet/ResetFiltersButton.tsx

@@ -15,6 +15,17 @@ export const ResetFiltersButton = ({
 }: ResetFiltersProps) => {
   const { t } = useTranslation("page-wallets-find-wallet")
 
+  const handleResetClick = () => {
+    resetFilters()
+    resetWalletFilter.current()
+
+    trackCustomEvent({
+      eventCategory: "WalletFilterSidebar",
+      eventAction: `Reset button`,
+      eventName: `reset_click`,
+    })
+  }
+
   return (
     <Center
       as="button"
@@ -24,16 +35,7 @@ export const ResetFiltersButton = ({
       _hover={{
         color: "primary.hover",
       }}
-      onClick={() => {
-        resetFilters()
-        resetWalletFilter.current()
-
-        trackCustomEvent({
-          eventCategory: "WalletFilterSidebar",
-          eventAction: `Reset button`,
-          eventName: `reset_click`,
-        })
-      }}
+      onClick={handleResetClick}
     >
       <Icon as={BsArrowCounterclockwise} aria-hidden="true" fontSize="sm" />
       <Text as="span" textTransform="uppercase">

src/components/FindWallet/WalletTable/WalletEmptyState.tsx

@@ -21,6 +21,17 @@ export const WalletEmptyState = ({
     eventName: `triggered`,
   })
 
+  const handleClick = () => {
+    resetFilters()
+    resetWalletFilter.current()
+
+    trackCustomEvent({
+      eventCategory: "Wallet_empty_state",
+      eventAction: `reset`,
+      eventName: `reset_button_clicked`,
+    })
+  }
+
   return (
     <Flex
       justifyContent="center"
@@ -40,16 +51,7 @@ export const WalletEmptyState = ({
           color="primary.base"
           textDecoration="underline"
           cursor="pointer"
-          onClick={() => {
-            resetFilters()
-            resetWalletFilter.current()
-
-            trackCustomEvent({
-              eventCategory: "Wallet_empty_state",
-              eventAction: `reset`,
-              eventName: `reset_button_clicked`,
-            })
-          }}
+          onClick={handleClick}
         >
           {t("page-find-wallet-reset-filters")}
         </Text>