From 7495f462221e9e4319d2dd08942693d7888cabe6 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 29 Sep 2025 19:25:57 +0000
Subject: [PATCH] [MNY-213] SDK/SwapWidget: token search improvements (#8145)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 -->
---
 .changeset/beige-sites-jog.md                      |  5 +++++
 .../web/ui/Bridge/swap-widget/select-token-ui.tsx  | 14 +++++++++-----
 .../react/web/ui/Bridge/swap-widget/use-tokens.ts  |  5 +++--
 3 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/beige-sites-jog.md

diff --git a/.changeset/beige-sites-jog.md b/.changeset/beige-sites-jog.md
new file mode 100644
index 00000000000..6eecce0fc3b
--- /dev/null
+++ b/.changeset/beige-sites-jog.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Token Search improvements in SwapWidget
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
index 726a30c58f6..4d1fda7ba62 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx
+++ b/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;
 
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts
index 30bc85a31c7..2bd38960045 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts
+++ b/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,
       });
     },
   });