Ensure chain config syncing only runs once per page

src/features/chains/ChainConfigSyncer.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+import { useQueryParamChainConfigSync } from './useChainConfigs';
+
+export function ChainConfigSyncer({ children }: PropsWithChildren<Record<never, any>>) {
+  useQueryParamChainConfigSync();
+  return <>{children}</>;
+}

src/features/chains/useChainConfigs.ts

@@ -22,9 +22,9 @@ export function useChainConfigs() {
   }));
 }
 
-// Use the chainConfigs from the store but with any
-// chainConfigs from the query string merged in
-export function useChainConfigsWithQueryParams() {
+// Look for chainConfigs in the query string and merge them into the store
+// Not to be used directly, should only require a single use in ChainConfigSyncer
+export function useQueryParamChainConfigSync() {
   const { chainConfigs: storeConfigs, setChainConfigs } = useChainConfigs();
   const queryVal = useQueryParam(CHAIN_CONFIGS_KEY);
 

src/features/messages/pi-queries/usePiChainMessageQuery.ts

@@ -6,7 +6,7 @@ import { Message } from '../../../types';
 import { ensureLeading0x } from '../../../utils/addresses';
 import { logger } from '../../../utils/logger';
 import { ChainConfig } from '../../chains/chainConfig';
-import { useChainConfigsWithQueryParams } from '../../chains/useChainConfigs';
+import { useChainConfigs } from '../../chains/useChainConfigs';
 import { useMultiProvider } from '../../providers/multiProvider';
 import { isValidSearchQuery } from '../queries/useMessageQuery';
 
@@ -25,7 +25,7 @@ export function usePiChainMessageSearchQuery({
   endTimeFilter: number | null;
   pause: boolean;
 }) {
-  const chainConfigs = useChainConfigsWithQueryParams();
+  const { chainConfigs } = useChainConfigs();
   const multiProvider = useMultiProvider();
   const { isLoading, isError, data } = useQuery(
     [
@@ -72,7 +72,7 @@ export function usePiChainMessageQuery({
   messageId: string;
   pause: boolean;
 }) {
-  const chainConfigs = useChainConfigsWithQueryParams();
+  const { chainConfigs } = useChainConfigs();
   const multiProvider = useMultiProvider();
   const { isLoading, isError, data } = useQuery(
     ['usePiChainMessageQuery', chainConfigs, messageId, pause],

src/features/providers/multiProvider.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { ChainName, MultiProvider, chainMetadata } from '@hyperlane-xyz/sdk';
 
-import { useChainConfigsWithQueryParams } from '../chains/useChainConfigs';
+import { useChainConfigs } from '../chains/useChainConfigs';
 
 import { HyperlaneSmartProvider } from './SmartProvider';
 
@@ -22,10 +22,10 @@ export class SmartMultiProvider extends MultiProvider {
 }
 
 export function useMultiProvider() {
-  const nameToConfig = useChainConfigsWithQueryParams();
+  const { chainConfigs } = useChainConfigs();
   const multiProvider = useMemo(
-    () => new SmartMultiProvider({ ...chainMetadata, ...nameToConfig }),
-    [nameToConfig],
+    () => new SmartMultiProvider({ ...chainMetadata, ...chainConfigs }),
+    [chainConfigs],
   );
   return multiProvider;
 }

src/pages/_app.tsx

@@ -18,6 +18,7 @@ import '@hyperlane-xyz/widgets/styles.css';
 import { ErrorBoundary } from '../components/errors/ErrorBoundary';
 import { AppLayout } from '../components/layout/AppLayout';
 import { config } from '../consts/config';
+import { ChainConfigSyncer } from '../features/chains/ChainConfigSyncer';
 import '../styles/fonts.css';
 import '../styles/global.css';
 import { useIsSsr } from '../utils/ssr';
@@ -75,9 +76,11 @@ export default function App({ Component, router, pageProps }: AppProps) {
         > */}
       <QueryClientProvider client={reactQueryClient}>
         <UrqlProvider value={urqlClient}>
-          <AppLayout pathName={router.pathname}>
-            <Component {...pageProps} />
-          </AppLayout>
+          <ChainConfigSyncer>
+            <AppLayout pathName={router.pathname}>
+              <Component {...pageProps} />
+            </AppLayout>
+          </ChainConfigSyncer>
         </UrqlProvider>
       </QueryClientProvider>
       <ToastContainer transition={Zoom} position={toast.POSITION.BOTTOM_RIGHT} limit={2} />