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:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user