diff --git a/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx b/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx index b30dc173f..a3f2748ab 100644 --- a/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx +++ b/apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx @@ -7,7 +7,10 @@ import { getSDKTheme } from "app/components/sdk-component-theme"; import { CustomChainRenderer } from "components/selects/CustomChainRenderer"; import { mapV4ChainToV5Chain } from "contexts/map-chains"; import { useTrack } from "hooks/analytics/useTrack"; -import { useSupportedChains } from "hooks/chains/configureChains"; +import { + useSupportedChains, + useSupportedChainsRecord, +} from "hooks/chains/configureChains"; import { useAddRecentlyUsedChainId, useRecentlyUsedChains, @@ -37,12 +40,17 @@ export const CustomConnectWallet = (props: { // const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen(); const t = theme === "light" ? "light" : "dark"; const allv4Chains = useSupportedChains(); + const chainsRecord = useSupportedChainsRecord(); const favChainsQuery = useFavoriteChains(); const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen(); const allChains = useMemo(() => { return allv4Chains.map(mapV4ChainToV5Chain); }, [allv4Chains]); + const popularChainsWithMeta = useMemo(() => { + return popularChains.map((x) => chainsRecord[x.id] || x); + }, [chainsRecord]); + const chainSections = useMemo(() => { return [ { @@ -51,14 +59,14 @@ export const CustomConnectWallet = (props: { }, { label: "Popular", - chains: popularChains, + chains: popularChainsWithMeta.map(mapV4ChainToV5Chain), }, { label: "Recent", chains: recentChainsv4.map(mapV4ChainToV5Chain), }, ]; - }, [recentChainsv4, favChainsQuery.data]); + }, [recentChainsv4, favChainsQuery.data, popularChainsWithMeta]); // ensures login status on pages that need it const { isLoading, isLoggedIn } = useLoggedInUser();