[MNY-213] SDK/SwapWidget: token search improvements (#8145)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the token search functionality in the `SwapWidget` by incorporating a debounce mechanism to optimize search input handling and refining the token filtering logic.

### Detailed summary
- Updated `use-tokens.ts` to use `query` and `tokenAddress` based on search conditions.
- Added `useDebouncedValue` hook in `select-token-ui.tsx` for debouncing the search input.
- Changed token filtering logic to utilize `debouncedSearch` instead of raw `search` value.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

.changeset/beige-sites-jog.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Token Search improvements in SwapWidget

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx

@@ -20,6 +20,7 @@ import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
 import { Text } from "../../components/text.js";
 import { StyledDiv } from "../../design-system/elements.js";
+import { useDebouncedValue } from "../../hooks/useDebouncedValue.js";
 import { useIsMobile } from "../../hooks/useisMobile.js";
 import { SearchInput } from "./SearchInput.js";
 import { SelectChainButton } from "./SelectChainButton.js";
@@ -57,6 +58,7 @@ function getDefaultSelectedChain(
 export function SelectToken(props: SelectTokenUIProps) {
   const chainQuery = useBridgeChains(props.client);
   const [search, setSearch] = useState("");
+  const debouncedSearch = useDebouncedValue(search, 500);
   const [limit, setLimit] = useState(1000);
 
   const [_selectedChain, setSelectedChain] = useState<BridgeChain | undefined>(
@@ -76,7 +78,7 @@ export function SelectToken(props: SelectTokenUIProps) {
   const tokensQuery = useTokens({
     client: props.client,
     chainId: selectedChain?.chainId,
-    search,
+    search: debouncedSearch,
     limit,
     offset: 0,
   });
@@ -93,12 +95,14 @@ export function SelectToken(props: SelectTokenUIProps) {
   const filteredOwnedTokens = useMemo(() => {
     return ownedTokensQuery.data?.tokens?.filter((token) => {
       return (
-        token.symbol.toLowerCase().includes(search.toLowerCase()) ||
-        token.name.toLowerCase().includes(search.toLowerCase()) ||
-        token.token_address.toLowerCase().includes(search.toLowerCase())
+        token.symbol.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+        token.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
+        token.token_address
+          .toLowerCase()
+          .includes(debouncedSearch.toLowerCase())
       );
     });
-  }, [ownedTokensQuery.data?.tokens, search]);
+  }, [ownedTokensQuery.data?.tokens, debouncedSearch]);
 
   const isFetching = tokensQuery.isFetching || ownedTokensQuery.isFetching;
 

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts

@@ -31,8 +31,9 @@ export function useTokens(options: {
         offset: options.offset,
         limit: options.limit,
         includePrices: false,
-        name: !options.search || isSearchAddress ? undefined : options.search,
-        tokenAddress: isSearchAddress ? options.search : undefined,
+        query: options.search && !isSearchAddress ? options.search : undefined,
+        tokenAddress:
+          options.search && isSearchAddress ? options.search : undefined,
       });
     },
   });