debounce logging for search inputs

src/analytics/event.ts

@@ -187,6 +187,10 @@ export const event = {
    * Called when the user completes a Revoke Approcal flow and submits the transaction.
    */
   revokeSubmitted: 'revoke.submitted',
+  /*
+   * Called when the user searches in swap, send or command K
+   */
+  searchQuery: 'search_query',
   /**
    * Called when a user enters the send flow
    */
@@ -759,6 +763,20 @@ export type EventProperties = {
   [event.pointsViewed]: undefined;
   [event.popupOpened]: undefined;
   [event.settingsAnalyticsTrackingDisabled]: undefined;
+  [event.searchQuery]: {
+    /**
+     * Where the search was initiated from
+     */
+    location: 'swap' | 'send' | 'commandk';
+    /**
+     * The query string that was searched.
+     */
+    query: string;
+    /**
+     * The length of the query string.
+     */
+    queryLength: number;
+  };
   [event.revokeSubmitted]: {
     /**
      * Symbol of the asset being sent.

src/entries/popup/hooks/useSearchCurrencyLists.ts

@@ -289,7 +289,6 @@ export function useSearchCurrencyLists({
       const a = popularAssets.filter((asset) =>
         queryMatchesAsset(query, asset),
       );
-      console.log('popularAssets', { a });
       return a;
     },
   });

src/entries/popup/pages/send/SendTokenInput.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { debounce } from 'lodash';
 import React, {
   ChangeEvent,
   Dispatch,
@@ -248,6 +249,8 @@ export const SendTokenInput = React.forwardRef<
   const [inputValue, setInputValue] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
   const { testnetMode } = useTestnetModeStore();
+  const [lastLoggedValue, setLastLoggedValue] = useState('');
+  const debouncedLogRef = useRef<ReturnType<typeof debounce>>();
 
   useImperativeHandle(forwardedRef, () => ({
     blur: () => {
@@ -283,9 +286,25 @@ export const SendTokenInput = React.forwardRef<
     [selectAssetAddressAndChain, selectNft],
   );
 
+  useEffect(() => {
+    debouncedLogRef.current = debounce((value: string) => {
+      if (value !== lastLoggedValue && value.trim() !== '') {
+        // analytics here
+        console.log('Debounced value:', value);
+        setLastLoggedValue(value);
+      }
+    }, 500);
+
+    return () => {
+      debouncedLogRef.current?.cancel();
+    };
+  }, [lastLoggedValue]);
+
   const onInputValueChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
       setInputValue(e.target.value);
+      debouncedLogRef.current?.(newValue);
     },
     [setInputValue],
   );

src/entries/popup/pages/swap/SwapTokenInput/TokenInput.tsx

@@ -1,9 +1,11 @@
+import { debounce } from 'lodash';
 import React, {
   ChangeEvent,
   ReactElement,
   useCallback,
   useEffect,
   useImperativeHandle,
+  useRef,
   useState,
 } from 'react';
 
@@ -117,6 +119,8 @@ export const TokenInput = React.forwardRef<
   forwardedRef,
 ) {
   const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [lastLoggedValue, setLastLoggedValue] = useState('');
+  const debouncedLogRef = useRef<ReturnType<typeof debounce>>();
 
   const prevDropdownVisible = usePrevious(dropdownVisible);
 
@@ -147,9 +151,25 @@ export const TokenInput = React.forwardRef<
     dropdownVisible ? inputRef?.current?.blur() : inputRef?.current?.focus();
   }, [dropdownVisible, inputRef, onDropdownOpen, selectAsset]);
 
+  useEffect(() => {
+    debouncedLogRef.current = debounce((value: string) => {
+      if (value !== lastLoggedValue && value.trim() !== '') {
+        // analytics here
+        console.log('Debounced value:', value);
+        setLastLoggedValue(value);
+      }
+    }, 500);
+
+    return () => {
+      debouncedLogRef.current?.cancel();
+    };
+  }, [lastLoggedValue]);
+
   const onInputValueChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
-      setAssetFilter(e.target.value);
+      const newValue = e.target.value;
+      setAssetFilter(newValue);
+      debouncedLogRef.current?.(newValue);
     },
     [setAssetFilter],
   );