From 83dc1b06178447986579e3a66f059e4f76491c0b Mon Sep 17 00:00:00 2001
From: J M Rossy <jm.rossy@gmail.com>
Date: Tue, 18 Apr 2023 20:23:37 +0900
Subject: [PATCH] Add useful error message when chain config missing

---
 src/features/chains/MissingChainConfigToast.tsx      | 12 ++++++++++++
 ...eliveryStatus.ts => useMessageDeliveryStatus.tsx} | 12 +++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 src/features/chains/MissingChainConfigToast.tsx
 rename src/features/deliveryStatus/{useMessageDeliveryStatus.ts => useMessageDeliveryStatus.tsx} (81%)

diff --git a/src/features/chains/MissingChainConfigToast.tsx b/src/features/chains/MissingChainConfigToast.tsx
new file mode 100644
index 0000000..67f3c58
--- /dev/null
+++ b/src/features/chains/MissingChainConfigToast.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link';
+
+export function MissingChainConfigToast({ chainId }: { chainId: number }) {
+  return (
+    <div>
+      <span>No chain config found for chain ID: {chainId}. </span>
+      <Link href="/settings" className="underline">
+        Add a config
+      </Link>
+    </div>
+  );
+}
diff --git a/src/features/deliveryStatus/useMessageDeliveryStatus.ts b/src/features/deliveryStatus/useMessageDeliveryStatus.tsx
similarity index 81%
rename from src/features/deliveryStatus/useMessageDeliveryStatus.ts
rename to src/features/deliveryStatus/useMessageDeliveryStatus.tsx
index cab49cd..ce60a9d 100644
--- a/src/features/deliveryStatus/useMessageDeliveryStatus.ts
+++ b/src/features/deliveryStatus/useMessageDeliveryStatus.tsx
@@ -7,6 +7,7 @@ import { chainIdToMetadata } from '@hyperlane-xyz/sdk';
 import { useMultiProvider } from '../../multiProvider';
 import { Message, MessageStatus } from '../../types';
 import { logger } from '../../utils/logger';
+import { MissingChainConfigToast } from '../chains/MissingChainConfigToast';
 
 import { fetchDeliveryStatus } from './fetchDeliveryStatus';
 
@@ -16,11 +17,16 @@ export function useMessageDeliveryStatus({ message, pause }: { message: Message;
   const { data, error } = useQuery(
     ['messageDeliveryStatus', serializedMessage, pause],
     async () => {
+      if (pause || !message || message.status === MessageStatus.Delivered) return null;
+
+      if (!multiProvider.tryGetChainMetadata(message.originChainId)) {
+        toast.error(<MissingChainConfigToast chainId={message.originChainId} />);
+      } else if (!multiProvider.tryGetChainMetadata(message.destinationChainId)) {
+        toast.error(<MissingChainConfigToast chainId={message.destinationChainId} />);
+      }
+
       // TODO enable PI support here
       if (
-        pause ||
-        !message ||
-        message.status === MessageStatus.Delivered ||
         message.isPiMsg ||
         !chainIdToMetadata[message.originChainId] ||
         !chainIdToMetadata[message.destinationChainId]