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,