Merge pull request #36 from hyperlane-xyz/message-error-handling

- Catch error when checking for ICA address
- Implement basic error screen UI

src/components/errors/ErrorBoundary.tsx

@@ -1,5 +1,8 @@
+import Image from 'next/image';
 import { Component } from 'react';
 
+import { links } from '../../consts/links';
+import ErrorIcon from '../../images/icons/error-circle.svg';
 import { logger } from '../../utils/logger';
 
 interface ErrorBoundaryState {
@@ -25,8 +28,24 @@ export class ErrorBoundary extends Component<any, ErrorBoundaryState> {
     const errorInfo = this.state.error || this.state.errorInfo;
     if (errorInfo) {
       const details = errorInfo.message || JSON.stringify(errorInfo);
-      // TODO
-      return <div>{details}</div>;
+      return (
+        <div className="w-screen h-screen flex items-center justify-center bg-gray-50">
+          <div className="flex flex-col items-center">
+            <Image src={ErrorIcon} width={80} height={80} alt="" />
+            <h1 className="mt-5 text-lg">Fatal Error Occurred</h1>
+            <div className="mt-5 text-sm">{details}</div>
+            <a
+              href={links.discord}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-5 text-sm"
+            >
+              For support, join the{' '}
+              <span className="underline underline-offset-2">Hyperlane Discord</span>{' '}
+            </a>
+          </div>
+        </div>
+      );
     }
     return this.props.children;
   }

src/features/messages/MessageDetails.tsx

@@ -17,7 +17,7 @@ import { GasDetailsCard } from './cards/GasDetailsCard';
 import { IcaDetailsCard } from './cards/IcaDetailsCard';
 import { TimelineCard } from './cards/TimelineCard';
 import { TransactionCard } from './cards/TransactionCard';
-import { isIcaMessage } from './ica';
+import { useIsIcaMessage } from './ica';
 import { usePiChainMessageQuery } from './pi-queries/usePiChainMessageQuery';
 import { PLACEHOLDER_MESSAGE } from './placeholderMessages';
 import { useMessageQuery } from './queries/useMessageQuery';
@@ -61,7 +61,7 @@ export function MessageDetails({ messageId, message: messageFromUrlParams }: Pro
   const isFetching = isGraphQlFetching || isPiFetching;
   const isError = isGraphQlError || isPiError;
   const shouldBlur = !isMessageFound;
-  const isIcaMsg = isIcaMessage(_message);
+  const isIcaMsg = useIsIcaMessage(_message);
 
   // If message isn't delivered, attempt to check for
   // more recent updates and possibly debug info

src/features/messages/ica.ts

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { BigNumber, providers, utils } from 'ethers';
+import { useMemo } from 'react';
 
 import { InterchainAccountRouter__factory } from '@hyperlane-xyz/core';
 import { hyperlaneEnvironments } from '@hyperlane-xyz/sdk';
@@ -11,14 +12,11 @@ import { useMultiProvider } from '../providers/multiProvider';
 // This assumes all chains have the same ICA address
 const ICA_ADDRESS = hyperlaneEnvironments.mainnet.ethereum.interchainAccountRouter;
 
-export function isIcaMessage({
-  sender,
-  recipient,
-}: {
-  sender: Address;
-  recipient: Address;
-  hash?: string;
-}) {
+export function useIsIcaMessage({ sender, recipient }: { sender: Address; recipient: Address }) {
+  return useMemo(() => isIcaMessage({ sender, recipient }), [sender, recipient]);
+}
+
+export function isIcaMessage({ sender, recipient }: { sender: Address; recipient: Address }) {
   const isSenderIca = isAddressIcaRouter(sender);
   const isRecipIca = isAddressIcaRouter(recipient);
   if (isSenderIca && isRecipIca) return true;
@@ -32,8 +30,13 @@ export function isIcaMessage({
 }
 
 function isAddressIcaRouter(addr: Address) {
+  try {
     // TODO PI support
     return ICA_ADDRESS && areAddressesEqual(addr, ICA_ADDRESS);
+  } catch (error) {
+    logger.warn('Error checking if address is ICA router', error, addr);
+    return false;
+  }
 }
 
 export function tryDecodeIcaBody(body: string) {