feat: Log events on NavBar Search (#4761)

src/analytics/constants.ts

@@ -11,6 +11,8 @@ export enum EventName {
   EXPLORE_SEARCH_SELECTED = 'Explore Search Selected',
   EXPLORE_TOKEN_ROW_CLICKED = 'Explore Token Row Clicked',
   PAGE_VIEWED = 'Page Viewed',
+  NAVBAR_SEARCH_SELECTED = 'Navbar Search Selected',
+  NAVBAR_SEARCH_EXITED = 'Navbar Search Exited',
   SWAP_AUTOROUTER_VISUALIZATION_EXPANDED = 'Swap Autorouter Visualization Expanded',
   SWAP_DETAILS_EXPANDED = 'Swap Details Expanded',
   SWAP_MAX_TOKEN_AMOUNT_SELECTED = 'Swap Max Token Amount Selected',
@@ -110,6 +112,7 @@ export enum ElementName {
   EXPLORE_SEARCH_INPUT = 'explore_search_input',
   IMPORT_TOKEN_BUTTON = 'import-token-button',
   MAX_TOKEN_AMOUNT_BUTTON = 'max-token-amount-button',
+  NAVBAR_SEARCH_INPUT = 'navbar-search-input',
   PRICE_UPDATE_ACCEPT_BUTTON = 'price-update-accept-button',
   SWAP_BUTTON = 'swap-button',
   SWAP_DETAILS_DROPDOWN = 'swap-details-dropdown',
@@ -126,6 +129,7 @@ export enum ElementName {
  */
 export enum Event {
   onClick = 'onClick',
+  onFocus = 'onFocus',
   onKeyPress = 'onKeyPress',
   onSelect = 'onSelect',
   // alphabetize additional events.

src/components/NavBar/SearchBar.tsx

 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
+import { sendAnalyticsEvent } from 'analytics'
+import { ElementName, Event, EventName } from 'analytics/constants'
+import { TraceEvent } from 'analytics/TraceEvent'
 import clsx from 'clsx'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useDebounce from 'hooks/useDebounce'
@@ -92,6 +95,10 @@ export const SearchBar = () => {
   const showCenteredSearchContent =
     !isOpen && phase1Flag !== NftVariant.Enabled && !isMobileOrTablet && searchValue.length === 0
 
+  const navbarSearchEventProperties = {
+    navbar_search_input_text: debouncedSearchValue,
+  }
+
   return (
     <Box position="relative">
       <Box
@@ -122,20 +129,27 @@ export const SearchBar = () => {
               <ChevronLeftIcon />
             </Box>
           </Box>
-          <Box
-            as="input"
-            placeholder={placeholderText}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              !isOpen && toggleOpen()
-              setSearchValue(event.target.value)
-            }}
-            className={`${styles.searchBarInput} ${
-              showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign
-            }`}
-            value={searchValue}
-            ref={inputRef}
-            width={phase1Flag === NftVariant.Enabled || isOpen ? 'full' : '160'}
-          />
+          <TraceEvent
+            events={[Event.onFocus]}
+            name={EventName.NAVBAR_SEARCH_SELECTED}
+            element={ElementName.NAVBAR_SEARCH_INPUT}
+          >
+            <Box
+              as="input"
+              placeholder={placeholderText}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                !isOpen && toggleOpen()
+                setSearchValue(event.target.value)
+              }}
+              onBlur={() => sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)}
+              className={`${styles.searchBarInput} ${
+                showCenteredSearchContent ? styles.searchContentCentered : styles.searchContentLeftAlign
+              }`}
+              value={searchValue}
+              ref={inputRef}
+              width={phase1Flag === NftVariant.Enabled || isOpen ? 'full' : '160'}
+            />
+          </TraceEvent>
         </Row>
         <Box className={clsx(isOpen ? styles.visible : styles.hidden)}>
           {isOpen && (

src/components/NavBar/SearchBarDropdown.tsx

 import { Trans } from '@lingui/macro'
+import { sendAnalyticsEvent } from 'analytics'
+import { EventName } from 'analytics/constants'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -58,6 +60,15 @@ export const SearchBarDropdownSection = ({
               isHovered={hoveredIndex === index + startingIndex}
               setHoveredIndex={setHoveredIndex}
               toggleOpen={toggleOpen}
+              traceEvent={() =>
+                sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, {
+                  position: index,
+                  selected_type: 'collection',
+                  suggestion_count: suggestions.length,
+                  selected_name: suggestion.name,
+                  selected_address: suggestion.address,
+                })
+              }
               index={index + startingIndex}
             />
           ) : (
@@ -67,6 +78,15 @@ export const SearchBarDropdownSection = ({
               isHovered={hoveredIndex === index + startingIndex}
               setHoveredIndex={setHoveredIndex}
               toggleOpen={toggleOpen}
+              traceEvent={() =>
+                sendAnalyticsEvent(EventName.NAVBAR_SEARCH_EXITED, {
+                  position: index,
+                  selected_type: 'token',
+                  suggestion_count: suggestions.length,
+                  selected_name: suggestion.name,
+                  selected_address: suggestion.address,
+                })
+              }
               index={index + startingIndex}
             />
           )

src/components/NavBar/SuggestionRow.tsx

@@ -19,10 +19,18 @@ interface CollectionRowProps {
   isHovered: boolean
   setHoveredIndex: (index: number | undefined) => void
   toggleOpen: () => void
+  traceEvent: () => void
   index: number
 }
 
-export const CollectionRow = ({ collection, isHovered, setHoveredIndex, toggleOpen, index }: CollectionRowProps) => {
+export const CollectionRow = ({
+  collection,
+  isHovered,
+  setHoveredIndex,
+  toggleOpen,
+  traceEvent,
+  index,
+}: CollectionRowProps) => {
   const [brokenImage, setBrokenImage] = useState(false)
   const [loaded, setLoaded] = useState(false)
   const addToSearchHistory = useSearchHistory(
@@ -33,7 +41,8 @@ export const CollectionRow = ({ collection, isHovered, setHoveredIndex, toggleOp
   const handleClick = useCallback(() => {
     addToSearchHistory(collection)
     toggleOpen()
-  }, [addToSearchHistory, collection, toggleOpen])
+    traceEvent()
+  }, [addToSearchHistory, collection, toggleOpen, traceEvent])
 
   useEffect(() => {
     const keyDownHandler = (event: KeyboardEvent) => {
@@ -96,10 +105,11 @@ interface TokenRowProps {
   isHovered: boolean
   setHoveredIndex: (index: number | undefined) => void
   toggleOpen: () => void
+  traceEvent: () => void
   index: number
 }
 
-export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index }: TokenRowProps) => {
+export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, traceEvent, index }: TokenRowProps) => {
   const [brokenImage, setBrokenImage] = useState(false)
   const [loaded, setLoaded] = useState(false)
   const addToSearchHistory = useSearchHistory(
@@ -110,7 +120,8 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
   const handleClick = useCallback(() => {
     addToSearchHistory(token)
     toggleOpen()
-  }, [addToSearchHistory, toggleOpen, token])
+    traceEvent()
+  }, [addToSearchHistory, toggleOpen, token, traceEvent])
 
   const tokenDetailsPath = getTokenDetailsURL(token.address, undefined, token.chainId)
   // Close the modal on escape

src/components/Tokens/TokenTable/SearchBar.tsx

@@ -79,7 +79,7 @@ export default function SearchBar() {
       <Trans
         render={({ translation }) => (
           <TraceEvent
-            events={[Event.onSelect]}
+            events={[Event.onFocus]}
             name={EventName.EXPLORE_SEARCH_SELECTED}
             element={ElementName.EXPLORE_SEARCH_INPUT}
           >