Fix Popular chain missing icons on dashboard (#4562)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the `connect-wallet` component to include support for popular chains with metadata.

### Detailed summary
- Added `useSupportedChainsRecord` import
- Added `chainsRecord` state
- Added `popularChainsWithMeta` state
- Updated `chainSections` to use `popularChainsWithMeta`
- Updated dependencies for `useMemo` in `chainSections`

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

<!-- end pr-codex -->
This commit is contained in:
MananTank
2024-09-12 18:13:09 +00:00
parent 22e066c611
commit 03c21903c9
@@ -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();