feat: log token explore search event (#4695)

* Log token explore search event

* Move event directly above target element

src/analytics/constants.ts

@@ -8,6 +8,7 @@ export enum EventName {
   APP_LOADED = 'Application Loaded',
   APPROVE_TOKEN_TXN_SUBMITTED = 'Approve Token Transaction Submitted',
   CONNECT_WALLET_BUTTON_CLICKED = 'Connect Wallet Button Clicked',
+  EXPLORE_SEARCH_SELECTED = 'Explore Search Selected',
   EXPLORE_TOKEN_ROW_CLICKED = 'Explore Token Row Clicked',
   PAGE_VIEWED = 'Page Viewed',
   SWAP_AUTOROUTER_VISUALIZATION_EXPANDED = 'Swap Autorouter Visualization Expanded',
@@ -106,6 +107,7 @@ export enum ElementName {
   COMMON_BASES_CURRENCY_BUTTON = 'common-bases-currency-button',
   CONFIRM_SWAP_BUTTON = 'confirm-swap-or-send',
   CONNECT_WALLET_BUTTON = 'connect-wallet-button',
+  EXPLORE_SEARCH_INPUT = 'explore_search_input',
   IMPORT_TOKEN_BUTTON = 'import-token-button',
   MAX_TOKEN_AMOUNT_BUTTON = 'max-token-amount-button',
   PRICE_UPDATE_ACCEPT_BUTTON = 'price-update-accept-button',

src/components/Tokens/TokenTable/SearchBar.tsx

 import { Trans } from '@lingui/macro'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import searchIcon from 'assets/svg/search.svg'
 import xIcon from 'assets/svg/x.svg'
 import useDebounce from 'hooks/useDebounce'
@@ -76,14 +78,20 @@ export default function SearchBar() {
     <SearchBarContainer>
       <Trans
         render={({ translation }) => (
-          <SearchInput
-            type="search"
-            placeholder={`${translation}`}
-            id="searchBar"
-            autoComplete="off"
-            value={localFilterString}
-            onChange={({ target: { value } }) => setLocalFilterString(value)}
-          />
+          <TraceEvent
+            events={[Event.onSelect]}
+            name={EventName.EXPLORE_SEARCH_SELECTED}
+            element={ElementName.EXPLORE_SEARCH_INPUT}
+          >
+            <SearchInput
+              type="search"
+              placeholder={`${translation}`}
+              id="searchBar"
+              autoComplete="off"
+              value={localFilterString}
+              onChange={({ target: { value } }) => setLocalFilterString(value)}
+            />
+          </TraceEvent>
         )}
       >
         Filter tokens