From 31e24f1c58aa7c53a207d07599fe498bc10e8953 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 12 Dec 2025 18:35:49 +0000
Subject: [PATCH] [MNY-331] SDK: Alphabetically sort chains in SwapWidget UI
 (#8551)
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 `SwapWidget` UI by alphabetically sorting the chains returned by the `use-bridge-chains.ts` module, ensuring that chains with names starting with numbers are placed at the end of the list.

### Detailed summary
- Updated the `queryFn` in `use-bridge-chains.ts` to be asynchronous.
- Introduced a copy of the fetched data to sort it.
- Implemented sorting logic to place chains starting with numbers at the end.
- Used `localeCompare` for alphabetical sorting of chain names.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Chains in the SwapWidget are now alphabetically sorted for improved navigation; chain names beginning with digits appear after alphabetic entries.

* **Chores**
  * Patch release entry added to the changelog.

<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .changeset/ninety-trains-tell.md              |  5 +++++
 .../Bridge/swap-widget/use-bridge-chains.ts   | 21 +++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/ninety-trains-tell.md

diff --git a/.changeset/ninety-trains-tell.md b/.changeset/ninety-trains-tell.md
new file mode 100644
index 00000000000..9734429ac9d
--- /dev/null
+++ b/.changeset/ninety-trains-tell.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Alphabetically sort the chains in SwapWidget UI
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts
index 27547d7d35f..25e92f9414e 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts
+++ b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-bridge-chains.ts
@@ -5,8 +5,25 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 export function useBridgeChains(client: ThirdwebClient) {
   return useQuery({
     queryKey: ["bridge-chains"],
-    queryFn: () => {
-      return chains({ client });
+    queryFn: async () => {
+      const data = await chains({ client });
+      const dataCopy = [...data];
+      // sort by name, but if name starts with number, put it at the end
+
+      return dataCopy.sort((a, b) => {
+        const aStartsWithNumber = a.name[0]?.match(/^\d/);
+        const bStartsWithNumber = b.name[0]?.match(/^\d/);
+
+        if (aStartsWithNumber && !bStartsWithNumber) {
+          return 1;
+        }
+
+        if (!aStartsWithNumber && bStartsWithNumber) {
+          return -1;
+        }
+
+        return a.name.localeCompare(b.name);
+      });
     },
     refetchOnMount: false,
     refetchOnWindowFocus: false,