[DASH-610] Fix useActiveWalletChain missing chain overrides added in dashboard

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -48,12 +48,7 @@ export const CustomConnectWallet = (props: {
   // chains
   const favChainIdsQuery = useFavoriteChainIds();
   const recentChainIds = useStore(recentlyUsedChainIdsStore);
-  const { idToChain, allChains } = useAllChainsData();
-
-  const allChainsWithMetadata = useMemo(
-    () => allChains.map(mapV4ChainToV5Chain),
-    [allChains],
-  );
+  const { idToChain, allChainsV5 } = useAllChainsData();
 
   const recentlyUsedChainsWithMetadata = useMemo(
     () =>
@@ -170,7 +165,7 @@ export const CustomConnectWallet = (props: {
         detailsButton={{
           className: props.detailsButtonClassName,
         }}
-        chains={allChainsWithMetadata}
+        chains={allChainsV5}
         detailsModal={{
           networkSelector: {
             sections: chainSections,

apps/dashboard/src/app/providers.tsx

@@ -2,11 +2,16 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";
-import { useMemo } from "react";
-import { ThirdwebProvider, useActiveAccount } from "thirdweb/react";
+import { useEffect, useMemo } from "react";
+import {
+  ThirdwebProvider,
+  useActiveAccount,
+  useConnectionManager,
+} from "thirdweb/react";
 import { CustomConnectWallet } from "../@3rdweb-sdk/react/components/connect-wallet";
 import { PosthogIdentifier } from "../components/wallets/PosthogIdentifier";
 import { isSanctionedAddress } from "../data/eth-sanctioned-addresses";
+import { useAllChainsData } from "../hooks/chains/allChains";
 import { SyncChainStores } from "../stores/chainStores";
 import { TWAutoConnect } from "./components/autoconnect";
 
@@ -17,6 +22,7 @@ export function AppRouterProviders(props: { children: React.ReactNode }) {
     <QueryClientProvider client={queryClient}>
       <SyncChainStores />
       <ThirdwebProvider>
+        <SyncChainDefinitionsToConnectionManager />
         <TWAutoConnect />
         <PosthogIdentifier />
         <ThemeProvider
@@ -34,6 +40,23 @@ export function AppRouterProviders(props: { children: React.ReactNode }) {
   );
 }
 
+function SyncChainDefinitionsToConnectionManager() {
+  const { allChainsV5 } = useAllChainsData();
+  const connectionManager = useConnectionManager();
+
+  // whenever user updates chains, update connection manager store
+  // This is the same pattern used in ConnectButton for updating the connection manager when props.chain or props.chains change
+  // this is added to root layout because ConnectButton is not always rendered in the page
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (allChainsV5.length > 0) {
+      connectionManager.defineChains(allChainsV5);
+    }
+  }, [allChainsV5, connectionManager]);
+
+  return null;
+}
+
 const SanctionedAddressesChecker = ({
   children,
 }: {

apps/dashboard/src/hooks/chains/allChains.ts

@@ -4,14 +4,16 @@ import { isProd } from "@/constants/env";
 import { createStore, useStore } from "@/lib/reactive";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
-import type { ChainMetadata } from "thirdweb/chains";
+import type { Chain, ChainMetadata } from "thirdweb/chains";
+import { mapV4ChainToV5Chain } from "../../contexts/map-chains";
 import {
   type StoredChain,
   chainOverridesStore,
 } from "../../stores/chainStores";
 
 type AllChainsStore = {
   allChains: StoredChain[];
+  allChainsV5: Chain[];
   idToChain: Map<number, StoredChain | undefined>;
   nameToChain: Map<string, StoredChain | undefined>;
   slugToChain: Map<string, StoredChain | undefined>;
@@ -20,6 +22,7 @@ type AllChainsStore = {
 function createAllChainsStore() {
   const store = createStore<AllChainsStore>({
     allChains: [],
+    allChainsV5: [],
     idToChain: new Map(),
     nameToChain: new Map(),
     slugToChain: new Map(),
@@ -47,6 +50,7 @@ function createAllChainsStore() {
     // but don't ignore if chainOverrides is empty!
 
     const allChains: StoredChain[] = [];
+    const allChainsV5: Chain[] = [];
     const idToChain: Map<number, StoredChain | undefined> = new Map();
     const nameToChain: Map<string, StoredChain | undefined> = new Map();
     const slugToChain: Map<string, StoredChain | undefined> = new Map();
@@ -71,6 +75,8 @@ function createAllChainsStore() {
         chainOverrides.find((x) => x.chainId === _chain.chainId) || _chain;
 
       allChains.push(chain);
+      // eslint-disable-next-line no-restricted-syntax
+      allChainsV5.push(mapV4ChainToV5Chain(chain));
       idToChain.set(chain.chainId, chain);
       nameToChain.set(chain.name, chain);
       slugToChain.set(chain.slug, chain);
@@ -88,6 +94,7 @@ function createAllChainsStore() {
 
     store.setValue({
       allChains,
+      allChainsV5,
       idToChain: idToChain,
       nameToChain: nameToChain,
       slugToChain: slugToChain,