Update form warning banners to handle all chains

Author: jmrossy

src/features/chains/ChainConnectionWarning.tsx

@@ -1,45 +1,35 @@
 import { ChainMetadata, isRpcHealthy } from '@hyperlane-xyz/sdk';
 import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { FormWarningBanner } from '../../components/banner/FormWarningBanner';
 import { logger } from '../../utils/logger';
 import { ChainSelectListModal } from './ChainSelectModal';
 import { useMultiProvider } from './hooks';
 import { getChainDisplayName } from './utils';
 
-// TODO refactor away from origin/destination
-export function ChainConnectionWarning({
-  origin,
-  destination,
-}: {
-  origin: ChainName;
-  destination: ChainName;
-}) {
+export function ChainConnectionWarning({ chains }: { chains: ChainName[] }) {
   const multiProvider = useMultiProvider();
-  const originMetadata = multiProvider.getChainMetadata(origin);
-  const destinationMetadata = multiProvider.getChainMetadata(destination);
+  const chainMetadataList = useMemo(
+    () => chains.map((c) => multiProvider.getChainMetadata(c)),
+    [chains, multiProvider],
+  );
 
-  const { data } = useQuery({
-    queryKey: ['ChainConnectionWarning', originMetadata, destinationMetadata],
+  const { data: unhealthyChain } = useQuery({
+    queryKey: ['ChainConnectionWarning', chainMetadataList],
     queryFn: async () => {
-      const isOriginHealthy = await checkRpcHealth(originMetadata);
-      const isDestinationHealthy = await checkRpcHealth(destinationMetadata);
-      return { isOriginHealthy, isDestinationHealthy };
+      const results = await Promise.all(chainMetadataList.map(checkRpcHealth));
+      for (let i = 0; i < results.length; i++) {
+        // If it's healthy, ignore
+        if (results[i]) continue;
+        // Otherwise return the first unhealthy chain found
+        return chainMetadataList[i].name;
+      }
+      return null;
     },
     refetchInterval: 5000,
   });
 
-  const unhealthyChain =
-    data &&
-    ((!data.isOriginHealthy && originMetadata) ||
-      (!data.isDestinationHealthy && destinationMetadata) ||
-      undefined);
-
-  const displayName = getChainDisplayName(
-    multiProvider,
-    unhealthyChain?.name || originMetadata.name,
-    true,
-  );
+  const displayName = getChainDisplayName(multiProvider, unhealthyChain || '', true);
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -57,7 +47,7 @@ export function ChainConnectionWarning({
         isOpen={isModalOpen}
         close={() => setIsModalOpen(false)}
         onSelect={() => {}}
-        showChainDetails={unhealthyChain?.name}
+        showChainDetails={unhealthyChain || undefined}
       />
     </>
   );

src/features/chains/ChainWalletWarning.tsx

@@ -7,30 +7,32 @@ import { logger } from '../../utils/logger';
 import { useMultiProvider } from './hooks';
 import { getChainDisplayName } from './utils';
 
-// TODO refactor away from origin
-export function ChainWalletWarning({ origin }: { origin: ChainName }) {
+export function ChainWalletWarning({ chains }: { chains: ChainName[] }) {
   const multiProvider = useMultiProvider();
-
   const wallets = useWalletDetails();
   const connectFns = useConnectFns();
   const disconnectFns = useDisconnectFns();
 
   const { isVisible, chainDisplayName, walletWhitelist, connectFn, disconnectFn } = useMemo(() => {
-    const protocol = multiProvider.tryGetProtocol(origin);
-    const walletWhitelist = config.chainWalletWhitelists[origin]?.map((w) =>
-      w.trim().toLowerCase(),
-    );
-    if (!protocol || !walletWhitelist?.length)
-      return { isVisible: false, chainDisplayName: '', walletWhitelist: [] };
+    // Iterate through chains and surface first one with a wallet warning
+    for (const chain of chains) {
+      const protocol = multiProvider.tryGetProtocol(chain);
+      const walletWhitelist = config.chainWalletWhitelists[chain]?.map((w) =>
+        w.trim().toLowerCase(),
+      );
+      if (!protocol || !walletWhitelist?.length) continue;
 
-    const chainDisplayName = getChainDisplayName(multiProvider, origin, true);
-    const walletName = wallets[protocol]?.name?.trim()?.toLowerCase();
-    const connectFn = connectFns[protocol];
-    const disconnectFn = disconnectFns[protocol];
-    const isVisible = !!walletName && !walletWhitelist.includes(walletName);
+      const chainDisplayName = getChainDisplayName(multiProvider, chain, true);
+      const walletName = wallets[protocol]?.name?.trim()?.toLowerCase();
+      const connectFn = connectFns[protocol];
+      const disconnectFn = disconnectFns[protocol];
+      const isVisible = !!walletName && !walletWhitelist.includes(walletName);
+      return { isVisible, chainDisplayName, walletWhitelist, connectFn, disconnectFn };
+    }
 
-    return { isVisible, chainDisplayName, walletWhitelist, connectFn, disconnectFn };
-  }, [multiProvider, origin, wallets, connectFns, disconnectFns]);
+    // If no chains apply, return falsy default values
+    return { isVisible: false, chainDisplayName: '', walletWhitelist: [] };
+  }, [multiProvider, chains, wallets, connectFns, disconnectFns]);
 
   const onClickChange = () => {
     if (!connectFn || !disconnectFn) return;

src/features/deployment/warp/WarpDeploymentForm.tsx

@@ -239,15 +239,12 @@ function ButtonSection() {
 
 function WarningBanners() {
   const { values } = useFormikContext<WarpDeploymentFormValues>();
+  const chains = useMemo(() => values.configs.map((c) => c.chainName), [values]);
   return (
     // Max height to prevent double padding if multiple warnings are visible
     <div className="max-h-10">
-      {/* TODO check all chains */}
-      <ChainWalletWarning origin={values.configs[0].chainName} />
-      <ChainConnectionWarning
-        origin={values.configs[0].chainName}
-        destination={values.configs[1].chainName}
-      />
+      <ChainWalletWarning chains={chains} />
+      <ChainConnectionWarning chains={chains} />
     </div>
   );
 }

src/features/deployment/warp/WarpDeploymentReview.tsx

@@ -16,13 +16,13 @@ import { Color } from '../../../styles/Color';
 import { useMultiProvider } from '../../chains/hooks';
 import { getChainDisplayName } from '../../chains/utils';
 import { useDeploymentHistory, useWarpDeploymentConfig } from '../hooks';
+import { DeploymentStatus } from '../types';
+import { tryCopyConfig } from '../utils';
 import { TokenTypeDescriptions } from './TokenTypeSelectField';
 import { isSyntheticTokenType } from './utils';
 
 // TODO move to widgets lib
 import InfoCircle from '../../../images/icons/info-circle.svg';
-import { DeploymentStatus } from '../types';
-import { tryCopyConfig } from '../utils';
 
 export function WarpDeploymentReview() {
   return (